Locomotive | Montreal web agency

<!doctype html> <html class="has-no-js is-first-loading is-loading" lang="en" data-template="home" data-theme="default"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <base href="https://locomotive.ca/"> <title>Locomotive | Montreal web agency</title> <link rel="canonical" href="https://locomotive.ca/en"> <meta property="og:url" content="https://locomotive.ca/en"> <meta property="og:title" content="Locomotive | Montreal web agency"> <meta property="twitter:title" content="Locomotive | Montreal web agency"> <meta property="og:site_name" content="Locomotive"> <meta name="description" content="Locomotive® offers a wide range of creative and strategic services for remarkable brands, companies and organizations. Over the 15 years, Locomotive® has become a go-to for meaningful, innovative, results-driven digital experiences, web design and branding. Freshness guaranteed."> <meta property="og:description" content="Locomotive® offers a wide range of creative and strategic services for remarkable brands, companies and organizations. Over the 15 years, Locomotive® has become a go-to for meaningful, innovative, results-driven digital experiences, web design and branding. Freshness guaranteed."> <meta property="twitter:description" content="Locomotive® offers a wide range of creative and strategic services for remarkable brands, companies and organizations. Over the 15 years, Locomotive® has become a go-to for meaningful, innovative, results-driven digital experiences, web design and branding. Freshness guaranteed."> <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">  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="HandheldFriendly" content="true">  <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">  <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>  <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 " 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 ">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" 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> <div class="o-scroll" data-module-scroll="main" data-scroll-smooth="true" > <main> <div class="c-home-hero" data-module-home-hero data-scroll-call="inview, HomeHero" data-scroll data-scroll-repeat data-scroll-css-progress data-scroll-ignore-fold> <div class="c-home-hero_content"> <h1 class="c-heading -h1" data-allow-shuffle> <span aria-hidden="true">🔶</span> Locomotive® <br> Digital-first Design Agency<span aria-hidden="true">🍺🔞</span> </h1> </div> <div class="c-home-hero_background"> <div class="c-video c-home-hero_video"> <div class="o-ratio u-16:9"></div> <video class="c-video_media" playsinline muted loop data-module-video-inview data-video-inview-list="[{"desktop":{"src":"https:\/\/player.vimeo.com\/progressive_redirect\/playback\/992147441\/rendition\/720p\/file.mp4?loc=external&log_user=0&signature=f95fd42a57a3121cebe21d1ec5c7d9f1764c2edb094bf11f56ac7485c406394d","poster":"uploads\/home\/dynasty1.jpeg"},"mobile":{"src":"https:\/\/player.vimeo.com\/progressive_redirect\/playback\/992147441\/rendition\/540p\/file.mp4?loc=external&log_user=0&signature=ff2e3c76bac7f72f2fd905b2d15333bce0277150f2bbeb51317f12ecaa7a52d8","poster":"uploads\/home\/dynasty1.jpeg"}},{"desktop":{"src":"https:\/\/player.vimeo.com\/progressive_redirect\/playback\/992147599\/rendition\/720p\/file.mp4?loc=external&log_user=0&signature=4cbeac1e46d376f8562df3ccadd38dc661ea318337ae6a10052d0bf4caebc636","poster":"uploads\/home\/dynasty2.jpeg"},"mobile":{"src":"https:\/\/player.vimeo.com\/progressive_redirect\/playback\/992147599\/rendition\/540p\/file.mp4?loc=external&log_user=0&signature=a4f127190fa800028abc8d8abaaf4489a240bb0632dde0ea2a6f7a426fba49c9","poster":"uploads\/home\/dynasty2.jpeg"}}]" data-scroll data-scroll-repeat data-scroll-call="toggle, VideoInview" > <script> var video = document.currentScript.parentNode var list = video.dataset.videoInviewList if(list) { list = JSON.parse(list); var pickIndex = Math.floor(Math.random()*list.length); var pick = list[pickIndex]; video.poster = pick.desktop.poster if(pick.mobile.poster) video.poster = window.matchMedia("(max-width: 699px)").matches ? pick.mobile.poster : pick.desktop.poster var sources = []; if (pick.mobile.src) { sources.push(`<source src="${pick.mobile.src}" type="video/mp4" media="(max-width: 699px)"/>`) } sources.push(`<source src="${pick.desktop.src}" type="video/mp4" />`) video.innerHTML = sources.join(''); video.removeAttribute('data-video-inview-list'); } </script> </video> </div> </div> </div> <div class="o-container"> <div class="c-home-summary || u-padding -big-top -big-bottom" data-scroll data-scroll-css-progress> <span class="c-home-summary_label"> ©2008-2024 </span> <div class="c-home-summary_inner"> <p class="c-home-summary_text"> <span>Six Years</span> <span>Running</span> <span>2018-2023</span> </p> <div data-module-ring data-scroll data-scroll-css-progress data-scroll-module-progress class="c-home-summary_visual || c-ring"> </div> <span class="c-home-summary_footer"> <a class="c-button -full c-home-summary_link" data-hover-shuffle="children" href="https://six.locomotive.ca/en/" target="_blank" rel="noopener noreferrer" data-icon="→" > <span class="c-button_label" data-hover-shuffle-child> The dynasty </span> </a> </span> </div> </div> <h2 class="o-text -medium"> Featured work </h2> <section class="c-featured-links " data-module-featured-links> <ul class="c-featured-links_list"> <li class="c-featured-links_item " data-featured-links="item" data-hover-shuffle="children"> <h3 class="u-screen-reader-text">Stenger Bike</h3> <div aria-hidden="true" class="c-featured-links_title"> <span data-hover-shuffle-child>Stenger</span> <div class="c-image c-featured-links_visual -cover" > <span class="c-image_inner" style="background-image: url('assets/images/temp/work-single/elektra/primary-thumb.png');"> <img class="c-image_img " alt="" width="300" height="189" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20189'%3E%3C/svg%3E" data-src="uploads/image-300w.png" > </span> </div> <span data-hover-shuffle-child>Bike</span> </div> <a href="/en/work/stenger-bike" class="c-featured-links_link" > Read more about this project </a> </li> <li class="c-featured-links_item " data-featured-links="item" data-hover-shuffle="children"> <h3 class="u-screen-reader-text">Mate Libre</h3> <div aria-hidden="true" class="c-featured-links_title"> <span data-hover-shuffle-child>Mate</span> <div class="c-image c-featured-links_visual -cover" > <span class="c-image_inner" style="background-image: url('assets/images/temp/work-single/elektra/primary-thumb.png');"> <img class="c-image_img " alt="" width="300" height="189" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20189'%3E%3C/svg%3E" data-src="uploads/projects/Mate_Libre/mate-intro-300w.jpg" > </span> </div> <span data-hover-shuffle-child>Libre</span> </div> <a href="/en/work/mate-libre" class="c-featured-links_link" > Read more about this project </a> </li> <li class="c-featured-links_item " data-featured-links="item" data-hover-shuffle="children"> <h3 class="u-screen-reader-text">Lightship </h3> <div aria-hidden="true" class="c-featured-links_title"> <span data-hover-shuffle-child>Lightship</span> <div class="c-image c-featured-links_visual -cover" > <span class="c-image_inner" style="background-image: url('assets/images/temp/work-single/elektra/primary-thumb.png');"> <img class="c-image_img " alt="Lightship website" width="300" height="189" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20189'%3E%3C/svg%3E" data-src="uploads/projects/LIGHTSHIP/Lightship_Website_2-300w.jpg" > </span> </div> <span data-hover-shuffle-child></span> </div> <a href="/en/work/lightship" class="c-featured-links_link" > Read more about this project </a> </li> <li class="c-featured-links_item " data-featured-links="item" data-hover-shuffle="children"> <h3 class="u-screen-reader-text">Pangram Pangram</h3> <div aria-hidden="true" class="c-featured-links_title"> <span data-hover-shuffle-child>Pangram</span> <div class="c-image c-featured-links_visual -cover" > <span class="c-image_inner" style="background-image: url('assets/images/temp/work-single/elektra/primary-thumb.png');"> <img class="c-image_img " alt="" width="300" height="189" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20189'%3E%3C/svg%3E" data-src="uploads/projects/PANGRAM/Frame_1466-300w.png" > </span> </div> <span data-hover-shuffle-child>Pangram</span> </div> <a href="/en/work/pangram-pangram-foundry" class="c-featured-links_link" > Read more about this project </a> </li> <li class="c-featured-links_item " data-featured-links="item" data-hover-shuffle="children"> <h3 class="u-screen-reader-text">Baillat Studio</h3> <div aria-hidden="true" class="c-featured-links_title"> <span data-hover-shuffle-child>Baillat</span> <div class="c-image c-featured-links_visual -cover" > <span class="c-image_inner" style="background-image: url('assets/images/temp/work-single/elektra/primary-thumb.png');"> <img class="c-image_img " alt="" width="300" height="189" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20189'%3E%3C/svg%3E" data-src="uploads/projects/BAILLAT/Screen_Shot_2022-10-17_at_1.28_1-300w.png" > </span> </div> <span data-hover-shuffle-child>Studio</span> </div> <a href="/en/work/baillat-studio" class="c-featured-links_link" > Read more about this project </a> </li> <li class="c-featured-links_item -cta " data-featured-links="item" data-hover-shuffle="children"> <h3 class="u-screen-reader-text">All Work</h3> <div aria-hidden="true" class="c-featured-links_title"> <span data-hover-shuffle-child>All Work</span> </div> <a href="en/work" class="c-featured-links_link" > See all projects </a> </li> </ul> </section> <div class="c-home-about || u-margin -small-top"> <div class="c-heading -h1 || c-home-about_title"><span aria-hidden="true">🔰</span>Design and code are only tools of expression. What sets us and our work apart is people. We’re a small group of creative thinkers who craft bespoke digital-first brand identities and experiences, tailor-made for you and your audience.<span aria-hidden="true">🔛🔜</span></div> <div class="o-grid -col-12@from-medium -col-8@from-small -col-4@to-small -gutters"> <div class="o-grid_item u-gc-2/5@from-small u-gc-3/7@from-medium"> <div class="c-home-about_visual"> <canvas data-module-team-canvas data-team-canvas-no-touch data-team-canvas-models="uploads/team/3d/fred2024_2-rigged.compressed.glb,uploads/team/3d/jeff-rigged.compressed.glb,uploads/team/3d/mat-rigged.compressed.glb,uploads/team/3d/dust2024-rigged.compressed.glb,uploads/team/3d/mc-rigged.compressed.glb,uploads/team/3d/sacha-rigged.compressed.glb,uploads/team/3d/bastien-rigged.compressed.glb,uploads/team/3d/julien-rigged.compressed.glb,uploads/team/3d/gab-rigged.compressed.glb,uploads/team/3d/ben-rigged.compressed.glb,uploads/team/3d/chauncey-rigged.compressed.glb,uploads/team/3d/deven-rigged.compressed.glb,uploads/team/3d/jeremy-rigged.compressed.glb,uploads/team/3d/xavier-rigged.compressed.glb,uploads/team/3d/pl-rigged.compressed.glb,uploads/team/3d/pascal-rigged.compressed.glb,uploads/team/3d/arnaud-rigged.compressed.glb,uploads/team/3d/lucasv-rigged.compressed.glb,uploads/team/3d/michel-rigged.compressed.glb,uploads/team/3d/lucasb-rigged.compressed.glb,uploads/team/3d/charles-rigged-2.compressed.glb,uploads/team/3d/nath-rigged.compressed.glb,uploads/team/3d/maureen-rigged-2.compressed.glb,uploads/team/3d/simon-rigged.compressed.glb,uploads/team/3d/karine-rigged.compressed.glb,uploads/team/3d/steph-rigged.compressed.glb,uploads/team/3d/angie-rigged.compressed.glb,uploads/team/3d/lea-rigged.compressed.glb,uploads/team/3d/leo-rigged.compressed.glb,uploads/team/3d/olivier-rigged.compressed.glb,uploads/team/3d/laurence-rigged.compressed.glb,uploads/team/3d/guillaume-rigged.compressed.glb" data-scroll data-scroll-call="onInview, TeamCanvas"> </canvas> </div> <span class="c-home-about_caption"> <span>Always looking</span> <span>for top shelf talent</span> </span> </div> <div class="o-grid_item u-gc-5/9@from-small u-gc-7/13@from-medium u-gc-2/5@to-medium"> <p class="o-text -medium || u-margin -medium-bottom">From strategy to deployment and maintenance, we're the ultimate digital one-stop shop. Over the past 15 years, Locomotive® has become a go-to for meaningful, innovative, results-driven digital experiences, web design and branding. Freshness guaranteed.</p> <div class="o-grid -col-2 -gutters"> <div class="u-gc-1/3 u-gc-1/2@from-small"> <a class="c-button -full c-home-about_link" data-hover-shuffle="children" href="en/agency" data-icon="→" > <span class="c-button_label" data-hover-shuffle-child> Agency </span> </a> <br> <a class="c-button -full c-home-about_link" data-hover-shuffle="children" href="en/careers" data-icon="→" > <span class="c-button_label" data-hover-shuffle-child> Careers </span> </a> </div> </div> </div> </div> </div> <section class="c-home-extras || u-margin -big-top -big-bottom"> <h2 class="c-home-extras_title || c-heading -h1"> <span>Extras</span> <span>(10)</span> </h2> <div class="c-section-overline || "> <div class="c-section-overline_inner"> <h2 class="c-section-overline_title">Articles</h2> <div class="o-grid -col-4 -gutters"> <div class="o-grid_item || u-gc-3/5@from-medium || u-gc-2/5"> <ul class="c-list -no-border-last-child"> <li class="c-list_row"> <div class="c-list_item"> <a href="https://medium.com/@LocomotiveMTL/should-i-use-locomotive-scroll-on-my-project-7fc8fa38bcc5" class="c-list_link" target="_blank" rel="noopener noreferrer" data-icon="  ↗" data-hover-shuffle>Should I use Locomotive Scroll on my project?</a> </div> </li> <li class="c-list_row"> <div class="c-list_item"> <a href="https://medium.com/@LocomotiveMTL/why-dont-we-use-front-end-frameworks-at-locomotive-4ccb20c05bc5" class="c-list_link" target="_blank" rel="noopener noreferrer" data-icon="  ↗" data-hover-shuffle>Why don't we use front-end frameworks at Locomotive?</a> </div> </li> <li class="c-list_row"> <div class="c-list_item"> <a href="https://medium.com/@LocomotiveMTL/the-revolution-of-the-workspace-as-we-know-it-6e50c4bc1b2" class="c-list_link" target="_blank" rel="noopener noreferrer" data-icon="  ↗" data-hover-shuffle>The revolution of the workspace as we know it</a> </div> </li> <li class="c-list_row"> <div class="c-list_item"> <a href="https://medium.com/@LocomotiveMTL/a-few-things-your-ux-designer-can-learn-from-your-shrink-locomotive-style-8a8de62c841" class="c-list_link" target="_blank" rel="noopener noreferrer" data-icon="  ↗" data-hover-shuffle>A few things your UX designer can learn from your shrink</a> </div> </li> <li class="c-list_row"> <div class="c-list_item"> <a href="https://medium.com/@LocomotiveMTL/can-i-say-bravo-18e8769b2bf1" class="c-list_link" target="_blank" rel="noopener noreferrer" data-icon="  ↗" data-hover-shuffle>Can I say bravo?</a> </div> </li> </ul> </div> </div> </div> </div> <div class="c-section-overline || "> <div class="c-section-overline_inner"> <h2 class="c-section-overline_title">Culture</h2> <div class="o-grid -col-4 -gutters"> <div class="o-grid_item || u-gc-3/5@from-medium || u-gc-2/5"> <ul class="c-list -no-border-last-child"> <li class="c-list_row"> <div class="c-list_item"> <a href="https://explore.locomotive.ca/en/playa" class="c-list_link" target="_blank" rel="noopener noreferrer" data-icon="  ↗" data-hover-shuffle>(2022) Locomotive in Playa del Carmen</a> </div> </li> <li class="c-list_row"> <div class="c-list_item"> <a href="https://explore.locomotive.ca/en/mexico" class="c-list_link" target="_blank" rel="noopener noreferrer" data-icon="  ↗" data-hover-shuffle>(2019) Locomotive in Mexico</a> </div> </li> <li class="c-list_row"> <div class="c-list_item"> <a href="https://explore.locomotive.ca/en/jamaica" class="c-list_link" target="_blank" rel="noopener noreferrer" data-icon="  ↗" data-hover-shuffle>(2018) Locomotive in Jamaica</a> </div> </li> <li class="c-list_row"> <div class="c-list_item"> <a href="https://explore.locomotive.ca/en/samana" class="c-list_link" target="_blank" rel="noopener noreferrer" data-icon="  ↗" data-hover-shuffle>(2017) Locomotive in Samaná</a> </div> </li> </ul> </div> </div> </div> </div> <div class="c-section-overline || "> <div class="c-section-overline_inner"> <h2 class="c-section-overline_title">Store</h2> <div class="o-grid -col-4 -gutters"> <div class="o-grid_item || u-gc-3/5@from-medium || u-gc-2/5"> <ul class="c-list -no-border-last-child"> <li class="c-list_row"> <div class="c-list_item"> <a href="https://store.locomotive.ca" class="c-list_link" target="_blank" rel="noopener noreferrer" data-icon="  ↗" data-hover-shuffle>Check out our gear</a> </div> </li> </ul> </div> </div> </div> </div> <div class="u-margin -large-top large-bottom"> <div class="o-grid -col-12@from-medium -col-8@from-small -col-4@to-small -gutters"> <article class="c-shop-tile o-grid_item u-gc-1/4 u-gc-1/5@from-small u-gc-1/7@from-medium -clickable" data-hover-shuffle="children"> <div class="c-image o-grid_item u-gc-1/4 u-gc-1/5@from-small u-gc-1/7@from-medium -lazy-load" > <span class="c-image_inner" style="background-image: url('/assets/images/temp/pros-de-linternet-white-t-shirt-thumb.jpg');"> <img class="c-image_img " alt="Pros de l'internet White T-Shirt" width="1440" height="1640" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%201640'%3E%3C/svg%3E" data-src="/assets/images/temp/pros-de-linternet-white-t-shirt.jpg" data-scroll data-scroll-offset="15%" data-scroll-call="lazyLoad, Scroll" data-depixelate > </span> </div> <div class="c-shop-tile_infos"> <h3 class="c-shop-tile_title" data-hover-shuffle-child>Pros de l'internet White T-Shirt</h3> <div class="c-shop-tile_cta" aria-hidden="true" data-hover-shuffle-child>Buy now→</div> <span class="c-shop-tile_price">30 USD</span> </div> <a href="https://store.locomotive.ca/products/pros-de-linternet-white-t-shirt" class="c-shop-tile_link">Buy now→</a> </article> <article class="c-shop-tile o-grid_item u-gc-3/5 u-gc-6/9@from-small u-gc-9/13@from-medium -clickable" data-hover-shuffle="children"> <div class="c-image o-grid_item u-gc-3/5 u-gc-6/9@from-small u-gc-9/13@from-medium -lazy-load" > <span class="c-image_inner" style="background-image: url('/assets/images/temp/pros-de-linternet-sand-cap-thumb.jpg');"> <img class="c-image_img " alt="Pros de l'internet Sand Hat" width="1440" height="1640" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%201640'%3E%3C/svg%3E" data-src="/assets/images/temp/pros-de-linternet-sand-cap.jpg" data-scroll data-scroll-offset="15%" data-scroll-call="lazyLoad, Scroll" data-depixelate > </span> </div> <div class="c-shop-tile_infos"> <h3 class="c-shop-tile_title" data-hover-shuffle-child>Pros de l'internet Sand Hat</h3> <div class="c-shop-tile_cta" aria-hidden="true" data-hover-shuffle-child>Buy now→</div> <span class="c-shop-tile_price">25 USD</span> </div> <a href="https://store.locomotive.ca/products/pros-de-linternet-beige-hat" class="c-shop-tile_link">Buy now→</a> </article> </div> </div> </section> </div> <footer class="c-footer"> <nav class="c-footer_nav"> <ul class="c-footer_menu-list"> <li class="c-footer_menu -main"> <h2 class="c-footer_menu_title">Menu</h2> <ul class="c-footer_menu_list"> <li class="c-footer_menu_item || u-none@to-small"> <a href="en/work" class="c-footer_menu_link" data-hover-shuffle>Work</a> </li> <li class="c-footer_menu_item || u-none@to-small"> <a href="en/agency" class="c-footer_menu_link" data-hover-shuffle>Agency</a> </li> <li class="c-footer_menu_item || u-none@to-small"> <a href="en/careers" class="c-footer_menu_link" data-hover-shuffle>Careers</a> </li> <li class="c-footer_menu_item || u-none@to-small"> <a href="en/contact" class="c-footer_menu_link" data-hover-shuffle>Let's talk</a> </li> <li class="c-footer_menu_item || u-none@to-small"> <a href="en/privacy-policy" class="c-footer_menu_link" data-hover-shuffle>Privacy</a> </li> <li class="c-footer_menu_item -langswitcher"> <a href="https://locomotive.ca/fr" class="c-footer_menu_link" data-load="false" data-hover-shuffle>Français</a> </li> </ul> <div class="c-footer_menu_cta"> <button type="button" data-hover-shuffle data-cookie-consent="show-preferences" >Cookie preferences</button> <button type="button" data-hover-shuffle aria-controls="newsletter-modal" aria-expanded="false" data-module-newsletter-toggler >Newsletter<span aria-hidden="true"> ↓</span></button> </div> </li> <li class="c-footer_menu -social"> <h2 class="c-footer_menu_title">Social</h2> <ul class="c-footer_menu_list"> <li class="c-footer_menu_item"> <a href="https://www.instagram.com/locomotivemtl/" rel="noopener noreferrer" target="_blank" data-icon='↗' class="c-footer_menu_link" data-hover-shuffle > Instagram </a> </li> <li class="c-footer_menu_item"> <a href="https://twitter.com/locomotivemtl" rel="noopener noreferrer" target="_blank" data-icon='↗' class="c-footer_menu_link" data-hover-shuffle > Twitter </a> </li> <li class="c-footer_menu_item"> <a href="https://www.linkedin.com/company/locomotive-mtl" rel="noopener noreferrer" target="_blank" data-icon='↗' class="c-footer_menu_link" data-hover-shuffle > LinkedIn </a> </li> <li class="c-footer_menu_item"> <a href="https://www.behance.net/locomotivemtl" rel="noopener noreferrer" target="_blank" data-icon='↗' class="c-footer_menu_link" data-hover-shuffle > Behance </a> </li> <li class="c-footer_menu_item"> <a href="https://github.com/locomotivemtl" rel="noopener noreferrer" target="_blank" data-icon='↗' class="c-footer_menu_link" data-hover-shuffle > GitHub </a> </li> </ul> </li> <li class="c-footer_menu -external"> <h2 class="c-footer_menu_title">External</h2> <ul class="c-footer_menu_list"> <li class="c-footer_menu_item"> <a href="https://store.locomotive.ca" rel="noopener noreferrer" target="_blank" data-icon='↗' class="c-footer_menu_link" data-hover-shuffle> Store </a> </li> <li class="c-footer_menu_item"> <a href="https://locomotivemtl.github.io/locomotive-scroll/" rel="noopener noreferrer" target="_blank" data-icon='↗' class="c-footer_menu_link" data-hover-shuffle> Locomotive Scroll </a> </li> <li class="c-footer_menu_item"> <a href="https://charcoal.locomotive.ca/en" rel="noopener noreferrer" target="_blank" data-icon='↗' class="c-footer_menu_link" data-hover-shuffle> Charcoal CMS </a> </li> <li class="c-footer_menu_item"> <a href="https://explore.locomotive.ca/en" rel="noopener noreferrer" target="_blank" data-icon='↗' class="c-footer_menu_link" data-hover-shuffle> Annual trips </a> </li> </ul> </li> </ul> </nav> <div class="c-footer_coords" data-allow-shuffle> <address><a href="https://goo.gl/maps/gP8aN5aEvZd8Ejau8" rel="noopener noreferrer" target="_blank"><span aria-hidden="true">🟤</span>1211<span aria-hidden="true">🔠</span><span class="u-screen-reader-text"> </span>Jean-Talon Est<span aria-hidden="true">🔚🔞</span><br class="u-none@to-small">Montréal<span class="u-screen-reader-text"> </span><span aria-hidden="true">🛑🚹🚺</span><span class="u-screen-reader-text">(QC)</span>, <span class='u-no-break'>Canada<span aria-hidden="true">🦉</span>H2R 1W1</span></a></address> <a href="tel:+15145245678">Telephone <span class="u-screen-reader-text">+1 514 524 5678</span><span aria-hidden="true">📞</span></a> <a href="mailto:info@locomotive.ca" data-module-copy-to-clipboard data-confirmation="Copied to clipboard!" data-to-copy="info@locomotive.ca">info<span aria-hidden="true">🔂</span><span class="u-screen-reader-text">@</span>locomotive.ca</a> </div> <div class="c-footer_copyright"> ©2024 </div> <div class="c-newsletter-modal" id="newsletter-modal" data-module-newsletter-modal data-newsletter-modal-success="Check your email to confirm your subscription. Thanks" data-newsletter-modal-error="An error has occured." > <div class="c-newsletter-modal_inner"> <div class="o-container"> <div class="o-grid -col-12 -gutters"> <div class="o-grid_item || u-gc-1/6"> <button class="c-newsletter-modal_close" type="button" data-newsletter-modal="close">Close</button> </div> <div class="o-grid_item || u-gc-7/13"> Give an email, <br>get the newsletter </div> <div class="o-grid_item"> <form action="/newsletter/subscribe" class="c-newsletter-modal_form" data-newsletter-modal="form"> <input type="email" name="email" class="c-newsletter-modal_input" placeholder="name@email.com" data-newsletter-modal="input"> <input type="hidden" name="locale" value="en_CA"> <button class="c-newsletter-modal_button" type="submit"> <span class="c-newsletter-modal_button_label">Subscribe</span> </button> </form> <div class="c-newsletter-modal_feedback" data-newsletter-modal="feedback"></div> </div> </div> </div> </div> <div class="c-newsletter-modal_background"></div> </div> </footer> </main> </div> <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>

CINXE.COM

Locomotive | Montreal web agency