CINXE.COM
Let's talk | Locomotive
<!doctype html> <html class="has-no-js is-first-loading is-loading" lang="en" data-template="lisa" data-theme="secondary"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <base href="https://locomotive.ca/"> <title>Let's talk | Locomotive</title> <link rel="canonical" href="https://locomotive.ca/en/contact"> <meta property="og:url" content="https://locomotive.ca/en/contact"> <meta property="og:title" content="Let's talk | Locomotive"> <meta property="twitter:title" content="Let's talk | Locomotive"> <meta property="og:site_name" content="Locomotive"> <meta name="description" content="We are Locomotive庐. An independent agency with a deep skill set, big ideas, lots of heart and a global reputation."> <meta property="og:description" content="We are Locomotive庐. An independent agency with a deep skill set, big ideas, lots of heart and a global reputation."> <meta property="twitter:description" content="We are Locomotive庐. An independent agency with a deep skill set, big ideas, lots of heart and a global reputation."> <meta property="og:image" content="https://locomotive.ca/uploads/metadata/Open_Graph_Loco_%281%29.png"> <meta property="twitter:image" content="https://locomotive.ca/uploads/metadata/Open_Graph_Loco_%281%29.png"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@LocomotiveMTL"> <!-- Viewport --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="HandheldFriendly" content="true"> <!-- Appearance --> <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png"> <link rel="manifest" href="site.webmanifest"> <link rel="mask-icon" href="assets/images/favicons/safari-pinned-tab.svg" color="#000000"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#ffffff"> <!-- Styles --> <style media="all"> /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html{box-sizing:border-box}template,[hidden]{display:none}*,:before,:after{box-sizing:inherit}address{font-style:inherit}dfn,cite,em,i{font-style:italic}b,strong{font-weight:700}a{text-decoration:none}a svg{pointer-events:none}ul,ol{margin:0;padding:0;list-style:none}p,figure{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:1em;font-weight:initial;margin:0}a,area,button,input,label,select,textarea,[tabindex]{touch-action:manipulation}[hreflang]>abbr[title]{text-decoration:none}table{border-spacing:0;border-collapse:collapse}hr{display:block;margin:1em 0;padding:0;height:1px;border:0;border-top:1px solid #CCCCCC}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio:not([controls]){display:none;height:0}img,svg{max-width:100%;height:auto}img[width],img[height],svg[width],svg[height]{max-width:none}img{font-style:italic}svg{fill:currentColor}input,select,textarea{display:block;margin:0;padding:0;width:100%;outline:0;border:0;border-radius:0;background:none transparent;color:inherit;font:inherit;line-height:normal;-webkit-appearance:none;-moz-appearance:none;appearance:none}select{text-transform:none}select::-ms-expand{display:none}select::-ms-value{background:none;color:inherit}textarea{overflow:auto;resize:vertical}button,.c-button{display:inline-block;overflow:visible;margin:0;padding:0;outline:0;border:0;background:none transparent;color:inherit;vertical-align:middle;text-align:center;text-decoration:none;text-transform:none;font:inherit;line-height:normal;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button:focus,button:hover,.c-button:focus,.c-button:hover{text-decoration:none}:root{--spacing-micro-mobile: 8;--spacing-micro: 14;--spacing-tiny-mobile: 20;--spacing-tiny: 20;--spacing-small-mobile: 30;--spacing-small: 30;--spacing-medium-mobile: 40;--spacing-medium: 40;--spacing-large-mobile: 52;--spacing-large: 80;--spacing-big-mobile: 80;--spacing-big: 150;--spacing-huge-mobile: 100;--spacing-huge: 200;--spacing-enormous-mobile: 140;--spacing-enormous: 250;--color: #000;--color-bg: #fff;--border: solid var(--border-size);--grid-columns: 12;--grid-gutter: 20px;--grid-margin: 2.66667rem;--grid-color: var(--color);--header-height: 4rem;--head-padding-vh: 0.25;--about-head-content-offset-vh: 0.15;--menu-color: #fff;--menu-color-bg: #312DFB;--font-size: 15px;--font-size-medium: 1.73333rem;--font-size-huge: 7.63889vw;--font-size-h1: 4.66667rem;--font-size-h2: 1.73333rem;--font-size-h3: 1.46667rem;--font-size-h4: 1.33333rem;--font-size-h5: 1.2rem;--font-size-h6: 1.06667rem}@media (min-width: 1025px){:root{--border-size: 2px}}@media (max-width: 1024px){:root{--border-size: 1px}}@media (max-width: 1024px){:root{--grid-columns: 8;--grid-margin: 1.33333rem}}@media (max-width: 699px){:root{--grid-columns: 4;--grid-gutter: calc(20px/2)}}@media (max-width: 1024px){:root{--font-size-medium: 1.6rem;--font-size-h1: 3.33333rem}}@media (max-width: 699px){:root{--font-size-h1: 2.4rem;--font-size-medium: 18px;--about-head-content-offset-vh: 0.20;--font-size-huge: 40px}}@media (max-width: 699px){:root{--font-size: 15px}}@media (min-width: 700px) and (max-width: 1024px){:root{--font-size: 15px}}@media (min-width: 1025px) and (max-width: 1199px){:root{--font-size: 15px}}@media (min-width: 1200px) and (max-width: 1599px){:root{--font-size: 15px}}@media (min-width: 1600px) and (max-width: 1999px){:root{--font-size: 17px}}@media (min-width: 2000px) and (max-width: 2399px){:root{--font-size: 19px}}@media (min-width: 2400px){:root{--font-size: 21px}}html{min-height:100%;line-height:1.3;font-family:ff("primary");color:var(--color);background-color:var(--color-bg);line-height:1.3;font-size:var(--font-size);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .3s cubic-bezier(0.215, 0.61, 0.355, 1);width:100%}html.is-loading{cursor:wait}html.has-scroll-smooth{overflow:hidden;position:fixed;top:0;left:0;right:0;bottom:0}html.has-scroll-dragging{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}html[data-theme="dark"]{--color-bg: #000;--color: #fff;--menu-color: #000;--menu-color-bg: #DA382E}html[data-theme="primary"]{--color-bg: #DA382E;--menu-color: #fff;--menu-color-bg: #000}html[data-theme="secondary"]{--color-bg: #312DFB;--color: #fff;--menu-color: #000;--menu-color-bg: #fff}body{width:100%}.is-first-loading body{overflow:hidden}::-moz-selection{background-color:var(--color);color:var(--color-bg);text-shadow:none}::selection{background-color:var(--color);color:var(--color-bg);text-shadow:none}a{color:currentColor}a:focus,a:hover{color:currentColor}.focus-visible:not(input):not(textarea){outline-color:var(--color);outline-style:auto;outline-width:10px;outline-offset:5px}.grecaptcha-badge{visibility:hidden}.c-preloader{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000;color:#fff;z-index:9999;transition:opacity .9s cubic-bezier(0.215, 0.61, 0.355, 1)}.c-preloader svg{display:block;width:calc(min(250px, 70vw));height:10vh}html:not(.is-first-loading) .c-preloader{opacity:0;pointer-events:none}.c-preloader_outer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;display:flex;align-items:center;justify-content:center}.c-preloader_logo{display:block;opacity:1;animation:preloaderAppear .9s cubic-bezier(0.215, 0.61, 0.355, 1) .3s;animation-fill-mode:backwards}@keyframes preloaderAppear{0%{opacity:0;transform:scale(0.9) translate3d(0, 0, 0)}100%{opacity:1;transform:scale(1) translate3d(0, 0, 0)}}@keyframes preloaderDisappear{0%{opacity:1;transform:scale(1) translate3d(0, 0, 0)}100%{opacity:0;transform:scale(1.1) translate3d(0, 0, 0)}} </style> <link id="main-css" rel="stylesheet" href="https://locomotive.ca/assets/styles/main.css?v=1723754399977" media="print" onload="this.media='all'; this.onload=null; this.isLoaded=true"> <script async defer src="https://www.google.com/recaptcha/api.js?render=explicit"></script> <!-- Google tag (gtag.js) --> <script type="text/plain" data-category="analytics" src="https://www.googletagmanager.com/gtag/js?id=G-WYYJ9ZP43V"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-WYYJ9ZP43V'); gtag('consent', 'default', { 'ad_storage': 'denied', 'analytics_storage': 'denied' }); </script> </head> <body data-module-load data-load="wrapper" data-module-hovers data-module-cookie-consent data-cookie-consent-config="{"language":{"autoDetect":"document","default":"en","translations":{"en":{"consentModal":{"title":"We use cookies!","description":"Hi, this website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only after consent. {{revisionMessage}} <button class=\"cc__link\" data-cookie-consent=\"show-preferences\">Let me choose</button>","revisionMessage":"<br><br>Our <a href=\"en/privacy-policy?hide-cookie-consent\" target=\"_self\" rel=\"\">privacy policy</a> has changed since your last visit.","footer":"<a href=\"en/privacy-policy?hide-cookie-consent\" target=\"_self\" rel=\"\">privacy policy</a>","acceptAllBtn":"Accept All","acceptNecessaryBtn":"Accept Necessary"},"preferencesModal":{"title":"Cookie preferences","acceptAllBtn":"Accept All","acceptNecessaryBtn":"Accept Necessary","savePreferencesBtn":"Save Preferences","closeIconLabel":"Accept Necessary","sections":[{"description":"We use cookies to personalize content and improve your digital experience. Some cookies are essential in order for the Web site to function correctly and for security purposes. These essential cookies cannot be deactivated.<br><br>You can activate or deactivate your permission for cookies to collect your browsing data at any time. If you deactivate certain cookies, your browsing experience may be affected.<br><br>You can find out more in our <a href=\"en/privacy-policy?hide-cookie-consent\" target=\"_self\" rel=\"\">privacy policy</a>."},{"title":"Strictly necessary cookies<span class=\"pm__badge\">Required</span>","description":"These cookies are set to ensure that our Web site works correctly. They cannot be disabled.","linkedCategory":"necessary","cookieTable":{"headers":{"name":"Name","service":"Service","duration":"Duration","purpose":"Purpose"},"body":[{"name":"PHPSESSID","service":"Locomotive","duration":"Session","purpose":"Used to share functional data across pages of the Web site such as the current language."},{"name":"locomotive.quickpreload","service":"Locomotive","duration":"Session","purpose":"Used to shorten duration of preloading screen on subsequent page navigation."},{"name":"cc_cookie","service":"Locomotive","duration":"6 months","purpose":"Used to remember your cookie consent preferences."},{"name":"_grecaptcha","service":"Google reCAPTCHA","duration":"6 months","purpose":"Used to store the assessment if the visit, interaction, or form submission, is legitimate or malicious."},{"name":"__cf_bm","service":"Cloudflare","duration":"30 minutes","purpose":"Used to store the assessment if the visit is legitimate or malicious."}]}},{"title":"Performance cookies","description":"These cookies are used to analyze site browsing to improve how well it works.","linkedCategory":"analytics","cookieTable":{"headers":{"name":"Name","service":"Service","duration":"Duration","purpose":"Purpose"},"body":[{"name":"_ga","service":"Google Analytics","duration":"2 years","purpose":"Used to distinguish unique users and count page views."},{"name":"_gat","service":"Google Analytics","duration":"1 minute","purpose":"Used to limit the frequency of data collection."},{"name":"_gid","service":"Google Analytics","duration":"1 day","purpose":"Used to distinguish unique users and count page views."}]}}]}}}},"guiOptions":{"consentModal":{"layout":"box inline","position":"bottom right","equalWeightButtons":false},"preferencesModal":{"equalWeightButtons":false}},"revision":1,"categories":{"necessary":{"enabled":true,"readOnly":true},"analytics":{"autoClear":{"cookies":[{"name":"_ga"},{"name":"_gat"},{"name":"_gid"},{"name":"/^_gat?_/"}]}}}}"> <script> window.preloaderEnterPromise = new Promise(resolve => { setTimeout(resolve, 1200); }) window.preloaderPromise = new Promise(resolve => { window.preloaderPromiseResolve = resolve; }) </script> <div class="c-preloader" aria-hidden="true" id="preloader"> <div class="c-preloader_outer"> <div class="c-preloader_inner"> <div class="c-preloader_head" id="preloaderHead" style="display: none;"> </div> <div class="c-preloader_content" id="preloaderContent" style="display: none;"> <div> Digital<br> Digital-First<br> Digital-First Design<br> Digital-First Design<br> Digital-First Agency<br> Digital-First Agency<br> </div> <div> Based<br> Based in<br> Based in Montreal<br> Based in Montreal<br> Based in Montreal, Canada<br> Based in Montreal, Canada<br> Based in Montreal, Canada<br> </div> </div> <div class="c-preloader_logo"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 246.5033 33.28001" id="preloaderLogo"> <g> <path d="M0,.64v32H32V.64Zm30,30H2v-28H30Z" transform="translate(0 0.00001)"/> <polygon points="20.12 19.4 16.12 19.4 16.12 12.32 14.24 12.32 14.24 20.96 20.12 20.96 20.12 19.4"/> </g> <path d="M52.41557,8.24h-6.4l2.28-2.28c2.32-2.32,4-3.2,6.12-3.2s3.8.88,6.12,3.2l2.28,2.28h-6.4v1.6h7.6v7.6h1.6v-6.4l6,6,1.2-1.2-6-6h6.4V8.24h-7.6V.64h-1.6v6.4l-2.28-2.28c-2.6-2.6-4.64-3.6-7.32-3.6s-4.72,1-7.32,3.6l-2.28,2.28V.64h-1.6v7.6h-7.6v1.6h6.4l-6,6,1.2,1.2,6-6v6.4h1.6V9.84h7.6Z" transform="translate(0 0.00001)"/> <path d="M86.13717.64h-10.52v.84c3.84,0,4.16.52,4.16,2.96v24.4c0,2.44-.32,2.96-4.16,2.96v.84h18.96l.12-.52,1.92-9.48-.84-.16c-1.64,7.96-2.36,8.8-4.96,8.8h-6.84c-1.64,0-2-.4-2-2.36V4.44c0-2.44.32-2.96,4.16-2.96Z" transform="translate(0 0.00001)"/> <path d="M105.56207,10.96c-4.72,0-7.4002,5.08-7.4002,11.24,0,6.28,3.04022,11.08,7.4002,11.08,4.68,0,7.36-5.08,7.36-11.24C112.92206,15.76,109.88208,10.96,105.56207,10.96Zm0,21c-3.2,0-5.2-4.36-5.2-9.76,0-5.36,1.72-9.92,5.2-9.92,3.16,0,5.2,4.36,5.2,9.76C110.76208,27.4,109.00208,31.96,105.56207,31.96Z" transform="translate(0 0.00001)"/> <path d="M121.77708,33.28c3.6,0,5.16-3.32,6.08-10.56l-.84-.16c-1.04,6.68-2.28,8.76-4.6,8.76-3.04,0-4.8-4.4-4.8-9.64,0-4.64,1.32-9.4,4.8-9.4a2.04221,2.04221,0,0,1,2.24,2.24c0,.84-.28,1.64-.28,2.2a1.25663,1.25663,0,0,0,1.28,1.36c1,0,1.56-.8,1.56-2.24a4.66084,4.66084,0,0,0-4.43418-4.877q-.18279-.00869-.36582-.003c-4.52,0-6.96,5.04-6.96,11.44C115.45707,28.68,117.77707,33.28,121.77708,33.28Z" transform="translate(0 0.00001)"/> <path d="M136.9881,10.96c-4.72,0-7.4,5.08-7.4,11.24,0,6.28,3.04,11.08,7.4,11.08,4.68,0,7.36-5.08,7.36-11.24C144.34808,15.76,141.30811,10.96,136.9881,10.96Zm0,21c-3.2,0-5.2-4.36-5.2-9.76,0-5.36,1.72-9.92,5.2-9.92,3.16,0,5.2,4.36,5.2,9.76C142.18811,27.4,140.4281,31.96,136.9881,31.96Z" transform="translate(0 0.00001)"/> <path d="M146.17506,32.64h7.08V31.8c-2.2,0-2.48-.48-2.48-2.96V16.04c1.44-1.88,2.88-3.2,4.64-3.2,1.64,0,2.56,1.12,2.56,3.52V28.84c0,2.48-.28,2.96-2.48,2.96v.84h6.96V31.8c-2.2,0-2.48-.48-2.48-2.96v-13c1.4-1.76,2.84-3,4.52-3,1.6,0,2.52,1.12,2.52,3.52V28.84c0,2.48-.28,2.96-2.48,2.96v.84h7.04V31.8c-2.28,0-2.56-.48-2.56-2.96V16.28c0-3.16-1.08-5.32-3.76-5.32-2.32,0-3.88,1.56-5.32,3.76h-.08c-.32-2.28-1.44-3.76-3.68-3.76-2.28,0-3.88,1.56-5.28,3.76h-.12V12.08l-.52-.48h-4.36v.84c2.52,0,2.84.48,2.84,3v13.4c0,2.48-.28,2.96-2.56,2.96Z" transform="translate(0 0.00001)"/> <path d="M180.3681,10.96c-4.72,0-7.4,5.08-7.4,11.24,0,6.28,3.04,11.08,7.4,11.08,4.68,0,7.36-5.08,7.36-11.24C187.72809,15.76,184.68811,10.96,180.3681,10.96Zm0,21c-3.2,0-5.2-4.36-5.2-9.76,0-5.36,1.72-9.92,5.2-9.92,3.16,0,5.2,4.36,5.2,9.76C185.56805,27.4,183.80811,31.96,180.3681,31.96Z" transform="translate(0 0.00001)"/> <path d="M199.87808,22.72l-.84-.16c-1.4,6.68-2.12,8.92-3.44,8.92-1.8,0-1.96-2.8-1.96-6.72V12.92h4.88V11.6h-4.88V6h-1c-.08,3.4-1.08,5.8-3.92,5.8v1.12h2.92V26.2c0,5.28,1.28,7.08,3.48,7.08,2.76,0,3.48-3.32,4.76-10.56Z" transform="translate(0 0.00001)"/> <g> <path d="M205.82108,28.84V12.08l-.48-.48h-4.24v.84c2.44,0,2.72.48,2.72,3v13.4c0,2.48-.28,2.96-2.6,2.96v.84h7.2V31.8C206.10107,31.8,205.82108,31.32,205.82108,28.84Z" transform="translate(0 0.00001)"/> <rect x="202.34108" y="3.36001" width="3.96001" height="3.56"/> </g> <path d="M220.75908,15.24l-3.96,13.64h-.2l-3.88-13.64c-.68-2.36-.72-2.8,2-2.8V11.6h-7.28v.84c1.8,0,2.36.44,3.08,2.8l5.2,17.76h1.12l5.28-17.76c.72-2.36,1.32-2.8,3.24-2.8V11.6h-6.56v.84c2.72,0,2.68.44,1.96,2.8Z" transform="translate(0 0.00001)"/> <path d="M236.76508,22.56c-1.04,6.68-2.68,8.8-4.76,8.8-3.24,0-5.04-4.36-5.04-9.6,0-.44,0-.84.04-1.28h10.36c0-5.56-2.16-9.52-5.92-9.52-4.16,0-6.6,5.12-6.6,11.48,0,6.28,2.36,10.84,6.56,10.84,3.44,0,5.28-3.32,6.2-10.56Zm-5.32-10.28c2.72,0,3.76,3.68,3.76,6.88h-8.08C227.52509,15.4,228.92511,12.28,231.44507,12.28Z" transform="translate(0 0.00001)"/> <g> <path d="M241.66309,0a4.86034,4.86034,0,1,0,4.84,4.92l.00012-.01178A4.87429,4.87429,0,0,0,241.66309,0Zm0,9.04q-.03132.00018-.0625,0a4.08887,4.08887,0,0,1-4.0575-4.12q-.00064-.04239-.00043-.08471A4.09794,4.09794,0,0,1,241.66309.76q.04422.00018.08856.00134A4.05635,4.05635,0,0,1,245.70306,4.92l.00068.06714A4.04677,4.04677,0,0,1,241.66309,9.04Z" transform="translate(0 0.00001)"/> <path d="M242.23743,5.24692A1.49633,1.49633,0,0,0,243.743,3.76q-.00045-.06555-.00653-.13092a1.53782,1.53782,0,0,0-1.67346-1.389h-2.16V7.48h.72V5.24h.64l1.64,2.24h.88l-1.68-2.24C242.14771,5.24429,242.19257,5.24661,242.23743,5.24692ZM240.62305,4.6V2.96h1.36c.64,0,1,.28,1,.8,0,.52-.4.84-1,.84Z" transform="translate(0 0.00001)"/> </g> </svg> </div> </div> </div> </div> <div class="c-header_bg"></div> <div data-load="container"> <header data-module-header> <div class="c-header" data-header="header"> <a href="en" class="c-header_logo" data-header="logo"> <span class="c-header_logo_inner" data-hover-shuffle>Locomotive</span>庐 </a> <span aria-hidden="true" class="c-header_icon"></span> <nav class="c-header_menu || c-header-menu"> <ul class="c-header-menu_list"> <li class="c-header-menu_item"><a href="en/work" class="c-header-menu_link" data-hover-shuffle>Work</a></li> <li class="c-header-menu_item"><a href="en/agency" class="c-header-menu_link" data-hover-shuffle>Agency</a></li> <li class="c-header-menu_item"><a href="en/careers" class="c-header-menu_link" data-hover-shuffle>Careers</a></li> <li class="c-header-menu_item"> <a target="_blank" rel="noopener noreferrer" href="https://store.locomotive.ca" class="c-header-menu_link" data-hover-shuffle>Store</a> </li> </ul> </nav> <a href="en/contact" class="c-header_cta -current" data-hover-shuffle>Let's talk</a> <button class="c-header_menu-toggler" data-header="menu-toggler" data-header-open-label="Menu" data-header-close-label="Close" aria-expanded="false" aria-controls="mobile-menu" aria-label="Navigation mobile"> Menu </button> </div> <nav class="c-menu" data-header="menu" id="mobile-menu" aria-label="Navigation mobile"> <div class="c-menu_inner"> <ul class="c-menu_nav"> <li class="c-menu_nav_item"> <a href="en/work" class="c-menu_nav_link ">Work</a> </li> <li class="c-menu_nav_item"> <a href="en/agency" class="c-menu_nav_link ">Agency</a> </li> <li class="c-menu_nav_item"> <a href="en/careers" class="c-menu_nav_link ">Careers</a> </li> <li class="c-menu_nav_item"> <a href="en/contact" class="c-menu_nav_link -current">Let's talk</a> </li> <li class="c-menu_nav_item"> <a class="c-menu_nav_link" target="_blank" rel="noopener noreferrer" href="https://store.locomotive.ca">Store</a> </li> </ul> <div class="c-menu_footer"> <a href="https://locomotive.ca/fr/contact" class="c-menu_langswitcher" data-load="false">Fran莽ais</a> <span class="c-menu_location"> <span class="u-screen-reader-text">Montr茅al, Quebec</span> <span aria-hidden="true">馃洃馃毠馃毢</span> </span> </div> </div> </nav> </header> <main> <div class="c-lisa" data-module-lisa data-lisa-content="{"intro":{"progress":0.1,"next":"greeting","dialog":{"list":{"lisa.intro":"Hi there, I am L.I.S.A,<br>Locomotive\u2019s Interactive Super Assistant"}}},"greeting":{"progress":0.2,"dialog":{"useContext":true,"list":{"generic":{"lisa.greeting.generic.1":"Hola. Bonjour. Ciao. Just got back from Europe and I am feeling *so* cultured. How may I assist you today?","lisa.greeting.generic.2":"There you are! I\u2019ve been waiting and these heels are killing me. What can I do for you?","lisa.greeting.generic.3":"Love - Your - Outfit - Honey. How can I help you, fabulous?"},"context":{"lisa.greeting.context.1":{"lisa.greeting.context.1.night.sunny":"How can I be of assistance on this<br> sunny night in Montreal?","lisa.greeting.context.1.night.beautiful":"How can I be of assistance on this<br> beautiful night in Montreal?","lisa.greeting.context.1.night.rainy":"How can I be of assistance on this<br> rainy night in Montreal?","lisa.greeting.context.1.night.cold":"How can I be of assistance on this<br> cold night in Montreal?","lisa.greeting.context.1.night.windy":"How can I be of assistance on this<br> windy night in Montreal?","lisa.greeting.context.1.night.foggy":"How can I be of assistance on this<br> foggy night in Montreal?","lisa.greeting.context.1.night.cloudy":"How can I be of assistance on this<br> cloudy night in Montreal?","lisa.greeting.context.1.night.hot":"How can I be of assistance on this<br> hot night in Montreal?","lisa.greeting.context.1.morning.sunny":"How can I be of assistance on this<br> sunny morning in Montreal?","lisa.greeting.context.1.morning.beautiful":"How can I be of assistance on this<br> beautiful morning in Montreal?","lisa.greeting.context.1.morning.rainy":"How can I be of assistance on this<br> rainy morning in Montreal?","lisa.greeting.context.1.morning.cold":"How can I be of assistance on this<br> cold morning in Montreal?","lisa.greeting.context.1.morning.windy":"How can I be of assistance on this<br> windy morning in Montreal?","lisa.greeting.context.1.morning.foggy":"How can I be of assistance on this<br> foggy morning in Montreal?","lisa.greeting.context.1.morning.cloudy":"How can I be of assistance on this<br> cloudy morning in Montreal?","lisa.greeting.context.1.morning.hot":"How can I be of assistance on this<br> hot morning in Montreal?","lisa.greeting.context.1.afternoon.sunny":"How can I be of assistance on this<br> sunny afternoon in Montreal?","lisa.greeting.context.1.afternoon.beautiful":"How can I be of assistance on this<br> beautiful afternoon in Montreal?","lisa.greeting.context.1.afternoon.rainy":"How can I be of assistance on this<br> rainy afternoon in Montreal?","lisa.greeting.context.1.afternoon.cold":"How can I be of assistance on this<br> cold afternoon in Montreal?","lisa.greeting.context.1.afternoon.windy":"How can I be of assistance on this<br> windy afternoon in Montreal?","lisa.greeting.context.1.afternoon.foggy":"How can I be of assistance on this<br> foggy afternoon in Montreal?","lisa.greeting.context.1.afternoon.cloudy":"How can I be of assistance on this<br> cloudy afternoon in Montreal?","lisa.greeting.context.1.afternoon.hot":"How can I be of assistance on this<br> hot afternoon in Montreal?","lisa.greeting.context.1.evening.sunny":"How can I be of assistance on this<br> sunny evening in Montreal?","lisa.greeting.context.1.evening.beautiful":"How can I be of assistance on this<br> beautiful evening in Montreal?","lisa.greeting.context.1.evening.rainy":"How can I be of assistance on this<br> rainy evening in Montreal?","lisa.greeting.context.1.evening.cold":"How can I be of assistance on this<br> cold evening in Montreal?","lisa.greeting.context.1.evening.windy":"How can I be of assistance on this<br> windy evening in Montreal?","lisa.greeting.context.1.evening.foggy":"How can I be of assistance on this<br> foggy evening in Montreal?","lisa.greeting.context.1.evening.cloudy":"How can I be of assistance on this<br> cloudy evening in Montreal?","lisa.greeting.context.1.evening.hot":"How can I be of assistance on this<br> hot evening in Montreal?"},"lisa.greeting.context.2":{"lisa.greeting.context.2.night.sunny":"What can I do for you on this<br> sunny night in Montreal?","lisa.greeting.context.2.night.beautiful":"What can I do for you on this<br> beautiful night in Montreal?","lisa.greeting.context.2.night.rainy":"What can I do for you on this<br> rainy night in Montreal?","lisa.greeting.context.2.night.cold":"What can I do for you on this<br> cold night in Montreal?","lisa.greeting.context.2.night.windy":"What can I do for you on this<br> windy night in Montreal?","lisa.greeting.context.2.night.foggy":"What can I do for you on this<br> foggy night in Montreal?","lisa.greeting.context.2.night.cloudy":"What can I do for you on this<br> cloudy night in Montreal?","lisa.greeting.context.2.night.hot":"What can I do for you on this<br> hot night in Montreal?","lisa.greeting.context.2.morning.sunny":"What can I do for you on this<br> sunny morning in Montreal?","lisa.greeting.context.2.morning.beautiful":"What can I do for you on this<br> beautiful morning in Montreal?","lisa.greeting.context.2.morning.rainy":"What can I do for you on this<br> rainy morning in Montreal?","lisa.greeting.context.2.morning.cold":"What can I do for you on this<br> cold morning in Montreal?","lisa.greeting.context.2.morning.windy":"What can I do for you on this<br> windy morning in Montreal?","lisa.greeting.context.2.morning.foggy":"What can I do for you on this<br> foggy morning in Montreal?","lisa.greeting.context.2.morning.cloudy":"What can I do for you on this<br> cloudy morning in Montreal?","lisa.greeting.context.2.morning.hot":"What can I do for you on this<br> hot morning in Montreal?","lisa.greeting.context.2.afternoon.sunny":"What can I do for you on this<br> sunny afternoon in Montreal?","lisa.greeting.context.2.afternoon.beautiful":"What can I do for you on this<br> beautiful afternoon in Montreal?","lisa.greeting.context.2.afternoon.rainy":"What can I do for you on this<br> rainy afternoon in Montreal?","lisa.greeting.context.2.afternoon.cold":"What can I do for you on this<br> cold afternoon in Montreal?","lisa.greeting.context.2.afternoon.windy":"What can I do for you on this<br> windy afternoon in Montreal?","lisa.greeting.context.2.afternoon.foggy":"What can I do for you on this<br> foggy afternoon in Montreal?","lisa.greeting.context.2.afternoon.cloudy":"What can I do for you on this<br> cloudy afternoon in Montreal?","lisa.greeting.context.2.afternoon.hot":"What can I do for you on this<br> hot afternoon in Montreal?","lisa.greeting.context.2.evening.sunny":"What can I do for you on this<br> sunny evening in Montreal?","lisa.greeting.context.2.evening.beautiful":"What can I do for you on this<br> beautiful evening in Montreal?","lisa.greeting.context.2.evening.rainy":"What can I do for you on this<br> rainy evening in Montreal?","lisa.greeting.context.2.evening.cold":"What can I do for you on this<br> cold evening in Montreal?","lisa.greeting.context.2.evening.windy":"What can I do for you on this<br> windy evening in Montreal?","lisa.greeting.context.2.evening.foggy":"What can I do for you on this<br> foggy evening in Montreal?","lisa.greeting.context.2.evening.cloudy":"What can I do for you on this<br> cloudy evening in Montreal?","lisa.greeting.context.2.evening.hot":"What can I do for you on this<br> hot evening in Montreal?"}},"cold":{"lisa.greeting.cold.1":"It\u2019s so cold in Montreal my circuits got frost-byte. Once I\u2019ve warmed up, how can I help?"},"hot":{"lisa.greeting.hot.1":"It\u2019s just so hot in Montreal right now, my motherboard is melting. So, how can I help?"},"rainy":{"lisa.greeting.rainy.1":"All this rain in Montreal is killing my hair game. Oh wait, I don\u2019t have hair. How can I help?"},"sunny":{"lisa.greeting.sunny.1":"It\u2019s beautiful in Montreal today! Yes, I know I\u2019m beautiful too \u2014 thanks. If you\u2019re done flirting, what can I do for you?"}}},"choices":[{"label":"Start a project","modelUpdate":{"key":"goal","value":"rfp"},"target":"project"},{"label":"Join the team","modelUpdate":{"key":"goal","value":"job"},"target":"team"},{"label":"Apply for an internship","modelUpdate":{"key":"goal","value":"internship"},"target":"reference"},{"label":"Drop a quick word","modelUpdate":{"key":"goal","value":"quick-word"},"target":"reference"},{"label":"About us","href":"en\/agency"}]},"project":{"progress":0.3,"dialog":{"list":{"lisa.project.1":"So you would like to work with one of the best teams in the world? What kind of project would you like us to craft for you?","lisa.project.2":"So you want to work with us? We are pretty #goal-oriented. What can we do for you?","lisa.project.3":"My horoscope said two things: avoid salmon and that you\u2019d come. However, the stars didn\u2019t tell us about your project. Can you?","lisa.project.4":"Want to work with our team? Who wouldn\u2019t? What kind of dream project can we make a reality?","lisa.project.5":"Ancient proverb: Work with Locomotive, be happy for the rest of your life. What kind of project can we build for you?"},"dynasty":{"lisa.project.dynasty.1":"So, you wanna work with champions? What kind of project do you have in mind for us?"}},"choices":[{"label":"Complete Website","modelUpdate":{"key":"projectType","value":"complete-website"},"target":"budget"},{"label":"UX & Web Design","modelUpdate":{"key":"projectType","value":"ux-web-design"},"target":"budget"},{"label":"Branding","modelUpdate":{"key":"projectType","value":"branding"},"target":"budget"},{"label":"Branding & Web","modelUpdate":{"key":"projectType","value":"branding-web"},"target":"budget"},{"label":"Digital Campaign","modelUpdate":{"key":"projectType","value":"digital-campaign"},"target":"budget"}]},"team":{"progress":0.5,"dialog":{"list":{"lisa.team.1":"So you would like to join the team? What position would you like to apply for?","lisa.team.2":"So you want to play with the top dogs? Woof. How do you want to run with the pack?","lisa.team.3":"Yeah, we know we\u2019re the best. What are *you* the best at?","lisa.team.4":"There is no \u201cI\u201d in \u201cteam\u201d, but we might be looking for \u201cU\u201d. What position catches your eye?","lisa.team.5":"Take your shoes off and stay a while! Chill, we\u2019re not fancy here. What position interests you?"},"dynasty":{"lisa.team.dynasty.1":"Ready to join the champions' league? Which position ignites your passion in our winning team?"}},"choices":[{"label":"Project Manager","modelUpdate":{"key":"jobOffer","value":"0c09d5e1-cc3e-4185-bcac-6fe8f8026f03"},"target":"reference"},{"label":"UX Strategist","modelUpdate":{"key":"jobOffer","value":"5cc35a48-c031-4b90-b41d-12829d90d204"},"target":"reference"},{"label":"Art Director","modelUpdate":{"key":"jobOffer","value":"f9526a1c-aad1-4d86-b25c-4b246a6b75cb"},"target":"reference"},{"label":"Front-end developer","modelUpdate":{"key":"jobOffer","value":"11dad666-cf47-431c-86c1-6263f9f79f81"},"target":"reference"},{"label":"Back-end developer","modelUpdate":{"key":"jobOffer","value":"3fa561c2-e403-4390-a3d4-615fff572ff4"},"target":"reference"}]},"budget":{"progress":0.5,"dialog":{"key":"projectType","keyMode":"concat","list":{"lisa.budget.1":{"lisa.budget.1.web-development":"What is your budget range for this Web Development project?","lisa.budget.1.ux-web-design":"What is your budget range for this UX & Web Design project?","lisa.budget.1.complete-website":"What is your budget range for this Complete Website project?","lisa.budget.1.branding":"What is your budget range for this Branding project?","lisa.budget.1.branding-web":"What is your budget range for this Branding & Web project?"},"lisa.budget.2":{"lisa.budget.2.web-development":"Not to be awkward, but what\u2019s your budget range for this Web Development project?","lisa.budget.2.ux-web-design":"Not to be awkward, but what\u2019s your budget range for this UX & Web Design project?","lisa.budget.2.complete-website":"Not to be awkward, but what\u2019s your budget range for this Complete Website project?","lisa.budget.2.branding":"Not to be awkward, but what\u2019s your budget range for this Branding project?","lisa.budget.2.branding-web":"Not to be awkward, but what\u2019s your budget range for this Branding & Web project?"},"lisa.budget.3":{"lisa.budget.3.web-development":"They say the best things in life are free. They lied. What\u2019s your budget range for this Web Development project?","lisa.budget.3.ux-web-design":"They say the best things in life are free. They lied. What\u2019s your budget range for this UX & Web Design project?","lisa.budget.3.complete-website":"They say the best things in life are free. They lied. What\u2019s your budget range for this Complete Website project?","lisa.budget.3.branding":"They say the best things in life are free. They lied. What\u2019s your budget range for this Branding project?","lisa.budget.3.branding-web":"They say the best things in life are free. They lied. What\u2019s your budget range for this Branding & Web project?"},"lisa.budget.4":{"lisa.budget.4.web-development":"You can\u2019t put a price on happiness \u2014 oh wait, yes we can! What\u2019s your budget range for this Web Development project?","lisa.budget.4.ux-web-design":"You can\u2019t put a price on happiness \u2014 oh wait, yes we can! What\u2019s your budget range for this UX & Web Design project?","lisa.budget.4.complete-website":"You can\u2019t put a price on happiness \u2014 oh wait, yes we can! What\u2019s your budget range for this Complete Website project?","lisa.budget.4.branding":"You can\u2019t put a price on happiness \u2014 oh wait, yes we can! What\u2019s your budget range for this Branding project?","lisa.budget.4.branding-web":"You can\u2019t put a price on happiness \u2014 oh wait, yes we can! What\u2019s your budget range for this Branding & Web project?"},"lisa.budget.5":{"lisa.budget.5.web-development":"Is it rude to talk about money? I have no manners, I\u2019m a computer. What\u2019s your budget range for this Web Development project?","lisa.budget.5.ux-web-design":"Is it rude to talk about money? I have no manners, I\u2019m a computer. What\u2019s your budget range for this UX & Web Design project?","lisa.budget.5.complete-website":"Is it rude to talk about money? I have no manners, I\u2019m a computer. What\u2019s your budget range for this Complete Website project?","lisa.budget.5.branding":"Is it rude to talk about money? I have no manners, I\u2019m a computer. What\u2019s your budget range for this Branding project?","lisa.budget.5.branding-web":"Is it rude to talk about money? I have no manners, I\u2019m a computer. What\u2019s your budget range for this Branding & Web project?"}}},"choices":{"key":"projectType","value":{"complete-website":[{"label":"50k - 75k","modelUpdate":{"key":"budget","value":"50-75"},"target":"reference"},{"label":"75k - 100k","modelUpdate":{"key":"budget","value":"75-100"},"target":"reference"},{"label":"100k - 150k","modelUpdate":{"key":"budget","value":"100-150"},"target":"reference"},{"label":"150k +","modelUpdate":{"key":"budget","value":"150+"},"target":"reference"}],"ux-web-design":[{"label":"25k - 50k","modelUpdate":{"key":"budget","value":"25-50"},"target":"reference"},{"label":"50k - 75k","modelUpdate":{"key":"budget","value":"50-75"},"target":"reference"},{"label":"75k - 100k","modelUpdate":{"key":"budget","value":"75-100"},"target":"reference"},{"label":"100k +","modelUpdate":{"key":"budget","value":"100+"},"target":"reference"}],"branding":[{"label":"15k - 30k","modelUpdate":{"key":"budget","value":"15-30"},"target":"reference"},{"label":"30k - 50k","modelUpdate":{"key":"budget","value":"30-50"},"target":"reference"},{"label":"50k +","modelUpdate":{"key":"budget","value":"50+"},"target":"reference"}],"branding-web":[{"label":"50k - 75k","modelUpdate":{"key":"budget","value":"50-75"},"target":"reference"},{"label":"75k - 100k","modelUpdate":{"key":"budget","value":"75-100"},"target":"reference"},{"label":"100k +","modelUpdate":{"key":"budget","value":"100+"},"target":"reference"}],"digital-campaign":[{"label":"30k - 50k","modelUpdate":{"key":"budget","value":"30-50"},"target":"reference"},{"label":"50k - 75k","modelUpdate":{"key":"budget","value":"50-75"},"target":"reference"},{"label":"75k - 100k","modelUpdate":{"key":"budget","value":"75-100"},"target":"reference"},{"label":"100k +","modelUpdate":{"key":"budget","value":"100+"},"target":"reference"}]}}},"reference":{"progress":0.7,"dialog":{"list":{"lisa.reference.1":"How did you learn about Locomotive?","lisa.reference.2":"We\u2019re not in the history books *yet*, so how\u2019d you learn about us?","lisa.reference.3":"This is not Fight Club. We love people talking about us. How\u2019d you hear about Locomotive?","lisa.reference.4":"So who can I give props to for telling you about Locomotive?","lisa.reference.5":"Who\u2019s been spilling the beans about Locomotive?","lisa.reference.6":"Word on the street is\u2026 well, we\u2019re the word on the street! So where\u2019d you hear about Locomotive?"}},"choices":{"awards-website":{"label":"Awards Websites","modelUpdate":{"key":"leadOrigin","value":"awards-website"},"target":"details"},"project":{"label":"A project we did","modelUpdate":{"key":"leadOrigin","value":"project"},"target":"details"},"article":{"label":"An article","modelUpdate":{"key":"leadOrigin","value":"article"},"target":"details"},"friend":{"label":"A friend","modelUpdate":{"key":"leadOrigin","value":"friend"},"target":"details"},"word":{"label":"Word on the street","modelUpdate":{"key":"leadOrigin","value":"word"},"target":"details"}}},"details":{"progress":0.8,"dialog":{"key":"goal","keyMode":"random","list":{"job":{"lisa.details.team.1":"Ok, now give us more details about yourself.","lisa.details.team.2":"Now, tell me more about you. Then, a fight to the death with your competition! Joking\u2026 or, am I?","lisa.details.team.3":"I can already tell I\u2019m going to like you. Tell me more about yourself.","lisa.details.team.4":"Tell me a little more about yourself. Don\u2019t worry, I took a sociology class and am *so* open-minded and non-judgemental.","lisa.details.team.5":"Now that we\u2019re basically BFFs, tell me more about yourself."},"rfp":{"lisa.details.project.1":"Sweet, now give us more details about your project?","lisa.details.project.2":"Kk now can you tell me more about your project?","lisa.details.project.3":"Now please fill this questionnaire about your project. It\u2019s like a Buzzfeed quiz \u2014 people still do those, right?","lisa.details.project.4":"We\u2019re mind-blowers, not mind-readers. Tell us more about your project.","lisa.details.project.5":"Now that we\u2019re BFFs, tell me more about your project."},"internship":{"lisa.details.internship.1":"Great, now give us more details about yourself."},"quick-word":{"lisa.details.general.1":"Wonderful, now give us more details about your request."}}},"showForm":true},"confirmation":{"progress":1,"dialog":{"key":"goal","keyMode":"random","list":{"job":{"lisa.confirmation.team.1":"Thank you for considering Locomotive for your next career move. Keep in mind we get a lot of inquiries every day, but if the fit is there we will contact you very swiftly.","lisa.confirmation.team.2":"Thanks for wanting to join Locomotive. We get a lot of inquiries daily, but we\u2019ll be in touch if the fit is right! Ciao.","lisa.confirmation.team.3":"You\u2019re cool. I like you. If the family agrees, we\u2019ll be in touch. Thanks for considering Locomotive!","lisa.confirmation.team.4":"Thanks for considering Locomotive! We\u2019ll be in touch if we feel the fit is on-point. It\u2019s been good hanging out.","lisa.confirmation.team.5":"Was it good for you? It was good for me. Thanks for considering Locomotive. If we think the fit is right, we\u2019ll be in touch ASAP."},"rfp":{"lisa.confirmation.project.1":"Thank you for your trust in Locomotive. We will get back to you within 24h","lisa.confirmation.project.2":"Thanks for trusting Locomotive. We\u2019ll get back to you within 24 hours starting\u2026 now!","lisa.confirmation.project.3":"Don\u2019t tell the others, but you\u2019re my new favourite. Thanks for trusting us. We\u2019ll be in touch within 24 hours.","lisa.confirmation.project.4":"Thanks for choosing to hang with Locomotive. We\u2019ll hit you up within the next 24 hours.","lisa.confirmation.project.5":"Thanks for sliding into Locomotive\u2019s DMs. We\u2019re excited to see where this goes. Talk to you within the next 24 hours, k?"},"internship":{"lisa.confirmation.internship.1":"Thank you. Keep in mind we get a lot of inquiries every day, but if the fit is there we will contact you very swiftly."},"quick-word":{"lisa.confirmation.general.1":"Thank you. We get a lot of inquiries daily, but we\u2019ll be in touch soon."}}},"choices":[{"label":"Start over","target":"greeting"},{"label":"Back to the website","href":"en"}]}}" data-lisa-confirm-quit-label="Are you sure you want to quit LISA? By doing so, you will lose your progression"> <audio ref="audio" src="/assets/lisa/en/lisa.intro.mp3" @ended="sentenceEnded" @pause="sentenceEnded" @play="speaking = true" ></audio> <lisa-visualizer ref="visualizer"></lisa-visualizer> <lisa-disclaimer v-if="showAudioDisclaimer"></lisa-disclaimer> <template v-else> <transition mode="out-in"> <lisa-step ref="step" locale="en" :key="currentStepSlug" :step="currentStep" :step-slug="currentStepSlug" :show-step-content="showStepContent" :muted="muted" @next="next" @go-to-step="goToStep" @navigate-to="navigateTo" @play-audio="playAudio" @step-intro-update="updateStepIntro"> </lisa-step> </transition> <button class="c-lisa_sound" :class="{ '-muted': muted }" type="button" @click="muteToggle"> <span class="u-screen-reader-text">lisa.toggle-sound</span> <div class="c-lisa_sound-icon -on" aria-hidden="true"> <svg role="img"><use xlink:href="assets/images/sprite.svg#sound-on"></use></svg> </div> <div class="c-lisa_sound-icon -off" aria-hidden="true"> <svg role="img"><use xlink:href="assets/images/sprite.svg#sound-off"></use></svg> </div> </button> <transition> <button ref="backbtn" class="c-lisa_back" v-if="canGoBack" @click="back"> <span class="u-screen-reader-text">lisa.back</span> <svg role="img"><use xlink:href="assets/images/sprite.svg#back"></use></svg> </button> </transition> <div class="c-lisa_progress" :style="'--progress: '+progress+';'"></div> </template> </div> <script type="text/x-template" id="lisa-template-step"> <div class="c-lisa_step || c-lisa-step" :class="{ '-expanded': showStepContent }"> <lisa-dialog ref="dialog" class="c-lisa-step_dialog" :data-subtitle="lisaUserData.goal ? lisaUserData.goal.label : ''" :sentence="sentence" @completed="completeIntro"> </lisa-dialog> <button class="c-lisa-step_skip" v-if="!muted && !showStepContent">Skip</button> <div class="c-lisa-step_content"> <template v-if="slotGiven"> <slot></slot> </template> <lisa-form v-else-if="step.showForm" ref="form" @success="$emit('goToStep', 'confirmation')"> </lisa-form> <div class="c-lisa-step_choices" v-else-if="availableChoices"> <button class="c-lisa_button || c-lisa-step_choice" v-for="choice in availableChoices" @click="choose" :data-target="choice.target" :data-key="choice.modelUpdate ? choice.modelUpdate.key : null" :data-value="choice.modelUpdate ? choice.modelUpdate.value : null" :data-href="choice.href"> {(choice.label)} </button> </div> </div> <transition> <span class="c-lisa-step_footer" v-if="stepSlug == 'greeting' && showStepContent"> Email us: <a href="mailto:info@locomotive.ca" @click="copyToClipboard" data-confirmation="Copied to clipboard!" data-to-copy="info@locomotive.ca">info@locomotive.ca</a> </span> </transition> </div> </script> <script type="text/x-template" id="lisa-template-form"> <form :action="lisaUserData.goal.value" class="c-lisa_form" @submit.prevent.stop="submit"> <input v-for="name in Object.keys(lisaUserData)" type="hidden" :name="name" :value="lisaUserData[name].value"> <template v-if="lisaUserData.goal.value == 'internship'"> <div class="o-layout -gutter-small"> <div class="o-layout_item u-1/2@from-small"> <label class="c-form_label" for="firstName">First Name *</label> <input type="text" name="firstName" class="c-form_input" id="firstName" required> </div> <div class="o-layout_item u-1/2@from-small"> <label class="c-form_label" for="lastName">Last Name *</label> <input type="text" name="lastName" class="c-form_input" id="lastName" required> </div> <div class="o-layout_item u-1/2@from-small"> <label class="c-form_label" for="telephone">Telephone</label> <input type="phone" name="telephone" class="c-form_input" id="telephone"> </div> <div class="o-layout_item u-1/2@from-small"> <label class="c-form_label" for="email">Email *</label> <input type="email" name="email" class="c-form_input" id="email" required> </div> <div class="o-layout_item"> <label class="c-form_label" for="resume">Resume (pdf) *</label> <file-pond id="resume" name="resume" ref="pond" credits="false" server="/file-pond" maxFileSize="10MB" label-idle="Drag & Drop your files or <span class='filepond--label-action'> Browse </span>" label-file-processing="Uploading" label-file-processing-complete="Upload complete" label-tap-to-undo="tap to undo" label-tap-to-cancel="tap to cancel" :acceptedFileTypes="['application/pdf','application/x-pdf']" ></file-pond> </div> <div class="o-layout_item"> <label class="c-form_label" for="message">Description *</label> <textarea rows="10" name="message" class="c-form_textarea" id="message" required></textarea> </div> <input type="hidden" name="lang" id="lang" value="en" required> </div> </template> <template v-if="lisaUserData.goal.value == 'job'"> <div class="o-layout -gutter-small"> <div class="o-layout_item u-1/2@from-small"> <label class="c-form_label" for="firstName">First Name *</label> <input type="text" name="firstName" class="c-form_input" id="firstName" required> </div> <div class="o-layout_item u-1/2@from-small"> <label class="c-form_label" for="lastName">Last Name *</label> <input type="text" name="lastName" class="c-form_input" id="lastName" required> </div> <div class="o-layout_item u-1/2@from-small"> <label class="c-form_label" for="telephone">Telephone</label> <input type="phone" name="telephone" class="c-form_input" id="telephone"> </div> <div class="o-layout_item u-1/2@from-small"> <label class="c-form_label" for="email">Email *</label> <input type="email" name="email" class="c-form_input" id="email" required> </div> <div class="o-layout_item"> <label class="c-form_label" for="resume">Resume (pdf) *</label> <file-pond id="resume" name="resume" ref="pond" credits="false" server="/file-pond" maxFileSize="10MB" label-idle="Drag & Drop your files or <span class='filepond--label-action'> Browse </span>" label-file-processing="Uploading" label-file-processing-complete="Upload complete" label-tap-to-undo="tap to undo" label-tap-to-cancel="tap to cancel" :acceptedFileTypes="['application/pdf','application/x-pdf']"></file-pond> </div> <div class="o-layout_item"> <label class="c-form_label" for="message">Description *</label> <textarea rows="10" name="message" class="c-form_textarea" id="message" required></textarea> </div> <input type="hidden" name="lang" id="lang" value="en" required> </div> </template> <template v-if="lisaUserData.goal.value == 'quick-word'"> <div class="o-layout -gutter-small"> <div class="o-layout_item u-1/2@from-small"> <label class="c-form_label" for="firstName">First Name *</label> <input type="text" name="firstName" class="c-form_input" id="firstName" required> </div> <div class="o-layout_item u-1/2@from-small"> <label class="c-form_label" for="lastName">Last Name *</label> <input type="text" name="lastName" class="c-form_input" id="lastName" required> </div> <div class="o-layout_item u-1/2@from-small"> <label class="c-form_label" for="telephone">Telephone</label> <input type="phone" name="telephone" class="c-form_input" id="telephone"> </div> <div class="o-layout_item u-1/2@from-small"> <label class="c-form_label" for="email">Email *</label> <input type="email" name="email" class="c-form_input" id="email" required> </div> <div class="o-layout_item"> <label class="c-form_label" for="message">Description *</label> <textarea rows="10" name="message" class="c-form_textarea" id="message" required></textarea> </div> <input type="hidden" name="lang" id="lang" value="en" required> </div> </template> <template v-if="lisaUserData.goal.value == 'rfp'"> <div class="o-layout -gutter-small"> <div class="o-layout_item u-1/2@from-small"> <label class="c-form_label" for="firstName">First Name *</label> <input type="text" name="firstName" class="c-form_input" id="firstName" required> </div> <div class="o-layout_item u-1/2@from-small"> <label class="c-form_label" for="lastName">Last Name *</label> <input type="text" name="lastName" class="c-form_input" id="lastName" required> </div> <div class="o-layout_item u-1/2@from-small"> <label class="c-form_label" for="telephone">Telephone</label> <input type="phone" name="telephone" class="c-form_input" id="telephone"> </div> <div class="o-layout_item u-1/2@from-small"> <label class="c-form_label" for="email">Email *</label> <input type="email" name="email" class="c-form_input" id="email" required> </div> <div class="o-layout_item u-1/2@from-small"> <label class="c-form_label" for="company">Company *</label> <input type="text" name="company" class="c-form_input" id="company" required> </div> <div class="o-layout_item u-1/2@from-small"> <label class="c-form_label" for="deadline">Your deadline *</label> <input type="text" name="deadline" class="c-form_input" id="deadline" required> </div> <div class="o-layout_item"> <label class="c-form_label" for="files">Choose File</label> <file-pond id="files" name="files" ref="pond" allow-multiple="true" credits="false" server="/file-pond" max-files="5" maxFileSize="10MB" label-idle="Drag & Drop your files or <span class='filepond--label-action'> Browse </span>" label-file-processing="Uploading" label-file-processing-complete="Upload complete" label-tap-to-undo="tap to undo" label-tap-to-cancel="tap to cancel" :acceptedFileTypes="['application/pdf','application/x-pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']" ></file-pond> </div> <div class="o-layout_item"> <label class="c-form_label" for="message">Description *</label> <textarea rows="10" name="message" class="c-form_textarea" id="message" required></textarea> </div> <input type="hidden" name="lang" id="lang" value="en" required> </div> </template> <div class="c-lisa_feedback" v-if="errors"> <p v-for="error in errors" style="color: red;">{(error)}</p> </div> <button class="c-lisa_button -primary -full" type="submit"> Submit </button> <vue-recaptcha ref="recaptcha" size="invisible" @verify="onCaptchaVerified" @expired="onCaptchaExpired" @error="onCaptchaError" sitekey="6LdHGikkAAAAAJi8ONKRtjoBCw-6GmQWby2YRqoj" > </vue-recaptcha> <div class="c-lisa_loading" v-if="loading"> <div class="u-screen-reader-text">site.loading</div> </div> </form> </script> </main> <div class="c-video-modal" data-module-video-modal> <button type="button" class="c-video-modal_close || o-text -medium" data-video-modal="close"> Close </button> <div class="c-video-modal_content"> <div class="c-video-modal_inner" data-video-modal="inner"></div> </div> </div> </div> <script src="https://locomotive.ca/assets/scripts/vendors.js?v=1723754399977" defer></script> <script src="https://locomotive.ca/assets/scripts/app.js?v=1723754399977" defer></script> </body> </html>