CINXE.COM

<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="description" content="Astro description"><meta name="viewport" content="width=device-width"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><meta name="msapplication-TileColor" content="#da532c"><meta name="theme-color" content="#ffffff"><meta name="generator" content="Astro v4.9.2"><title>Locomotive Dynasty - 2018 to 2023</title><link rel="canonical" href="https://locomotive.ca"><meta name="description" content="Design is a team sport. It’s where grit meets finesse. Where setbacks shape champions. Over the years, we’ve built a Dynasty."><meta name="robots" content="index, follow"><meta property="og:title" content="Locomotive Dynasty - 2018 to 2023"><meta property="og:type" content="website"><meta property="og:image" content="/_astro/meta-en.BzZeDnvD.png"><meta property="og:url" content="http://localhost:4321/en/"><meta name="twitter:title" content="Locomotive Dynasty - 2018 to 2023"><meta name="twitter:image" content="/_astro/meta-en.BzZeDnvD.png"><meta name="twitter:description" content="Design is a team sport. It’s where grit meets finesse. Where setbacks shape champions. Over the years, we’ve built a Dynasty."><meta name="twitter:creator" content="@LocomotiveMTL"><meta name="robots" content="noindex,nofollow"><link rel="preload" href="/fonts/PPEditorialOld-Regular.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/fonts/PPEditorialOld-Thin.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/fonts/HelveticaNowDisplay-Regular.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/fonts/HelveticaNowDisplay-Md.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/fonts/HelveticaNowDisplay-Bold.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/fonts/PPPlayground-Regular.woff2" as="font" type="font/woff2" crossorigin><link rel="stylesheet" href="/_astro/index.DizC42gh.css"><script type="module" src="/_astro/hoisted.DoO6lcj5.js"></script></head> <body style="overflow: hidden;"> <main role="main"> <div id="content"> <c-hero class="c-hero"> <div class="c-hero_sticky_wrapper"> <div class="c-hero_sticky"> <div class="c-hero_introduction || u-text-gold" aria-hidden="true"> <div class="c-hero_introduction_years"> <div class="c-hero_introduction_years_part"> <span class="c-hero_introduction_year || u-text -tiny -sans-medium" data-year-intro-odd> <span>2018</span> <span></span> </span><span class="c-hero_introduction_year || u-text -tiny -sans-medium" data-year-intro-odd> <span>2019</span> <span></span> </span><span class="c-hero_introduction_year || u-text -tiny -sans-medium" data-year-intro-odd> <span>2020</span> <span></span> </span> </div> <div class="c-hero_introduction_years_part"> <span class="c-hero_introduction_year || u-text -tiny -sans-medium" data-year-intro-even> <span>2021</span> <span></span> </span><span class="c-hero_introduction_year || u-text -tiny -sans-medium" data-year-intro-even> <span>2022</span> <span></span> </span><span class="c-hero_introduction_year || u-text -tiny -sans-medium" data-year-intro-even> <span>2023</span> <span></span> </span> </div> </div> </div> <div class="c-hero_layout || u-text-gold"> <div class="c-hero_layout_part"> <div class="c-hero_header" data-header> <div class="c-hero_logo"> <svg width="2.22em" height="1em" viewBox="0 0 31 14" class="c-hero_logo_svg" data-logo data-icon="logo"> <symbol id="ai:local:logo"><path fill="currentColor" d="M13.851 6.333H8.574l1.88-1.9C12.367 2.5 13.752 1.767 15.5 1.767c1.748 0 3.133.733 5.046 2.666l1.88 1.9h-5.277v1.334h6.266V14h1.319V8.667l4.947 5 .99-1-4.948-5H31V6.333h-6.266V0h-1.32v5.333l-1.879-1.9c-2.143-2.166-3.825-3-6.035-3s-3.892.834-6.035 3l-1.88 1.9V0H6.266v6.333H0v1.334h5.277l-4.947 5 .99 1 4.946-5V14h1.32V7.667h6.265V6.333Z"/></symbol><use xlink:href="#ai:local:logo"></use> </svg> </div> <ul class="c-hero_years"> <li> <span class="u-text -tiny" data-year> 2018 </span> </li><li> <span class="u-text -tiny" data-year> 2019 </span> </li><li> <span class="u-text -tiny" data-year> 2020 </span> </li><li> <span class="u-text -tiny" data-year> 2021 </span> </li><li> <span class="u-text -tiny" data-year> 2022 </span> </li><li> <span class="u-text -tiny" data-year> 2023 </span> </li> </ul> <div class="c-hero_scene_wrapper"> <c-ring data-zoom=".75" data-zoom-mobile=".5" data-astro-cid-265v4v5c class="c-ring c-hero_scene"></c-ring> </div> </div> </div> <div class="c-hero_layout_part"> <div class="u-text -tiny -sans-medium"> <div class="c-hero_title_wrapper || u-text -serif-alt"> <div class="c-gradient"> <p class="c-hero_title || c-gradient_item" data-gradient data-title> <span class="u-sr-only">The Art of Teamwork</span> <span aria-label="hidden">The Art of <span style="font-feature-settings: 'swsh';">T</span>eamwork</span> </p> <div class="c-hero_title_wrapper_fade" data-fade> <span></span> <span></span> <span></span> <span></span> </div> </div> <div class="c-hero_footer || u-container" data-footer> <p class="c-hero_footer_item || u-text -tiny -sans-medium"> <span>Six</span><span>agency of the year</span><span>awwwards</span> </p> <h1 class="c-hero_footer_item || u-text -tiny -sans-medium"> <p>Locomotive®</p><p>World champions of the internets</p><p>2018 to 2023 dynasty</p> </h1> <p class="c-hero_footer_item || u-text -tiny -sans-medium" aria-hidden="true"> <span>Six</span><span>agency of the year</span><span>awwwards</span> </p> </div> </div> </div> </div> </div> </div> </div> </c-hero> <c-panel-clip class="c-panel-clip -scroll-video"> <div class="c-panel-clip_progress" data-scroll data-scroll-offset="1%, 100%" data-scroll-ignore-fold data-scroll-event-progress="onPanelClipProgress"></div> <div class="c-panel-clip_inner"> <c-scroll-video data-src="https://res.cloudinary.com/df8lbmexu/video/upload/v1721154901/ring_sbbcay.mp4" data-src-mobile="https://res.cloudinary.com/df8lbmexu/video/upload/v1725565173/ring9-16_ksozzd.mp4" class="c-scroll-video"> <div class="c-scroll-video_area" data-scroll data-scroll-event-progress="onScrollVideoProgress" data-scroll-offset="0,100%"></div> <div class="c-scroll-video_layout"> <div class="c-scroll-video_container" data-container></div> </div> </c-scroll-video> </div> </c-panel-clip> <div class="u-pt-fluid-xs"> <c-thanks class="c-thanks u-text-gold"> <div class="c-thanks_progress" data-progress> <div class="c-thanks_text -top || u-text -big -sans-bold" data-text> <c-scroll-text-reveal class="c-scroll-text-reveal"> <span class="c-scroll-text-reveal_area" data-scroll data-scroll-offset="0%, 80%" data-scroll-event-progress="scrollTextRevealProgress"></span> <p><span data-line class="-line"><span class="-word" data-word="Design">Design</span> <span class="-word" data-word="is">is</span> <span class="-word" data-word="a">a</span> <span class="-word" data-word="team">team</span> <span class="-word" data-word="sport.">sport.</span></span><span data-line class="-line"><span class="-word" data-word="It’s">It’s</span> <span class="-word" data-word="where">where</span> <span class="-word" data-word="grit">grit</span> <span class="-word" data-word="meets">meets</span> <span class="-word" data-word="finesse.">finesse.</span></span><span data-line class="-line"><span class="-word" data-word="Where">Where</span> <span class="-word" data-word="setbacks">setbacks</span> <span class="-word" data-word="shape">shape</span> <span class="-word" data-word="champions.">champions.</span></span><span data-line class="-line"><span class="-word" data-word="Over">Over</span> <span class="-word" data-word="the">the</span> <span class="-word" data-word="years,">years,</span></span><span data-line class="-line"><span class="-word" data-word="we’ve">we’ve</span> <span class="-word" data-word="built">built</span> <span class="-word" data-word="a">a</span> <span data-highlight><span class="-word" data-word="dynasty">dynasty</span></span><span class="-word" data-word=",">,</span></span><span data-line class="-line"><span class="-word" data-word="A">A</span> <span class="-word" data-word="shining">shining</span> <span class="-word" data-word="gold">gold</span> <span class="-word" data-word="standard">standard</span></span><span data-line class="-line"><span class="-word" data-word="that">that</span> <span class="-word" data-word="fuels">fuels</span> <span class="-word" data-word="our">our</span> <span class="-word" data-word="hustle">hustle</span> <span class="-word" data-word="in">in</span></span><span data-line class="-line"><span class="-word" data-word="this">this</span> <span class="-word" data-word="digital">digital</span> <span class="-word" data-word="game.">game.</span></span></p> </c-scroll-text-reveal> </div> <div> <c-scroll-clip-reveal style="--scale: 1.5;" class="c-scroll-clip-reveal"> <div class="c-scroll-clip-reveal_area" data-scroll data-scroll-offset="0%, 80%" data-scroll-event-progress="scrollClipRevealProgress"></div> <div class="c-scroll-clip-reveal_clip"> <div class="c-scroll-clip-reveal_el"> <div class="c-thanks_video"> <c-video data-video class="c-video"> <video class="c-video_el" src="https://player.vimeo.com/progressive_redirect/playback/949658377/rendition/720p/file.mp4?loc=external&log_user=0&signature=cd1876da599f1064b7b98977d8bab16070554b4e31fd7b87616119b5a0c0c8e1" data-video playsinline muted loop data-scroll data-scroll-offset="0,0" data-scroll-repeat data-scroll-call="toggleVideo"></video> </c-video> </div> </div> </div> </c-scroll-clip-reveal> </div> <div class="c-thanks_text -bottom || u-text -medium -sans-medium" data-appear> <c-scroll-fade-reveal class="c-scroll-fade-reveal"> <span class="c-scroll-fade-reveal_area" data-scroll data-scroll-offset="0%, 80%" data-scroll-event-progress="scrollFadeRevealProgress"></span> <div class="c-scroll-fade-reveal_fade" data-el> <div class="c-scroll-fade-reveal_el"> <p>Putting our team first isn’t just a strategy, it's our <span data-highlight>golden rule</span>, the core of our culture. Just as vital are the clients we choose to partner with. each one is considered an extension of our team, integral to our playbook and success. We extend heartfelt <span data-highlight>thanks to everyone who has believed in and supported us since 2008</span> — your trust is the cornerstone of our pursuit to innovate and outperform.</p> </div> </div> </c-scroll-fade-reveal> </div> <div class="c-thanks_credentials || u-text -tiny -sans-medium" data-appear> <c-scroll-fade-reveal class="c-scroll-fade-reveal"> <span class="c-scroll-fade-reveal_area" data-scroll data-scroll-offset="0%, 80%" data-scroll-event-progress="scrollFadeRevealProgress"></span> <div class="c-scroll-fade-reveal_fade" data-el> <div class="c-scroll-fade-reveal_el"> <p>From all the team at<br/> Locomotive®</p> </div> </div> </c-scroll-fade-reveal> </div> </div> <div class="c-thanks_thanks_wrapper"> <c-scroll-fade-reveal class="c-scroll-fade-reveal"> <span class="c-scroll-fade-reveal_area" data-scroll data-scroll-offset="0%, 80%" data-scroll-event-progress="scrollFadeRevealProgress"></span> <div class="c-scroll-fade-reveal_fade" data-el> <div class="c-scroll-fade-reveal_el"> <div class="c-gradient"> <span class="c-gradient_area" data-scroll data-scroll-repeat data-scroll-offset="0, 100%" data-scroll-css-progress data-scroll-event-progress="onGradientProgress"></span> <p class="c-thanks_thanks || u-text -serif-alt || c-gradient_item" data-gradient> <span class="u-sr-only">Thank You</span> <span aria-label="hidden">Thank You</span> </p> </div> </div> </div> </c-scroll-fade-reveal> </div> </c-thanks> </div> <c-panel-clip class="c-panel-clip"> <div class="c-panel-clip_progress" data-scroll data-scroll-offset="1%, 100%" data-scroll-ignore-fold data-scroll-event-progress="onPanelClipProgress"></div> <div class="c-panel-clip_inner"> <c-push-player data-scroll data-scroll-offset="0, 100%" data-scroll-event-progress="pushPlayerProgress" data-push-player class="c-push-player"> <div style="" class="c-image -lazy-load c-push-player_image || -cover -lazy-load"> <div class="c-image_inner"> <img src="/_astro/video-background.B-XxK_Xa_Z1m2qad.webp" srcset="/_astro/video-background.B-XxK_Xa_Z1mlBdf.webp 720w, /_astro/video-background.B-XxK_Xa_Z1m2qad.webp 1440w, /_astro/video-background.B-XxK_Xa_Z1m2qad.webp 1800w" class="c-image_img" inferSize="true" sizes="(max-width: 720px) 720px, (max-width: 1440px) 1440px, 1800px" alt="Extrait de la vidéo dynastiy" loading="lazy" onload="this.closest('.c-image')?.classList?.add('is-loaded');" width="1440" height="1024" decoding="async"> </div> </div> <div class="c-push-player_container" data-container> <div class="c-push-player_thumbnail_wrapper"> <c-video data-thumbnail slot="thumbnail" class="c-video c-push-player_thumbnail"> <video class="c-video_el" src="https://player.vimeo.com/progressive_redirect/playback/992147441/rendition/720p/file.mp4?loc=external&log_user=0&signature=f95fd42a57a3121cebe21d1ec5c7d9f1764c2edb094bf11f56ac7485c406394d" data-video playsinline muted loop data-scroll data-scroll-offset="0,0" data-scroll-repeat data-scroll-call="toggleVideo"></video> </c-video> <button class="c-push-player_cta" type="button" aria-label="View showreel" aria-hidden="true" data-toggler> <span class="c-push-player_cta_label || u-text -serif-alt -huge" data-cursor>Play</span> </button> </div> <div class="c-push-player_modal" data-modal> <button class="c-push-player_close" data-toggler> <span class="u-sr-only"> Close video </span> <span class="c-push-player_close_inner" aria-hidden="true"> <span class="c-push-player_close_icon"> <span class="c-push-player_close_line"></span> <span class="c-push-player_close_line"></span> </span> </span> </button> <c-player data-player class="c-player c-push-player_player"> <video class="c-player_video" src="https://player.vimeo.com/progressive_redirect/playback/949681106/rendition/1080p/file.mp4?loc=external&log_user=0&signature=c587fd9adbfa293375e08683868203b665c66746dec7b62df59ba9067dd68bab" data-video playsinline></video> <div class="c-player_controls">  <button type="button" class="c-player_controls_item || c-player_button" data-toggle> <span class="c-player_button_inner"> <svg width="1em" height="1em" viewBox="0 0 15 15" class="c-player_button_icon -play" data-icon="play"> <symbol id="ai:local:play"><path fill="currentColor" d="M11 7.5 4 3v9l7-4.5Z"/></symbol><use xlink:href="#ai:local:play"></use> </svg> <svg width="1em" height="1em" viewBox="0 0 15 15" class="c-player_button_icon -pause" data-icon="pause"> <symbol id="ai:local:pause"><path fill="currentColor" fill-rule="evenodd" d="M4 12V3h2v9H4Zm5 0V3h2v9H9Z" clip-rule="evenodd"/></symbol><use xlink:href="#ai:local:pause"></use> </svg> </span> </button>  <div class="c-player_controls_item || c-player_timeline"> <label for="playerTimeline" class="u-sr-only">Player Timeline</label> <input class="c-player_timeline_input" type="range" min="0" max="1" step="any" data-input name="playerTimeline" id="playerTimeline"> <div class="c-player_timeline_bar"> <div class="c-player_timeline_progress"></div> <div class="c-player_timeline_handle-container"> <div class="c-player_timeline_handle"></div> </div> </div> </div>  <button type="button" class="c-player_controls_item || c-player_button || c-mute-cta" data-sound> <div class="c-mute-cta_line"> <div class="c-mute-cta_line_moving"></div> </div> <div class="c-mute-cta_line"> <div class="c-mute-cta_line_moving"></div> </div> <div class="c-mute-cta_line"> <div class="c-mute-cta_line_moving"></div> </div> </button> </div> </c-player> </div> </div> </c-push-player> </div> </c-panel-clip> <div class="u-pt-fluid-sm"> <c-stats class="c-stats u-text-gold"> <div class="c-stats_header || u-container"> <div class="c-stats_title_wrapper || u-text -serif-thin -huge"> <span class="c-stats_title_area" data-scroll data-scroll-event-progress="onTitleStatsProgress" data-scroll-offset="0,100%" data-title-stats-area></span> <p class="c-stats_title"> <span data-title-char-reference>S</span><span data-title-char-reference>t</span><span data-title-char-reference>a</span><span data-title-char-reference>t</span><span data-title-char-reference>s</span> </p> <p class="c-stats_title_alt" aria-hidden="true"> <span class="c-stats_title_alt_char" data-title-char> <span class="c-gradient"> <span class="c-gradient_area" data-scroll data-scroll-offset="0, 0" data-scroll-repeat data-scroll-event-progress="onGradientProgress"></span> <span class="c-gradient_item" data-gradient> S </span> </span> </span><span class="c-stats_title_alt_char" data-title-char> <span class="c-gradient"> <span class="c-gradient_area" data-scroll data-scroll-offset="0, 0" data-scroll-repeat data-scroll-event-progress="onGradientProgress"></span> <span class="c-gradient_item" data-gradient> t </span> </span> </span><span class="c-stats_title_alt_char" data-title-char> <span class="c-gradient"> <span class="c-gradient_area" data-scroll data-scroll-offset="0, 0" data-scroll-repeat data-scroll-event-progress="onGradientProgress"></span> <span class="c-gradient_item" data-gradient> a </span> </span> </span><span class="c-stats_title_alt_char" data-title-char> <span class="c-gradient"> <span class="c-gradient_area" data-scroll data-scroll-offset="0, 0" data-scroll-repeat data-scroll-event-progress="onGradientProgress"></span> <span class="c-gradient_item" data-gradient> t </span> </span> </span><span class="c-stats_title_alt_char" data-title-char> <span class="c-gradient"> <span class="c-gradient_area" data-scroll data-scroll-offset="0, 0" data-scroll-repeat data-scroll-event-progress="onGradientProgress"></span> <span class="c-gradient_item" data-gradient> s </span> </span> </span> </p> </div> <div class="c-stats_header_video"> <c-scroll-clip-reveal style="--scale: 0.5;" class="c-scroll-clip-reveal"> <div class="c-scroll-clip-reveal_area" data-scroll data-scroll-offset="0%, 80%" data-scroll-event-progress="scrollClipRevealProgress"></div> <div class="c-scroll-clip-reveal_clip"> <div class="c-scroll-clip-reveal_el"> <c-video class="c-video"> <video class="c-video_el" src="https://player.vimeo.com/progressive_redirect/playback/949658703/rendition/720p/file.mp4?loc=external&log_user=0&signature=1af695ed718f1e5e48b7309e766dbb74d07720b2432670f52ae1bdcf3edccd06" data-video playsinline muted loop data-scroll data-scroll-offset="0,0" data-scroll-repeat data-scroll-call="toggleVideo"></video> </c-video> </div> </div> </c-scroll-clip-reveal> </div> <div class="c-stats_header_description || u-text -tiny -sans-medium" data-text> <c-scroll-fade-reveal class="c-scroll-fade-reveal"> <span class="c-scroll-fade-reveal_area" data-scroll data-scroll-offset="0%, 80%" data-scroll-event-progress="scrollFadeRevealProgress"></span> <div class="c-scroll-fade-reveal_fade" data-el> <div class="c-scroll-fade-reveal_el"> <p>From 2018 to 2023, we've been doing what we love, putting out projects we believe in, which led us to six consecutive titles. We're grateful for every moment of growth and recognition. We love this community.</p> </div> </div> </c-scroll-fade-reveal> </div> <div class="u-pt-fluid-4xl"> <h2 class="c-stats_subtitle u-text -serif -big-alt"> <span>Six years in numbers</span> <span>(235)</span> </h2> <c-accordion class="c-accordion"> <details class="c-accordion_el is-active" open data-el> <summary class="c-accordion_summary" data-hover-shuffle="children"> <span class="u-text -medium-alt"> <span data-hover-shuffle-child>2018</span> </span> <dl class="c-specs c-accordion_preview" aria-hidden="true"> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Awards</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>38</span> </dd> </dl> </summary> <div class="c-accordion_content" data-content> <dl class="c-specs -accordion"> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Awards</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>38</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Honorable Mention</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>15</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Site of the Day</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>11</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Developer Award</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>10</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Site of the Month</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>1</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Agency of the Year</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>Winner</span> </dd> </dl> </div> </details> </c-accordion> <c-accordion class="c-accordion"> <details class="c-accordion_el" data-el> <summary class="c-accordion_summary" data-hover-shuffle="children"> <span class="u-text -medium-alt"> <span data-hover-shuffle-child>2019</span> </span> <dl class="c-specs c-accordion_preview" aria-hidden="true"> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Awards</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>38</span> </dd> </dl> </summary> <div class="c-accordion_content" data-content> <dl class="c-specs -accordion"> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Awards</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>38</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Honorable Mention</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>13</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Site of the Day</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>12</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Developer Award</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>10</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Site of the Month</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>2</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Agency of the Year</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>Winner</span> </dd> </dl> </div> </details> </c-accordion> <c-accordion class="c-accordion"> <details class="c-accordion_el" data-el> <summary class="c-accordion_summary" data-hover-shuffle="children"> <span class="u-text -medium-alt"> <span data-hover-shuffle-child>2020</span> </span> <dl class="c-specs c-accordion_preview" aria-hidden="true"> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Awards</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>33</span> </dd> </dl> </summary> <div class="c-accordion_content" data-content> <dl class="c-specs -accordion"> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Awards</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>33</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Honorable Mention</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>14</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Site of the Day</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>9</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Developer Award</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>9</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Agency of the Year</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>Winner</span> </dd> </dl> </div> </details> </c-accordion> <c-accordion class="c-accordion"> <details class="c-accordion_el" data-el> <summary class="c-accordion_summary" data-hover-shuffle="children"> <span class="u-text -medium-alt"> <span data-hover-shuffle-child>2021</span> </span> <dl class="c-specs c-accordion_preview" aria-hidden="true"> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Awards</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>31</span> </dd> </dl> </summary> <div class="c-accordion_content" data-content> <dl class="c-specs -accordion"> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Awards</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>31</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Honorable Mention</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>12</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Site of the Day</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>9</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Developer Award</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>8</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Site of the Year</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>1</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Agency of the Year</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>Winner</span> </dd> </dl> </div> </details> </c-accordion> <c-accordion class="c-accordion"> <details class="c-accordion_el" data-el> <summary class="c-accordion_summary" data-hover-shuffle="children"> <span class="u-text -medium-alt"> <span data-hover-shuffle-child>2022</span> </span> <dl class="c-specs c-accordion_preview" aria-hidden="true"> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Awards</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>31</span> </dd> </dl> </summary> <div class="c-accordion_content" data-content> <dl class="c-specs -accordion"> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Awards</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>31</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Honorable Mention</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>11</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Site of the Day</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>9</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Developer Award</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>9</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Site of the Year</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>1</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Agency of the Year</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>Winner</span> </dd> </dl> </div> </details> </c-accordion> <c-accordion class="c-accordion"> <details class="c-accordion_el" data-el> <summary class="c-accordion_summary" data-hover-shuffle="children"> <span class="u-text -medium-alt"> <span data-hover-shuffle-child>2023</span> </span> <dl class="c-specs c-accordion_preview" aria-hidden="true"> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Awards</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>28</span> </dd> </dl> </summary> <div class="c-accordion_content" data-content> <dl class="c-specs -accordion"> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Awards</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>28</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Honorable Mention</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>13</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Site of the Day</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>7</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Developer Award</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>7</span> </dd> <dt class="c-specs_label u-text -medium-alt"> <span data-hover-shuffle-child>Agency of the Year</span> </dt> <dd class="c-specs_value u-text -medium-alt"> <span data-hover-shuffle-child>Winner</span> </dd> </dl> </div> </details> </c-accordion> </div> <c-stacking data-scroll data-scroll-offset="100%,100%" data-scroll-css-progress ..rest="true" class="c-stacking"> <ul class="c-stacking_list" data-list> <li class="c-stacking_item" data-item> <div class="c-stacking_area"> <div class="c-stacking_trigger" data-trigger data-scroll data-scroll-repeat data-scroll-call="triggerStackingItem"></div> <div class="c-stacking_element" data-element> <div class="c-stacking_card"> <div class="c-stacking_card_area" data-area></div> <p class="c-stacking_card_label || u-text -medium-alt"> Total Projects </p> <p class="c-stacking_card_number || u-text -serif-thin -number"> 125 </p> </div> </div> </div> </li><li class="c-stacking_item" data-item> <div class="c-stacking_area"> <div class="c-stacking_trigger" data-trigger data-scroll data-scroll-repeat data-scroll-call="triggerStackingItem"></div> <div class="c-stacking_element" data-element> <div class="c-stacking_card"> <div class="c-stacking_card_area" data-area></div> <p class="c-stacking_card_label || u-text -medium-alt"> Site of the Day </p> <p class="c-stacking_card_number || u-text -serif-thin -number"> 93 </p> </div> </div> </div> </li><li class="c-stacking_item" data-item> <div class="c-stacking_area"> <div class="c-stacking_trigger" data-trigger data-scroll data-scroll-repeat data-scroll-call="triggerStackingItem"></div> <div class="c-stacking_element" data-element> <div class="c-stacking_card"> <div class="c-stacking_card_area" data-area></div> <p class="c-stacking_card_label || u-text -medium-alt"> Developers Awards </p> <p class="c-stacking_card_number || u-text -serif-thin -number"> 64 </p> </div> </div> </div> </li><li class="c-stacking_item" data-item data-scroll data-scroll-position="end,end" data-scroll-offset="0,0" data-scroll-event-progress="stackingProgress"> <div class="c-stacking_area"> <div class="c-stacking_trigger" data-trigger data-scroll data-scroll-repeat data-scroll-call="triggerStackingItem"></div> <div class="c-stacking_element" data-element> <div class="c-stacking_card"> <div class="c-stacking_card_area" data-area></div> <p class="c-stacking_card_label || u-text -medium-alt"> Agency of the year </p> <p class="c-stacking_card_number || u-text -serif-thin -number"> 6 </p> </div> </div> </div> </li> </ul> </c-stacking> </div> </c-stats> </div> <c-footer class="c-footer u-text-gold"> <div class="c-footer_media"> <c-video class="c-video -full"> <video class="c-video_el" src="https://player.vimeo.com/progressive_redirect/playback/949658316/rendition/1080p/file.mp4?loc=external&log_user=0&signature=aeafd59aa5b769b4ce26dc73850faf776912495e3c0ba126ac2ed1bf6fea57f2" data-video playsinline muted loop data-scroll data-scroll-offset="0,0" data-scroll-repeat data-scroll-call="toggleVideo"></video> </c-video> </div> <div class="c-footer_inner"> <footer class="c-footer_el"> <div class="c-footer_top"> <div class="c-gradient"> <span class="c-gradient_area" data-scroll data-scroll-offset="0, 100%" data-scroll-repeat data-scroll-event-progress="onGradientProgress"></span> <p class="c-footer_title || u-text -serif-alt || c-gradient_item" data-gradient> <span class="u-sr-only">Work with Champions</span> <span aria-label="hidden"><span style="font-feature-settings: 'ss01', 'dlig';">Work withChampions</span></span> </p> </div> </div> <div class="c-footer_bottom || u-container"> <div class="c-footer_ctas"> <div class="c-footer_ctas_item_wrapper"> <a href="https://locomotive.ca/en/contact?special=dynasty&data=goal,rfp&step=project" class="c-footer_ctas_item || u-text -serif-thin">Start a project</a> </div> <div class="c-footer_ctas_video_wrapper"> <c-ring data-astro-cid-265v4v5c class="c-ring"></c-ring> </div> <div class="c-footer_ctas_item_wrapper"> <a href="https://locomotive.ca/en/contact?special=dynasty&data=goal,job&step=team" class="c-footer_ctas_item || u-text -serif-thin">Join the team</a> </div> </div> <div class="c-footer_mention || u-text -tiny -sans-medium"> <p>Locomotive®<br/> world champions of the internets<br/> 2018 to 2023 dynasty<br/> Please be aware that the creation of this video and microsite was driven purely by our team's desire for a creative and enjoyable experience. We approach this WIN with a sense of humility. Our aim is simply to share a bit of joy and entertainment. We hope you find as much delight in exploring this content as we found in creating it.</p> </div> <div class="c-footer_langswitcher"> <a href="/fr" class="c-cta -default"> <span class="c-cta_inner"> <span class="c-cta_text"> fr </span> </span> </a> </div> </div> <div class="c-footer_credits"> <p class="u-text -tiny -sans-medium">©2024</p> <p class="u-text -tiny -sans-medium"> Video by <a href="https://www.chivalrycreative.com/" class="c-footer_credits_link || u-text -tiny -sans-medium">Chivalry</a> </p> </div> </footer> </div> </c-footer> </div> </main> <div class="c-spinner"></div> </body> </html>