CINXE.COM
Haven Studios | Locomotive
<!doctype html> <html class="has-no-js is-first-loading is-loading" lang="en" data-template="work-single" data-theme="default"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <base href="https://locomotive.ca/"> <title>Haven Studios | Locomotive</title> <link rel="canonical" href="https://locomotive.ca/en/work/haven-studios"> <meta property="og:url" content="https://locomotive.ca/en/work/haven-studios"> <meta property="og:title" content="Haven Studios | Locomotive"> <meta property="twitter:title" content="Haven Studios | 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 " 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/projets/haven-studios" 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-work-single-hero" data-module-work-single-hero> <div class="c-work-single-hero_container || o-container"> <div class="c-work-single-hero_inner"> <div class="c-work-single-hero_grid -top || o-grid -col-4 -gutters"> <div class="c-work-single-hero_content-type"> <span class="o-text -medium">Case Study</span> </div> <div class="c-work-single-hero_context-label"> <div class="u-screen-reader-text">Categories</div> <ul class="o-text -medium"> <li>Digital</li> <li>Experience</li> </ul> </div> </div> <div class="c-work-single-hero_grid -bottom || o-grid -col-4 -gutters" data-work-single-hero="grid-bottom"> <div class="c-work-single-hero_title || o-padding -huge-top" data-work-single-hero="title"> <h1 class="c-heading -huge || c-work-single-hero_heading">Haven Studios</h1> </div> <div class="c-work-single-hero_year"> <span class="o-text -medium">©2022</span> </div> <div class="c-work-single-hero_category"> <span class="o-text -medium"> Gaming <br> Montreal, Canada </span> </div> </div> </div> </div> <div class="o-container" > <div class="c-work-single-hero_visual"> <div class="c-work-single-hero_grid -visual || o-grid -col-4 -gutters"> <div class="c-work-single-hero_featured-image || o-padding -tiny-top -tiny-bottom"> <div class="c-image -lazy-load" > <span class="c-image_inner" style="background-image: url('uploads/projects/HAVEN/CTA_PORTALS-10w.png');"> <img class="c-image_img " alt="" width="1806" height="1116" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201806%201116'%3E%3C/svg%3E" data-src="uploads/projects/HAVEN/CTA_PORTALS.png" data-scroll data-scroll-offset="15%" data-scroll-call="lazyLoad, Scroll" data-depixelate data-scroll-ignore-fold > </span> </div> <p class="c-work-single-hero_caption || o-text -medium"> <span></span> <span></span> </p> </div> </div> </div> </div> </div> <div class="o-container"> <div class="c-work-single-pitch_wrapper"> <div class="c-work-single-pitch"> <div class="c-work-single-pitch_head"> <span>Website(s)</span> <span><a href="https://havenstudios.com" target="_blank" rel="noopener noreferrer">havenstudios.com</a></span> </div> <div class="c-work-single-pitch_content"> <a class="c-work-single-pitch_link" href="https://havenstudios.com" target="_blank" rel="noopener noreferrer">havenstudios.com</a><span aria-hidden="true">🦉</span><p class="">a creative space where ideas, passion and fearless optimism thrive.</p> </div> </div> </div> </div> <div class="c-attachment || u-margin -visual"> <div class="c-image -lazy-load" > <span class="c-image_inner" style="background-image: url('uploads/projects/HAVEN/Frame_1462-10w.png');"> <img class="c-image_img " alt="" width="2000" height="1406" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202000%201406'%3E%3C/svg%3E" data-src="uploads/projects/HAVEN/Frame_1462-2000w.png" data-scroll data-scroll-offset="15%" data-scroll-call="lazyLoad, Scroll" > </span> </div> </div> <div class="c-section-overline -no-border || u-margin -huge-bottom -small-top"> <div class="o-container"> <div class="c-section-overline_inner"> <h2 class="c-section-overline_title">About</h2> <div class="o-grid -col-4 -gutters"> <div class="o-grid_item || u-gc-3/5@from-medium || "> <div class="c-wysiwyg || o-text -medium"> Haven Studios teamed up with Locomotive to create their very first website. Both teams worked closely together to bring a unique and creative concept to life that accurately reflects the studio's brand identity and essence. Despite the immersive approach, the website effectively showcases the studio's strengths and serves as a tool for attracting top local and international talent to join the team in Montreal. </div> </div> </div> </div> </div></div> <div class="c-section-overline || u-margin -huge-top -huge-bottom"> <div class="o-container"> <div class="c-section-overline_inner"> <h2 class="c-section-overline_title">Awards (2)</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 -alternative"> <li class="c-list_row"> <div class="c-list_item"> Site of the Day </div> <div class="c-list_item"> Awwwards </div> </li> <li class="c-list_row"> <div class="c-list_item"> Developer award </div> <div class="c-list_item"> Awwwards </div> </li> </ul> </div> </div> </div> </div></div> <div class="c-attachment || u-margin -big-top -big-bottom -visual"> <div class="c-image -lazy-load" > <span class="c-image_inner" style="background-image: url('uploads/projects/HAVEN/Big-10w.png');"> <img class="c-image_img " alt="" width="2000" height="2548" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202000%202548'%3E%3C/svg%3E" data-src="uploads/projects/HAVEN/Big-2000w.png" data-scroll data-scroll-offset="15%" data-scroll-call="lazyLoad, Scroll" > </span> </div> </div> <div class="c-attachment || u-margin -big-top -big-bottom -visual"> <div class="o-container"> <div class="o-grid -col-12@from-medium -gutters"> <div class="o-grid_item u-gc-2/12@from-medium"> <div class="c-video "> <div class="c-image -lazy-load" > <span class="c-image_inner" style="background-image: url('uploads/projects/HAVEN/Haven_motion_cover_v2-10w.jpg');"> <img class="c-image_img " alt="" width="2000" height="1288" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202000%201288'%3E%3C/svg%3E" data-src="uploads/projects/HAVEN/Haven_motion_cover_v2-2000w.jpg" data-scroll data-scroll-offset="15%" data-scroll-call="lazyLoad, Scroll" data-depixelate > </span> </div> <video class="c-video_media" playsinline muted loop data-module-video-inview poster="uploads/projects/HAVEN/Haven_motion_cover_v2-2000w.jpg" data-scroll data-scroll-repeat data-scroll-call="toggle, VideoInview" > <source src="https://player.vimeo.com/progressive_redirect/playback/782626396/rendition/1080p/file.mp4?loc=external&signature=2d4ed4e841d5b5166f17c640cf86a9a8db0f727f172a6f64057abcbd5c900c36" type="video/mp4"> </video> </div> </div> </div> </div> </div> <div class="c-attachment || u-margin -big-top -big-bottom -visuals-dual"> <div class="o-container"> <div class="o-grid -col-12 -gutters"> <div class="o-grid_item u-gc-1/6@from-small"> <div class="c-video "> <div class="o-ratio u-16:9"></div> <video class="c-video_media" playsinline muted loop data-module-video-inview poster="" data-scroll data-scroll-repeat data-scroll-call="toggle, VideoInview" > <source src="https://player.vimeo.com/progressive_redirect/playback/782626383/rendition/480p/file.mp4?loc=external&signature=2a6e7ac6b959d804f8932d591568b3fefccfe4d4a8556ae122fa21f04093efc1" type="video/mp4"> </video> </div> </div> <div class="o-grid_item u-gc-7/13@from-small"> <div class="c-image -lazy-load" > <span class="c-image_inner" style="background-image: url('uploads/Visual_phone-10w.jpg');"> <img class="c-image_img " alt="" width="2000" height="2839" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202000%202839'%3E%3C/svg%3E" data-src="uploads/Visual_phone-2000w.jpg" data-scroll data-scroll-offset="15%" data-scroll-call="lazyLoad, Scroll" data-depixelate > </span> </div> </div> </div> </div> </div> <div class="o-container"> <div class="c-website-cta"> <span class="c-website-cta_label">©2022</span> <p class="c-website-cta_content"> Visit<span aria-hidden="true">🦉</span><a href="https://havenstudios.com" target="_blank" rel="noopener noreferrer">havenstudios.com</a> </p> </div> </div> <div class="c-section-overline || u-padding -huge-top"> <div class="o-container"> <div class="c-section-overline_inner"> <h2 class="c-section-overline_title">Credits</h2> <div class="o-grid -col-4 -gutters"> <div class="o-grid_item || u-gc-3/5@from-medium || "> <ul class="c-list -no-border-last-child -align-start"> <li class="c-list_row"> <div class="c-list_item"> Creative Director </div> <div class="c-list_item"> Dust Leblanc </div> </li> <li class="c-list_row"> <div class="c-list_item"> UX Designer </div> <div class="c-list_item"> Sacha Haouzi </div> </li> <li class="c-list_row"> <div class="c-list_item"> Art Director </div> <div class="c-list_item"> Bastien Allard </div> </li> <li class="c-list_row"> <div class="c-list_item"> Front-end Developers </div> <div class="c-list_item"> Arnaud Pinot, Jérémy Minié </div> </li> <li class="c-list_row"> <div class="c-list_item"> Back-end Developer </div> <div class="c-list_item"> Xavier Aymond </div> </li> <li class="c-list_row"> <div class="c-list_item"> Project Manager </div> <div class="c-list_item"> Maxime Moulin </div> </li> <li class="c-list_row"> <div class="c-list_item"> Account Director </div> <div class="c-list_item"> Jean-François Chainé </div> </li> </ul> </div> </div> </div> </div></div> <article class="c-work-next || u-margin -big-top" data-module-work-next data-scroll data-scroll-module-progress data-scroll-css-progress data-scroll-position="start,end" data-scroll-offset="0,110%" > <div class="c-section-overline c-work-next_overline || "> <div class="o-container"> <div class="c-section-overline_inner"> <h2 class="c-section-overline_title">Next Project</h2> <div class="o-grid -col-4 -gutters"> <div class="o-grid_item || u-gc-3/5@from-medium || "> <div class="c-work-next_cta"> <span class="o-text -medium">Scroll Down↓</span> <span class="c-work-next_progress"></span> </div> </div> </div> </div> </div></div> <div class="c-work-next_container || o-container"> <div class="c-work-next_inner"> <div class="c-work-next_grid -bottom || o-grid -col-4 -gutters"> <div class="c-work-next_title || o-padding -huge-top"> <h1 class="c-heading -huge || c-work-next_heading">Elektra Virtual Museum</h1> </div> <div class="c-work-next_year"> </div> <div class="c-work-next_category"> <span class="o-text -medium"> Art and culture <br> Montreal, Canada </span> </div> </div> <div class="c-work-next_visual"> <div class="c-work-next_grid -visual || o-grid -col-4 -gutters"> <div class="c-work-next_featured-image || o-padding -tiny-top -tiny-bottom" data-work-next="image"> <div class="c-image " > <span class="c-image_inner" style="background-image: url('uploads/projects/ELEKTRA/Rectangle_109-10w.png');"> <img class="c-image_img " alt="" width="1806" height="1136" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201806%201136'%3E%3C/svg%3E" data-src="uploads/projects/ELEKTRA/Rectangle_109.png" > </span> </div> </div> </div> </div> </div> </div> <a data-work-next="link" class="c-work-next_link" data-scroll href="/en/work/elektra-virtual-museum" data-load-transition="work-next">Read more</a> </article> </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>