@font-face {
    font-family: 'sometimes-italic';
    src: url('/font/SometimesTimes-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

.home #content-wrapper { height:auto !important; min-height:100vh !important; }
.home footer { display:none; }

.c-landing {
    min-height: 100vh;
    position: relative;
}

.c-landing__grid {
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}

.c-landing__line-vert {
    background: #c1c2c3;
    height: 100%;
    left: calc(100% * (1 / 11));
    position: absolute;
    top: 0;
    width: 1px;
    z-index: 1;
}
.c-landing__line-vert:nth-child(2) { left: calc(100% * (2 / 11)); }
.c-landing__line-vert:nth-child(3) { left: calc(100% * (3 / 11)); }
.c-landing__line-vert:nth-child(4) { left: calc(100% * (4 / 11)); }
.c-landing__line-vert:nth-child(5) { left: calc(100% * (5 / 11)); }
.c-landing__line-vert:nth-child(6) { left: calc(100% * (6 / 11)); }
.c-landing__line-vert:nth-child(7) { left: calc(100% * (7 / 11)); }
.c-landing__line-vert:nth-child(8) { left: calc(100% * (8 / 11)); }
.c-landing__line-vert:nth-child(9) { left: calc(100% * (9 / 11)); }
.c-landing__line-vert:nth-child(10) { left: calc(100% * (10 / 11)); }

.c-landing__line-hor {
    background: #c1c2c3;
    height: 1px;
    left: 0;
    position: absolute;
    top: calc(100% * (1 / 7));
    width: 100%;
    z-index: 1;
}
.c-landing__line-hor:nth-child(2) { top: calc(100% * (2 / 7)); }
.c-landing__line-hor:nth-child(3) { top: calc(100% * (3 / 7)); }
.c-landing__line-hor:nth-child(4) { top: calc(100% * (4 / 7)); }
.c-landing__line-hor:nth-child(5) { top: calc(100% * (5 / 7)); }
.c-landing__line-hor:nth-child(6) { top: calc(100% * (6 / 7)); }

.c-landing__canvas {
    display: none;
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    transition: opacity .5s ease;
    width: 100%;
    will-change: opacity;
    z-index: 2;
}

.c-landing__img-caption {
    display: none;
}

@media screen and (min-width:1024px) {
    .c-landing__canvas {
        display: block;
    }

    .c-landing--end .c-landing__canvas {
        opacity: 0;
    }

    .c-landing__img-caption {
        color: #fff;
        display: block;
        font-family: 'lintel';
        font-size: 18px;
        opacity: 0;
        position: fixed;
        right: 0;
        top: 1.5rem;
        transform: rotate(90deg) translateX(230px) translateY(-80px);
        transition: opacity .3s ease;
        z-index: 2;
    }

    .c-landing__img-caption.is-visible {
        opacity: 1;
    }

    .c-landing--end .c-landing__img-caption.is-visible {
        opacity: 0;
    }
}

.c-landing__content {
    position: relative;
    z-index: 3;
}

.c-landing__arrow {
    align-items: center;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-name: arrow_animate;
    animation-timing-function: ease;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: calc(100vh - 5rem);
    transform: translateX(-50%) translateY(-100%);
    transition: opacity .2s ease;
    z-index: 100;
}

.c-landing__arrow i {
    color: #bc2f2c;
    font-family: 'cooper_hewitt_book';
    font-size: .9rem;
    font-style: normal;
}

.hide-scroll .c-landing__arrow {
    opacity: 0;
}

@keyframes arrow_animate {
    0% {
        transform: translateX(-50%) translateY(-100%);
    }

    50% {
        transform: translateX(-50%) translateY(-70%);
    }

    100% {
        transform: translateX(-50%) translateY(-100%);
    }
}

/* .c-landing--end .c-landing__intro,
.c-landing--end .c-landing__about {
    display: none;
} */

.c-landing__intro {
    align-items: center;
    color: #000;
    display: flex;
    font-family: 'degular';
    font-size: 48px;
    font-weight: 500;
    justify-content: center;
    line-height: 1.15;
    min-height: 100vh;
    margin: 0;
    padding: 2.5rem 1rem 2.5rem;
    text-align: center;
}

@media screen and (min-width:768px) {
    .c-landing__intro { font-size: 48px; }
}

@media screen and (min-width:1024px) {
    .c-landing__intro { font-size: 42px; padding: calc(110px + 2.5rem) 1rem 2.5rem; }
}

@media screen and (min-width:1200px) {
    .c-landing__intro { font-size: 55px; }
    .c-landing__intro span { transform: translateY(-4rem); }
}

@media screen and (min-width:1300px) {
    .c-landing__intro { font-size: 65px; }
}

@media screen and (min-width:1400px) {
    .c-landing__intro { font-size: 75px; }
}

@media screen and (min-width:1500px) {
    .c-landing__intro { font-size: 85px; }
}

@media screen and (min-width:1600px) {
    .c-landing__intro { font-size: 95px; }
}

.c-landing__intro i {
    display: block;
    font-style: normal;
    opacity: 0;
    transform: translateY(2.5rem);
    transition: opacity .5s ease,
                transform .55s ease;
    will-change: opacity, transform;
}

.c-landing__intro em {
    font-family: 'sometimes-italic';
    font-style: normal;
    -webkit-text-stroke: 3px #000;
}

@media screen and (min-width:1024px) {
    .c-landing__intro em {
        -webkit-text-stroke: 5px #000;
    }
}

.c-landing__intro i:nth-child(2) {
    transition-delay: .15s;
}

.c-landing__intro i:nth-child(3) {
    transition-delay: .3s;
}

.c-landing__intro.is-visible i {
    opacity: 1;
    transform: translateY(0);
}

.c-landing__about {
    background: url(/img/home/50-landing-mbl.v2.jpg) no-repeat center center;
    background-size: cover;
    min-height: 80vh;
    padding: 4rem 5rem 2.5rem 2.5rem;
    position: relative;
    z-index: 4;

    display: grid;
    grid-template-columns: 1fr;
    row-gap: 2rem;
}

.c-landing__about h3 { 
    color: #fff;
    font-family: sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 1;
    margin-block-end: 1.5rem;
}

@media screen and (min-width:1024px) {
    .c-landing__about {
        background: 0;
        min-height: 135vh;
        padding: calc(110px + 2.5rem) 4rem 2.5rem 4rem;

        align-items: center;
        column-gap: 6rem;
        grid-template-columns: 240px 1fr;
    }

    .c-landing__about div:last-child {
        padding-block: 3rem;
        position: relative;
    }

    .c-landing__about div:last-child:before {
        border-left: 1px solid #fff;
        content: '';
        height: 100%;
        left: -3rem;
        position: absolute;
        top: 0;
        width: 1px;
    }
}

.c-landing__about p {
    color: #fff;
    font-family: sans-serif;
    font-size: 20px;
    line-height: 1.45;
    margin: 0;
}

@media screen and (min-width:1200px) {
    .c-landing__about {
        grid-template-columns: 320px 1fr;
        padding: calc(110px + 2.5rem) 5rem 2.5rem 5rem;
    }

    .c-landing--end .c-landing__about {
        opacity: 0;
    }

    .c-landing__about h3 { font-size: 30px; }
    .c-landing__about p { font-size: 21px; }
}

@media screen and (min-width:1400px) {
    .c-landing__about {
        grid-template-columns: 420px 1fr;
        padding: calc(110px + 2.5rem) 6rem 2.5rem 6rem;
    }

    .c-landing__about h3 { font-size: 32px; }
    .c-landing__about p { font-size: 22px; }
}

@media screen and (min-width:1600px) {
    .c-landing__about {
        grid-template-columns: 480px 1fr;
        padding: calc(110px + 2.5rem) 15% 2.5rem 15%;
    }
    .c-landing__about h3 { font-size: 34px; }
    .c-landing__about p { font-size: 24px; }
}

.c-landing__about p:not(:last-child) {
    margin-bottom: 2rem;
}

.c-landing__services {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    opacity: 0;
    padding: calc(110px + 2.5rem) 1rem 2.5rem;
    pointer-events: none;
    position: relative;
    width: 100%;
    z-index: 5;
}

@media screen and (min-width:1024px) {
    .c-landing__services {
        left: 0;
        position: fixed;
        top: 0;
    }
}

.c-landing--end-anim .c-landing__services {
    transition: opacity 1.5s ease .25s;
    will-change: opacity;
}

.c-landing--end .c-landing__services {
    opacity: 1;
    pointer-events: auto;
}

.c-landing__services-copy {
    align-items: center;
    background: #fff;
    bottom: calc(100vh * (3/7) + 1px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 0;
    padding: 1.5rem;
    position: fixed;
    right: 0;
    top: calc(100vh * (3/7));
    z-index: 2;
}

@media screen and (min-width:1024px) {
    .c-landing__services-copy {
        left: calc(100% * (3/11));
        position: absolute;
        right: calc(100% * (3/11) + 1px);
    }
}

.c-landing--end-anim .c-landing__services-copy{
    transition: opacity 1.5s ease;
    will-change: opacity;
}

.c-landing__services-copy.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.c-landing__services p {
    color: #010101;
    font-family: 'degular';
    font-size: 28px;
    font-weight: 500;
    line-height: 1.05;
    margin: 0 auto;
    text-align: center;
}

@media screen and (min-width:768px) {
    .c-landing__services p { font-size: 32px; }
}

@media screen and (min-width:1024px) {
    .c-landing__services p { font-size: 36px; }
}

@media screen and (min-width:1200px) {
    .c-landing__services p { font-size: 38px; }
}

@media screen and (min-width:1320px) {
    .c-landing__services p { font-size: 40px; }
}

@media screen and (min-width:1400px) {
    .c-landing__services p { font-size: 42px; }
}

@media screen and (min-width:1460px) {
    .c-landing__services p { font-size: 44px; }
}

@media screen and (min-width:1500px) {
    .c-landing__services p { font-size: 46px; }
}

@media screen and (min-width:1580px) {
    .c-landing__services p { font-size: 48px; }
}

@media screen and (min-width:1660px) {
    .c-landing__services p { font-size: 50px; }
}

.c-landing__services a {
    align-items: center;
    background: #bc2f2c;
    color: #fff !important;
    display: inline-flex;
    font-family: 'degular';
    font-size: 18px;
    height: 42px;
    left: 50%;
    justify-content: center;
    padding: 0 2.5rem;
    position: absolute;
    text-decoration: none;
    top: 100%;
    transform: translateX(-50%) translateY(2.75rem);
    white-space: nowrap;
}

.c-landing__services a:hover {
    color: #010101;
}

.c-landing__services p span {
    color: #bc2f2c;
}

/* GRID UPDATES */
.c-landing__gridgrid {
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}

.c-landing__gridgrid-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: calc(100vh * (1/7));
}

.c-landing__gridgrid-col:nth-child(n + 6) {
    display: none;
}

@media screen and (min-width:1024px) {
    .c-landing__gridgrid-row {
        grid-template-columns: repeat(11, 1fr);
    }

    .c-landing__gridgrid-col:nth-child(n + 6) {
        display: block;
    }
}

.c-landing__gridgrid-row:not(:last-child) {
    border-bottom: 1px solid #c1c2c3;
}

.c-landing__gridgrid-row--border-top {
    border-top: 1px solid #c1c2c3;
}

.c-landing__gridgrid-col {
    background: #fff;
    position: relative;
}

.c-landing__gridgrid-col span {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    will-change: opacity;
}

.c-landing--end-anim .c-landing__gridgrid-col span {
    transition: opacity .5s ease-in;
}

.c-landing--end .c-landing__gridgrid-col span {
    opacity: 1;
}

.c-landing--end-anim .c-landing__gridgrid-col.cell-1 span { transition-delay: .1s; }
.c-landing--end-anim .c-landing__gridgrid-col.cell-2 span { transition-delay: .275s; }
.c-landing--end-anim .c-landing__gridgrid-col.cell-3 span { transition-delay: .4s; }
.c-landing--end-anim .c-landing__gridgrid-col.cell-4 span { transition-delay: .5s; }
.c-landing--end-anim .c-landing__gridgrid-col.cell-5 span { transition-delay: .6s; }
.c-landing--end-anim .c-landing__gridgrid-col.cell-6 span { transition-delay: .6s; }
.c-landing--end-anim .c-landing__gridgrid-col.cell-7 span { transition-delay: .65s; }
.c-landing--end-anim .c-landing__gridgrid-col.cell-8 span { transition-delay: .8s; }
.c-landing--end-anim .c-landing__gridgrid-col.cell-9 span { transition-delay: 1s; }
.c-landing--end-anim .c-landing__gridgrid-col.cell-10 span { transition-delay: 1.2s; }

.c-landing__gridgrid-col:not(:last-child) {
    border-right: 1px solid #c1c2c3;
}

@media screen and (min-width:1024px) {
    .c-landing__gridgrid-col.mbl-only-vis span {
        display: none;
    }
}