CINXE.COM

<!DOCTYPE html><html data-wf-domain="www.itsoffbrand.com" data-wf-page="64cf4cc8c9b14fe4cb3c54b7" data-wf-site="64cf4cc8c9b14fe4cb3c54b4" lang="en"><head><meta charset="utf-8"/><title>OFF+BRAND | Design, Development, Branding, Digital Marketing & WebGL</title><meta content="We can help you with Branding, Web Design, SEO, PPC & Keyword, WebGL, 3D & Motion Design, UI / UX, Content Strategy. Professional, friendly and talented team. Get in touch!" name="description"/><meta content="OFF+BRAND | Design, Development, Branding, Digital Marketing & WebGL" property="og:title"/><meta content="We can help you with Branding, Web Design, SEO, PPC & Keyword, WebGL, 3D & Motion Design, UI / UX, Content Strategy. Professional, friendly and talented team. Get in touch!" property="og:description"/><meta content="https://cdn.prod.website-files.com/64cf4cc8c9b14fe4cb3c54b4/65202d359c62b75fd6cf9867_open-graph2.webp" property="og:image"/><meta content="OFF+BRAND | Design, Development, Branding, Digital Marketing & WebGL" property="twitter:title"/><meta content="We can help you with Branding, Web Design, SEO, PPC & Keyword, WebGL, 3D & Motion Design, UI / UX, Content Strategy. Professional, friendly and talented team. Get in touch!" property="twitter:description"/><meta content="https://cdn.prod.website-files.com/64cf4cc8c9b14fe4cb3c54b4/65202d359c62b75fd6cf9867_open-graph2.webp" property="twitter:image"/><meta property="og:type" content="website"/><meta content="summary_large_image" name="twitter:card"/><meta content="width=device-width, initial-scale=1" name="viewport"/><meta content="google-site-verification=3V17gSAFMEeR4zFEvtEXBYU7C-8fdaNW42OoRxBXuvA" name="google-site-verification"/><link href="https://cdn.prod.website-files.com/64cf4cc8c9b14fe4cb3c54b4/css/offbrand-2023.748dcdd73.min.css" rel="stylesheet" type="text/css"/><script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script><link href="https://cdn.prod.website-files.com/64cf4cc8c9b14fe4cb3c54b4/6539258c116e9b9ba5fc84f8_ob-2023-favicon.jpg" rel="shortcut icon" type="image/x-icon"/><link href="https://cdn.prod.website-files.com/64cf4cc8c9b14fe4cb3c54b4/64cf4cc8c9b14fe4cb3c54e6_256x256.jpg" rel="apple-touch-icon"/><script async="" src="https://www.googletagmanager.com/gtag/js?id=G-MQEHBQREW4"></script><script type="text/javascript">window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('set', 'developer_id.dZGVlNj', true);gtag('config', 'G-MQEHBQREW4');</script><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=5"> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Organization", "name": "off brand.", "alternateName": "It's Off Brand LTD", "url": "https://www.itsoffbrand.com", "logo": "https://cdn.prod.website-files.com/6114160b3a9a284f7a072501/633aa26cd9b979285eec6739_off-brand_schema.png", "sameAs": [ "https://twitter.com/itsoffbrand", "https://www.instagram.com/offbrand.gla/", "https://www.linkedin.com/company/itsoffbrand", "https://www.itsoffbrand.com", "https://www.facebook.com/offbrand.gla" ] } </script> <style> body { overflow: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* .main-w { will-change: opacity, transform; } */ /*hide webflow badge*/ .w-webflow-badge { display: none !important; } .w--redirected-checked + .btn-txt.checkbox-txt { color: var(--main-light); } /*preloader*/ .preloader { display: flex; } .w-editor .preloader { display: none; } /* page wipe */ html.dark .page-wipe-inner { background: var(--main-dark-alt); } html.light .page-wipe-inner { background: var(--main-light-alt); } .page-wipe-inner { overflow: clip; } .page-wipe-inner, .page-wipe-object-w { will-change: transform; } html.dark .page-wipe-path { fill: none; stroke: var(--dark-grey); stroke-miterlimit: 10; } html.light .page-wipe-path { fill: none; stroke: var(--light-grey); stroke-miterlimit: 10; } html.light .st-x, html.light .st-c { fill: none; stroke: var(--light-grey); stroke-width: 0.5; stroke-miterlimit: 10; stroke-dasharray: 1000; /* You may need to adjust this value based on the actual length of your paths */ stroke-dashoffset: 1000; /* Same value as stroke-dasharray to make the line invisible initially */ } html.light .ob-fill-fill { background: var(--main-dark); } html.dark .st-x, html.dark .st-c { fill: none; stroke: var(--dark-grey); stroke-width: 0.5; stroke-miterlimit: 10; stroke-dasharray: 1000; /* You may need to adjust this value based on the actual length of your paths */ stroke-dashoffset: 1000; /* Same value as stroke-dasharray to make the line invisible initially */ } html.dark .ob-fill-fill { background: var(--main-light); } html.dark [data-nav-tl] [split-text] { text-shadow: 0px 1em 0px var(--main-light) !important; } html.light [data-nav-tl] [split-text] { text-shadow: 0px 1em 0px var(--main-dark) !important; } html.dark [data-nav-tl] .btn-icon-w .btn-txt { text-shadow: -1em 0px 0px #ffffff; !important; } html.light [data-nav-tl] .link-track-fill { background-color: var(--main-dark); !important; } html.dark [data-nav-tl] .link-track-fill { background-color: var(--main-light); !important; } /*overflow*/ [overflow="clip"] { overflow: clip; } [overflow="hidden"] { overflow: hidden; } [overflow="visible"] { overflow: visible; } /*true 100vh*/ [true-vh] { height: calc(var(--vh, 1vh) * 100) !important; } /*cursor*/ [data-cursor-wrap] { opacity: 0; transition-property: opacity; transition-duration: 200ms; transition-timing-function: ease; } body:hover [data-cursor-wrap] { opacity: 1; } /* init */ [data-start="hidden"] { visibility: hidden; } /* orb */ .orb canvas { width: 100% !important; height: 100% !important; background-color: transparent !important; } /* animations */ [stagger-scroll] .line { overflow: hidden; } /* homepage grid animation */ [grid-anim] { height: 50vh !important; } .hg-grid-overlay .line { overflow: hidden; } .hg-grid { perspective: var(--perspective); transform-style: preserve-3d; } .hg-grid-w { display: grid; place-items: center; width: 100%; place-items: center; perspective: var(--perspective); will-change: transform; /* transform-style: preserve-3d; */ } .hg-grid-item { aspect-ratio: 14 / 9; will-change: transform; } .hg-grid-item .text-small { position: absolute; /* backface-visibility: hidden; */ /* perspective: 1000px; */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translateZ(0) !important; } .hg-grid-item-inner { position: relative; width: calc(1 / var(--grid-inner-scale) * 100%); height: calc(1 / var(--grid-inner-scale) * 100%); background-size: cover; background-position: 50% 50%; } /* homepage cross animation */ .s.is-hsc { overflow: clip; } @keyframes loopGradient { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } [gradient-evolve] { /* Initial gradient */ background-image: linear-gradient( 255deg, #facb0e, #f06ba8 30%, #78bae6 65%, #fff ); } /* Pseudo element with final gradient */ [gradient-evolve]::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* Final gradient */ background-image: linear-gradient( 255deg, #f06ba8, #facb0e 30%, #78bae6 65%, #fff ); animation: loopGradient 5s infinite; /* 5s is the duration; adjust as needed */ } /* light/dark */ html.dark body { background-color: var(--main-dark); } html.dark body { color: var(--main-light); } html.dark .hud-menu-bg { background: var(--main-dark); border-color: var(--dark-grey); } html.dark .btn-w { background: var(--main-dark); border-color: var(--dark-grey); } html.dark [data-brand] { fill: var(--main-light); } html.dark .hud-social-img path { fill: var(--main-light); } html.dark .hud-menu-line, html.dark .hud-scroll-dot { background: var(--main-light); } html.dark .hud-scroll-line-top, html.dark .hud-scroll-line-btm { background: var(--dark-grey); } html.dark .btn-w [stagger-text] { text-shadow: 0px 1em 0px var(--main-light); } html.dark .btn-w .btn-icon-w .btn-txt { text-shadow: -1em 0px 0px var(--main-light); } html.dark .hud-menu-link [stagger-text], .page-link-w [split-text] { text-shadow: 0px 1em 0px var(--main-light); } html.dark .page-link-w [split-text] { text-shadow: 0px 1em 0px var(--main-light); } html.dark .hud-menu-link .btn-icon-w .btn-txt { text-shadow: -1em 0px 0px var(--main-light); } html.dark .hud-menu-link .link-track-fill { background: var(--main-light); } html.dark .hud-menu-link .link-track { background: var(--dark-grey); } html.dark .orb-outline { border-color: var(--dark-grey); } html.dark .mode-toggle-track { border-color: var(--dark-grey); } html.dark .hsc-img-path { fill: white; } html.dark .c.is-hsc { background: black; mix-blend-mode: multiply; } html.dark .s.is-hsc { mix-blend-mode: lighten; } html.dark .hg-img-overlay { background: rgba(29, 29, 29, 0.3); } html.dark .hsc-track .h-c { color: var(--main-dark); } /* light */ html.light .hud-menu-bg { background: var(--main-light); border-color: var(--light-grey); } html.light .btn-w { background: var(--main-light); border-color: var(--light-grey); } html.light [data-brand] { fill: var(--main-dark); } html.light .hud-social-img path { fill: var(--main-dark); } html.light .hud-menu-line, html.light .hud-scroll-dot { background: var(--main-dark); } html.light .hud-scroll-line-top, html.light .hud-scroll-line-btm { background: var(--light-grey); } html.light .btn-w [stagger-text] { text-shadow: 0px 1em 0px var(--main-dark); } html.light .btn-w .btn-icon-w .btn-txt { text-shadow: -1em 0px 0px var(--main-dark); } html.light .hud-menu-link [stagger-text] { text-shadow: 0px 1em 0px var(--main-dark); } html.light .page-link-w [split-text] { text-shadow: 0px 1em 0px var(--main-light); } html.light .hud-menu-link .btn-icon-w .btn-txt { text-shadow: -1em 0px 0px var(--main-dark); } html.light .hud-menu-link .link-track-fill { background: var(--main-dark); } html.light .hud-menu-link .link-track { background: var(--light-grey); } html.light .orb-outline { border-color: var(--grey-rotate); } html.light .mode-toggle-track { border-color: var(--light-grey); } html.light .hsc-img-path { fill: black; } html.light .hg-img-overlay { background: rgba(255, 255, 255, 0.3); } html.light .s.is-hsc { mix-blend-mode: darken; } html.light .c.is-hsc { background: white; mix-blend-mode: lighten; } html.light .hsc-track .h-c { color: var(--main-dark); } .line { white-space: nowrap } </style>   <script defer src="https://assets.itsoffbrand.io/ob/js/index.n.03.js"></script>  <script src="https://assets.itsoffbrand.io/ob/js/offbrand-orb.iife.js"></script> <style> @media only screen and (max-width: 992px) { [data-orb-wrap] { position: absolute; } } </style></head><body data-start="hidden"><div class="embed"><div class="css-global w-embed"><style> /* ---- ALL PAGES CSS ---- */ /* ---- ALL PAGES CSS ---- */ html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-size: 1.0582010582010584vw; } *, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; margin: 0; padding: 0; } /* ---- Main Variables ---- */ :root { --main-dark: #1d1d1d; --main-dark-alt: #252525; --main-light: #e5e4e0; --main-light-alt: #f1f0ec; --primary-color: #ff642f; --dark-grey: rgba(218, 218, 218, 0.2); --dark-grey60: rgba(218, 218, 218, 0.6); --light-grey: rgba(111, 111, 111, 0.2); --light-grey60: rgba(111, 111, 111, 0.6); --grey-rotate: #bfbebe; --large-radius: 6.25em; --med-radius: 1.375em; --small-radius: 0.625em; --perspective: 4000px; --grid-inner-scale: 1; --grid-item-ratio: 1.5; } /* ---- Global Styles ---- */ ::selection { background: var(--main-dark); color: var(--main-light); text-shadow: none; } img::selection, svg::selection { background: transparent; } a { color: inherit; text-decoration: none; } [display-none] { display: none !important; } [data-blur] { box-shadow: 0 0 10px 0 hsla(0, 0%, 11.37%, 0.1); } :where(:focus-visible) { outline: 2px solid var(--focus-color, Highlight); outline-offset: 2px; } :where(.visually-hidden:not(:focus, :active, :focus-within, .not-visually-hidden)) { clip-path: inset(50%) !important; height: 1px !important; width: 1px !important; overflow: hidden !important; position: absolute !important; white-space: nowrap !important; border: 0 !important; } /* ---- Lenis ---- */ [data-lenis-prevent] { overscroll-behavior-y: contain; } /* ---- Lightboxes ---- */ .w-lightbox-close { right: 5em; height: 5em; outline: transparent; } /* ---- Line Clamp ---- */ [line-clamp] { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } [line-clamp="2"] { -webkit-line-clamp: 2; } /* ---- Pointer Events ---- */ [pointer-none] { pointer-events: none !important; user-select: none; } [pointer-auto] { pointer-events: auto; } /* ---- Custom Mouse ---- */ [data-cursor-wrap] { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: difference; } [data-cursor] { border-radius: 50%; position: absolute; background-color: #fff9; transform: translate(-50%, -50%) scale(1); pointer-events: none; transition: scale 0.3s; } [data-cursor].hover { transform: scale(0.55); } /* ---- Orb ---- */ [data-orb], [orb-out-w], [orb-outline], [data-cursor] { will-change: transform; } [data-orb-wrap] { overflow-x: clip } /* ---- Menu ---- */ .hud-menu-o.is-edit .hud-menu-content { pointer-events: auto; opacity: 1; } /* Closed (in breakpoints) */ /* Open */ .hud-menu-w.is-open .hud-menu-line.is-1 { transform: translate(0em, 0em) rotate(45deg); } .hud-menu-w.is-open .hud-menu-line.is-2 { transform: translate(0em, 0em) scale3d(0, 1, 1); } .hud-menu-w.is-open .hud-menu-line.is-3 { transform: translate(0em, 0em) rotate(-45deg); } /* ---- Buttons ---- */ /* Main Buttons */ .btn-w [stagger-text] { text-shadow: 0px 1em 0px var(--main-dark); } .btn-icon-w .btn-txt { text-shadow: -1em 0px 0px var(--main-dark); transition-property: transform; transition-duration: 1200ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } /* Simple Buttons */ .hud-menu-link [stagger-text], .page-link-w [split-text] { text-shadow: 0px 1em 0px var(--main-dark); } .hud-menu-link .btn-icon-w .btn-txt { text-shadow: -1em 0px 0px var(--main-dark); transition-property: transform; transition-duration: 1200ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } .hud-menu-link .link-track-fill { background: var(--main-dark); } /* Page Link Buttons */ .page-link-w .btn-icon-w .btn-txt { transition-property: transform; transition-duration: 1200ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } .mbm-diff .btn-icon-w .btn-txt { text-shadow: -1em 0px 0px var(--main-light); } .btn-icon-w .text-small { backface-visibility: hidden; } /* Colour Toggle */ .hud-mode-toggle-w[mode-toggle="light"] .mode-toggle-track { background: var(--main-light); } .hud-mode-toggle-w[mode-toggle="light"] .mode-toggle-btn { background: var(--main-dark); transform: translate(2.5em, 0px); } .hud-mode-toggle-w[mode-toggle="dark"] .mode-toggle-track { background: var(--main-dark); } .hud-mode-toggle-w[mode-toggle="dark"] .mode-toggle-btn { background: var(--main-light); transform: translate(0em, 0px); } /* Hud scroll indicator */ .hud-scroll-line-top { animation: pulse 4s infinite ease-in-out; } @keyframes pulse { 0% { transform: scale3d(1, 0, 1); } 50% { transform: scale3d(1, 1, 1); opacity: 1; } 100% { transform: scale3d(1, 0, 1); } } /* preloader */ .ob-fill-mask, .hsc-fill-mask { mask-image: url("https://cdn.prod.website-files.com/61e0406d0ccbda9d6f89df7f/64ce56bd39c2f116181f1aa5_ob-2023-logomark-svg.svg"); -webkit-mask-image: url("https://cdn.prod.website-files.com/61e0406d0ccbda9d6f89df7f/64ce56bd39c2f116181f1aa5_ob-2023-logomark-svg.svg"); mask-size: cover; -webkit-mask-size: cover; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; } [preloader] { visibility: hidden; } /* ----- Home Headlines ----- */ .hh-text-block { mix-blend-mode: difference; color: var(--main-light); user-select: none; } .mbm-diff { mix-blend-mode: difference; color: var(--main-light); user-select: none; } [no-mbm] { color: var(--main-dark); mix-blend-mode: normal; } html.dark [no-mbm] { color: var(--main-light); mix-blend-mode: normal; } html.light [no-mbm] { color: var(--main-dark); mix-blend-mode: normal; } /* home hero */ [hh-tb], [hh-tb] .char { will-change: transform; } /* home scroll animation*/ .s.is-hsc, .c.is-hsc, .hsc-rotate { will-change: transform; } [hsc-img] { will-change: transform, height, width; transform: translateZ(0); } /* home grid animation */ [grid-anim], .hg-grid-item, .hg-grid-inner { will-change: transform; } /* ----- Work Page ----- */ /* ----- Work Page ----- */ /* hero text */ .ow-hl-row { will-change: transform; } /* ----- Work Case Study Items ----- */ .hg-img-w { pointer-events: none; } .hcs-item-w { aspect-ratio: 1 / 1; will-change: transform, opacity; } /* ----- Contact Page ----- */ .cp-form { display: flex !important; } .checkbox-box .btn-txt { pointer-events: none; } .form-input.is-textarea { resize: vertical; } html.light [data-check="true"] .checkbox-toggle { border-color: var(--light-grey); background: var(--main-dark); } html.light [data-check="true"] .btn-txt { color: var(--main-light); } html.dark .checkbox-toggle { border-color: var(--dark-grey); background: var(--main-dark); } html.dark .cp-form-w .btn-txt { color: var(--main-light); } html.dark [data-check="true"] .checkbox-toggle { border-color: var(--dark-grey); background: var(--main-light); } html.dark [data-check="true"] .btn-txt { color: var(--main-dark); } html.dark .cp-form-w { background: var(--main-dark-alt); } html.dark .form-input { background-color: var(--dark-grey); color: var(--main-light); } html.dark .form-input:focus { background-color: var(--main-dark); border-color: var(--main-light-alt); } /* ----- Services Page ----- */ /* ----- Services Page ----- */ .ser-grid-item { background: var(--main-light-alt); border-radius: var(--small-radius); border: 1px solid var(--light-grey); -webkit-mask-image: -webkit-radial-gradient(white, black); } .is-ser-title { transition-duration: 600ms; transition-property: color; transition-timing-function: ease; } .ser-cross-w { transition-duration: 600ms; transition-timing-function: ease; transition-property: transform, opacity; } .ser-cross-w { transform: scale(0.8); opacity: 0.8; } .is-ser-title { transform-origin: 0% 50%; } .ser-content-w, .ser-grid-item { overflow: clip; } .ser-grid-item.is--active .btn-w { background: black; } html.dark .ser-grid-item.is--active .btn-w { background: white; color: black; } html.dark .ser-grid-item .btn-w [stagger-text] { text-shadow: 0px 1em 0px var(--main-dark); } html.dark .ser-grid-item .btn-w .btn-icon-w .btn-txt { text-shadow: -1em 0px 0px var(--main-dark); } html.dark .ser-grid-item { background: var(--main-dark-alt); border: 1px solid var(--dark-grey); } html.light .ser-grid-item.is--active .ser-cross-svg { fill: var(--main-dark); } html.dark .ser-grid-item.is--active .ser-cross-svg { fill: var(--main-light); } html.dark .ser-grid-item.is--active .is-ser-title { color: var(--main-light); } </style></div><div class="css-global w-embed"><style> /* ----- About Page ----- */ /* ----- About Page ----- */ .team-titles .text-small { line-height: 1; } /* team card hover*/ .team-cross-w, .team-cross { transition-duration: 600ms; transition-timing-function: ease; transition-property: transform, opacity; } .team-title-w { transition-duration: 600ms; transition-timing-function: ease; transition-property: opacity; } /* team card active */ .team-item-w.is--active .team-img-w { transform: scale(1.1); } .team-item-w.is--active .team-title-w { opacity: 1; } .team-item-w.is--active .team-cross-w { transform: scale(1); opacity: 1; } .team-item-w.is--active .team-cross { transform: rotate(45deg); } /* bento blocks */ .abt-block-w.is-2 { aspect-ratio: 1 / 1; } .abt-block-w.is-1 .abt-block-info-w { color: var(--main-light); } .abt-block-w.is-4 .abt-block-info-w { display: flex; justify-content: center; align-items: center; } /*.abt-anim-label .text-small { transition: transform 0.3s ease; }*/ [abt-vid] { height: 100%; width: 100%; } .abt-block-w.is-1 .abt-txt, .abt-block-w.is-1 .span-small { color: var(--main-dark) !important; } .text-small.flip-text { transform: rotate(180deg); display: inline-block; /* Needed to apply the transformation */ } .abt-cross-svg { fill: var(--main-dark); } html.dark .abt-cross-svg { fill: var(--main-light); } .abt-rotator-svg { fill: var(--main-light-alt); } html.dark .abt-rotator-svg { fill: var(--main-dark-alt); } .abt-block-w.is-2 { background: var(--main-light-alt); border: 1px solid var(--light-grey); } html.dark .abt-block-w.is-2 { background: var(--main-dark-alt); border: 1px solid var(--light-grey); } [case-hero] [split-hero] .word { overflow: hidden; } .cs-embed.is-large { aspect-ratio: 4 / 3; } .cs-embed.is-mobile { aspect-ratio: 9 / 16; } [aspect-ratio="4-3"] { aspect-ratio: 4 / 3; } [aspect-ratio="9-16"] { aspect-ratio: 9 / 16; } .cs-feature-w, .cs-element-embed { background: var(--main-light-alt); /*border: 1px solid var(--light-grey);*/ } html.dark .cs-feature-w, html.dark .cs-element-embed { background: var(--main-dark-alt); /*border: 1px solid var(--dark-grey);*/ } [gradient-evolve] { /* Initial gradient */ background-image: linear-gradient( 255deg, #facb0e, #f06ba8 30%, #78bae6 65%, #fff ); } /* ----- careers ----- */ html.dark .car-item-w { background: var(--main-dark-alt); border-color: var(--dark-grey); color: var(--main-light); } </style></div><div class="css-ent w-embed"><style> /* ----- WF Ent ----- */ /* ----- WF Ent ----- */ /* ------------------------------------- work slider*/ .ps__slider--slide.light .h-eyebrow { color: var(--black) !important; } .ps__slider--slide.dark .h-eyebrow { color: var(--white) !important; } .ps__slider--slide.light .ps-cross path { fill: var(--black) !important; } .ps__slider--slide.dark .ps-cross path { fill: var(--white) !important; } .ps__slider--slide.light .btn-w.is--outline { border-color: var(--black) !important; color: var(--black) !important; } .ps__slider--slide.light .btn-w.is--outline .btn-txt { color: var(--black) !important; } .ps__slider--slide.dark .btn-w.is--outline { border-color: var(--white) !important; color: var(--white) !important; } .ps__slider--slide.dark .btn-w.is--outline .btn-txt { color: var(--white) !important; } .ps__slider--slide .btn-w.is--outline { background: none !important; } .ps__slider--slide .btn-w .o-hidden [stagger-text] { text-shadow: 0px 1em 0px var(--main-light) !important; } /* ------------------------------------- faq */ .load-btn__fill { transition: transform 0.6s ease; } ._wf-ent__load-btn:hover .load-btn__fill { transform: scale3d(1, 1, 1); } .slider-main_button.is-disabled { opacity: 0.3; cursor: not-allowed; } ._wf-ent__faq--col-list ._wf-ent__faq--item:first-child ._wf-ent__faq--trigger { border:none; } /* showreel ._wf-ent__vid--w:hover ._wf-ent__vid--tt { opacity: 1; }*/ /* ------------------------------------- light dark */ html.dark ._wf-ent__why--card { background-color: var(--main-dark-alt); } html.dark ._wf-ent__why--card:hover { background-color: var(--main-dark); } html.dark .swiper-slide.is-slider-main { background-color: var(--main-dark-alt); } html.dark .swiper-drag.is-slider-main { background-color: var(--main-light-alt); } html.dark .slider-main_button { color: var(--dark-grey); } html.dark .slider-main_button:hover { color: var(--main-light); } html.dark [faq-svg] path { fill: var(--main-light); } ._wf-ent-hero__emb-y video::-webkit-media-controls-panel { background-color: rgba(0, 0, 0, 0.5); } ._wf-ent-hero__emb-y video::-webkit-media-controls-play-button, ._wf-ent-hero__emb-y video::-webkit-media-controls-volume-slider, ._wf-ent-hero__emb-y video::-webkit-media-controls-mute-button, ._wf-ent-hero__emb-y video::-webkit-media-controls-timeline { filter: invert(0); } </style></div><div class="css-breakpoints w-embed"><style> /* ----- css variations ----- */ /* ----- css variations ----- */ /* ----------------------------------------- desktop */ /* ----------------------------------------- desktop */ /* ----------------------------------------- desktop */ @media only screen and (min-width: 992px) { /* buttons */ .btn-w:hover .btn-icon-w .btn-txt { transform: translate(1em, 0em); } /* Simple Buttons */ .hud-menu-link [stagger-text], .page-link-w [split-text] { text-shadow: 0px 1rem 0px var(--main-dark); } .hud-menu-link .btn-icon-w .btn-txt { text-shadow: -1rem 0px 0px var(--main-dark); } .hud-menu-link:hover .btn-icon-w .btn-txt { transform: translate(1rem, 0em); } /* Page Link Buttons */ /* .page-link-w:hover .btn-icon-w .btn-txt { transform: translate(1rem, 0em); } */ /* Page Link Buttons */ .page-link-w:hover .btn-icon-w .btn-txt { transform: translate(1rem, 0em); } .page-link-w:hover .link-track-fill { transform: scale3d(1, 1, 1); } .mbm-diff .btn-icon-w .btn-txt { text-shadow: -1rem 0px 0px var(--main-light); } /* hud menu */ /* general */ .hud-menu-link:hover .btn-icon-w .btn-txt { transform: translate(1em, 0em); } .hud-menu-link:hover .link-track-fill { transform: scale3d(1, 1, 1); } /* closed */ .hud-menu-w:not(.is-open):hover .hud-menu-line.is-1 { transform: translate(0em, -0.6em); } .hud-menu-w:not(.is-open):hover .hud-menu-line.is-2 { transform: translate(0em, 0em); } .hud-menu-w:not(.is-open):hover .hud-menu-line.is-3 { transform: translate(0em, 0.6em); } /* open */ .hud-menu-w.is-open:hover .hud-menu-line.is-1 { transform: translate(0em, 0em) rotate(35deg); } .hud-menu-w.is-open:hover .hud-menu-line.is-2 { transform: translate(0em, 0em) scale3d(0, 1, 1); } .hud-menu-w.is-open:hover .hud-menu-line.is-3 { transform: translate(0em, 0em) rotate(-35deg); } /*service page*/ .ser-grid-slot:not(.is--active) { height: 16em; } .ser-grid-item:hover .ser-cross-w { transform: scale(1); opacity: 1; } /* ----- Work Case Study Items ----- */ .hcs-item-w:hover .hcs-img-w { transform: scale(1.1); } .hcs-item-w:hover .hcs-info-w { transform: translate(0px, 0em); } /* contact form page */ html.light [data-check="true"] .checkbox-toggle:hover { border-color: var(--light-grey60); } html.dark [data-check="true"] .checkbox-toggle:hover { border-color: var(--dark-grey60); } /* ----- About Page ----- */ .team-item-w:hover .team-img-w { transform: scale(1.1); } /* team card hover*/ .team-item-w:hover .team-cross-w { transform: scale(1); opacity: 1; } .team-item-w:hover .team-title-w { opacity: 1; } } /* ----------------------------------------- tablet */ /* ----------------------------------------- tablet */ /* ----------------------------------------- tablet */ @media only screen and (max-width: 992px) { [data-hide="tab"] { display: none; } body { overflow: visible; } :root { --small-radius: 0.4rem; --med-radius: 0.8rem; } .home-hero-tablet-text { width: calc(100% - 4vw); } .span-tablet-hero.is-3 { display: none !important; } /* Colour Toggle */ .hud-mode-toggle-w[mode-toggle="light"] .mode-toggle-btn { transform: translate(2.5rem, 0px); } .hud-mode-toggle-w[mode-toggle="dark"] .mode-toggle-btn { transform: translate(0rem, 0px); } /* --- work page --- */ .hcs-item-w .hcs-info-w { transform: translate(0px, 0em); } .hcs-item-w .text-small { font-size: 1rem; } /* --- hud menu -- */ .hud-menu-link { padding-bottom: .3rem; } .hud-menu-link .text-small { font-size: 1rem; } .hud-menu-link .text-mini { font-size: 0.85rem; } /* ---- Services Page ---- */ /*.ser-grid-item:not(.is--active) { height: 10em; }*/ } /* above mobile landscape */ @media screen and (min-width: 767px) { .checkbox-box .range-icon { transition-duration: 400ms; transition-property: transform, background; } .checkbox-box:hover .range-icon { transform: scale(1.3); } .checkbox-box.is-range .checkbox-txt { transition-duration: 400ms; transition-property: color; } .checkbox-box .range-active { transition-duration: 400ms; transition-property: opacity; } .checkbox-box.is--active .range-active { opacity: 1; } .checkboxes-w:hover .range-active { opacity: 1 !important; } html.light .checkbox-box.is--active .range-icon { background: var(--main-dark); } html.light .range-active { background: var(--main-dark); } html.light .checkbox-box.is-range .checkbox-txt { color: var(--light-grey); } html.light .checkbox-box.is-range.is--active .checkbox-txt { color: var(--main-dark); } html.dark .checkbox-box .range-icon { background: var(--dark-grey); } html.dark .checkbox-box.is--active .range-icon { background: var(--main-light); } html.dark .range-active { background: var(--main-light); } html.dark .checkbox-box.is-range .checkbox-txt { color: var(--dark-grey); } html.dark .checkbox-box.is-range.is--active .checkbox-txt { color: var(--main-light); } } /* mobile landscape */ @media screen and (max-width: 767px) { .span-tablet-hero.is-3 { display: inline-block !important; } /* --- radio --- */ html.dark .checkbox-toggle.is-radio.is-range { border-color: var(--dark-grey); background: var(--main-dark); } html.dark [data-check="true"] .checkbox-toggle.is-radio.is-range { border-color: var(--dark-grey); background: var(--main-light); } } /* mobile */ @media screen and (max-width: 497px) { [data-hide="m"] { display: none;} } </style></div><div class="css-edit w-embed"><style> /* ----- edit mode ----- */ /* ----- edit mode ----- */ [data-edit="true"] .ps__slider--slide { position: relative; } [data-edit="true"] .ps__slider--track { flex-direction: column; flex-wrap: nowrap; height: auto; } [data-edit="true"] ._wf-ent__client--g { position: relative; top: 0em; } [data-edit="true"] ._wf-ent__faq--reveal { height: auto; } </style></div></div><div data-cursor-wrap="" class="cursor-w"><div data-cursor="" class="cursor-dot"></div></div><div pointer-none="" class="hud-w"><div class="c is-hud"><div class="hud-content"><div pointer-auto="" class="hud-brand-w"><a href="/" aria-current="page" class="hud-brand-link w-inline-block w--current"><div display-none="" class="hud-brand-img w-embed"><svg width="100%" height="100%" viewBox="0 0 612 129" fill="none" xmlns="http://www.w3.org/2000/svg"> <g data-brand clip-path="url(#a)" fill="var(--main-dark)"> <path d="M228.162 64.642c-4.51-2.834-9.691-4.246-15.521-4.246-4.866 0-9.376 1.168-13.53 3.514-4.155 2.347-7.436 5.638-9.823 9.884h-.528v-39.94c0-.356-.091-.62-.264-.793a.92.92 0 0 0-.66-.264h-9.02a.906.906 0 0 0-.661.264c-.172.173-.264.447-.264.793v93.41c0 .264.092.508.264.731a.807.807 0 0 0 .661.335h8.492c.355 0 .619-.112.792-.335.173-.223.264-.467.264-.731v-11.407h.396c2.296 4.073 5.597 7.272 9.883 9.619 4.287 2.346 8.96 3.514 13.998 3.514 5.84 0 11.011-1.411 15.521-4.245 4.51-2.834 7.984-6.837 10.411-12.007 2.428-5.17 3.647-11.163 3.647-17.979 0-6.816-1.219-12.83-3.647-18.05-2.438-5.221-5.901-9.244-10.411-12.078v.01Zm.335 43.586c-1.727 3.759-4.205 6.653-7.425 8.695-3.23 2.032-7.009 3.047-11.346 3.047-4.338 0-8.116-1.015-11.347-3.047-3.23-2.031-5.708-4.957-7.425-8.756-1.727-3.799-2.59-8.268-2.59-13.398 0-5.13.884-9.487 2.651-13.337 1.768-3.85 4.266-6.816 7.496-8.888 3.231-2.082 6.969-3.118 11.215-3.118 4.245 0 8.095 1.016 11.275 3.047 3.179 2.032 5.657 4.977 7.425 8.827 1.767 3.85 2.651 8.34 2.651 13.47 0 5.129-.863 9.71-2.59 13.468l.01-.01Zm282.556-75.43h-8.888c-.264 0-.508.09-.731.263-.224.183-.336.447-.336.793v39.94h-.396c-2.478-4.246-5.769-7.537-9.883-9.884-4.114-2.346-8.604-3.514-13.469-3.514-5.932 0-11.143 1.412-15.653 4.246-4.51 2.834-7.964 6.856-10.351 12.077-2.387 5.221-3.586 11.234-3.586 18.05 0 6.816 1.199 12.809 3.586 17.979 2.387 5.171 5.841 9.183 10.351 12.007 4.51 2.834 9.731 4.246 15.653 4.246 5.038 0 9.69-1.169 13.936-3.515s7.517-5.546 9.823-9.619h.396v11.407c0 .264.112.508.335.731.223.224.467.335.731.335h8.492c.356 0 .62-.111.792-.335.173-.223.265-.467.265-.731v-93.41c0-.356-.092-.62-.265-.792-.182-.173-.446-.265-.792-.265l-.01-.01Zm-12.138 75.369c-1.727 3.809-4.206 6.725-7.426 8.756-3.23 2.032-7.009 3.047-11.346 3.047s-8.096-1.015-11.275-3.047c-3.179-2.031-5.637-4.926-7.364-8.695-1.727-3.758-2.59-8.248-2.59-13.469s.863-9.62 2.59-13.469c1.727-3.85 4.205-6.785 7.425-8.827 3.23-2.031 6.968-3.047 11.214-3.047s7.984 1.036 11.214 3.118c3.23 2.082 5.729 5.038 7.497 8.888 1.767 3.85 2.651 8.289 2.651 13.337 0 5.049-.864 9.599-2.59 13.398v.01ZM50.098 64.774C45.1 61.858 39.37 60.396 32.91 60.396c-6.46 0-12.19 1.442-17.187 4.317-4.998 2.874-8.868 6.917-11.61 12.138C1.37 82.072 0 88.045 0 94.76s1.371 12.667 4.114 17.847c2.742 5.17 6.612 9.203 11.61 12.078 4.998 2.874 10.727 4.317 17.187 4.317 6.46 0 12.19-1.433 17.187-4.317 4.997-2.875 8.888-6.897 11.681-12.078 2.783-5.17 4.175-11.123 4.175-17.847 0-6.724-1.392-12.677-4.175-17.847-2.783-5.17-6.684-9.223-11.681-12.138Zm1.99 43.383c-1.818 3.809-4.357 6.724-7.628 8.756-3.27 2.032-7.12 3.047-11.539 3.047s-8.268-1.015-11.54-3.047c-3.27-2.032-5.789-4.926-7.567-8.695-1.767-3.758-2.65-8.248-2.65-13.47 0-5.22.883-9.618 2.65-13.468 1.768-3.85 4.287-6.785 7.568-8.827 3.27-2.032 7.12-3.047 11.539-3.047s8.289 1.015 11.61 3.047c3.322 2.031 5.861 4.977 7.629 8.827 1.767 3.85 2.65 8.34 2.65 13.469 0 5.13-.903 9.599-2.721 13.398v.01Zm100.176-75.37h-13.937c-4.693 0-8.319 1.26-10.879 3.779-2.57 2.519-3.849 6.165-3.849 10.95v13.53H95.807V41.543h17.644c.356 0 .62-.091.792-.264a.902.902 0 0 0 .264-.66v-6.765c0-.711-.355-1.057-1.056-1.057H99.515c-4.693 0-8.32 1.26-10.88 3.779-2.569 2.519-3.849 6.166-3.849 10.95v13.53H72.18c-.62 0-.924.355-.924 1.056v6.765c0 .264.091.508.264.732a.804.804 0 0 0 .66.335h12.606v57.32c0 .711.356 1.056 1.067 1.056h8.888c.71 0 1.056-.355 1.056-1.056v-57.32h27.791v57.32c0 .711.356 1.056 1.067 1.056h8.888c.711 0 1.056-.355 1.056-1.056v-57.32h17.644c.711 0 1.057-.356 1.057-1.056v-6.766c0-.355-.092-.62-.264-.792-.183-.172-.447-.264-.793-.264h-17.644V41.563h17.644c.356 0 .62-.091.793-.264a.906.906 0 0 0 .264-.66v-6.765c0-.711-.356-1.056-1.057-1.056l.021-.03Zm259.01 27.599c-4.865 0-9.182 1.036-12.941 3.118-3.758 2.082-6.785 5.15-9.091 9.223h-.396V62.112c0-.355-.091-.62-.264-.792-.183-.173-.447-.264-.792-.264h-8.492a.902.902 0 0 0-.66.264c-.183.183-.265.447-.265.792v65.152c0 .264.092.508.265.731a.804.804 0 0 0 .66.335h9.02a.805.805 0 0 0 .66-.335c.173-.223.264-.467.264-.731v-37.29c0-6.632 1.524-11.65 4.581-15.063 3.048-3.403 7.497-5.11 13.337-5.11 5.841 0 10.148 1.636 12.941 4.907 2.783 3.27 4.175 8.36 4.175 15.257v37.288c0 .265.112.508.335.732.224.223.467.335.732.335h8.887c.356 0 .62-.112.793-.335.172-.224.264-.467.264-.732V89.965c0-9.64-2.052-16.984-6.166-22.022-4.114-5.038-10.066-7.568-17.847-7.568v.01Zm-120.49.66h-20.702c-4.692 0-8.319 1.26-10.878 3.778-2.57 2.52-3.85 6.166-3.85 10.95v51.479c0 .265.112.508.335.732.223.223.467.335.731.335h8.888c.356 0 .62-.112.793-.335.172-.224.264-.467.264-.732V70.462h24.419c.355 0 .619-.112.792-.335.173-.224.264-.468.264-.732v-7.293c0-.355-.091-.62-.264-.792-.183-.173-.447-.264-.792-.264Zm70.9 0h-8.888c-.711 0-1.066.355-1.066 1.056v11.682h-.396c-2.479-4.246-5.77-7.538-9.884-9.884-4.114-2.346-8.603-3.514-13.469-3.514-5.932 0-11.143 1.411-15.653 4.245s-7.963 6.857-10.35 12.078c-2.387 5.22-3.586 11.234-3.586 18.05 0 6.816 1.199 12.809 3.586 17.979 2.387 5.17 5.84 9.183 10.35 12.007 4.51 2.834 9.731 4.245 15.653 4.245 5.038 0 9.691-1.168 13.937-3.514 4.245-2.347 7.516-5.546 9.822-9.619h.396v11.407c0 .264.112.508.335.731.224.223.468.335.732.335h8.492c.711 0 1.056-.355 1.056-1.056V62.123c0-.356-.091-.62-.264-.793-.183-.172-.447-.264-.792-.264l-.011-.02Zm-12.138 47.101c-1.727 3.809-4.205 6.724-7.425 8.756-3.23 2.031-7.009 3.047-11.346 3.047-4.338 0-8.096-1.016-11.275-3.047-3.18-2.032-5.638-4.927-7.365-8.695-1.727-3.758-2.59-8.248-2.59-13.47 0-5.22.863-9.618 2.59-13.468 1.727-3.85 4.206-6.786 7.425-8.827 3.231-2.032 6.969-3.048 11.215-3.048 4.245 0 7.984 1.036 11.214 3.119 3.23 2.082 5.729 5.038 7.496 8.888 1.767 3.85 2.651 8.288 2.651 13.337 0 5.048-.863 9.599-2.59 13.398v.01Z"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M589.1 39.24c-4.95 0-9 4.05-9 9l-.01-.01v21.73c0 .86-.7 1.56-1.56 1.56h-3.95c-.86 0-1.56-.7-1.56-1.56V48.23c0-4.95-4.05-9-9-9.01h-21.46c-.86 0-1.56-.7-1.56-1.56v-3.68c0-.86.7-1.56 1.56-1.56h21.48c4.95 0 9-4.05 8.99-9V1.56c0-.86.7-1.56 1.56-1.56h3.95c.86 0 1.56.7 1.56 1.56v21.87c0 4.95 4.05 9 9 9l21.32.01h.01c.86 0 1.56.7 1.56 1.56v3.68c0 .86-.7 1.56-1.56 1.56H589.1Zm17.429 20.92h-.32c-2.99 0-5.43 2.42-5.43 5.43v.31c0 3.09 2.5 5.59 5.59 5.59s5.59-2.5 5.59-5.59v-.31c0-2.99-2.42-5.43-5.43-5.43Z"/> </g> </svg></div><div class="visually-hidden">off brand.</div><div split-text="" class="text-brand">OFF+BRAND.</div></a></div><div pointer-auto="" class="hud-nav-w"><div class="hud-nav-flex"><div data-hide="tab"><a data-nav-tl="" stagger-el="" href="https://manifesto.itsoffbrand.com/" target="_blank" class="page-link-w w-inline-block"><div class="o-hidden page-link-inner"><div split-text="" stagger-text="" class="text-small btn-txt">MANIFESTO</div><div class="btn-icon-r"><div class="btn-icon-w"><div class="text-small btn-txt">-></div></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div><div data-hide="tab"><a data-nav-tl="" stagger-el="" href="/webflow-enterprise" class="page-link-w w-inline-block"><div class="o-hidden page-link-inner"><div split-text="" stagger-text="" class="text-small btn-txt">Webflow Enterprise</div><div class="btn-icon-r"><div class="btn-icon-w"><div class="text-small btn-txt">-></div></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div><a data-contact="" stagger-el="" href="/contact" class="btn-w w-inline-block"><div class="btn-inner"><div class="o-hidden"><div split-text="" stagger-text="" class="btn-txt">Contact</div></div><div class="btn-icon-w"><div class="btn-txt">-></div></div></div><div class="btn-bg-w"><div class="btn-bg-fill"></div></div></a></div></div><div pointer-auto="" class="hud-scroll-w"><div class="hud-scroll-inner"><div class="hud-scroll-line-top"></div><div class="hud-scroll-dot"></div><div class="hud-scroll-line-btm"></div></div></div><div class="hud-menu-o"><div class="hud-menu-content"><div class="hud-menu-link-w"><div class="o-hidden"><div class="o-hidden menu-l2"><a stagger-el="" href="/" aria-current="page" class="hud-menu-link w-inline-block w--current"><div class="o-hidden page-link-inner"><div split-text="" stagger-text="" class="text-small btn-txt">Home</div><div class="btn-icon-w"><div class="text-small btn-txt">-></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div></div><div class="o-hidden"><div class="o-hidden menu-l2"><a stagger-el="" href="/about-us" class="hud-menu-link w-inline-block"><div class="o-hidden page-link-inner"><div split-text="" stagger-text="" class="text-small btn-txt">About Us</div><div class="btn-icon-w"><div class="text-small btn-txt">-></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div></div><div class="o-hidden"><div class="o-hidden menu-l2"><a stagger-el="" href="/our-work" class="hud-menu-link w-inline-block"><div class="o-hidden page-link-inner"><div split-text="" stagger-text="" class="text-small btn-txt">Work</div><div class="btn-icon-w"><div class="text-small btn-txt">-></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div></div><div class="o-hidden"><div class="o-hidden menu-l2"><a stagger-el="" href="/services" class="hud-menu-link w-inline-block"><div class="o-hidden page-link-inner"><div split-text="" stagger-text="" class="text-small btn-txt">Services</div><div class="btn-icon-w"><div class="text-small btn-txt">-></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div></div><div class="o-hidden"><div class="o-hidden menu-l2"><a stagger-el="" href="/contact" class="hud-menu-link w-inline-block"><div class="o-hidden page-link-inner"><div split-text="" stagger-text="" class="text-small btn-txt">Contact</div><div class="btn-icon-w"><div class="text-small btn-txt">-></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div></div><div class="o-hidden"><div class="o-hidden menu-l2"><a stagger-el="" href="/webflow-enterprise" class="hud-menu-link w-inline-block"><div class="o-hidden page-link-inner"><div split-text="" stagger-text="" class="text-small btn-txt">W. Enterprise</div><div class="btn-icon-w is-rotate"><div class="text-small btn-txt">-></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div></div><div class="o-hidden"><div class="o-hidden menu-l2"><a stagger-el="" href="https://manifesto.itsoffbrand.com/" target="_blank" class="hud-menu-link w-inline-block"><div class="o-hidden page-link-inner"><div split-text="" stagger-text="" class="text-small btn-txt">Manifesto</div><div class="btn-icon-w is-rotate"><div class="text-small btn-txt">-></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div></div></div><div class="hud-menu-sublink-w"><div class="o-hidden"><div class="o-hidden menu-l2"><a stagger-el="" href="/privacy" class="hud-menu-link w-inline-block"><div class="o-hidden page-link-inner mini"><div split-text="" stagger-text="" class="text-mini">Privacy</div><div class="btn-icon-w"><div class="text-mini btn-txt">-></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div></div><div class="o-hidden"><div class="o-hidden menu-l2"><a stagger-el="" href="/careers" class="hud-menu-link w-inline-block"><div class="o-hidden page-link-inner mini"><div split-text="" stagger-text="" class="text-mini">Careers</div><div class="btn-icon-w"><div class="text-mini btn-txt">-></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div></div></div><div class="hud-menu-socials"><div id="w-node-_5bb3200b-af7e-0300-8e68-c2cfb94a16f9-b94a16a3" class="hud-social-w"><div class="o-hidden"><a href="https://twitter.com/itsoffbrand" target="_blank" class="hud-social-link w-inline-block"><div class="hud-social-img w-embed"><svg width="100%" height="100%" viewBox="0 0 23 19" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.3215 4.62548C21.2433 3.9488 22.0425 3.14958 22.6553 2.22781C21.7974 2.59546 20.9343 2.84055 20.0125 2.9631C20.9929 2.40897 21.7335 1.4872 22.0372 0.384277C21.1154 0.874466 20.135 1.24211 19.0907 1.4872C18.2329 0.565433 17.0021 0.0113068 15.7127 0.0113068C13.1339 0.0166349 11.1092 2.10527 11.1092 4.62548C11.1092 4.99312 11.1731 5.36076 11.2317 5.66979C7.29955 5.54725 3.92151 3.6451 1.65172 0.879794C1.28408 1.55647 1.03899 2.35569 1.03899 3.21352C1.03899 4.81196 1.83821 6.22392 3.06368 7.08175C2.3284 7.08175 1.58779 6.83666 0.97505 6.52762V6.59156C0.97505 8.86135 2.57349 10.7049 4.66212 11.1365C4.29448 11.259 3.8629 11.323 3.43132 11.323C3.12229 11.323 2.81859 11.323 2.57349 11.259C3.18623 13.1025 4.90722 14.4506 6.8733 14.5145C5.27486 15.7453 3.30878 16.4806 1.10293 16.4806C0.735284 16.4806 0.367642 16.4806 0 16.4167C2.02469 17.77 4.48097 18.5053 7.12372 18.5053C15.345 18.3827 20.6892 11.5627 20.3215 4.62548Z" fill="var(--main-dark)"/> </svg></div></a></div></div><div id="w-node-_5bb3200b-af7e-0300-8e68-c2cfb94a16fd-b94a16a3" class="hud-social-w"><div class="o-hidden"><a href="https://www.awwwards.com/offbrand/#work" target="_blank" class="hud-social-link w-inline-block"><div class="hud-social-img is--awww w-embed"><svg width="100%" height="100%" viewBox="0 0 33 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19.7924 0.625351L16.8349 12.1121L14.043 0.625351H10.2329L7.43995 12.1121L4.48452 0.625351H0.37793L5.66627 17.3576H9.2801L12.1374 6.53435L14.9958 17.3576H18.6096L23.8969 0.625351H19.7903H19.7924ZM26.5136 14.7682C26.5136 16.3619 27.6954 17.5566 29.2728 17.5566C30.8492 17.5566 32.032 16.3608 32.032 14.7682C32.032 13.1746 30.8502 11.9788 29.2728 11.9788C27.6954 11.9788 26.5136 13.1746 26.5136 14.7682Z" fill="var(--main-dark)"/> </svg></div></a></div></div><div id="w-node-_5bb3200b-af7e-0300-8e68-c2cfb94a1701-b94a16a3" class="hud-social-w"><div class="o-hidden"><a href="https://www.instagram.com/offbrand.studio/" target="_blank" class="hud-social-link w-inline-block"><div class="hud-social-img w-embed"><svg width="100%" height="100%" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17.2422 0.944656H4.87947C2.6027 0.944656 0.754883 2.79797 0.754883 5.06924V17.4375C0.754883 19.7143 2.6082 21.5621 4.87947 21.5621H17.2422C19.519 21.5621 21.3668 19.7088 21.3668 17.4375V5.06924C21.3668 2.79247 19.519 0.944656 17.2422 0.944656ZM11.0609 17.432C7.64569 17.432 4.87947 14.6603 4.87947 11.2506C4.87947 7.83547 7.64569 5.06924 11.0609 5.06924C14.476 5.06924 17.2422 7.83547 17.2422 11.2506C17.2422 14.6603 14.4705 17.432 11.0609 17.432ZM17.7647 6.10314C16.9123 6.10314 16.2193 5.41021 16.2193 4.5578C16.2193 3.70538 16.9123 3.01245 17.7647 3.01245C18.6171 3.01245 19.31 3.70538 19.31 4.5578C19.31 5.41021 18.6171 6.10314 17.7647 6.10314Z" fill="var(--main-dark)"/> <path d="M11.0601 15.3749C13.3381 15.3749 15.1847 13.5283 15.1847 11.2503C15.1847 8.97237 13.3381 7.12573 11.0601 7.12573C8.78219 7.12573 6.93555 8.97237 6.93555 11.2503C6.93555 13.5283 8.78219 15.3749 11.0601 15.3749Z" fill="var(--main-dark)"/> </svg></div></a></div></div><div id="w-node-_5bb3200b-af7e-0300-8e68-c2cfb94a1705-b94a16a3" class="hud-social-w"><div class="o-hidden"><a href="https://www.linkedin.com/company/itsoffbrand" target="_blank" class="hud-social-link w-inline-block"><div class="hud-social-img w-embed"><svg width="100%" height="100%" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5.19349 7.02281H0.790305C0.591489 7.02281 0.439453 7.1807 0.439453 7.37366V21.5071C0.439453 21.7059 0.597336 21.858 0.790305 21.858H5.18764C5.38646 21.858 5.5385 21.7001 5.5385 21.5071V7.37951C5.54434 7.18654 5.38646 7.02281 5.19349 7.02281Z" fill="var(--main-dark)"/> <path d="M2.99509 0C1.39287 0 0.0888672 1.29815 0.0888672 2.90622C0.0888672 4.50259 1.38702 5.80659 2.99509 5.80659C4.59146 5.80659 5.89546 4.50844 5.89546 2.90622C5.89546 1.29815 4.59146 0 2.99509 0Z" fill="var(--main-dark)"/> <path d="M16.3855 6.67795C14.6196 6.67795 13.3097 7.43228 12.5203 8.30356V7.3855C12.5203 7.18668 12.3624 7.03465 12.1694 7.03465H7.94753C7.74872 7.03465 7.59668 7.19253 7.59668 7.3855V21.519C7.59668 21.7178 7.75456 21.8698 7.94753 21.8698H12.339C12.5378 21.8698 12.6899 21.7119 12.6899 21.519V14.5253C12.6899 12.1688 13.3331 11.2507 14.9763 11.2507C16.7656 11.2507 16.9059 12.7184 16.9059 14.6423V21.519C16.9059 21.7178 17.0638 21.8698 17.2568 21.8698H21.6483C21.8471 21.8698 21.9991 21.7119 21.9991 21.519V13.7651C22.005 10.2566 21.3325 6.67795 16.3855 6.67795Z" fill="var(--main-dark)"/> </svg></div></a></div></div></div><div class="hud-mode-o-hidden"><div role="button" aria-label="Toggle colour theme" aria-pressed="false" mode-toggle="light" hover-anim="" class="hud-mode-toggle-w"><div class="mode-toggle-track"><div class="mode-toggle-inner"><div class="mode-toggle-btn"></div></div></div></div></div></div><div hover-anim="" pointer-auto="" role="button" tabindex="0" aria-label="menu" aria-expanded="false" class="hud-menu-w"><div class="hud-menu-c"><div class="hud-menu-line is-1"></div><div class="hud-menu-line is-2"></div><div class="hud-menu-line is-3"></div></div></div><div class="hud-menu-bg"></div></div></div></div><div class="pagew-grid"><div id="w-node-cf08bba0-c5fd-23a0-82a8-15142edc5376-b94a16a3" class="pagew-block is--1"></div><div id="w-node-cf08bba0-c5fd-23a0-82a8-15142edc5377-b94a16a3" class="pagew-block is--2"></div><div id="w-node-cf08bba0-c5fd-23a0-82a8-15142edc5378-b94a16a3" class="pagew-block is--1"></div><div id="w-node-cf08bba0-c5fd-23a0-82a8-15142edc5379-b94a16a3" class="pagew-block is--2"></div><div id="w-node-cf08bba0-c5fd-23a0-82a8-15142edc537a-b94a16a3" class="pagew-block is--1"></div><div id="w-node-cf08bba0-c5fd-23a0-82a8-15142edc537b-b94a16a3" class="pagew-block is--2"></div><div id="w-node-cf08bba0-c5fd-23a0-82a8-15142edc537c-b94a16a3" class="pagew-block is--1"></div><div id="w-node-cf08bba0-c5fd-23a0-82a8-15142edc537d-b94a16a3" class="pagew-block is--2"></div><div id="w-node-cf08bba0-c5fd-23a0-82a8-15142edc537e-b94a16a3" class="pagew-block is--1"></div><div id="w-node-cf08bba0-c5fd-23a0-82a8-15142edc537f-b94a16a3" class="pagew-block is--2"></div><div id="w-node-cf08bba0-c5fd-23a0-82a8-15142edc5380-b94a16a3" class="pagew-block is--1"></div><div id="w-node-cf08bba0-c5fd-23a0-82a8-15142edc5381-b94a16a3" class="pagew-block is--2"></div></div><div pointer-none="" class="page-wipe-w"><div pointer-auto="" page-wipe-block="" class="page-wipe-inner"><div page-wipe-object="" class="page-wipe-object-w"><div class="wipe-outline-w w-embed"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 162 162" xml:space="preserve"> <path class="page-wipe-path" d="M108 88.7c-10.8 0-19.7 8.8-19.7 19.7v47.4c0 1.9-1.5 3.4-3.4 3.4h-8.6c-1.9 0-3.4-1.5-3.4-3.4v-47.4c0-10.8-8.8-19.7-19.7-19.7H6.4c-1.9 0-3.4-1.5-3.4-3.4v-8c0-1.9 1.5-3.4 3.4-3.4h46.9c10.8 0 19.7-8.8 19.6-19.7V6.4c0-1.9 1.5-3.4 3.4-3.4H85c1.9 0 3.4 1.5 3.4 3.4v47.8c0 10.8 8.8 19.7 19.7 19.7h46.6c1.9 0 3.4 1.5 3.4 3.4v8c0 1.9-1.5 3.4-3.4 3.4H108z" /> <path class="page-wipe-path" d="M146.1 134.4h-.7c-6.5 0-11.9 5.3-11.9 11.9v.7c0 6.7 5.5 12.2 12.2 12.2s12.2-5.5 12.2-12.2v-.7c0-6.6-5.2-11.9-11.8-11.9z" /> </svg></div></div></div></div></div><div pointer-none="" class="percentage-guides"><div class="percentage-row"><div class="text-large caps">5%</div></div><div class="percentage-row is-1"><div class="text-large caps">10%</div></div><div class="percentage-row"><div class="text-large caps">15%</div></div><div class="percentage-row is-1"><div class="text-large caps">20%</div></div><div class="percentage-row"><div class="text-large caps">25%</div></div><div class="percentage-row is-1"><div class="text-large caps">30%</div></div><div class="percentage-row"><div class="text-large caps">35%</div></div><div class="percentage-row is-1"><div class="text-large caps">40%</div></div><div class="percentage-row"><div class="text-large caps">45%</div></div><div class="percentage-row is-1"><div class="text-large caps">50%</div></div><div class="percentage-row"><div class="text-large caps">55%</div></div><div class="percentage-row is-1"><div class="text-large caps">60%</div></div><div class="percentage-row"><div class="text-large caps">65%</div></div><div class="percentage-row is-1"><div class="text-large caps">70%</div></div><div class="percentage-row"><div class="text-large caps">75%</div></div><div class="percentage-row is-1"><div class="text-large caps">80%</div></div><div class="percentage-row"><div class="text-large caps">85%</div></div><div class="percentage-row is-1"><div class="text-large caps">90%</div></div><div class="percentage-row"><div class="text-large caps">95%</div></div><div class="percentage-row is-1"><div class="text-large caps">100%</div></div></div><div overflow="clip" class="page-w"><main data-taxi="" class="main-w"><div data-page="home" data-taxi-view="" class="taxi-w"><section home-hero="" class="s"><div class="c is-home-hero"><div pointer-none="" id="w-node-ee129085-5508-c080-0928-e2157cf4c62b-cb3c54b7" class="home-hero-tablet-text mbm-diff"><div split-hero="" class="h-display is--hero-tablet">A <span class="span-tablet-hero is-1"> </span>Different <span class="span-tablet-hero is-2"> </span>creative <span class="span-tablet-hero is-3"> </span>approach</div></div><div class="grid-main is-home-hero"><div id="w-node-da6eb697-e282-512f-b6d0-a8c1072e1cf7-cb3c54b7" class="hh-text-block"><div hh-tb="1" class="hh-transform"><div class="hh-text-ovf"><h1 split-hero="" class="h-a">A different</h1></div></div></div><div id="w-node-_9bac4ee1-2701-06df-9fcc-6f1dc829551f-cb3c54b7" class="hh-text-block"><div hh-tb="2" class="hh-transform"><div class="hh-text-ovf"><h1 split-hero="" class="h-a">Creative</h1></div></div></div><div id="w-node-_3cbb2584-24fc-b759-4cc8-1a5e08050bbb-cb3c54b7" class="hh-text-block"><div hh-tb="3" class="hh-transform"><div class="hh-text-ovf"><h1 split-hero="" class="h-a">approach</h1></div></div></div><div pointer-none="" id="w-node-d98c11b7-4c40-4ada-0e30-eebe959543b4-cb3c54b7" class="hh-text-block is--scroll"><div hh-tb="4" class="hh-transform"><div class="hh-text-ovf"><div split-hero="" class="text-regular caps">scroll <a href="https://en.wikipedia.org/wiki/%E2%86%93#:~:text=The%20arrow%20symbol%20%E2%86%93%20may,downward%20direction%2C%20a%20relative%20direction">↓</a></div></div></div></div><div id="w-node-_93639b88-2f5e-e0f3-b73a-922c61bcd342-cb3c54b7" class="targeto"></div></div></div></section><section class="s"><div class="c"><div class="spacer-10"></div><div class="grid-main"><div id="w-node-_6410f8b6-f0f7-dc5f-0278-cc19cf924701-cb3c54b7" class="mbm-diff"><h2 stagger-scroll="" split-text="" class="h-b"><span class="span-hidden">****</span> With EMOTION + INNOVATION, We push THE BOUNDARIES OF DIGITAL CREATIVITY.</h2></div></div><div class="spacer-10"></div><div class="grid-main m-flex"><div id="w-node-_24807cca-690f-1949-35d8-9f2eae04e6a5-cb3c54b7" class="mbm-diff"><p split-text="" stagger-scroll="1" class="text-small caps">We are a Scottish born, global digital marketing, branding & web design agency.</p><div link-reveal="" class="o-hidden link-wrap hide-m"><div class="o-hidden"><a reveal-target="" stagger-el="" href="/about-us" class="page-link-w w-inline-block"><div class="o-hidden page-link-inner"><div split-text="" stagger-text="" class="text-small btn-txt">About Us</div><div class="btn-icon-w"><div class="text-small btn-txt">-></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div></div></div><div id="w-node-beb0f7cc-c2a7-f55b-915e-0e6bdb1d2309-cb3c54b7" class="mbm-diff"><p stagger-lines="2" split-text="" class="text-small">Every brand has a story, from startups finding their voice to titans refining their legacy. We ensure that tale shines brilliantly. With a blend of rapid iteration and collaborative spirit, we empower you to reshape your digital narrative. </p></div><div class="hide-d"><div link-reveal="" class="o-hidden link-wrap"><div class="o-hidden"><a reveal-target="" stagger-el="" href="#" class="page-link-w w-inline-block"><div class="o-hidden page-link-inner"><div split-text="" stagger-text="" class="text-small btn-txt">About Us</div><div class="btn-icon-w"><div class="text-small btn-txt">-></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div></div></div></div><div class="spacer-10"></div></div></section><section home-work="" class="s"><div class="c"><div class="spacer-10"></div><div class="grid-main is-hw"><div id="w-node-a03c9311-db20-8d6b-4c11-f7705f3bef7e-cb3c54b7" class="eb-wrap is-sticky"><div class="o-hidden"><h3 split-text="" stagger-scroll="1" class="h-eyebrow">Featured work</h3></div><div btn-reveal="" class="page-btn-w"><div class="o-hidden is-flex"><a reveal-target="" stagger-el="" href="/our-work" class="btn-w w-inline-block"><div class="btn-inner"><div class="o-hidden"><div split-text="" stagger-text="" class="btn-txt">All Work</div></div><div class="btn-icon-w"><div class="text-small btn-txt">-></div></div></div><div class="btn-bg-w"><div class="btn-bg-fill"></div></div></a></div><div split-text="" stagger-scroll="1" class="text-mini float-count is-fw">10</div></div></div><div id="w-node-_71aee89d-b255-0b88-3920-e4d3ba643f42-cb3c54b7" class="grid-main hcs-grid-w"><a hover-anim="" id="w-node-_67b4108a-10fa-bd83-03d1-1401dde7c33e-cb3c54b7" href="/our-work/bella" class="hcs-item-w w-inline-block"><div class="hcs-content-w mbm-diff"><div class="hcs-titles-w"><div class="hcs-titles"><div class="hcs-info-w"><p class="text-small caps">Bella Kitchenwear</p><div class="hcs-title-w"><p split-text="" class="text-mini">● Design</p><p split-text="" class="text-mini">△ Development</p><p split-text="" class="text-mini">⁂ WebGL, 3d</p></div></div></div><div class="hcs-cross-w"><div class="hsc-cross w-embed"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 162" style="enable-background:new 0 0 162 162" xml:space="preserve"> <path class="hcs-cross-svg" d="M108 88.7c-10.8 0-19.7 8.8-19.7 19.7v47.4c0 1.9-1.5 3.4-3.4 3.4h-8.6c-1.9 0-3.4-1.5-3.4-3.4v-47.4c0-10.8-8.8-19.7-19.7-19.7H6.4c-1.9 0-3.4-1.5-3.4-3.4v-8c0-1.9 1.5-3.4 3.4-3.4h46.9c10.8 0 19.7-8.8 19.6-19.7V6.4c0-1.9 1.5-3.4 3.4-3.4H85c1.9 0 3.4 1.5 3.4 3.4v47.8c0 10.8 8.8 19.7 19.7 19.7h46.6c1.9 0 3.4 1.5 3.4 3.4v8c0 1.9-1.5 3.4-3.4 3.4H108z" style="fill-rule:evenodd;clip-rule:evenodd;" fill="var(--main-light)"/> </svg></div></div></div></div><div class="hcs-img-w is--bella"></div></a><a hover-anim="" id="w-node-f6ed34ff-838c-72dc-9169-3c4cc14510ed-cb3c54b7" href="/our-work/uplink-xyz" class="hcs-item-w w-inline-block"><div class="hcs-content-w"><div class="hcs-titles-w"><div class="hcs-titles"><div class="hcs-info-w"><p class="text-small caps">Uplink</p><div class="hcs-title-w"><p split-text="" class="text-mini">● Design</p><p split-text="" class="text-mini">△ Development</p><p split-text="" class="text-mini">⁂ WebGL, 3d</p></div></div></div><div class="hcs-cross-w"><div class="hsc-cross w-embed"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 162" style="enable-background:new 0 0 162 162" xml:space="preserve"> <path class="hcs-cross-svg" d="M108 88.7c-10.8 0-19.7 8.8-19.7 19.7v47.4c0 1.9-1.5 3.4-3.4 3.4h-8.6c-1.9 0-3.4-1.5-3.4-3.4v-47.4c0-10.8-8.8-19.7-19.7-19.7H6.4c-1.9 0-3.4-1.5-3.4-3.4v-8c0-1.9 1.5-3.4 3.4-3.4h46.9c10.8 0 19.7-8.8 19.6-19.7V6.4c0-1.9 1.5-3.4 3.4-3.4H85c1.9 0 3.4 1.5 3.4 3.4v47.8c0 10.8 8.8 19.7 19.7 19.7h46.6c1.9 0 3.4 1.5 3.4 3.4v8c0 1.9-1.5 3.4-3.4 3.4H108z" style="fill-rule:evenodd;clip-rule:evenodd;" fill="var(--main-light)"/> </svg></div></div></div></div><div class="hcs-img-w is--ul"></div></a><a id="w-node-_7e8d8d20-f248-00f2-977d-d15b378557cf-cb3c54b7" href="/our-work/webflow" class="hcs-item-w w-inline-block"><div class="hcs-content-w"><div class="hcs-titles-w"><div class="hcs-titles"><div class="hcs-info-w"><p class="text-small caps">Webflow.com</p><div class="hcs-title-w"><p split-text="" class="text-mini">● Design</p><p split-text="" class="text-mini">△ Development</p><p split-text="" class="text-mini">⁂ WebGL, 3d</p></div></div></div><div class="hcs-cross-w"><div class="hsc-cross w-embed"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 162" style="enable-background:new 0 0 162 162" xml:space="preserve"> <path class="hcs-cross-svg" d="M108 88.7c-10.8 0-19.7 8.8-19.7 19.7v47.4c0 1.9-1.5 3.4-3.4 3.4h-8.6c-1.9 0-3.4-1.5-3.4-3.4v-47.4c0-10.8-8.8-19.7-19.7-19.7H6.4c-1.9 0-3.4-1.5-3.4-3.4v-8c0-1.9 1.5-3.4 3.4-3.4h46.9c10.8 0 19.7-8.8 19.6-19.7V6.4c0-1.9 1.5-3.4 3.4-3.4H85c1.9 0 3.4 1.5 3.4 3.4v47.8c0 10.8 8.8 19.7 19.7 19.7h46.6c1.9 0 3.4 1.5 3.4 3.4v8c0 1.9-1.5 3.4-3.4 3.4H108z" style="fill-rule:evenodd;clip-rule:evenodd;" fill="var(--main-light)"/> </svg></div></div></div></div><div class="hcs-img-w is--wf"></div></a><a id="w-node-_014c4a8b-f562-78bc-85b8-d9e2e7ad8058-cb3c54b7" href="/our-work/david-lee-artist" class="hcs-item-w w-inline-block"><div class="hcs-content-w mbm-diff"><div class="hcs-titles-w"><div class="hcs-titles"><div class="hcs-info-w"><p class="text-small caps">David Lee, Artist</p><div class="hcs-title-w"><p split-text="" class="text-mini">● Branding</p><p split-text="" class="text-mini">△ Development</p><p split-text="" class="text-mini">⁂ WebGL, 3d</p></div></div></div><div class="hcs-cross-w"><div class="hsc-cross w-embed"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 162" style="enable-background:new 0 0 162 162" xml:space="preserve"> <path class="hcs-cross-svg" d="M108 88.7c-10.8 0-19.7 8.8-19.7 19.7v47.4c0 1.9-1.5 3.4-3.4 3.4h-8.6c-1.9 0-3.4-1.5-3.4-3.4v-47.4c0-10.8-8.8-19.7-19.7-19.7H6.4c-1.9 0-3.4-1.5-3.4-3.4v-8c0-1.9 1.5-3.4 3.4-3.4h46.9c10.8 0 19.7-8.8 19.6-19.7V6.4c0-1.9 1.5-3.4 3.4-3.4H85c1.9 0 3.4 1.5 3.4 3.4v47.8c0 10.8 8.8 19.7 19.7 19.7h46.6c1.9 0 3.4 1.5 3.4 3.4v8c0 1.9-1.5 3.4-3.4 3.4H108z" style="fill-rule:evenodd;clip-rule:evenodd;" fill="var(--main-light)"/> </svg></div></div></div></div><div class="hcs-img-w is--dl"></div></a><a id="w-node-_2e725e2e-1cf5-83cb-95d4-9867c696655c-cb3c54b7" href="/our-work/cmcc" class="hcs-item-w w-inline-block"><div class="hcs-content-w mbm-diff"><div class="hcs-titles-w"><div class="hcs-titles"><div class="hcs-info-w"><p class="text-small caps">Cmcc</p><div class="hcs-title-w"><p split-text="" class="text-mini">● Branding</p><p split-text="" class="text-mini">△ Development</p><p split-text="" class="text-mini">⁂ 3d</p></div></div></div><div class="hcs-cross-w"><div class="hsc-cross w-embed"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 162" style="enable-background:new 0 0 162 162" xml:space="preserve"> <path class="hcs-cross-svg" d="M108 88.7c-10.8 0-19.7 8.8-19.7 19.7v47.4c0 1.9-1.5 3.4-3.4 3.4h-8.6c-1.9 0-3.4-1.5-3.4-3.4v-47.4c0-10.8-8.8-19.7-19.7-19.7H6.4c-1.9 0-3.4-1.5-3.4-3.4v-8c0-1.9 1.5-3.4 3.4-3.4h46.9c10.8 0 19.7-8.8 19.6-19.7V6.4c0-1.9 1.5-3.4 3.4-3.4H85c1.9 0 3.4 1.5 3.4 3.4v47.8c0 10.8 8.8 19.7 19.7 19.7h46.6c1.9 0 3.4 1.5 3.4 3.4v8c0 1.9-1.5 3.4-3.4 3.4H108z" style="fill-rule:evenodd;clip-rule:evenodd;" fill="var(--main-light)"/> </svg></div></div></div></div><div class="hcs-img-w is--cmcc"></div></a><a id="w-node-e5bc6c4c-0410-7184-b9c7-80234a646612-cb3c54b7" href="/our-work/the-online-school" class="hcs-item-w w-inline-block"><div class="hcs-content-w mbm-diff"><div class="hcs-titles-w"><div class="hcs-titles"><div class="hcs-info-w"><p class="text-small caps">The Online School</p><div class="hcs-title-w"><p split-text="" class="text-mini">● Design</p><p split-text="" class="text-mini">△ Development</p><p split-text="" class="text-mini">⁂ WebGL, 3d</p></div></div></div><div class="hcs-cross-w"><div class="hsc-cross w-embed"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 162" style="enable-background:new 0 0 162 162" xml:space="preserve"> <path class="hcs-cross-svg" d="M108 88.7c-10.8 0-19.7 8.8-19.7 19.7v47.4c0 1.9-1.5 3.4-3.4 3.4h-8.6c-1.9 0-3.4-1.5-3.4-3.4v-47.4c0-10.8-8.8-19.7-19.7-19.7H6.4c-1.9 0-3.4-1.5-3.4-3.4v-8c0-1.9 1.5-3.4 3.4-3.4h46.9c10.8 0 19.7-8.8 19.6-19.7V6.4c0-1.9 1.5-3.4 3.4-3.4H85c1.9 0 3.4 1.5 3.4 3.4v47.8c0 10.8 8.8 19.7 19.7 19.7h46.6c1.9 0 3.4 1.5 3.4 3.4v8c0 1.9-1.5 3.4-3.4 3.4H108z" style="fill-rule:evenodd;clip-rule:evenodd;" fill="var(--main-light)"/> </svg></div></div></div></div><div class="hcs-img-w is--tos"></div></a></div></div><div class="spacer-10"></div></div></section><section class="s is-hg"><div class="c"><div class="spacer-10"></div><div pointer-none="" class="hg-grid-overlay mbm-diff"><div class="hg-grid-overlay-sticky"><div class="c is-hg-o"><div class="grid-main"><div id="w-node-_24978d5b-a30c-3bac-67fb-aa1c099ba2e9-cb3c54b7"><h2 split-text="" class="h-b"><span class="span-hidden">****</span> Elevating Brands in Unexpected Ways.</h2></div></div></div></div></div><div class="hg-grid-track"><div class="spacer-10"></div><div class="hg-grid-w"><div grid-anim="" class="grid-main hg-grid"><div id="w-node-fdd3646f-835d-47d8-7c1d-f92c4d460cdb-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-3"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-_14dbac2e-c790-d559-4c21-2b4d898f28a4-cb3c54b7" class="hg-grid-item is-text"><div class="text-small caps">Brand<br/>Identity</div></div><div id="w-node-_88e8eb14-0a15-7761-4389-9d7d5abfea45-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-2"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-_7b5e2d0a-0312-8bbe-8681-47cc1b84385f-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-3"><div class="hg-img-w"><div class="hg-img-overlay"></div></div><div class="hg-vid-w w-embed"><div ob-video-player data-poster-url="" data-autoplay="true" data-loop="true" data-wf-ignore="true" style="width: 100%; height: 100%;" class="w-background-video w-background-video-atom" > <video home-vid class="hero-scale" playsinline loop muted autoplay="" loop="" style="background-image: url('');" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover" > <source src="https://assets.itsoffbrand.io/ob/video/home/OFF_siteclips_9.mp4" data-wf-ignore="true" /> </video> </div></div></div></div><div id="w-node-_33738488-2904-068e-0d11-e91ce520a933-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-4"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-c73f8858-c03a-b926-5318-74643b5bb986-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-5"><div class="hg-img-w"><div class="hg-img-overlay"></div></div><div class="hg-vid-w w-embed"><div ob-video-player data-poster-url="" data-autoplay="true" data-loop="true" data-wf-ignore="true" style="width: 100%; height: 100%;" class="w-background-video w-background-video-atom" > <video home-vid class="hero-scale" playsinline loop muted autoplay="" loop="" style="background-image: url('');" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover" > <source src="https://assets.itsoffbrand.io/ob/video/home/OFF_siteclips_4.mp4" data-wf-ignore="true" /> </video> </div></div></div></div><div id="w-node-_3e2f468e-c1a8-6a6d-c277-495f8eba6d76-cb3c54b7" class="hg-grid-item is-text"><div class="text-small caps">Digital<br/>Experiences</div></div><div id="w-node-_85c3a8f4-d54f-0b94-511b-981b51390e47-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-6"><div class="hg-img-w"><div class="hg-img-overlay"></div></div><div class="hg-vid-w w-embed"><div ob-video-player data-poster-url="" data-autoplay="true" data-loop="true" data-wf-ignore="true" style="width: 100%; height: 100%;" class="w-background-video w-background-video-atom" > <video home-vid class="hero-scale" playsinline loop muted autoplay="" loop="" style="background-image: url('');" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover" > <source src="https://assets.itsoffbrand.io/ob/video/home/OFF_siteclips_5.mp4" data-wf-ignore="true" /> </video> </div></div></div></div><div id="w-node-cb97767f-d507-b9c3-a390-50693e55f115-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-7"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-_38cc6ada-d731-7b16-a86a-e11768b4cfcf-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-8"><div class="hg-img-w"><div class="hg-img-overlay"></div></div><div class="hg-vid-w w-embed"><div ob-video-player data-poster-url="" data-autoplay="true" data-loop="true" data-wf-ignore="true" style="width: 100%; height: 100%;" class="w-background-video w-background-video-atom" > <video home-vid class="hero-scale" playsinline loop muted autoplay="" loop="" style="background-image: url('');" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover" > <source src="https://assets.itsoffbrand.io/ob/video/home/OFF_siteclips_11.mp4" data-wf-ignore="true" /> </video> </div></div></div></div><div id="w-node-_2c6f87bc-b627-5691-a926-bad3804ca63e-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-9"><div class="hg-img-w"><div class="hg-img-overlay"></div></div><div class="hg-vid-w w-embed"><div ob-video-player data-poster-url="" data-autoplay="true" data-loop="true" data-wf-ignore="true" style="width: 100%; height: 100%;" class="w-background-video w-background-video-atom" > <video home-vid class="hero-scale" playsinline loop muted autoplay="" loop="" style="background-image: url('');" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover" > <source src="https://assets.itsoffbrand.io/ob/video/home/OFF_siteclips_7.mp4" data-wf-ignore="true" /> </video> </div></div></div></div><div id="w-node-_439258d5-b6ac-3645-afa2-b49d93d88b74-cb3c54b7" class="hg-grid-item is-text"><div class="text-small caps">WebGL/VR</div></div><div id="w-node-_689e430f-21e0-4ab7-4be0-5afc747c4386-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-10"><div class="hg-img-w"><div class="hg-img-overlay"></div></div><div class="hg-vid-w w-embed"><div ob-video-player data-poster-url="" data-autoplay="true" data-loop="true" data-wf-ignore="true" style="width: 100%; height: 100%;" class="w-background-video w-background-video-atom" > <video home-vid class="hero-scale" playsinline loop muted autoplay="" loop="" style="background-image: url('');" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover" > <source src="https://assets.itsoffbrand.io/ob/video/home/OFF_siteclips_10.mp4" data-wf-ignore="true" /> </video> </div></div></div></div><div id="w-node-b9a97f33-a543-4e73-f0e5-cf08b93a389a-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-11"><div class="hg-img-w"><div class="hg-img-overlay"></div></div><div class="hg-vid-w w-embed"><div ob-video-player data-poster-url="" data-autoplay="true" data-loop="true" data-wf-ignore="true" style="width: 100%; height: 100%;" class="w-background-video w-background-video-atom" > <video home-vid class="hero-scale" playsinline loop muted autoplay="" loop="" style="background-image: url('');" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover" > <source src="https://assets.itsoffbrand.io/ob/video/home/OFF_siteclips_3.mp4" data-wf-ignore="true" /> </video> </div></div></div></div><div id="w-node-d4fb2df6-d530-b6f8-f571-052db0cf78dc-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-13"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-_9909306b-45d4-8b7f-4f9a-8bbd067ef7b4-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-13"><div class="hg-img-w"><div class="hg-img-overlay"></div></div><div class="hg-vid-w w-embed"><div ob-video-player data-poster-url="" data-autoplay="true" data-loop="true" data-wf-ignore="true" style="width: 100%; height: 100%;" class="w-background-video w-background-video-atom" > <video home-vid class="hero-scale" playsinline loop muted autoplay="" loop="" style="background-image: url('');" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover" > <source src="https://assets.itsoffbrand.io/ob/video/home/OFF_siteclips_1.mp4" data-wf-ignore="true" /> </video> </div></div></div></div><div id="w-node-_66a62c57-3c5b-0516-8f50-c90b0b9b1695-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-14"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-_4ec6a459-3961-59cc-1c55-b2b2013d01d1-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-15"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-a9f63f74-c0ec-523f-85c8-6ac5b6a81fca-cb3c54b7" class="hg-grid-item is-text"><div class="text-small caps">Ux/UI</div></div><div id="w-node-_9f12be6f-6c7c-ae16-9b21-8a89be1906b5-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-16"><div class="hg-img-w"><div class="hg-img-overlay"></div></div><div class="hg-vid-w w-embed"><div ob-video-player data-poster-url="" data-autoplay="true" data-loop="true" data-wf-ignore="true" style="width: 100%; height: 100%;" class="w-background-video w-background-video-atom" > <video home-vid class="hero-scale" playsinline loop muted autoplay="" loop="" style="background-image: url('');" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover" > <source src="https://assets.itsoffbrand.io/ob/video/home/OFF_siteclips_15.mp4" data-wf-ignore="true" /> </video> </div></div></div></div><div id="w-node-_9d529271-9dc5-937e-648a-7c9b7c3905eb-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-17"><div class="hg-img-w"><div class="hg-img-overlay"></div></div><div class="hg-vid-w w-embed"><div ob-video-player data-poster-url="" data-autoplay="true" data-loop="true" data-wf-ignore="true" style="width: 100%; height: 100%;" class="w-background-video w-background-video-atom" > <video home-vid class="hero-scale" playsinline loop muted autoplay="" loop="" style="background-image: url('');" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover" > <source src="https://assets.itsoffbrand.io/ob/video/home/OFF_siteclips_12.mp4" data-wf-ignore="true" /> </video> </div></div></div></div><div id="w-node-_5c648710-4ab8-43ff-6d8d-97cb3833c379-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-18"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-fc91b2f4-b5ce-51ad-5e09-0a495c828fd3-cb3c54b7" class="hg-grid-item is-text"><div class="text-small caps">Brand Strategy</div></div><div id="w-node-_82a3433d-14b8-2bc2-cccf-857489a7ac17-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-19"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-_6e57eeb5-7f26-b65c-b21e-08eeadcc02e5-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-20"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-_4a75a278-27af-7568-75a1-d2f0b9d58344-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-21"><div class="hg-img-w"><div class="hg-img-overlay"></div></div><div class="hg-vid-w w-embed"><div ob-video-player data-poster-url="" data-autoplay="true" data-loop="true" data-wf-ignore="true" style="width: 100%; height: 100%;" class="w-background-video w-background-video-atom" > <video home-vid class="hero-scale" playsinline loop muted autoplay="" loop="" style="background-image: url('');" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover" > <source src="https://assets.itsoffbrand.io/ob/video/home/OFF_siteclips_14.mp4" data-wf-ignore="true" /> </video> </div></div></div></div><div id="w-node-d266086b-3ac7-f7c3-03a2-20c74b8ef783-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-22"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-_0426dda2-4703-bca2-ef72-82d654e139ce-cb3c54b7" class="hg-grid-item is-text"><div class="text-small caps">App<br/>Development</div></div><div id="w-node-_97da6f2b-99fe-5434-332d-0f8c3a9a7b6d-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-23"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-_573338f5-b58a-2988-ee90-b9e288ecc185-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-24"><div class="hg-img-w"><div class="hg-img-overlay"></div></div><div class="hg-vid-w w-embed"><div ob-video-player data-poster-url="" data-autoplay="true" data-loop="true" data-wf-ignore="true" style="width: 100%; height: 100%;" class="w-background-video w-background-video-atom" > <video home-vid class="hero-scale" playsinline loop muted autoplay="" loop="" style="background-image: url('');" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover" > <source src="https://assets.itsoffbrand.io/ob/video/home/OFF_siteclips_2.mp4" data-wf-ignore="true" /> </video> </div></div></div></div><div id="w-node-_491e14a5-aad5-105f-04ec-7c545c8657e2-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-25"><div class="hg-img-w"><div class="hg-img-overlay"></div></div><div class="hg-grid-inner is-12"><div class="hg-img-w"><div class="hg-img-overlay"></div></div><div class="hg-vid-w w-embed"><div ob-video-player data-poster-url="" data-autoplay="true" data-loop="true" data-wf-ignore="true" style="width: 100%; height: 100%;" class="w-background-video w-background-video-atom" > <video home-vid class="hero-scale" playsinline loop muted autoplay="" loop="" style="background-image: url('');" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover" > <source src="https://assets.itsoffbrand.io/ob/video/home/OFF_siteclips_13.mp4" data-wf-ignore="true" /> </video> </div></div></div><div class="hg-vid-w w-embed"><div ob-video-player data-poster-url="" data-autoplay="true" data-loop="true" data-wf-ignore="true" style="width: 100%; height: 100%;" class="w-background-video w-background-video-atom" > <video home-vid class="hero-scale" playsinline loop muted autoplay="" loop="" style="background-image: url('');" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover" > <source src="https://assets.itsoffbrand.io/ob/video/home/OFF_siteclips_13.mp4" data-wf-ignore="true" /> </video> </div></div></div></div><div id="w-node-_60b50726-e435-0daa-d100-4a68b026bc24-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-26"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-_359e6371-98de-fe4a-37b2-7b5fdd70615a-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-5"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-_773467b4-2a43-01e1-14f0-74f0fa17d1ee-cb3c54b7" class="hg-grid-item is-text"><div class="text-small caps">Web3</div></div><div id="w-node-_170bdfba-d55a-705d-62aa-cdc86f1ec994-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-6"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-d6ea5341-0e4b-cf87-35f9-ce326f378ade-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-29"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-_60281a50-54c2-d943-24df-7fceb659567d-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-30"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-_083f31e5-3690-eee3-26e8-17ce059c0acd-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-10"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-_5298ded5-1b30-f5e5-71ce-0655a3c8af4c-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-32"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-fb4c7126-4af1-a52c-7e36-ee96feac4131-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-11"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-b34e0542-628b-8375-6709-22af5f58a192-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-12"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-_3f9898d4-24ae-a4d7-8031-837866d5f60a-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-25"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-_8f5c47d2-e8d5-2e72-71cf-7e1ffc35ba0a-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-16"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-_8559fd34-0a16-bbdd-6d65-1873f07d3640-cb3c54b7" class="hg-grid-item is-text"><div class="text-small caps">Art <br/>Direction</div></div><div id="w-node-fd45d3bb-79f9-e507-f3b1-0da853243eea-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-24"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-_63bcb364-75b1-05c9-cf19-c7244065179e-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-37"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-_4f150f8c-7cd1-a4b8-e640-628ba44cdf34-cb3c54b7" class="hg-grid-item"><div class="hg-grid-inner is-1-copy"><div class="hg-img-w"><div class="hg-img-overlay"></div></div></div></div><div id="w-node-_400f6eb6-e52e-b9f2-879a-d6032138a597-cb3c54b7" class="hg-grid-item is-text"><div class="text-small caps">Product<br/>Design</div></div></div></div><div class="spacer-10"></div></div><div class="spacer-10"></div><div class="spacer-10"></div><div class="spacer-10"></div></div></section><section class="s"><div class="c"><div class="spacer-10"></div><div class="grid-main t-flex"><div id="w-node-_9105bcb9-e543-268b-87d4-ea35c1afb62e-cb3c54b7" class="eb-wrap is-sticky"><div class="o-hidden t-flex"><h2 split-text="" stagger-scroll="1" class="h-eyebrow">Recognitions<br/>+ Awards</h2><div split-text="" stagger-scroll="1" class="text-mini float-count is-eybrow">39</div></div></div><div id="w-node-_9105bcb9-e543-268b-87d4-ea35c1afb5b1-cb3c54b7" class="haw-sub-group"><div class="haw-grid-row mbm-diff"><div class="haw-grid-item mbm-diff"><p split-text="" stagger-scroll="1" class="text-mini">01</p><p split-text="" stagger-scroll="1" id="w-node-_9105bcb9-e543-268b-87d4-ea35c1afb61a-cb3c54b7" class="h-c caps">Awwwards</p><div id="w-node-_9559c03b-cd46-3843-4821-49cfeb8292a0-cb3c54b7" class="haw-item-sub-wrap"><div class="rel is-h-flex"><p split-text="" stagger-scroll="1" class="text-small caps">Site of the day</p><div split-text="" stagger-scroll="1" class="text-mini float-count is-haw">04</div></div><div class="rel is-h-flex"><p split-text="" stagger-scroll="1" class="text-small caps">Developer award</p><div split-text="" stagger-scroll="1" class="text-mini float-count is-haw">03</div></div><div class="rel is-h-flex"><p split-text="" stagger-scroll="1" class="text-small caps">honors</p><div split-text="" stagger-scroll="1" class="text-mini float-count is-haw">14</div></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></div><div class="haw-grid-row mbm-diff"><div class="haw-grid-item mbm-diff"><p split-text="" stagger-scroll="1" class="text-mini">02</p><p split-text="" stagger-scroll="1" id="w-node-ab3f18c6-d652-252c-83cf-cd8e9bb1d2f7-cb3c54b7" class="h-c caps">Fwa</p><div id="w-node-ab3f18c6-d652-252c-83cf-cd8e9bb1d2f9-cb3c54b7" class="haw-item-sub-wrap"><div class="rel is-h-flex"><p split-text="" stagger-scroll="1" class="text-small caps">FWA of the day</p><div split-text="" stagger-scroll="1" class="text-mini float-count is-haw">03</div></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></div><div class="haw-grid-row mbm-diff"><div class="haw-grid-item mbm-diff"><p split-text="" stagger-scroll="1" class="text-mini">03</p><p split-text="" stagger-scroll="1" id="w-node-_367be383-4323-3a51-4856-adaeec7ad69d-cb3c54b7" class="h-c">Css Design Awards</p><div id="w-node-_367be383-4323-3a51-4856-adaeec7ad69f-cb3c54b7" class="haw-item-sub-wrap"><div class="rel is-h-flex"><p split-text="" stagger-scroll="1" class="text-small caps">Site of the day</p><div split-text="" stagger-scroll="1" class="text-mini float-count is-haw">8</div></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></div><div class="haw-grid-row mbm-diff"><div class="haw-grid-item mbm-diff"><p split-text="" stagger-scroll="1" class="text-mini">04</p><p split-text="" stagger-scroll="1" id="w-node-a8dcdef8-6be5-f909-ed2f-bb0be50678f0-cb3c54b7" class="h-c caps">Orpetron</p><div id="w-node-a8dcdef8-6be5-f909-ed2f-bb0be50678f2-cb3c54b7" class="haw-item-sub-wrap"><div class="rel is-h-flex"><p split-text="" stagger-scroll="1" class="text-small caps">Site of the day</p><div split-text="" stagger-scroll="1" class="text-mini float-count is-haw">8</div></div><div class="rel is-h-flex"><p split-text="" stagger-scroll="1" class="text-small caps">Site of the Month</p><div split-text="" stagger-scroll="1" class="text-mini float-count is-haw">1</div></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></div></div></div><div class="spacer-10"></div></div></section><section data-hide="tab" class="s is-hsc"><div hsc-track="" class="hsc-track"><div class="hsc-overlay-w"><div class="hsc-text-w"><div hsc-text="" class="hsc-text-oh"><div split-text="" class="h-c is-anim">Where Different Is the Standard. Choose Off+Brand.</div></div></div><div hsc-scale="" class="c is-hsc"><div hsc-rotate="" class="hsc-rotate"><div hsc-img="" class="hsc-img-w"><div class="hsc-img w-embed"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 162" style="enable-background:new 0 0 162 162" xml:space="preserve"> <path class="hsc-img-path" d="M108 88.7c-10.8 0-19.7 8.8-19.7 19.7v47.4c0 1.9-1.5 3.4-3.4 3.4h-8.6c-1.9 0-3.4-1.5-3.4-3.4v-47.4c0-10.8-8.8-19.7-19.7-19.7H6.4c-1.9 0-3.4-1.5-3.4-3.4v-8c0-1.9 1.5-3.4 3.4-3.4h46.9c10.8 0 19.7-8.8 19.6-19.7V6.4c0-1.9 1.5-3.4 3.4-3.4H85c1.9 0 3.4 1.5 3.4 3.4v47.8c0 10.8 8.8 19.7 19.7 19.7h46.6c1.9 0 3.4 1.5 3.4 3.4v8c0 1.9-1.5 3.4-3.4 3.4H108z" style="fill-rule:evenodd;clip-rule:evenodd;" fill= "#000"/> </svg></div></div></div></div><div gradient-evolve="" class="hs-track-ul"></div></div></div></section><section class="s is-footer"><div class="c is-footer"><div class="ft-content-w"><div class="spacer-5"></div><div class="grid-main is-footer"><div id="w-node-b2deac9f-48fc-2cd0-3331-af319f49edff-9f49edfa" class="grid-main ft-cta-grid"><div id="w-node-b2deac9f-48fc-2cd0-3331-af319f49ee00-9f49edfa" class="mbm-diff"><div stagger-scroll="" split-text="" class="h-a is-sub">How about</div></div><div id="w-node-b2deac9f-48fc-2cd0-3331-af319f49ee03-9f49edfa" class="mbm-diff"><div stagger-scroll="" split-text="" class="h-a is-sub">we do a thing</div></div><div id="w-node-b2deac9f-48fc-2cd0-3331-af319f49ee06-9f49edfa" class="ft-cta-row"><div id="w-node-b2deac9f-48fc-2cd0-3331-af319f49ee07-9f49edfa" class="mbm-diff is-nb"><div stagger-scroll="" split-text="" class="h-a is-sub">or two,</div></div><div btn-reveal="" class="page-btn-w hide-m"><div class="o-hidden is-flex"><a reveal-target="" stagger-el="" href="/contact" class="btn-w is-large w-inline-block"><div class="btn-inner"><div class="o-hidden"><div split-text="" stagger-text="" class="btn-txt">Get in touch</div></div><div class="btn-icon-w"><div class="text-small btn-txt">-></div></div></div><div class="btn-bg-w"><div class="btn-bg-fill"></div></div></a></div></div></div><div id="w-node-b2deac9f-48fc-2cd0-3331-af319f49ee16-9f49edfa" class="mbm-diff"><div stagger-scroll="" split-text="" class="h-a is-sub">To+Gether</div></div></div><div btn-reveal="" class="page-btn-w hide-d"><div class="o-hidden is-flex"><a reveal-target="" stagger-el="" href="/contact" class="btn-w is-large w-inline-block"><div class="btn-inner"><div class="o-hidden"><div split-text="" stagger-text="" class="btn-txt">Get in touch</div></div><div class="btn-icon-w"><div class="text-small btn-txt">-></div></div></div><div class="btn-bg-w"><div class="btn-bg-fill"></div></div></a></div></div><div id="w-node-b2deac9f-48fc-2cd0-3331-af319f49ee25-9f49edfa" class="grid-main ft-nav-w mbm-diff"><div id="w-node-b2deac9f-48fc-2cd0-3331-af319f49ee26-9f49edfa" class="ft-nav-col"><p split-text="" stagger-scroll="1" class="text-small caps op-60">Sitemap</p><div class="ft-nav-link-w"><div link-reveal="" class="o-hidden"><div class="o-hidden"><a reveal-target="" stagger-el="" href="/" aria-current="page" class="page-link-w w-inline-block w--current"><div class="o-hidden page-link-inner"><div split-text="" stagger-text="" class="text-small btn-txt">Home</div><div class="btn-icon-w"><div class="text-small btn-txt">-></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div></div><div link-reveal="" class="o-hidden"><div class="o-hidden"><a reveal-target="" stagger-el="" href="/about-us" class="page-link-w w-inline-block"><div class="o-hidden page-link-inner"><div split-text="" stagger-text="" class="text-small btn-txt">About Us</div><div class="btn-icon-w"><div class="text-small btn-txt">-></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div></div><div link-reveal="" class="o-hidden"><div class="o-hidden"><a reveal-target="" stagger-el="" href="/our-work" class="page-link-w w-inline-block"><div class="o-hidden page-link-inner"><div split-text="" stagger-text="" class="text-small btn-txt">Work</div><div class="btn-icon-w"><div class="text-small btn-txt">-></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div></div><div link-reveal="" class="o-hidden"><div class="o-hidden"><a reveal-target="" stagger-el="" href="/services" class="page-link-w w-inline-block"><div class="o-hidden page-link-inner"><div split-text="" stagger-text="" class="text-small btn-txt">Services</div><div class="btn-icon-w"><div class="text-small btn-txt">-></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div></div><div link-reveal="" class="o-hidden"><div class="o-hidden"><a reveal-target="" stagger-el="" href="/contact" class="page-link-w w-inline-block"><div class="o-hidden page-link-inner"><div split-text="" stagger-text="" class="text-small btn-txt">Contact</div><div class="btn-icon-w"><div class="text-small btn-txt">-></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div></div></div></div><div id="w-node-b2deac9f-48fc-2cd0-3331-af319f49ee61-9f49edfa" class="ft-nav-col"><p split-text="" stagger-scroll="1" class="text-small caps op-60">Connect</p><div class="ft-nav-link-w"><div link-reveal="" class="o-hidden"><div class="o-hidden"><a reveal-target="" stagger-el="" href="https://twitter.com/itsoffbrand" target="_blank" class="page-link-w w-inline-block"><div class="o-hidden page-link-inner"><div split-text="" stagger-text="" class="text-small btn-txt">Twitter</div><div class="btn-icon-r"><div class="btn-icon-w"><div class="text-small btn-txt">-></div></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div></div><div link-reveal="" class="o-hidden"><div class="o-hidden"><a reveal-target="" stagger-el="" href="https://www.awwwards.com/offbrand/" target="_blank" class="page-link-w w-inline-block"><div class="o-hidden page-link-inner"><div split-text="" stagger-text="" class="text-small btn-txt">Awwwards </div><div class="btn-icon-r"><div class="btn-icon-w"><div class="text-small btn-txt">-></div></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div></div><div link-reveal="" class="o-hidden"><div class="o-hidden"><a reveal-target="" stagger-el="" href="https://thefwa.com/profiles/off-brand" target="_blank" class="page-link-w w-inline-block"><div class="o-hidden page-link-inner"><div split-text="" stagger-text="" class="text-small btn-txt">Fwa</div><div class="btn-icon-r"><div class="btn-icon-w"><div class="text-small btn-txt">-></div></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div></div><div link-reveal="" class="o-hidden"><div class="o-hidden"><a reveal-target="" stagger-el="" href="https://instagram.com/offbrand.gla" target="_blank" class="page-link-w w-inline-block"><div class="o-hidden page-link-inner"><div split-text="" stagger-text="" class="text-small btn-txt">Instagram</div><div class="btn-icon-r"><div class="btn-icon-w"><div class="text-small btn-txt">-></div></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div></div><div link-reveal="" class="o-hidden"><div class="o-hidden"><a reveal-target="" stagger-el="" href="https://www.linkedin.com/company/itsoffbrand" target="_blank" class="page-link-w w-inline-block"><div class="o-hidden page-link-inner"><div split-text="" stagger-text="" class="text-small btn-txt">LinkedIn</div><div class="btn-icon-r"><div class="btn-icon-w"><div class="text-small btn-txt">-></div></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div></div></div></div><div id="w-node-b2deac9f-48fc-2cd0-3331-af319f49ee9c-9f49edfa" class="ft-nav-col"><p split-text="" stagger-scroll="1" class="text-small caps op-60">Offices</p><div class="ft-nav-link-w"><p split-text="" stagger-scroll="1" class="text-small btn-txt">London</p><p split-text="" stagger-scroll="1" class="text-small btn-txt">Glasgow</p></div></div><div id="w-node-b2deac9f-48fc-2cd0-3331-af319f49eea4-9f49edfa" class="ft-nav-col hide-d"><p split-text="" stagger-scroll="1" class="text-small caps op-60">Legal</p><div class="ft-nav-link-w"><div link-reveal="" class="o-hidden"><div class="o-hidden"><a reveal-target="" stagger-el="" href="#" class="page-link-w w-inline-block"><div class="o-hidden page-link-inner"><div split-text="" stagger-text="" class="text-small btn-txt">Privacy</div><div class="btn-icon-w"><div class="text-small btn-txt">-></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div></div></div></div></div></div><div class="spacer-5"></div><div class="grid-main ft-btm mbm-diff is--footer"><div id="w-node-b2deac9f-48fc-2cd0-3331-af319f49eec0-9f49edfa" class="spacer-0"></div><div link-reveal="" id="w-node-b2deac9f-48fc-2cd0-3331-af319f49eec1-9f49edfa" class="o-hidden link-wrap hide-m"><div class="o-hidden"><a reveal-target="" stagger-el="" href="/privacy" class="page-link-w w-inline-block"><div class="o-hidden page-link-inner"><div split-text="" stagger-text="" class="text-mini btn-txt">Privacy</div><div class="btn-icon-w"><div class="text-mini btn-txt">-></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div></div><div link-reveal="" id="w-node-b2deac9f-48fc-2cd0-3331-af319f49eecc-9f49edfa" class="o-hidden link-wrap hide-m"><div class="o-hidden"><a reveal-target="" stagger-el="" href="/careers" class="page-link-w w-inline-block"><div class="o-hidden page-link-inner"><div split-text="" stagger-text="" class="text-mini btn-txt">Careers</div><div class="btn-icon-w"><div class="text-mini btn-txt">-></div></div></div><div class="link-track"><div class="link-track-fill"></div></div></a></div></div><div id="w-node-b2deac9f-48fc-2cd0-3331-af319f49eed7-9f49edfa" class="o-hidden"><div display-none="" class="hud-brand-img w-embed"><svg width="100%" height="100%" viewBox="0 0 612 129" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#a)" fill="var(--main-light)"> <path d="M228.162 64.642c-4.51-2.834-9.691-4.246-15.521-4.246-4.866 0-9.376 1.168-13.53 3.514-4.155 2.347-7.436 5.638-9.823 9.884h-.528v-39.94c0-.356-.091-.62-.264-.793a.92.92 0 0 0-.66-.264h-9.02a.906.906 0 0 0-.661.264c-.172.173-.264.447-.264.793v93.41c0 .264.092.508.264.731a.807.807 0 0 0 .661.335h8.492c.355 0 .619-.112.792-.335.173-.223.264-.467.264-.731v-11.407h.396c2.296 4.073 5.597 7.272 9.883 9.619 4.287 2.346 8.96 3.514 13.998 3.514 5.84 0 11.011-1.411 15.521-4.245 4.51-2.834 7.984-6.837 10.411-12.007 2.428-5.17 3.647-11.163 3.647-17.979 0-6.816-1.219-12.83-3.647-18.05-2.438-5.221-5.901-9.244-10.411-12.078v.01Zm.335 43.586c-1.727 3.759-4.205 6.653-7.425 8.695-3.23 2.032-7.009 3.047-11.346 3.047-4.338 0-8.116-1.015-11.347-3.047-3.23-2.031-5.708-4.957-7.425-8.756-1.727-3.799-2.59-8.268-2.59-13.398 0-5.13.884-9.487 2.651-13.337 1.768-3.85 4.266-6.816 7.496-8.888 3.231-2.082 6.969-3.118 11.215-3.118 4.245 0 8.095 1.016 11.275 3.047 3.179 2.032 5.657 4.977 7.425 8.827 1.767 3.85 2.651 8.34 2.651 13.47 0 5.129-.863 9.71-2.59 13.468l.01-.01Zm282.556-75.43h-8.888c-.264 0-.508.09-.731.263-.224.183-.336.447-.336.793v39.94h-.396c-2.478-4.246-5.769-7.537-9.883-9.884-4.114-2.346-8.604-3.514-13.469-3.514-5.932 0-11.143 1.412-15.653 4.246-4.51 2.834-7.964 6.856-10.351 12.077-2.387 5.221-3.586 11.234-3.586 18.05 0 6.816 1.199 12.809 3.586 17.979 2.387 5.171 5.841 9.183 10.351 12.007 4.51 2.834 9.731 4.246 15.653 4.246 5.038 0 9.69-1.169 13.936-3.515s7.517-5.546 9.823-9.619h.396v11.407c0 .264.112.508.335.731.223.224.467.335.731.335h8.492c.356 0 .62-.111.792-.335.173-.223.265-.467.265-.731v-93.41c0-.356-.092-.62-.265-.792-.182-.173-.446-.265-.792-.265l-.01-.01Zm-12.138 75.369c-1.727 3.809-4.206 6.725-7.426 8.756-3.23 2.032-7.009 3.047-11.346 3.047s-8.096-1.015-11.275-3.047c-3.179-2.031-5.637-4.926-7.364-8.695-1.727-3.758-2.59-8.248-2.59-13.469s.863-9.62 2.59-13.469c1.727-3.85 4.205-6.785 7.425-8.827 3.23-2.031 6.968-3.047 11.214-3.047s7.984 1.036 11.214 3.118c3.23 2.082 5.729 5.038 7.497 8.888 1.767 3.85 2.651 8.289 2.651 13.337 0 5.049-.864 9.599-2.59 13.398v.01ZM50.098 64.774C45.1 61.858 39.37 60.396 32.91 60.396c-6.46 0-12.19 1.442-17.187 4.317-4.998 2.874-8.868 6.917-11.61 12.138C1.37 82.072 0 88.045 0 94.76s1.371 12.667 4.114 17.847c2.742 5.17 6.612 9.203 11.61 12.078 4.998 2.874 10.727 4.317 17.187 4.317 6.46 0 12.19-1.433 17.187-4.317 4.997-2.875 8.888-6.897 11.681-12.078 2.783-5.17 4.175-11.123 4.175-17.847 0-6.724-1.392-12.677-4.175-17.847-2.783-5.17-6.684-9.223-11.681-12.138Zm1.99 43.383c-1.818 3.809-4.357 6.724-7.628 8.756-3.27 2.032-7.12 3.047-11.539 3.047s-8.268-1.015-11.54-3.047c-3.27-2.032-5.789-4.926-7.567-8.695-1.767-3.758-2.65-8.248-2.65-13.47 0-5.22.883-9.618 2.65-13.468 1.768-3.85 4.287-6.785 7.568-8.827 3.27-2.032 7.12-3.047 11.539-3.047s8.289 1.015 11.61 3.047c3.322 2.031 5.861 4.977 7.629 8.827 1.767 3.85 2.65 8.34 2.65 13.469 0 5.13-.903 9.599-2.721 13.398v.01Zm100.176-75.37h-13.937c-4.693 0-8.319 1.26-10.879 3.779-2.57 2.519-3.849 6.165-3.849 10.95v13.53H95.807V41.543h17.644c.356 0 .62-.091.792-.264a.902.902 0 0 0 .264-.66v-6.765c0-.711-.355-1.057-1.056-1.057H99.515c-4.693 0-8.32 1.26-10.88 3.779-2.569 2.519-3.849 6.166-3.849 10.95v13.53H72.18c-.62 0-.924.355-.924 1.056v6.765c0 .264.091.508.264.732a.804.804 0 0 0 .66.335h12.606v57.32c0 .711.356 1.056 1.067 1.056h8.888c.71 0 1.056-.355 1.056-1.056v-57.32h27.791v57.32c0 .711.356 1.056 1.067 1.056h8.888c.711 0 1.056-.355 1.056-1.056v-57.32h17.644c.711 0 1.057-.356 1.057-1.056v-6.766c0-.355-.092-.62-.264-.792-.183-.172-.447-.264-.793-.264h-17.644V41.563h17.644c.356 0 .62-.091.793-.264a.906.906 0 0 0 .264-.66v-6.765c0-.711-.356-1.056-1.057-1.056l.021-.03Zm259.01 27.599c-4.865 0-9.182 1.036-12.941 3.118-3.758 2.082-6.785 5.15-9.091 9.223h-.396V62.112c0-.355-.091-.62-.264-.792-.183-.173-.447-.264-.792-.264h-8.492a.902.902 0 0 0-.66.264c-.183.183-.265.447-.265.792v65.152c0 .264.092.508.265.731a.804.804 0 0 0 .66.335h9.02a.805.805 0 0 0 .66-.335c.173-.223.264-.467.264-.731v-37.29c0-6.632 1.524-11.65 4.581-15.063 3.048-3.403 7.497-5.11 13.337-5.11 5.841 0 10.148 1.636 12.941 4.907 2.783 3.27 4.175 8.36 4.175 15.257v37.288c0 .265.112.508.335.732.224.223.467.335.732.335h8.887c.356 0 .62-.112.793-.335.172-.224.264-.467.264-.732V89.965c0-9.64-2.052-16.984-6.166-22.022-4.114-5.038-10.066-7.568-17.847-7.568v.01Zm-120.49.66h-20.702c-4.692 0-8.319 1.26-10.878 3.778-2.57 2.52-3.85 6.166-3.85 10.95v51.479c0 .265.112.508.335.732.223.223.467.335.731.335h8.888c.356 0 .62-.112.793-.335.172-.224.264-.467.264-.732V70.462h24.419c.355 0 .619-.112.792-.335.173-.224.264-.468.264-.732v-7.293c0-.355-.091-.62-.264-.792-.183-.173-.447-.264-.792-.264Zm70.9 0h-8.888c-.711 0-1.066.355-1.066 1.056v11.682h-.396c-2.479-4.246-5.77-7.538-9.884-9.884-4.114-2.346-8.603-3.514-13.469-3.514-5.932 0-11.143 1.411-15.653 4.245s-7.963 6.857-10.35 12.078c-2.387 5.22-3.586 11.234-3.586 18.05 0 6.816 1.199 12.809 3.586 17.979 2.387 5.17 5.84 9.183 10.35 12.007 4.51 2.834 9.731 4.245 15.653 4.245 5.038 0 9.691-1.168 13.937-3.514 4.245-2.347 7.516-5.546 9.822-9.619h.396v11.407c0 .264.112.508.335.731.224.223.468.335.732.335h8.492c.711 0 1.056-.355 1.056-1.056V62.123c0-.356-.091-.62-.264-.793-.183-.172-.447-.264-.792-.264l-.011-.02Zm-12.138 47.101c-1.727 3.809-4.205 6.724-7.425 8.756-3.23 2.031-7.009 3.047-11.346 3.047-4.338 0-8.096-1.016-11.275-3.047-3.18-2.032-5.638-4.927-7.365-8.695-1.727-3.758-2.59-8.248-2.59-13.47 0-5.22.863-9.618 2.59-13.468 1.727-3.85 4.206-6.786 7.425-8.827 3.231-2.032 6.969-3.048 11.215-3.048 4.245 0 7.984 1.036 11.214 3.119 3.23 2.082 5.729 5.038 7.496 8.888 1.767 3.85 2.651 8.288 2.651 13.337 0 5.048-.863 9.599-2.59 13.398v.01Z"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M589.1 39.24c-4.95 0-9 4.05-9 9l-.01-.01v21.73c0 .86-.7 1.56-1.56 1.56h-3.95c-.86 0-1.56-.7-1.56-1.56V48.23c0-4.95-4.05-9-9-9.01h-21.46c-.86 0-1.56-.7-1.56-1.56v-3.68c0-.86.7-1.56 1.56-1.56h21.48c4.95 0 9-4.05 8.99-9V1.56c0-.86.7-1.56 1.56-1.56h3.95c.86 0 1.56.7 1.56 1.56v21.87c0 4.95 4.05 9 9 9l21.32.01h.01c.86 0 1.56.7 1.56 1.56v3.68c0 .86-.7 1.56-1.56 1.56H589.1Zm17.429 20.92h-.32c-2.99 0-5.43 2.42-5.43 5.43v.31c0 3.09 2.5 5.59 5.59 5.59s5.59-2.5 5.59-5.59v-.31c0-2.99-2.42-5.43-5.43-5.43Z"/> </g> </svg></div><div stagger-scroll="1" split-text="" class="text-brand-footer">OFF+BRAND.</div></div></div></div></div></section></div></main></div><div data-orb-wrap="" pointer-none="" class="orb-w"><div data-orb="" class="orb"></div><div orb-out-w="1" class="orb-outline-w"><div orb-out-r="1" class="orb-outline-r"><div orb-outline="1" class="orb-outline"></div></div></div><div orb-out-w="2" class="orb-outline-w is-2"><div orb-out-r="2" class="orb-outline-r"><div orb-outline="2" class="orb-outline is-2"></div></div></div></div><div preloader="" class="pre-w"><div class="ob-mask-wrap"><div class="ob-mask-outline w-embed"><svg version="1.1" id="ob-load-img" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 162 162" style="enable-background:new 0 0 162 162" xml:space="preserve"> <path id="ob-l-x" class="st-x" d="M108 88.7c-10.8 0-19.7 8.8-19.7 19.7v47.4c0 1.9-1.5 3.4-3.4 3.4h-8.6c-1.9 0-3.4-1.5-3.4-3.4v-47.4c0-10.8-8.8-19.7-19.7-19.7H6.4c-1.9 0-3.4-1.5-3.4-3.4v-8c0-1.9 1.5-3.4 3.4-3.4h46.9c10.8 0 19.7-8.8 19.6-19.7V6.4c0-1.9 1.5-3.4 3.4-3.4H85c1.9 0 3.4 1.5 3.4 3.4v47.8c0 10.8 8.8 19.7 19.7 19.7h46.6c1.9 0 3.4 1.5 3.4 3.4v8c0 1.9-1.5 3.4-3.4 3.4H108z"/> <path id="ob-l-c" class="st-c" d="M146.1 134.4h-.7c-6.5 0-11.9 5.3-11.9 11.9v.7c0 6.7 5.5 12.2 12.2 12.2s12.2-5.5 12.2-12.2v-.7c0-6.6-5.2-11.9-11.8-11.9z"/> </svg></div><div class="ob-fill-mask"><div class="ob-fill-fill"></div></div><div class="pre-info-w is-1"><div class="pre-info-inner is-2"><div class="o-hidden"><div split-text="" pre-text="" class="text-mini">build</div></div><div class="o-hidden is-ppercent"><div pre-percent="" class="text-mini"> </div></div></div></div></div></div><script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=64cf4cc8c9b14fe4cb3c54b4" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><script src="https://cdn.prod.website-files.com/64cf4cc8c9b14fe4cb3c54b4/js/offbrand-2023.fd817ab23.js" type="text/javascript"></script> <script> function removeEditMode() { var body = document.body; if (body.hasAttribute("data-edit")) { body.removeAttribute("data-edit"); } } removeEditMode(); // Text Resize /*document.addEventListener("DOMContentLoaded", (event) => { function setFontSize() { document.body.style.fontSize = window.innerWidth / 1512 + "rem"; } window.addEventListener("resize", function () { setFontSize(); }); setFontSize(); });*/ // True VH let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty("--vh", `${vh}px`); window.addEventListener("resize", () => { let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty("--vh", `${vh}px`); }); // Change title let titleInterval = null; const originalTitle = document.title; // When tab is inactive addEventListener('blur', function() { titleInterval = setInterval(() => { document.title = 'We miss you 😢'; }, 2000); }); // When tab is active addEventListener('focus', function() { if (titleInterval) { clearInterval(titleInterval); document.title = originalTitle; } }); </script></body></html>