{"id":5908,"date":"2026-03-20T13:54:03","date_gmt":"2026-03-20T11:54:03","guid":{"rendered":"https:\/\/digiverkosto.fi\/?page_id=5908"},"modified":"2026-09-02T13:17:55","modified_gmt":"2026-09-02T10:17:55","slug":"ota-yhteytta","status":"publish","type":"page","link":"https:\/\/digiverkosto.fi\/en\/ota-yhteytta\/","title":{"rendered":"Contact us"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-ba1191e6 wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<div style=\"height:200px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<style data-wp-block-html=\"css\">\n  \/* Importataan Cormorant Garamond (Italic, semi-bold 600) Google Fontsista *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@1,600&display=swap');\n\n\/* Tehostesanan tyyli *\/\n.hero-script {\n  font-family: 'Cormorant Garamond', serif;\n  font-style: italic;\n  font-weight: 600;\n  font-size: 1.25em; \/* Garamond on luonnostaan hieman pieni, joten em-kokoa on nostettu *\/\n  letter-spacing: -0.01em;\n  display: inline-block;\n  padding: 0 4px;\n}\n\n.hero-section {\n  background: transparent;\n  width: 100%;\n  padding: 80px 20px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  box-sizing: border-box;\n}\n\n.hero-content {\n  max-width: 800px;\n  margin: 0 auto;\n}\n\n.hero-subtitle {\n  font-size: 1.1rem;\n  text-transform: uppercase;\n  letter-spacing: 2px;\n  margin-bottom: 12px;\n  opacity: 0.9;\n}\n\n.hero-title {\n  font-size: 3rem;\n  line-height: 1.2;\n  margin-bottom: 20px;\n  font-weight: 700;\n}\n\n.hero-script {\n  font-family: 'Great Vibes', cursive;\n  font-size: 1.2em;\n  font-weight: 400;\n  display: inline-block;\n  padding: 0 4px;\n}\n\n.hero-description {\n  font-size: 1.2rem;\n  line-height: 1.6;\n  margin-bottom: 35px;\n  opacity: 0.85;\n  max-width: 650px;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.hero-actions {\n  display: flex;\n  justify-content: center;\n  gap: 20px;\n  flex-wrap: wrap;\n}\n\n\/* Ensi-sijainen painike *\/\n.c-button {\n  background: linear-gradient(140deg, rgba(75, 118, 200, 1) 0%, rgba(31, 70, 145, 1) 100%);\n  border-radius: 45px;\n  font-size: 22px;\n  text-align: left;\n  padding: 11px 0px 11px 0px;\n  border: 4px solid rgb(37, 37, 37) !important;\n  border-style: outset;\n  box-shadow: -6px -5px 18px rgba(255, 255, 255, 0.1);\n  cursor: pointer;\n  transition: all 0.3s ease;\n}\n\n.c-button .c-main {\n  border-radius: 45px;\n  color: rgba(255, 255, 255, 1);\n  padding: 11px 25px 11px 2px;\n  box-shadow: inset 0px 0px 5px rgba(17, 17, 17, 0);\n  transition: all 0.5s ease-in-out;\n  border: 1px solid transparent;\n}\n\n.c-ico {\n  position: relative;\n  margin-right: 20px;\n}\n\n.c-ico .c-blur {\n  background: linear-gradient(318deg, rgba(75, 118, 200, 1) 0%, rgba(31, 70, 145, 1) 100%);\n  border-radius: 100%;\n  margin-left: 0;\n  padding: 8px 23px;\n  filter: blur(1px);\n  text-align: center;\n}\n\n.c-ico .ico-text {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.c-button .c-main:hover {\n  box-shadow: inset 0px 0px 5px rgba(17, 17, 17, 0.6);\n  border: 1px solid rgba(26, 26, 26, 0.5);\n  color: rgba(255, 255, 255, 0.7);\n}\n\n\/* Toissijainen painike (Pyyd\u00e4 tarjous) *\/\n.c-button-secondary {\n  background: linear-gradient(140deg, rgba(45, 45, 45, 1) 0%, rgba(20, 20, 20, 1) 100%);\n}\n\n.c-button-secondary .c-blur {\n  background: linear-gradient(318deg, rgba(65, 65, 65, 1) 0%, rgba(35, 35, 35, 1) 100%);\n}\n\n\/* Responsiivisuus mobiililaitteille *\/\n@media (max-width: 768px) {\n  .hero-section {\n    padding: 50px 15px;\n  }\n  \n  .hero-title {\n    font-size: 2.1rem;\n  }\n  \n  .hero-description {\n    font-size: 1rem;\n  }\n  \n  .hero-actions {\n    flex-direction: column;\n    align-items: center;\n    gap: 15px;\n  }\n\n  .c-button {\n    font-size: 20px;\n    width: 100%;\n    max-width: 280px;\n  }\n}\n<\/style>\n\n<section class=\"hero-section\">\n  <div class=\"hero-content\">\n    <p class=\"hero-subtitle\">nettisivut sinun yrityksellesi<\/p>\n    <h1 class=\"hero-title\">\n      Miten voimme olla avuksi?<span class=\"hero-script\"><\/span>\n    <\/h1>\n    <p class=\"hero-description\">\n      Hienoa, ett\u00e4 l\u00f6ysit tiesi t\u00e4nne! Halusitpa sitten k\u00e4ynnist\u00e4\u00e4 <strong>uuden projektin<\/strong>, kysy\u00e4 tarkemmin <strong>palveluistamme<\/strong> tai kertoa meille, miten olemme <strong>onnistuneet<\/strong>, olemme kuulolla.\n    <\/p>\n    \n      <a href=\"\/referenssit\" class=\"c-button c-button-secondary\" style=\"text-decoration: none; display: inline-block;\">\n        <span class=\"c-main\">\n          <span class=\"c-ico\"><span class=\"c-blur\"><\/span> <span class=\"ico-text\">\u2794<\/span><\/span>\n          Referenssit\n        <\/span>\n      <\/a>\n    <\/div>\n \n<\/section>\n\n\n\n<section class=\"section direct-contact-section\">\n    <div class=\"content-wrapper reveal\">\n        \n        <h2 class=\"section-title\">Ole meihin <span class=\"text-gradient\">suoraan yhteydess\u00e4<\/span><\/h2>\n\n        <div class=\"team-grid\">\n            \n            <div class=\"person-card\">\n                <div class=\"card-avatar\">\n                    <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2025\/12\/IMG_1781-scaled-e1767019928255.jpg\" alt=\"Aleksi\">\n                <\/div>\n                <div class=\"card-content\">\n                    <h3 class=\"person-name\">Aleksi<\/h3>\n                    <div class=\"contact-details\">\n                        <a href=\"tel:+358401716579\" class=\"detail-link\">0401716579<\/a>\n                        <a href=\"mailto:aleksi@digiverkosto.fi\" class=\"detail-link\">aleksi@digiverkosto.fi<\/a>\n                    <\/div>\n                    <div class=\"social-icons\">\n                        <a href=\"https:\/\/wa.me\/358401716579\" target=\"_blank\" class=\"icon-btn whatsapp\" aria-label=\"WhatsApp\" rel=\"noopener\">\n                            <svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"><\/g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/g><g id=\"SVGRepo_iconCarrier\"> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16 31C23.732 31 30 24.732 30 17C30 9.26801 23.732 3 16 3C8.26801 3 2 9.26801 2 17C2 19.5109 2.661 21.8674 3.81847 23.905L2 31L9.31486 29.3038C11.3014 30.3854 13.5789 31 16 31ZM16 28.8462C22.5425 28.8462 27.8462 23.5425 27.8462 17C27.8462 10.4576 22.5425 5.15385 16 5.15385C9.45755 5.15385 4.15385 10.4576 4.15385 17C4.15385 19.5261 4.9445 21.8675 6.29184 23.7902L5.23077 27.7692L9.27993 26.7569C11.1894 28.0746 13.5046 28.8462 16 28.8462Z\" fill=\"#BFC8D0\"><\/path> <path d=\"M28 16C28 22.6274 22.6274 28 16 28C13.4722 28 11.1269 27.2184 9.19266 25.8837L5.09091 26.9091L6.16576 22.8784C4.80092 20.9307 4 18.5589 4 16C4 9.37258 9.37258 4 16 4C22.6274 4 28 9.37258 28 16Z\" fill=\"url(#paint0_linear_87_7264)\"><\/path> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16 30C23.732 30 30 23.732 30 16C30 8.26801 23.732 2 16 2C8.26801 2 2 8.26801 2 16C2 18.5109 2.661 20.8674 3.81847 22.905L2 30L9.31486 28.3038C11.3014 29.3854 13.5789 30 16 30ZM16 27.8462C22.5425 27.8462 27.8462 22.5425 27.8462 16C27.8462 9.45755 22.5425 4.15385 16 4.15385C9.45755 4.15385 4.15385 9.45755 4.15385 16C4.15385 18.5261 4.9445 20.8675 6.29184 22.7902L5.23077 26.7692L9.27993 25.7569C11.1894 27.0746 13.5046 27.8462 16 27.8462Z\" fill=\"white\"><\/path> <path d=\"M12.5 9.49989C12.1672 8.83131 11.6565 8.8905 11.1407 8.8905C10.2188 8.8905 8.78125 9.99478 8.78125 12.05C8.78125 13.7343 9.52345 15.578 12.0244 18.3361C14.438 20.9979 17.6094 22.3748 20.2422 22.3279C22.875 22.2811 23.4167 20.0154 23.4167 19.2503C23.4167 18.9112 23.2062 18.742 23.0613 18.696C22.1641 18.2654 20.5093 17.4631 20.1328 17.3124C19.7563 17.1617 19.5597 17.3656 19.4375 17.4765C19.0961 17.8018 18.4193 18.7608 18.1875 18.9765C17.9558 19.1922 17.6103 19.083 17.4665 19.0015C16.9374 18.7892 15.5029 18.1511 14.3595 17.0426C12.9453 15.6718 12.8623 15.2001 12.5959 14.7803C12.3828 14.4444 12.5392 14.2384 12.6172 14.1483C12.9219 13.7968 13.3426 13.254 13.5313 12.9843C13.7199 12.7145 13.5702 12.305 13.4803 12.05C13.0938 10.953 12.7663 10.0347 12.5 9.49989Z\" fill=\"white\"><\/path> <defs> <linearGradient id=\"paint0_linear_87_7264\" x1=\"26.5\" y1=\"7\" x2=\"4\" y2=\"28\" gradientUnits=\"userSpaceOnUse\"> <stop stop-color=\"#5BD066\"><\/stop> <stop offset=\"1\" stop-color=\"#27B43E\"><\/stop> <\/linearGradient> <\/defs> <\/g><\/svg>\n                        <\/a>\n                        <a href=\"https:\/\/www.linkedin.com\/in\/aleksi-luhtasela-0375a9293\" target=\"_blank\" class=\"icon-btn linkedin\" aria-label=\"LinkedIn\" rel=\"noopener\">\n                            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"><\/path><\/svg>\n                        <\/a>\n                        <a href=\"https:\/\/www.instagram.com\/aleksiluhtasela\" target=\"_blank\" class=\"icon-btn instagram\" aria-label=\"Instagram\" rel=\"noopener\">\n                            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z\"><\/path><\/svg>\n                        <\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"person-card\">\n                <div class=\"card-avatar\">\n                    <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2025\/12\/IMG_4802-e1767019902994.jpeg\" alt=\"Oskari\">\n                <\/div>\n                <div class=\"card-content\">\n                    <h3 class=\"person-name\">Oskari<\/h3>\n                    <div class=\"contact-details\">\n                        <a href=\"tel:+358451074457\" class=\"detail-link\">0451074457<\/a>\n                        <a href=\"mailto:oskari@digiverkosto.fi\" class=\"detail-link\">oskari@digiverkosto.fi<\/a>\n                    <\/div>\n                    <div class=\"social-icons\">\n                        <a href=\"https:\/\/wa.me\/358451074457\" target=\"_blank\" class=\"icon-btn whatsapp\" aria-label=\"WhatsApp\" rel=\"noopener\">\n                            <svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"><\/g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/g><g id=\"SVGRepo_iconCarrier\"> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16 31C23.732 31 30 24.732 30 17C30 9.26801 23.732 3 16 3C8.26801 3 2 9.26801 2 17C2 19.5109 2.661 21.8674 3.81847 23.905L2 31L9.31486 29.3038C11.3014 30.3854 13.5789 31 16 31ZM16 28.8462C22.5425 28.8462 27.8462 23.5425 27.8462 17C27.8462 10.4576 22.5425 5.15385 16 5.15385C9.45755 5.15385 4.15385 10.4576 4.15385 17C4.15385 19.5261 4.9445 21.8675 6.29184 23.7902L5.23077 27.7692L9.27993 26.7569C11.1894 28.0746 13.5046 28.8462 16 28.8462Z\" fill=\"#BFC8D0\"><\/path> <path d=\"M28 16C28 22.6274 22.6274 28 16 28C13.4722 28 11.1269 27.2184 9.19266 25.8837L5.09091 26.9091L6.16576 22.8784C4.80092 20.9307 4 18.5589 4 16C4 9.37258 9.37258 4 16 4C22.6274 4 28 9.37258 28 16Z\" fill=\"url(#paint0_linear_87_7264)\"><\/path> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16 30C23.732 30 30 23.732 30 16C30 8.26801 23.732 2 16 2C8.26801 2 2 8.26801 2 16C2 18.5109 2.661 20.8674 3.81847 22.905L2 30L9.31486 28.3038C11.3014 29.3854 13.5789 30 16 30ZM16 27.8462C22.5425 27.8462 27.8462 22.5425 27.8462 16C27.8462 9.45755 22.5425 4.15385 16 4.15385C9.45755 4.15385 4.15385 9.45755 4.15385 16C4.15385 18.5261 4.9445 20.8675 6.29184 22.7902L5.23077 26.7692L9.27993 25.7569C11.1894 27.0746 13.5046 27.8462 16 27.8462Z\" fill=\"white\"><\/path> <path d=\"M12.5 9.49989C12.1672 8.83131 11.6565 8.8905 11.1407 8.8905C10.2188 8.8905 8.78125 9.99478 8.78125 12.05C8.78125 13.7343 9.52345 15.578 12.0244 18.3361C14.438 20.9979 17.6094 22.3748 20.2422 22.3279C22.875 22.2811 23.4167 20.0154 23.4167 19.2503C23.4167 18.9112 23.2062 18.742 23.0613 18.696C22.1641 18.2654 20.5093 17.4631 20.1328 17.3124C19.7563 17.1617 19.5597 17.3656 19.4375 17.4765C19.0961 17.8018 18.4193 18.7608 18.1875 18.9765C17.9558 19.1922 17.6103 19.083 17.4665 19.0015C16.9374 18.7892 15.5029 18.1511 14.3595 17.0426C12.9453 15.6718 12.8623 15.2001 12.5959 14.7803C12.3828 14.4444 12.5392 14.2384 12.6172 14.1483C12.9219 13.7968 13.3426 13.254 13.5313 12.9843C13.7199 12.7145 13.5702 12.305 13.4803 12.05C13.0938 10.953 12.7663 10.0347 12.5 9.49989Z\" fill=\"white\"><\/path> <defs> <linearGradient id=\"paint0_linear_87_7264\" x1=\"26.5\" y1=\"7\" x2=\"4\" y2=\"28\" gradientUnits=\"userSpaceOnUse\"> <stop stop-color=\"#5BD066\"><\/stop> <stop offset=\"1\" stop-color=\"#27B43E\"><\/stop> <\/linearGradient> <\/defs> <\/g><\/svg>\n                        <\/a>\n                        <a href=\"https:\/\/www.linkedin.com\/in\/oskari-mikkola-978333278\/\" target=\"_blank\" class=\"icon-btn linkedin\" aria-label=\"LinkedIn\" rel=\"noopener\">\n                            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"><\/path><\/svg>\n                        <\/a>\n                        <a href=\"https:\/\/www.instagram.com\/realmikkola\/\" target=\"_blank\" class=\"icon-btn instagram\" aria-label=\"Instagram\" rel=\"noopener\">\n                            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z\"><\/path><\/svg>\n                        <\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n\n.direct-contact-section {\n    background-color: #070707;\n    padding: 20px 5vw 80px 5vw;\n    color: #f5f5f7;\n    text-align: center;\n    font-family: inherit;\n    overflow: hidden; \/* Est\u00e4\u00e4 vaakaskrollauksen *\/\n}\n\n.content-wrapper {\n    max-width: 900px;\n    margin: 0 auto;\n}\n\n\n.section-title {\n    font-size: clamp(24px, 5vw, 40px);\n    font-weight: 700;\n    margin-bottom: 50px;\n    color: #fff;\n    letter-spacing: -0.01em;\n}\n\n.text-gradient {\n    background: linear-gradient(180deg, #fff 20%, #86868b 100%);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n}\n\n\n.team-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 30px; \n    margin: 0 auto;\n    max-width: 900px;\n}\n\n\n.person-card {\n    background: #111;\n    border: 1px solid #1f1f1f;\n    border-radius: 20px;\n    padding: 30px; \n    display: flex;\n    align-items: center;\n    text-align: left;\n    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n    gap: 20px; \n}\n\n.person-card:hover {\n    border-color: #333;\n    transform: translateY(-4px);\n    background: #151515;\n    box-shadow: 0 10px 30px rgba(0,0,0,0.4);\n}\n\n\n.card-avatar {\n    flex-shrink: 0;\n}\n\n.card-avatar img {\n    width: 90px;  \n    height: 90px;\n    border-radius: 50%; \n    object-fit: cover; \n    object-position: top center; \n    border: 2px solid #2a2a2a;\n}\n\n\n.card-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n}\n\n.person-name {\n    font-size: 24px;\n    color: #fff;\n    margin: 0 0 8px 0;\n    font-weight: 700;\n}\n\n.contact-details {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    margin-bottom: 12px;\n}\n\n.detail-link {\n    color: #a1a1a6;\n    text-decoration: none;\n    font-size: 15px;\n    transition: color 0.2s;\n    font-family: inherit;\n}\n\n.detail-link:hover {\n    color: #0071e3;\n}\n\n\n.social-icons {\n    display: flex;\n    gap: 12px;\n}\n\n.icon-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 42px;\n    height: 42px;\n    background: #1c1c1e;\n    border-radius: 12px;\n    color: #fff;\n    transition: all 0.3s;\n    border: 1px solid transparent;\n}\n\n.icon-btn svg {\n    width: 22px;\n    height: 22px;\n}\n\n.icon-btn:hover {\n    transform: scale(1.1);\n}\n\n.whatsapp:hover { background: #25D366; color: #fff; }\n.linkedin:hover { background: #0077b5; color: #fff; }\n.instagram:hover { background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); color: #fff; }\n\n\n@media (max-width: 800px) {\n    .team-grid {\n        grid-template-columns: 1fr; \n        gap: 20px;\n        max-width: 100%; \n    }\n    \n    .person-card {\n        padding: 20px;\n        \n    }\n    \n    .person-name {\n        font-size: 20px;\n    }\n    \n    .card-avatar img {\n        width: 70px; \n        height: 70px;\n    }\n\n    .icon-btn {\n        width: 40px;\n        height: 40px;\n    }\n}\n\n\n@media (max-width: 400px) {\n    .person-card {\n        flex-direction: column; \n        text-align: center;\n        gap: 15px;\n    }\n\n    .card-content {\n        align-items: center;\n    }\n    \n    .contact-details {\n        align-items: center;\n    }\n}\n<\/style>\n\n\n\n<section class=\"section form-section\" id=\"contact-anchor\">\n    <div class=\"form-container reveal\">\n        \n        <h2 class=\"form-title\">Ota yhteytt\u00e4<\/h2>\n        <p class=\"form-subtitle\">Valitse alta, miten voimme auttaa.<\/p>\n\n        <form id=\"dynamicForm\" class=\"digiverkosto-form\" action=\"https:\/\/formsubmit.co\/oskari@digiverkosto.fi\" method=\"POST\" novalidate autocomplete=\"off\">\n            \n            <input type=\"hidden\" name=\"_next\" value=\"https:\/\/digiverkosto.fi\/kiitos\">\n            <input type=\"hidden\" name=\"_cc\" value=\"aleksi@digiverkosto.fi\">\n            <input type=\"hidden\" name=\"_subject\" value=\"Uusi lomakel\u00e4hetys (DigiVerkosto)\">\n            <input type=\"text\" name=\"_honey\" style=\"display:none\">\n            <input type=\"hidden\" name=\"_captcha\" value=\"false\">\n            <input type=\"hidden\" name=\"_template\" value=\"table\">\n\n            <div class=\"form-step active\" id=\"step-main\">\n                <div class=\"radio-group-cards\">\n                    <label class=\"radio-card\">\n                        <input type=\"radio\" name=\"YHTEYDENOTON_SYY\" value=\"Yhteydenotto\" onchange=\"handleMainReason(this)\">\n                        <div class=\"card-content\"><span class=\"icon\">\u2709\ufe0f<\/span><span>Yhteydenotto<\/span><\/div>\n                    <\/label>\n                    <label class=\"radio-card\">\n                        <input type=\"radio\" name=\"YHTEYDENOTON_SYY\" value=\"Tarjouspyynt\u00f6\" onchange=\"handleMainReason(this)\">\n                        <div class=\"card-content\"><span class=\"icon\">\ud83d\udcdd<\/span><span>Tarjouspyynt\u00f6<\/span><\/div>\n                    <\/label>\n                    <label class=\"radio-card\">\n                        <input type=\"radio\" name=\"YHTEYDENOTON_SYY\" value=\"Palaute\" onchange=\"handleMainReason(this)\">\n                        <div class=\"card-content\"><span class=\"icon\">\u2b50<\/span><span>Palaute<\/span><\/div>\n                    <\/label>\n                <\/div>\n            <\/div>\n\n            <div class=\"form-step hidden\" id=\"branch-feedback\">\n                <h3 class=\"sub-title\">Anna palautetta<\/h3>\n                <div class=\"input-grid\">\n                    <div class=\"input-group\"><label>Nimi *<\/label><input type=\"text\" name=\"PALAUTE_Nimi\" class=\"val-req\" disabled><\/div>\n                    <div class=\"input-group\"><label>S\u00e4hk\u00f6posti *<\/label><input type=\"email\" name=\"PALAUTE_S\u00e4hk\u00f6posti\" class=\"val-req\" disabled><\/div>\n                <\/div>\n                <div class=\"input-group full-width\">\n                    <label>Vapaamuotoinen palaute *<\/label>\n                    <textarea name=\"PALAUTE_Viesti\" rows=\"4\" class=\"val-req\" disabled><\/textarea>\n                <\/div>\n            <\/div>\n\n            <div class=\"form-step hidden\" id=\"branch-contact\">\n                <h3 class=\"sub-title\">Yhteystiedot<\/h3>\n                <div class=\"input-grid\">\n                    <div class=\"input-group\"><label>Nimi *<\/label><input type=\"text\" name=\"YHTEYDENOTTO_Nimi\" class=\"val-req\" disabled><\/div>\n                    <div class=\"input-group\"><label>S\u00e4hk\u00f6posti *<\/label><input type=\"email\" name=\"YHTEYDENOTTO_S\u00e4hk\u00f6posti\" class=\"val-req\" disabled><\/div>\n                    <div class=\"input-group\"><label>Puhelinnumero<\/label><input type=\"tel\" name=\"YHTEYDENOTTO_Puhelin\" disabled><\/div>\n                    <div class=\"input-group\"><label>Yrityksen nimi *<\/label><input type=\"text\" name=\"YHTEYDENOTTO_Yritys\" class=\"val-req\" disabled><\/div>\n                <\/div>\n                <div class=\"input-group full-width\">\n                    <label>Viesti *<\/label>\n                    <textarea name=\"YHTEYDENOTTO_Viesti\" rows=\"4\" class=\"val-req\" disabled><\/textarea>\n                <\/div>\n            <\/div>\n\n            <div class=\"form-step hidden\" id=\"branch-quote\">\n                <label class=\"step-label\">Mist\u00e4 palvelusta olet kiinnostunut?<\/label>\n                <div class=\"select-wrapper\">\n                    <select id=\"service-selector\" name=\"TARJOUSPYYNT\u00d6_Palveluvalinta\" onchange=\"handleServiceSelection(this)\" disabled>\n                        <option value=\"\" disabled selected>Valitse palvelu&#8230;<\/option>\n                        <option value=\"web\">Verkkosivut<\/option>\n                        <option value=\"ecom\">Verkkokauppa<\/option>\n                        <option value=\"marketing\">Markkinointipalvelut<\/option>\n                        <option value=\"photo\">Kuvauspalvelut<\/option>\n                    <\/select>\n                <\/div>\n\n                <div class=\"sub-branch hidden\" id=\"sub-web\">\n                    <h3 class=\"sub-title\">Verkkosivut &#8211; Perustiedot<\/h3>\n                    <div class=\"input-grid\">\n                        <div class=\"input-group\"><label>Nimi *<\/label><input type=\"text\" name=\"VERKKOSIVUT_Nimi\" class=\"val-req\" disabled><\/div>\n                        <div class=\"input-group\"><label>S\u00e4hk\u00f6posti *<\/label><input type=\"email\" name=\"VERKKOSIVUT_S\u00e4hk\u00f6posti\" class=\"val-req\" disabled><\/div>\n                        <div class=\"input-group full-width\"><label>Yrityksen nimi *<\/label><input type=\"text\" name=\"VERKKOSIVUT_Yritys\" class=\"val-req\" disabled><\/div>\n                    <\/div>\n                    <div class=\"input-group full-width\">\n                        <label>Kuvaus halutusta sivusta * (esim. linkki esimerkkisivusta)<\/label>\n                        <textarea name=\"VERKKOSIVUT_Kuvaus\" rows=\"4\" class=\"val-req\" disabled><\/textarea>\n                    <\/div>\n                    \n                    <div class=\"input-group\">\n                        <label>Tuotatko sis\u00e4ll\u00f6t itse?<\/label>\n                        <div class=\"radio-row req-group\">\n                            <label><input type=\"radio\" name=\"VERKKOSIVUT_Sis\u00e4lt\u00f6\" value=\"Tuotan itse\" class=\"val-req\" disabled> Kyll\u00e4<\/label>\n                            <label><input type=\"radio\" name=\"VERKKOSIVUT_Sis\u00e4lt\u00f6\" value=\"Osittain\" disabled> Osittain<\/label>\n                            <label><input type=\"radio\" name=\"VERKKOSIVUT_Sis\u00e4lt\u00f6\" value=\"Tarvitsen apua\" disabled> Tarvitsen apua<\/label>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"input-group full-width\">\n                        <label>Onko sinulla logo?<\/label>\n                        <div class=\"radio-row\">\n                            <label><input type=\"radio\" name=\"VERKKOSIVUT_Logo\" value=\"Kyll\u00e4\" disabled> Kyll\u00e4<\/label>\n                            <label><input type=\"radio\" name=\"VERKKOSIVUT_Logo\" value=\"Ei\" disabled> Ei<\/label>\n                            <label><input type=\"radio\" name=\"VERKKOSIVUT_Logo\" value=\"Tarvitsen logosuunnittelun\" disabled> Tarvitsen logosuunnittelun<\/label>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"input-group full-width\">\n                        <label>Arvioitu sivum\u00e4\u00e4r\u00e4: <span id=\"web-val-display\" style=\"color: #0071e3; margin-left: 5px; font-size: 1.1em;\">1<\/span><\/label>\n                        <div class=\"slider-wrapper\">\n                            <input type=\"range\" name=\"VERKKOSIVUT_Sivum\u00e4\u00e4r\u00e4\" min=\"1\" max=\"20\" value=\"1\" id=\"web-page-slider\" \n                                   oninput=\"document.getElementById('web-val-display').innerText = (this.value >= 20 ? &#8217;20+&#8217; : this.value)&#8221; disabled>\n                            \n                            <label class=\"checkbox-inline\">\n                                <input type=\"checkbox\" name=\"VERKKOSIVUT_Sivum\u00e4\u00e4r\u00e4_EnTied\u00e4\" onchange=\"toggleSlider('web-page-slider', this)\" disabled> En tied\u00e4\n                            <\/label>\n                        <\/div>\n                    <\/div>\n\n                     <div class=\"input-group full-width\">\n                        <label>Toiveet lis\u00e4toiminnoista (esim. lomakkeet, ajanvaraus, jne.)<\/label>\n                        <textarea name=\"VERKKOSIVUT_Lis\u00e4toiminnot\" rows=\"2\" disabled><\/textarea>\n                    <\/div>\n                    <div class=\"input-group full-width\">\n                        <label>Lis\u00e4tietoa (valinnainen)<\/label>\n                        <textarea name=\"VERKKOSIVUT_Vapaa_lis\u00e4tieto\" rows=\"2\" disabled><\/textarea>\n                    <\/div>\n                <\/div>\n\n                <div class=\"sub-branch hidden\" id=\"sub-ecom\">\n                    <h3 class=\"sub-title\">Verkkokauppa &#8211; Perustiedot<\/h3>\n                    <div class=\"input-grid\">\n                        <div class=\"input-group\"><label>Nimi *<\/label><input type=\"text\" name=\"VERKKOKAUPPA_Nimi\" class=\"val-req\" disabled><\/div>\n                        <div class=\"input-group\"><label>S\u00e4hk\u00f6posti *<\/label><input type=\"email\" name=\"VERKKOKAUPPA_S\u00e4hk\u00f6posti\" class=\"val-req\" disabled><\/div>\n                        <div class=\"input-group full-width\"><label>Yrityksen nimi *<\/label><input type=\"text\" name=\"VERKKOKAUPPA_Yritys\" class=\"val-req\" disabled><\/div>\n                    <\/div>\n                    <div class=\"input-group full-width\">\n                        <label>Kuvaus verkkokaupasta *<\/label>\n                        <textarea name=\"VERKKOKAUPPA_Kuvaus\" rows=\"4\" class=\"val-req\" disabled><\/textarea>\n                    <\/div>\n\n                    <div class=\"input-group full-width\">\n                        <label>Montako tuotetta verkkokauppaan tulee? *<\/label>\n                        <input type=\"text\" name=\"VERKKOKAUPPA_Tuotem\u00e4\u00e4r\u00e4_Tarkka\" class=\"val-req\" disabled>\n                    <\/div>\n\n                    <div class=\"input-group full-width\">\n                        <label>Onko sinulla logo?<\/label>\n                        <div class=\"radio-row\">\n                            <label><input type=\"radio\" name=\"VERKKOKAUPPA_Logo\" value=\"Kyll\u00e4\" disabled> Kyll\u00e4<\/label>\n                            <label><input type=\"radio\" name=\"VERKKOKAUPPA_Logo\" value=\"Ei\" disabled> Ei<\/label>\n                            <label><input type=\"radio\" name=\"VERKKOKAUPPA_Logo\" value=\"Tarvitsen logosuunnittelun\" disabled> Tarvitsen logosuunnittelun<\/label>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"input-group\">\n                        <label>Sis\u00e4ll\u00f6ntuotanto?<\/label>\n                        <div class=\"radio-row req-group\">\n                            <label><input type=\"radio\" name=\"VERKKOKAUPPA_Sis\u00e4lt\u00f6\" value=\"Tuotan itse\" class=\"val-req\" disabled> Kyll\u00e4<\/label>\n                            <label><input type=\"radio\" name=\"VERKKOKAUPPA_Sis\u00e4lt\u00f6\" value=\"Osittain\" disabled> Osittain<\/label>\n                            <label><input type=\"radio\" name=\"VERKKOKAUPPA_Sis\u00e4lt\u00f6\" value=\"Tarvitsen apua\" disabled> Tarvitsen apua<\/label>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"input-group full-width\">\n                        <label>Arvioitu tuotem\u00e4\u00e4r\u00e4 \/ sivum\u00e4\u00e4r\u00e4 (Suuntaa antava): <span id=\"ecom-val-display\" style=\"color: #0071e3; margin-left: 5px; font-size: 1.1em;\">1<\/span><\/label>\n                        <div class=\"slider-wrapper\">\n                            <input type=\"range\" name=\"VERKKOKAUPPA_Tuotem\u00e4\u00e4r\u00e4_Slider\" min=\"1\" max=\"20\" value=\"1\" id=\"ecom-page-slider\" \n                                   oninput=\"document.getElementById('ecom-val-display').innerText = (this.value >= 20 ? &#8217;20+&#8217; : this.value)&#8221; disabled>\n                            \n                            <label class=\"checkbox-inline\">\n                                <input type=\"checkbox\" name=\"VERKKOKAUPPA_Tuotem\u00e4\u00e4r\u00e4_EnTied\u00e4\" onchange=\"toggleSlider('ecom-page-slider', this)\" disabled> En tied\u00e4\n                            <\/label>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"input-group full-width\">\n                        <label>Toiminnot (Maksutavat yms) *<\/label>\n                        <textarea name=\"VERKKOKAUPPA_Toiminnot\" rows=\"3\" class=\"val-req\" disabled><\/textarea>\n                    <\/div>\n                     <div class=\"input-group full-width\">\n                        <label>Lis\u00e4tietoa (valinnainen)<\/label>\n                        <textarea name=\"VERKKOKAUPPA_Vapaa_lis\u00e4tieto\" rows=\"2\" disabled><\/textarea>\n                    <\/div>\n                <\/div>\n\n                <div class=\"sub-branch hidden\" id=\"sub-marketing\">\n                    <label class=\"step-label\">Valitse markkinointipalvelu<\/label>\n                    <div class=\"select-wrapper\">\n                        <select id=\"marketing-selector\" name=\"MARKKINOINTI_Tyyppi\" onchange=\"handleMarketingSelection(this)\" disabled>\n                            <option value=\"\" disabled selected>Valitse&#8230;<\/option>\n                            <option value=\"seo\">Hakukoneoptimointi (SEO)<\/option>\n                            <option value=\"google\">Google yritysprofiili<\/option>\n                            <option value=\"meta\">Meta-mainokset (FB\/IG)<\/option>\n                            <option value=\"some\">Somemainokset<\/option>\n                            <option value=\"email\">S\u00e4hk\u00f6postimarkkinointi<\/option>\n                            <option value=\"help\">En tied\u00e4, tarvitsen apua<\/option>\n                        <\/select>\n                    <\/div>\n\n                    <div class=\"marketing-option hidden\" id=\"mkt-seo\">\n                        <h3 class=\"sub-title\">Hakukoneoptimointi &#8211; Perustiedot<\/h3>\n                        <div class=\"input-grid\">\n                            <div class=\"input-group\"><label>Nimi *<\/label><input type=\"text\" name=\"SEO_Nimi\" class=\"val-req\" disabled><\/div>\n                            <div class=\"input-group\"><label>S\u00e4hk\u00f6posti *<\/label><input type=\"email\" name=\"SEO_S\u00e4hk\u00f6posti\" class=\"val-req\" disabled><\/div>\n                            <div class=\"input-group full-width\"><label>Yritys *<\/label><input type=\"text\" name=\"SEO_Yritys\" class=\"val-req\" disabled><\/div>\n                        <\/div>\n                        <div class=\"input-group full-width\"><label>Kohde (Somet, Web, Muu)<\/label><input type=\"text\" name=\"SEO_Kohde\" disabled><\/div>\n                        <div class=\"input-group\">\n                            <label>Tarvitsetko sis\u00e4ll\u00f6ntuotantoa?<\/label>\n                            <div class=\"radio-row\">\n                                <label><input type=\"radio\" name=\"SEO_Sis\u00e4ll\u00f6ntuotanto\" value=\"Kyll\u00e4\" disabled> Kyll\u00e4<\/label>\n                                <label><input type=\"radio\" name=\"SEO_Sis\u00e4ll\u00f6ntuotanto\" value=\"Ei\" disabled> Ei<\/label>\n                            <\/div>\n                        <\/div>\n                         <div class=\"input-group full-width\"><label>Lis\u00e4tietoa<\/label><textarea name=\"SEO_Vapaa_lis\u00e4tieto\" rows=\"2\" disabled><\/textarea><\/div>\n                    <\/div>\n\n                    <div class=\"marketing-option hidden\" id=\"mkt-google\">\n                        <h3 class=\"sub-title\">Google yritysprofiili &#8211; Perustiedot<\/h3>\n                        <div class=\"input-grid\">\n                            <div class=\"input-group\"><label>Nimi *<\/label><input type=\"text\" name=\"GOOGLE_Nimi\" class=\"val-req\" disabled><\/div>\n                            <div class=\"input-group\"><label>S\u00e4hk\u00f6posti *<\/label><input type=\"email\" name=\"GOOGLE_S\u00e4hk\u00f6posti\" class=\"val-req\" disabled><\/div>\n                            <div class=\"input-group full-width\"><label>Yritys *<\/label><input type=\"text\" name=\"GOOGLE_Yritys\" class=\"val-req\" disabled><\/div>\n                        <\/div>\n                        \n                        <div class=\"input-group\">\n                            <label>Haluatko sis\u00e4ll\u00f6n tuotantoa kuville?<\/label>\n                            <div class=\"radio-row\">\n                                <label><input type=\"radio\" name=\"GOOGLE_Kuvatuotanto\" value=\"Kyll\u00e4\" disabled> Kyll\u00e4<\/label>\n                                <label><input type=\"radio\" name=\"GOOGLE_Kuvatuotanto\" value=\"Ei, minulla on kuvia\" disabled> Ei, minulla on kuvia<\/label>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"input-group\">\n                            <label>Haluatko hakukoneoptimoinnin yritysprofiiliin?<\/label>\n                            <div class=\"radio-row\">\n                                <label><input type=\"radio\" name=\"GOOGLE_SEO\" value=\"Kyll\u00e4\" disabled> Kyll\u00e4<\/label>\n                                <label><input type=\"radio\" name=\"GOOGLE_SEO\" value=\"Ei\" disabled> Ei<\/label>\n                            <\/div>\n                        <\/div>\n                        \n                        <div class=\"input-group full-width\"><label>Lis\u00e4tietoja<\/label><textarea name=\"GOOGLE_Vapaa_lis\u00e4tieto\" rows=\"3\" disabled><\/textarea><\/div>\n                    <\/div>\n\n                    <div class=\"marketing-option hidden\" id=\"mkt-meta\">\n                        <h3 class=\"sub-title\">Meta-mainonta &#8211; Perustiedot<\/h3>\n                        <div class=\"input-grid\">\n                            <div class=\"input-group\"><label>Nimi *<\/label><input type=\"text\" name=\"META_Nimi\" class=\"val-req\" disabled><\/div>\n                            <div class=\"input-group\"><label>S\u00e4hk\u00f6posti *<\/label><input type=\"email\" name=\"META_S\u00e4hk\u00f6posti\" class=\"val-req\" disabled><\/div>\n                            <div class=\"input-group full-width\"><label>Yritys *<\/label><input type=\"text\" name=\"META_Yritys\" class=\"val-req\" disabled><\/div>\n                        <\/div>\n                        <div class=\"input-group\">\n                            <label>Mainostyyppi<\/label>\n                            <div class=\"checkbox-row\">\n                                <label><input type=\"checkbox\" name=\"META_Mainostyyppi[]\" value=\"Kuva\" disabled> Kuva<\/label>\n                                <label><input type=\"checkbox\" name=\"META_Mainostyyppi[]\" value=\"Video\" disabled> Video<\/label>\n                                <label><input type=\"checkbox\" name=\"META_Mainostyyppi[]\" value=\"En tied\u00e4\" disabled> En tied\u00e4<\/label>\n                            <\/div>\n                        <\/div>\n                        <div class=\"input-group\">\n                            <label>Sis\u00e4ll\u00f6ntuotanto?<\/label>\n                            <div class=\"radio-row\">\n                                <label><input type=\"radio\" name=\"META_Sis\u00e4ll\u00f6ntuotanto\" value=\"Kyll\u00e4\" disabled> Kyll\u00e4<\/label>\n                                <label><input type=\"radio\" name=\"META_Sis\u00e4ll\u00f6ntuotanto\" value=\"Ei\" disabled> Ei<\/label>\n                            <\/div>\n                        <\/div>\n                        <div class=\"input-grid\">\n                             <div class=\"input-group\"><label>Budjetti<\/label><input type=\"text\" name=\"META_Budjetti\" disabled><\/div>\n                             <div class=\"input-group\"><label>M\u00e4\u00e4r\u00e4<\/label><input type=\"text\" name=\"META_Mainosm\u00e4\u00e4r\u00e4\" disabled><\/div>\n                        <\/div>\n                         <div class=\"input-group full-width\"><label>Lis\u00e4tietoa<\/label><textarea name=\"META_Vapaa_lis\u00e4tieto\" rows=\"2\" disabled><\/textarea><\/div>\n                    <\/div>\n\n                    <div class=\"marketing-option hidden\" id=\"mkt-some\">\n                        <h3 class=\"sub-title\">Somemainonta &#8211; Perustiedot<\/h3>\n                        <div class=\"input-grid\">\n                            <div class=\"input-group\"><label>Nimi *<\/label><input type=\"text\" name=\"SOME_Nimi\" class=\"val-req\" disabled><\/div>\n                            <div class=\"input-group\"><label>S\u00e4hk\u00f6posti *<\/label><input type=\"email\" name=\"SOME_S\u00e4hk\u00f6posti\" class=\"val-req\" disabled><\/div>\n                            <div class=\"input-group full-width\"><label>Yritys *<\/label><input type=\"text\" name=\"SOME_Yritys\" class=\"val-req\" disabled><\/div>\n                        <\/div>\n                        <div class=\"input-group full-width\"><label>Alustat<\/label><input type=\"text\" name=\"SOME_Alustat\" disabled><\/div>\n                        <div class=\"input-group\">\n                            <label>Sis\u00e4lt\u00f6tyyppi<\/label>\n                            <div class=\"checkbox-row\">\n                                <label><input type=\"checkbox\" name=\"SOME_Sis\u00e4lt\u00f6tyyppi[]\" value=\"Video\" disabled> Video<\/label>\n                                <label><input type=\"checkbox\" name=\"SOME_Sis\u00e4lt\u00f6tyyppi[]\" value=\"Kuva\" disabled> Kuva<\/label>\n                                <label><input type=\"checkbox\" name=\"SOME_Sis\u00e4lt\u00f6tyyppi[]\" value=\"Teksti\" disabled> Teksti<\/label>\n                            <\/div>\n                        <\/div>\n                        <div class=\"input-group\"><label>Julkaisutiheys<\/label>\n                            <div class=\"select-wrapper\">\n                                <select name=\"SOME_Julkaisutiheys\" disabled>\n                                    <option>1-3 krt\/kk<\/option>\n                                    <option>4-6 krt\/kk<\/option>\n                                    <option>7-10 krt\/kk<\/option>\n                                    <option>Yli 10 krt\/kk<\/option>\n                                    <option>En tied\u00e4<\/option>\n                                <\/select>\n                            <\/div>\n                        <\/div>\n                         <div class=\"input-group full-width\"><label>Lis\u00e4tietoa<\/label><textarea name=\"SOME_Vapaa_lis\u00e4tieto\" rows=\"2\" disabled><\/textarea><\/div>\n                    <\/div>\n\n                    <div class=\"marketing-option hidden\" id=\"mkt-email\">\n                        <h3 class=\"sub-title\">S\u00e4hk\u00f6postimarkkinointi &#8211; Perustiedot<\/h3>\n                        <div class=\"input-grid\">\n                            <div class=\"input-group\"><label>Nimi *<\/label><input type=\"text\" name=\"EMAIL_Nimi\" class=\"val-req\" disabled><\/div>\n                            <div class=\"input-group\"><label>S\u00e4hk\u00f6posti *<\/label><input type=\"email\" name=\"EMAIL_S\u00e4hk\u00f6posti\" class=\"val-req\" disabled><\/div>\n                            <div class=\"input-group full-width\"><label>Yritys *<\/label><input type=\"text\" name=\"EMAIL_Yritys\" class=\"val-req\" disabled><\/div>\n                        <\/div>\n\n                        <div class=\"input-group full-width\">\n                            <label>Montako s\u00e4hk\u00f6postia arvioit tarvitsevasi?<\/label>\n                            <input type=\"text\" name=\"EMAIL_Arvioitu_Maara_Teksti\" disabled>\n                        <\/div>\n\n                        <div class=\"input-group full-width\">\n                            <label>Toteutustapa<\/label>\n                            <div class=\"select-wrapper\">\n                                <select name=\"EMAIL_Toteutustapa\" disabled>\n                                    <option>Automaatio<\/option>\n                                    <option>Manuaalinen<\/option>\n                                    <option>En tied\u00e4<\/option>\n                                <\/select>\n                            <\/div>\n                        <\/div>\n                        <div class=\"input-group full-width\">\n                            <label>Kirjoitusapu?<\/label>\n                            <div class=\"radio-row\">\n                                <label><input type=\"radio\" name=\"EMAIL_Kirjoitusapu\" value=\"Kyll\u00e4\" onclick=\"toggleEmailSlider(true)\" disabled> Kyll\u00e4<\/label>\n                                <label><input type=\"radio\" name=\"EMAIL_Kirjoitusapu\" value=\"Ei\" onclick=\"toggleEmailSlider(false)\" disabled> Ei<\/label>\n                            <\/div>\n                        <\/div>\n                        <div class=\"input-group full-width hidden\" id=\"email-slider-group\">\n                             <label>M\u00e4\u00e4r\u00e4 (jos kirjoitusapua): <span id=\"email-count-val\">4<\/span><\/label>\n                            <div class=\"slider-wrapper\">\n                                <input type=\"range\" name=\"EMAIL_Viestim\u00e4\u00e4r\u00e4\" min=\"1\" max=\"20\" value=\"4\" id=\"email-slider\" oninput=\"document.getElementById('email-count-val').innerText = (this.value >= 20 ? &#8217;20+&#8217; : this.value)&#8221; disabled>\n                                <label class=\"checkbox-inline\"><input type=\"checkbox\" name=\"EMAIL_Viestim\u00e4\u00e4r\u00e4_EnTied\u00e4\" onchange=\"toggleSlider('email-slider', this)\" disabled> En tied\u00e4<\/label>\n                            <\/div>\n                        <\/div>\n                         <div class=\"input-group full-width\"><label>Lis\u00e4tietoa<\/label><textarea name=\"EMAIL_Vapaa_lis\u00e4tieto\" rows=\"2\" disabled><\/textarea><\/div>\n                    <\/div>\n\n                    <div class=\"marketing-option hidden\" id=\"mkt-help\">\n                        <div class=\"info-box\">\n                            <p>Suosittelemme varaamaan lyhyen juttutuokion asiantuntijamme kanssa.<\/p>\n                            <a href=\"#booking-section\" class=\"btn-primary\">Varaa maksuton konsultaatio t\u00e4st\u00e4<\/a>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"sub-branch hidden\" id=\"sub-photo\">\n                    <label class=\"step-label\">Kuvauksen tyyppi?<\/label>\n                     <div class=\"radio-group-cards small-cards\">\n                        <label class=\"radio-card\">\n                            <input type=\"radio\" name=\"KUVAUS_Tyyppi_Valinta\" value=\"Drone\" onchange=\"handlePhotoSelection(this)\">\n                            <div class=\"card-content\"><span>Dronekuvaus<\/span><\/div>\n                        <\/label>\n                        <label class=\"radio-card\">\n                            <input type=\"radio\" name=\"KUVAUS_Tyyppi_Valinta\" value=\"360\" onchange=\"handlePhotoSelection(this)\">\n                            <div class=\"card-content\"><span>360-kuvaus<\/span><\/div>\n                        <\/label>\n                    <\/div>\n\n                    <div class=\"photo-option hidden\" id=\"photo-drone\">\n                        <h3 class=\"sub-title\">Dronekuvaus &#8211; Perustiedot<\/h3>\n                        <div class=\"input-grid\">\n                            <div class=\"input-group\"><label>Nimi *<\/label><input type=\"text\" name=\"DRONE_Nimi\" class=\"val-req\" disabled><\/div>\n                            <div class=\"input-group\"><label>S\u00e4hk\u00f6posti *<\/label><input type=\"email\" name=\"DRONE_S\u00e4hk\u00f6posti\" class=\"val-req\" disabled><\/div>\n                            <div class=\"input-group full-width\"><label>Yritys *<\/label><input type=\"text\" name=\"DRONE_Yritys\" class=\"val-req\" disabled><\/div>\n                        <\/div>\n                        <div class=\"input-group\"><label>Sijainti<\/label><input type=\"text\" name=\"DRONE_Sijainti\" disabled><\/div>\n                        <div class=\"input-group\">\n                             <label>Materiaalin tyyppi<\/label>\n                             <div class=\"select-wrapper\">\n                                 <select name=\"DRONE_Materiaali\" disabled>\n                                     <option>Kuvat<\/option>\n                                     <option>Videot<\/option>\n                                     <option>Molemmat<\/option>\n                                     <option>En tied\u00e4<\/option>\n                                 <\/select>\n                            <\/div>\n                        <\/div>\n                         <div class=\"input-group full-width\"><label>Kohde<\/label><textarea name=\"DRONE_Kohde\" rows=\"3\" disabled><\/textarea><\/div>\n                         <div class=\"input-group full-width\"><label>Lis\u00e4tietoa<\/label><textarea name=\"DRONE_Vapaa_lis\u00e4tieto\" rows=\"2\" disabled><\/textarea><\/div>\n                    <\/div>\n\n                    <div class=\"photo-option hidden\" id=\"photo-360\">\n                        <h3 class=\"sub-title\">360-kuvaus &#8211; Perustiedot<\/h3>\n                        <div class=\"input-grid\">\n                            <div class=\"input-group\"><label>Nimi *<\/label><input type=\"text\" name=\"360_Nimi\" class=\"val-req\" disabled><\/div>\n                            <div class=\"input-group\"><label>S\u00e4hk\u00f6posti *<\/label><input type=\"email\" name=\"360_S\u00e4hk\u00f6posti\" class=\"val-req\" disabled><\/div>\n                            <div class=\"input-group full-width\"><label>Yritys *<\/label><input type=\"text\" name=\"360_Yritys\" class=\"val-req\" disabled><\/div>\n                        <\/div>\n                        <div class=\"input-grid\">\n                            <div class=\"input-group\"><label>Sijainti<\/label><input type=\"text\" name=\"360_Sijainti\" disabled><\/div>\n                            <div class=\"input-group\"><label>Kohde<\/label><input type=\"text\" name=\"360_Kohde\" disabled><\/div>\n                        <\/div>\n                        <div class=\"input-group\">\n                            <label>Google Maps -lis\u00e4ys?<\/label>\n                             <div class=\"radio-row\">\n                                <label><input type=\"radio\" name=\"360_GoogleMaps_Lis\u00e4ys\" value=\"Kyll\u00e4\" disabled> Kyll\u00e4<\/label>\n                                <label><input type=\"radio\" name=\"360_GoogleMaps_Lis\u00e4ys\" value=\"Ei\" disabled> Ei<\/label>\n                            <\/div>\n                        <\/div>\n                         <div class=\"input-group\">\n                            <label>Virtuaaliesittely sivuille?<\/label>\n                             <div class=\"radio-row\">\n                                <label><input type=\"radio\" name=\"360_Virtuaaliesittely_Web\" value=\"Kyll\u00e4\" disabled> Kyll\u00e4<\/label>\n                                <label><input type=\"radio\" name=\"360_Virtuaaliesittely_Web\" value=\"Ei\" disabled> Ei<\/label>\n                            <\/div>\n                        <\/div>\n                         <div class=\"input-group full-width\"><label>Lis\u00e4tietoa<\/label><textarea name=\"360_Vapaa_lis\u00e4tieto\" rows=\"2\" disabled><\/textarea><\/div>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n\n            <div class=\"form-step hidden\" id=\"step-final\">\n                <div class=\"checkbox-group privacy-check\">\n                    <label class=\"privacy-label\">\n                        <input type=\"checkbox\" id=\"privacy-consent\" name=\"TIETOSUOJASELOSTE\" value=\"Hyv\u00e4ksytty\" class=\"val-req\" disabled>\n                        <span>Hyv\u00e4ksyn tietojeni k\u00e4sittelyn <a href=\"https:\/\/digiverkosto.fi\/tietosuojakaytanto\/\">tietosuojaselosteen<\/a> mukaisesti. *<\/span>\n                    <\/label>\n                <\/div>\n                <button type=\"submit\" class=\"btn-submit\">L\u00c4HET\u00c4<\/button>\n            <\/div>\n\n        <\/form>\n    <\/div>\n<\/section>\n\n<style>\n\n\n.form-section {\n    background: #070707;\n    padding: 80px 5vw;\n    font-family: inherit;\n    color: #f5f5f7;\n    border-top: 1px solid #1c1c1e;\n}\n\n.form-container {\n    max-width: 800px;\n    margin: 0 auto;\n    background: #0b0b0b;\n    padding: 60px 40px;\n    border-radius: 24px;\n    border: 1px solid #1f1f1f;\n    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);\n    position: relative;\n    overflow: hidden;\n}\n\n.form-container::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 1px;\n    background: linear-gradient(90deg, transparent, #333, transparent);\n}\n\n.form-title {\n    text-align: center;\n    font-size: 42px;\n    font-weight: 700;\n    margin-bottom: 12px;\n    color: #fff;\n    letter-spacing: -0.02em;\n}\n\n.form-subtitle {\n    text-align: center;\n    color: #86868b;\n    margin-bottom: 50px;\n    font-size: 18px;\n}\n\n.sub-title {\n    margin-top: 40px;\n    margin-bottom: 25px;\n    font-size: 20px;\n    color: #fff;\n    border-left: 3px solid #0071e3;\n    padding-left: 15px;\n    font-weight: 600;\n    letter-spacing: 0.5px;\n    text-transform: uppercase;\n}\n\n\n.radio-group-cards {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 20px;\n    margin-bottom: 30px;\n}\n\n.radio-group-cards.small-cards {\n    grid-template-columns: 1fr 1fr;\n    max-width: 500px;\n}\n\n.radio-card {\n    cursor: pointer;\n    position: relative;\n}\n\n.radio-card input {\n    position: absolute;\n    opacity: 0;\n}\n\n.card-content {\n    background: #121212;\n    border: 1px solid #2a2a2a; \n    border-radius: 16px;\n    padding: 30px 15px;\n    text-align: center;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 12px;\n    box-sizing: border-box;\n    color: #a1a1a6;\n}\n\n.card-content .icon {\n    font-size: 36px;\n    display: block;\n    margin-bottom: 5px;\n    filter: none; \n    text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);\n    transition: transform 0.3s ease;\n}\n\n.radio-card:hover .card-content {\n    background: #181818;\n    border-color: #444;\n}\n\n.radio-card:hover .icon {\n    transform: scale(1.1);\n}\n\n.radio-card input:checked + .card-content {\n    border-color: #0071e3;\n    background-color: #0a0a0a;\n    color: #fff;\n    box-shadow: 0 0 25px rgba(0, 113, 227, 0.2); \n    transform: translateY(-2px);\n}\n\n\/* INPUTS *\/\n.input-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 24px;\n    margin-bottom: 24px;\n}\n\n.input-group {\n    margin-bottom: 24px;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n}\n\n.input-group.full-width {\n    grid-column: span 2;\n}\n\nlabel {\n    font-size: 12px;\n    font-weight: 600;\n    margin-bottom: 8px;\n    color: #fff;\n    display: block;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n}\n\n.sub-branch .step-label {\n    margin-top: 30px; \n    padding-top: 10px;\n    display: block;\n}\n\n.step-label {\n    font-size: 18px;\n    margin-bottom: 25px;\n    border-bottom: 1px solid #2a2a2a;\n    padding-bottom: 15px;\n    color: #fff;\n    font-weight: 500;\n    text-transform: none;\n    letter-spacing: 0;\n}\n\n.select-wrapper {\n    position: relative;\n    width: 100%;\n}\n\nselect {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    padding: 14px 16px;\n    padding-right: 40px;\n    background-color: #070707 !important;\n    border: 1px solid #2a2a2a;\n    border-radius: 12px;\n    font-size: 16px;\n    color: #fff !important; \n    width: 100%;\n    box-sizing: border-box;\n    font-family: inherit;\n    min-height: 52px;\n    line-height: 1.2;\n    background-image: url(\"data:image\/svg+xml;charset=UTF-8,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='%230071e3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c\/polyline%3e%3c\/svg%3e\");\n    background-repeat: no-repeat;\n    background-position: right 14px center;\n    background-size: 16px;\n}\n\nselect option {\n    background-color: #121212 !important;\n    color: #ffffff !important;\n    padding: 12px;\n}\n\ninput[type=\"text\"],\ninput[type=\"email\"],\ninput[type=\"tel\"],\ntextarea {\n    padding: 16px;\n    background: #070707; \n    border: 1px solid #2a2a2a;\n    border-radius: 12px;\n    font-size: 16px;\n    color: #fff;\n    width: 100%;\n    box-sizing: border-box;\n    transition: all 0.3s ease;\n    font-family: inherit;\n    min-height: 52px;\n}\n\ninput:focus,\ntextarea:focus,\nselect:focus {\n    outline: none;\n    border-color: #0071e3;\n    background: #ffffff !important; \n    color: #000000 !important; \n    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1);\n}\n\ntextarea { resize: vertical; min-height: 120px; }\n\n.radio-row, .checkbox-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: center;\n    padding: 5px 0;\n}\n\n.radio-row label, .checkbox-row label {\n    font-weight: 400;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin: 0;\n    color: #e0e0e0;\n    text-transform: none;\n    letter-spacing: 0;\n    font-size: 15px;\n}\n\ninput[type=\"radio\"], input[type=\"checkbox\"] {\n    accent-color: #0071e3;\n    width: 18px;\n    height: 18px;\n    cursor: pointer;\n    margin: 0;\n    border: 1px solid #333;\n    background: #000;\n}\n\n\n.slider-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    background: #121212;\n    padding: 25px;\n    border-radius: 12px;\n    border: 1px solid #2a2a2a;\n}\n\ninput[type=range] {\n    -webkit-appearance: none;\n    width: 100%;\n    background: transparent;\n    padding: 0;\n    margin: 0;\n    flex-grow: 1;\n    cursor: pointer;\n    border: none;\n    min-height: auto;\n}\n\n\ninput[type=range]::-webkit-slider-runnable-track {\n    width: 100%;\n    height: 6px; \n    cursor: pointer;\n    background: #333; \n    border-radius: 99px; \n    border: none;\n}\n\ninput[type=range]::-moz-range-track {\n    width: 100%;\n    height: 6px;\n    cursor: pointer;\n    background: #333;\n    border-radius: 99px;\n    border: none;\n}\n\n\ninput[type=range]::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    height: 22px;\n    width: 22px;\n    border-radius: 50%;\n    background: #0071e3; \n    cursor: pointer;\n    margin-top: -8px; \n    box-shadow: 0 2px 6px rgba(0,0,0,0.5); \n    border: 2px solid #121212; \n}\n\ninput[type=range]::-moz-range-thumb {\n    height: 22px;\n    width: 22px;\n    border: 2px solid #121212;\n    border-radius: 50%;\n    background: #0071e3;\n    cursor: pointer;\n    box-shadow: 0 2px 6px rgba(0,0,0,0.5);\n}\n\ninput[type=range]:focus {\n    outline: none;\n}\n\n\n.btn-primary, .btn-submit {\n    background-color: #0071e3;\n    color: white;\n    padding: 18px 36px;\n    border-radius: 8px;\n    font-size: 16px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    text-decoration: none;\n    border: none;\n    cursor: pointer;\n    display: inline-block;\n    transition: all 0.3s ease;\n    width: 100%;\n    text-align: center;\n    margin-top: 30px;\n    box-shadow: 0 4px 20px rgba(0, 113, 227, 0.3);\n}\n\n.btn-primary:hover, .btn-submit:hover {\n    background-color: #0062c4;\n    box-shadow: 0 4px 30px rgba(0, 113, 227, 0.5);\n    transform: translateY(-1px);\n}\n\n.input-error {\n    border-color: #ff3b30 !important;\n    background-color: rgba(255, 59, 48, 0.05) !important;\n}\n\n.error-text {\n    color: #ff3b30;\n    font-size: 11px;\n    margin-top: 6px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.privacy-check {\n    margin-top: 30px;\n    padding: 20px;\n    background: #121212;\n    border-radius: 12px;\n    border: 1px solid #2a2a2a;\n}\n\n.privacy-label a { color: #0071e3; text-decoration: none; }\n\n@media (max-width: 700px) {\n    .radio-group-cards { grid-template-columns: 1fr; }\n    .input-grid { grid-template-columns: 1fr; }\n    .input-group.full-width { grid-column: span 1; }\n    .form-container { padding: 40px 20px; border: none; box-shadow: none; background: transparent; }\n    .form-section { padding: 40px 0; }\n    input, select, textarea { font-size: 16px; }\n}\n\n.hidden { display: none !important; }\n<\/style>\n\n<script>\n    \/\/ --- JAVASCRIPT LOGIIKKA ---\n\n    function showSection(id) {\n        const el = document.getElementById(id);\n        if(el) {\n            el.classList.remove('hidden');\n            const inputs = el.querySelectorAll('input, select, textarea');\n            inputs.forEach(i => i.disabled = false);\n        }\n    }\n\n    function hideSection(id) {\n        const el = document.getElementById(id);\n        if(el) {\n            el.classList.add('hidden');\n            const inputs = el.querySelectorAll('input, select, textarea');\n            inputs.forEach(i => {\n                i.disabled = true;\n                i.checked = false; \n                if(i.type !== 'radio' && i.type !== 'checkbox') i.value = \"\"; \n            });\n        }\n    }\n\n    function hideAllSections(ids) {\n        ids.forEach(id => hideSection(id));\n    }\n\n    function handleMainReason(radio) {\n        const val = radio.value;\n        hideAllSections(['branch-feedback', 'branch-contact', 'branch-quote', 'step-final']);\n        hideAllSections(['sub-web', 'sub-ecom', 'sub-marketing', 'sub-photo']);\n        \n        const s = document.getElementById('service-selector'); if(s) {s.value=\"\"; s.disabled=true;}\n        const m = document.getElementById('marketing-selector'); if(m) {m.value=\"\"; m.disabled=true;}\n\n        if (val === 'Palaute') {\n            showSection('branch-feedback');\n            showSection('step-final'); \/\/ Nyt avaa my\u00f6s l\u00e4hetysnapin\n        } \n        else if (val === 'Yhteydenotto') {\n            showSection('branch-contact');\n            showSection('step-final'); \n        } \n        else if (val === 'Tarjouspyynt\u00f6') {\n            showSection('branch-quote');\n            document.getElementById('service-selector').disabled = false;\n        }\n    }\n\n    function handleServiceSelection(select) {\n        const val = select.value;\n        hideAllSections(['sub-web', 'sub-ecom', 'sub-marketing', 'sub-photo']);\n        \n        const m = document.getElementById('marketing-selector'); if(m) {m.value=\"\"; m.disabled=true;}\n        hideAllSections(['mkt-seo', 'mkt-meta', 'mkt-some', 'mkt-email', 'mkt-help', 'mkt-google']);\n        \n        hideAllSections(['photo-drone', 'photo-360']);\n\n        hideSection('step-final');\n\n        if (val === 'web') {\n            showSection('sub-web');\n            showSection('step-final');\n        }\n        else if (val === 'ecom') {\n            showSection('sub-ecom');\n            showSection('step-final');\n        }\n        else if (val === 'marketing') {\n            showSection('sub-marketing');\n            document.getElementById('marketing-selector').disabled = false;\n        }\n        else if (val === 'photo') {\n            showSection('sub-photo');\n        }\n    }\n\n    function handleMarketingSelection(select) {\n        const val = select.value;\n        \/\/ Lis\u00e4tty mkt-google piilotettavien listaan\n        hideAllSections(['mkt-seo', 'mkt-meta', 'mkt-some', 'mkt-email', 'mkt-help', 'mkt-google']);\n        \n        if (val === 'help') {\n            showSection('mkt-help');\n            hideSection('step-final');\n        } else {\n            showSection('step-final');\n            if(val === 'seo') showSection('mkt-seo');\n            if(val === 'meta') showSection('mkt-meta');\n            if(val === 'some') showSection('mkt-some');\n            if(val === 'email') showSection('mkt-email');\n            if(val === 'google') showSection('mkt-google'); \/\/ Uusi ehto\n        }\n    }\n\n    function handlePhotoSelection(radio) {\n        const val = radio.value;\n        hideAllSections(['photo-drone', 'photo-360']);\n        showSection('step-final');\n\n        if (val === 'Drone') showSection('photo-drone');\n        else if (val === '360') showSection('photo-360');\n    }\n\n    \n    window.addEventListener('load', function() {\n        const sliders = document.querySelectorAll('input[type=\"range\"]');\n        sliders.forEach(s => {\n            s.value = 1;\n            \n            if(s.id === 'web-page-slider') document.getElementById('web-val-display').innerText = '1';\n            if(s.id === 'ecom-page-slider') document.getElementById('ecom-val-display').innerText = '1';\n            if(s.id === 'email-slider') document.getElementById('email-count-val').innerText = '1';\n        });\n    });\n\n    function toggleSlider(sliderId, checkbox) {\n        const slider = document.getElementById(sliderId);\n        const wrapper = slider.closest('.slider-wrapper'); \n        \n        if (checkbox.checked) {\n            slider.disabled = true;\n            if(wrapper) wrapper.style.opacity = \"0.3\";\n        } else {\n            slider.disabled = false;\n            if(wrapper) wrapper.style.opacity = \"1\";\n        }\n    }\n    \n    function toggleEmailSlider(show) {\n        const group = document.getElementById('email-slider-group');\n        if(show) showSection('email-slider-group'); else hideSection('email-slider-group');\n    }\n\n    document.addEventListener('input', function(e) {\n        if (e.target.classList.contains('input-error')) {\n            e.target.classList.remove('input-error');\n            const parent = e.target.closest('.input-group') || e.target.parentElement;\n            const errorMsg = parent.querySelector('.error-text');\n            if(errorMsg) errorMsg.remove();\n        }\n        if (e.target.type === 'checkbox' || e.target.type === 'radio') {\n            const group = e.target.closest('.radio-row') || e.target.parentElement;\n            if(group) group.style.color = \"\";\n        }\n    });\n\n    document.getElementById('dynamicForm').addEventListener('submit', function(e) {\n        e.preventDefault(); \n        let hasErrors = false;\n\n        const potentialInputs = document.querySelectorAll('.val-req:not([disabled])');\n\n        potentialInputs.forEach(input => {\n            if(input.offsetParent === null) return;\n\n            if (input.type === 'radio') {\n                const groupName = input.name;\n                const isChecked = document.querySelector(`input[name=\"${groupName}\"]:checked`);\n                if (!isChecked) {\n                      hasErrors = true;\n                      const groupDiv = input.closest('.radio-row');\n                      if(groupDiv) groupDiv.style.color = \"#ff3b30\";\n                }\n            } \n            else if (input.type === 'checkbox') {\n                if (!input.checked) {\n                      hasErrors = true;\n                      input.parentElement.style.color = \"#ff3b30\";\n                }\n            } \n            else {\n                if (!input.value.trim()) {\n                    hasErrors = true;\n                    input.classList.add('input-error');\n                    const parent = input.closest('.input-group');\n                    if (parent && !parent.querySelector('.error-text')) {\n                        const msg = document.createElement('span');\n                        msg.className = 'error-text';\n                        msg.innerText = 'Pakollinen tieto';\n                        parent.appendChild(msg);\n                    }\n                }\n            }\n        });\n\n        if (!hasErrors) {\n            e.target.submit();\n        } else {\n            const firstError = document.querySelector('.input-error') || document.querySelector('.radio-row[style*=\"rgb(255\"]');\n            if(firstError) {\n                firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });\n            }\n        }\n    });\n<\/script>\n\n\n\n<style>\n    .consultation-section {\n        background-color: #070707; \n        padding: 80px 20px;\n        font-family: inherit;\n        text-align: center;\n    }\n\n    .consultation-card {\n        background-color: #0e0e10; \n        border: 1px solid #1c1c1e; \n        border-radius: 16px;\n        max-width: 800px;\n        margin: 0 auto;\n        padding: 60px 40px;\n        box-shadow: 0 20px 40px rgba(0,0,0,0.4);\n    }\n\n    .consultation-icon {\n        font-size: 3rem;\n        margin-bottom: 20px;\n        line-height: 1;\n    }\n\n    .consultation-card h2 {\n        color: #ffffff;\n        font-size: clamp(1.8rem, 4vw, 2.5rem);\n        font-weight: 800;\n        margin: 0 0 15px 0;\n        letter-spacing: -0.5px;\n    }\n\n    .consultation-card p {\n        color: #b0b0b5;\n        font-size: 1.15rem;\n        line-height: 1.6;\n        margin: 0 auto 35px auto;\n        max-width: 600px;\n    }\n\n    .consultation-btn {\n        background-color: #0071e3; \n        color: #ffffff;\n        text-decoration: none;\n        padding: 16px 35px;\n        font-size: 1.1rem;\n        font-weight: 600;\n        border-radius: 8px;\n        display: inline-block;\n        transition: background-color 0.3s ease, transform 0.2s ease;\n    }\n\n    .consultation-btn:hover {\n        background-color: #fff;\n        transform: translateY(-2px);\n    }\n\n    \n    @media (max-width: 600px) {\n        .consultation-card { \n            padding: 40px 20px; \n        }\n        .consultation-card p {\n            font-size: 1rem;\n        }\n        .consultation-btn {\n            display: block;\n            width: 100%;\n            box-sizing: border-box;\n        }\n    }\n<\/style>\n\n<section class=\"consultation-section\">\n    <div class=\"consultation-card\">\n        \n        <div class=\"consultation-icon\">\u2615<\/div>\n        \n        <h2>Varaa maksuton konsultaatio<\/h2>\n        \n        <p>\n            Onko mieless\u00e4si verkkosivu-uudistus, markkinoinnin tehostaminen tai teko\u00e4lyn valjastaminen yrityksesi k\u00e4ytt\u00f6\u00f6n? <br>Varaa 30 minuutin et\u00e4palaveri. Kartoitetaan tilanteesi ilman sitoumuksia.\n        <\/p>\n        \n        <a href=\"https:\/\/digiverkosto.fi\/varaa-aika\" class=\"consultation-btn\">Varaa aika kalenterista<\/a>\n        \n    <\/div>\n<\/section>\n\n\n<link data-noptimize=\"1\" data-no-optimize=\"1\" data-no-minify=\"1\" data-no-defer=\"1\" rel=\"stylesheet\" href=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/trustindex-google-widget.css?1787214414\" media=\"all\"><pre class=\"ti-widget\"><div style=\"opacity: 0;height: 0 !important;overflow: hidden !important\" data-css-url=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/trustindex-google-widget.css?1787214414\" class=\" ti-widget  ti-goog ti-review-text-mode-readmore ti-text-align-left\" data-no-translation=\"true\" data-time-locale=\"%d %s sitten|t\u00e4n\u00e4\u00e4n|p\u00e4iv\u00e4|p\u00e4iv\u00e4\u00e4|viikko|viikkoa|kuukausi|kuukautta|vuosi|vuotta\" data-plugin-version=\"14.1.1\" data-layout-id=\"104\" data-layout-category=\"badge, top-rated-badge\" data-set-id=\"drop-shadow\" data-pid=\"wp-widget\" data-language=\"fi\" data-close-locale=\"Kiinni\" data-css-version=\"2\" data-size=\"1\"> <div class=\"ti-widget-container\"> <div class=\"ti-header source-Google\"> <img decoding=\"async\" class=\"ti-platform-icon skip-lazy\" src=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/icon.svg\" alt=\"Google\" width=\"20\" height=\"20\" loading=\"lazy\" \/> <div class=\"ti-header-inner\"> <div class=\"ti-profile-details\"> <div class=\"ti-stars\"><img decoding=\"async\" class=\"ti-star skip-lazy\" src=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google star 1\" width=\"17\" height=\"17\" loading=\"lazy\" \/><img decoding=\"async\" class=\"ti-star skip-lazy\" src=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google star 2\" width=\"17\" height=\"17\" loading=\"lazy\" \/><img decoding=\"async\" class=\"ti-star skip-lazy\" src=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google star 3\" width=\"17\" height=\"17\" loading=\"lazy\" \/><img decoding=\"async\" class=\"ti-star skip-lazy\" src=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google star 4\" width=\"17\" height=\"17\" loading=\"lazy\" \/><img decoding=\"async\" class=\"ti-star skip-lazy\" src=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google star 5\" width=\"17\" height=\"17\" loading=\"lazy\" \/><\/div> <span class=\"ti-rating\">5.0<\/span> <\/div> <div class=\"ti-top-rated-title\">Parhaiksi arvioitu  palvelu<\/div> <div class=\"ti-verified-by\">Trustindexin vahvistama <span class=\"ti-info-icon\"><\/span><\/div> <div class=\"ti-disclaimer\">Trustindex vahvistaa, ett\u00e4 yrityksen arvostelupisteet ovat yli 4.5. T\u00e4m\u00e4 perustuu Google-alustalle viimeisten 12 kuukauden aikana ker\u00e4ttyihin arvosteluihin, mik\u00e4 oikeuttaa sen saamaan <a href=\"https:\/\/www.trustindex.io\/?a=sys&amp;c=wp-top-rated-badge&amp;url=\/the-trustindex-verified-badge\/\" target=\"_blank\" rel=\"noopener\">Parhaiten arvioidut sertifikaatin<\/a>.<\/div> <\/div> <\/div> <\/div> <\/div> <\/pre><script>\n(function () { if (window.tiLoaderFallback) { return; } window.tiLoaderFallback = true; function tiLoadLoader() { if (window.TrustindexWidget || document.querySelector('script[src*=\"https:\/\/cdn.trustindex.io\/loader.js\"]')) { return; } let script = document.createElement(\"script\"); script.async = true; script.src = \"https:\/\/cdn.trustindex.io\/loader.js\"; script.setAttribute(\"data-ccm-injected\", \"1\"); document.head.appendChild(script); } if (\"loading\" === document.readyState) { document.addEventListener(\"DOMContentLoaded\", tiLoadLoader); } else { tiLoadLoader(); } })();\n<\/script>\n\n\n\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\/\",\n  \"@type\": \"Product\",\n  \"name\": \"Digiverkosto Palvelut\",\n  \"description\": \"Asiantuntevat digimarkkinoinnin ja verkkosivustojen toteutukset.\",\n  \"brand\": {\n    \"@type\": \"Brand\",\n    \"name\": \"Digiverkosto\"\n  },\n  \"aggregateRating\": {\n    \"@type\": \"AggregateRating\",\n    \"ratingValue\": \"5\",\n    \"bestRating\": \"5\",\n    \"worstRating\": \"1\",\n    \"ratingCount\": \"3\"\n  }\n}\n<\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>nettisivut sinun yrityksellesi Miten voimme olla avuksi? Hienoa, ett\u00e4 l\u00f6ysit tiesi t\u00e4nne! Halusitpa sitten k\u00e4ynnist\u00e4\u00e4 uuden projektin, kysy\u00e4 tarkemmin palveluistamme [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5908","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/pages\/5908","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/comments?post=5908"}],"version-history":[{"count":2,"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/pages\/5908\/revisions"}],"predecessor-version":[{"id":7200,"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/pages\/5908\/revisions\/7200"}],"wp:attachment":[{"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/media?parent=5908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}