```css
/* ==========================================================
   BASE RESET
========================================================== */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


/* ==========================================================
   HTML / BODY
========================================================== */

html,
body {

    width: 100%;
    height: 100%;

    overflow: hidden;

}


/* ==========================================================
   VARIABLES
========================================================== */

:root {

    --logo-width: 250px;

}


/* ==========================================================
   LINKS
========================================================== */

a {

    text-decoration: none;

    color: #ffffff;

}


/* ==========================================================
   LOGO CONTAINER
========================================================== */

.logo {

    width: var(--logo-width);

    perspective: 1800px;

    perspective-origin: center;

}


/* ==========================================================
   TEXT CONTAINER
========================================================== */

.logo-text {

    opacity: 0;

}


/* ==========================================================
   TEXT REVEAL
========================================================== */

.logo-text.loaded {

    animation:
        revealText
        2s
        2.8s
        ease-out
        forwards;

}


.hero.loaded .logo-text {

    animation:
        revealText
        2s
        2.8s
        ease-out
        forwards;

}


/* ==========================================================
   MAIN LOGO IMAGE
========================================================== */

.logo-text img {

    width: 900px;

    height: auto;

    margin-left: 80px;

    margin-top: 10px;

    display: block;

    transform:
        translateY(-4px);

}


/* ==========================================================
   CONSTRUCTION BANNER
========================================================== */

.construction-banner {

    margin-bottom: 40px;

    font:
        300
        18px/1
        "Gill Sans",
        "Gill Sans MT",
        Calibri,
        sans-serif;

    color: #939598;

    text-align: left;

    padding-left: 80px;

    line-height: 1.25;

    letter-spacing: 2pt;

}


/* ==========================================================
   CONTACT BANNER
========================================================== */

.contact-banner {

    margin-top: 2rem;

    margin-bottom: .5rem;

    font:
        300
        18px/1
        "Gill Sans",
        "Gill Sans MT",
        Calibri,
        sans-serif;

    color: #ffffff;

    text-align: left;

    padding-left: 80px;

    line-height: 1.5;

    letter-spacing: 2pt;

}


/* ==========================================================
   INFORMATION LABELS
========================================================== */

.info {

    margin-bottom: .5rem;

    font:
        300
        17px/1
        "Gill Sans",
        "Gill Sans MT",
        Calibri,
        sans-serif;

    color: #939598;

    text-align: left;

}


/* ==========================================================
   LEADING
========================================================== */

#leading {

    line-height: 1.5;

}


/* ==========================================================
   @ SYMBOL
========================================================== */

.at {

    font-size: 12px;

    position: relative;

    top: -1px;

}


/* ==========================================================
   HERO
========================================================== */

.hero {

    position: relative;

    width: 100vw;

    height: 100vh;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: flex-start;

}


/* ==========================================================
   FULL SCREEN VIDEO
========================================================== */

.hero-video {

    position: absolute;

    top: 50%;

    left: 50%;

    height: auto;

    object-fit: cover;

    -webkit-transform:
        translate(-50%, -35%)
        scale(1.75);

    transform:
        translate(-50%, -35%)
        scale(1.75);

}


/* ==========================================================
   LOGO LOCKUP
========================================================== */

.logo-lockup {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

}


/* ==========================================================
   SVG
========================================================== */

.logo-svg {

    width: 100%;

    height: auto;

    margin-left: 100px;

    overflow: visible;

    display: block;

}


/* ==========================================================
   LOGO VERTICAL POSITION
========================================================== */

.logo {

    transform:
        translateY(-38px);

    margin-top: 10px;

}


/* ==========================================================
   SVG 3D SETUP
==========================================================

   IMPORTANT:

   Keep perspective on .logo.

   Do NOT apply preserve-3d directly
   to the SVG paths.

========================================================== */

.logo {

    -webkit-transform-style: preserve-3d;

    transform-style: preserve-3d;

}


/* ==========================================================
   SVG PIECES
========================================================== */

.shape {

    transform-box: fill-box;

    -webkit-transform-origin: center center;

    transform-origin: center center;

    opacity: 0;

    will-change:
        transform,
        opacity;

    /*
     * Firefox / WebKit compositing support.
     */

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

}


/* ==========================================================
   COLOURS
========================================================== */

.white {

    fill: #ffffff;

}


.blue {

    fill: #00f0ff;

}


/* ==========================================================
   ANIMATIONS
========================================================== */

.piece1,
.piece2,
.piece3,
.piece4 {

    opacity: 0;

}


/* ==========================================================
   PIECE 1
========================================================== */

.hero.loaded .piece1 {

    animation:
        assembleLeft
        2.2s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


/* ==========================================================
   PIECE 2
========================================================== */

.hero.loaded .piece2 {

    animation:
        assembleRight
        2.2s
        .35s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


/* ==========================================================
   PIECE 3
========================================================== */

.hero.loaded .piece3 {

    animation:
        assembleLeft
        2.2s
        .7s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


/* ==========================================================
   PIECE 4
========================================================== */

.hero.loaded .piece4 {

    animation:
        assembleRight
        2.2s
        1.05s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


/* ==========================================================
   LEFT SIDE ROTATION
========================================================== */

@keyframes assembleLeft {

    0% {

        opacity: 0;

        transform:
            translateX(-120px)
            rotateY(-70deg)
            rotateZ(-8deg)
            scale(.85);

    }


    35.5% {

        opacity: 1;

        transform:
            translateX(0)
            rotateY(0deg)
            rotateZ(0deg)
            scale(1);

    }


    100% {

        opacity: 1;

        transform:
            translateX(0)
            rotateY(0deg)
            rotateZ(0deg)
            scale(1);

    }

}


/* ==========================================================
   RIGHT SIDE ROTATION
========================================================== */

@keyframes assembleRight {

    0% {

        opacity: 0;

        transform:
            translateX(-120px)
            rotateY(-70deg)
            rotateZ(-8deg)
            scale(.85);

    }


    35.5% {

        opacity: 1;

        transform:
            translateX(0)
            rotateY(0deg)
            rotateZ(0deg)
            scale(1);

    }


    100% {

        opacity: 1;

        transform:
            translateX(0)
            rotateY(0deg)
            rotateZ(0deg)
            scale(1);

    }

}


/* ==========================================================
   TEXT REVEAL
========================================================== */

@keyframes revealText {

    0% {

        opacity: 0;

        transform:
            translateX(20px);

    }


    40% {

        opacity: 0;

        transform:
            translateX(12px);

    }


    100% {

        opacity: 1;

        transform:
            translateX(0);

    }

}


/* ==========================================================
   FIREFOX SVG SAFETY
========================================================== */

@supports (-moz-appearance: none) {

    .shape {

        -webkit-backface-visibility: hidden;

        backface-visibility: hidden;

    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .piece1,
    .piece2,
    .piece3,
    .piece4,
    .logo-text {

        animation:
            none !important;

        opacity: 1;

    }

}
```