.hero {
    position: relative;
    z-index: 1;

    height: calc((1180px - var(--hero-lift)) * var(--scale));
}

.hero__motion {
    position: relative;
    height: 1140px;
}

.hero__layer {
    position: absolute;
    inset: 0;
    transform: translateY(calc(-1 * var(--hero-lift)));
}

.hero__title {
    position: absolute;
    left: 168px;
    top: 300px;
    width: 945px;
    font-family: "Activist", sans-serif;
    font-weight: 400;
    font-size: 240px;
    line-height: 1;
    letter-spacing: -0.08em;
    text-align: center;
    text-transform: uppercase;
}

.hero__intro {
    position: absolute;
    left: 0;
    top: 547px;
    width: 100%;
    font-size: 84px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.u-sans {
    font-weight: 200;
    letter-spacing: -0.06em;
}

.u-serif {
    font-family: "TT Tricks", serif;
    font-weight: 400;
    letter-spacing: -0.04em;
}

.hero__lead {
    position: absolute;
    left: 228px;
    top: 628px;
    width: 832px;
    font-family: "TT Tricks", serif;
    font-weight: 400;
    font-size: 84px;
    line-height: 84px;
    letter-spacing: -0.04em;
    text-align: center;
    white-space: pre-wrap;
}

.hero__rule {
    position: absolute;
    z-index: 1;
    height: 2px;
    background: repeating-linear-gradient(
        to right,
        var(--color-ink) 0 4px,
        transparent 4px 8px
    );
}

.hero__rule--search {
    left: 624px;
    top: 706px;
    width: 270px;
}

.hero__rule--paths {
    left: 242px;
    top: 794px;
    width: 814px;
}

.hero__cards {
    position: absolute;
    z-index: 2;
    left: 675px;
    top: 711px;
    width: 144px;
    height: 106px;
}

.hero__rest {
    position: absolute;
    z-index: 2;
    left: 413px;
    top: 974px;
    width: 63px;
    height: 63px;
}

.hero__note {
    position: absolute;
    z-index: 2;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.06em;
    white-space: nowrap;
}

.hero__note--one {
    left: 1058px;
    top: 746px;
}

.hero__note--two {
    left: 884px;
    top: 914px;
}

.hero__note--four {
    left: 850px;
    top: 1082px;
}

.top-bar__motion,
.hero__motion {
    transform: translateY(var(--enter-y, 0px)) scale(var(--scale));
    transform-origin: top center;
    transition: transform var(--intro-duration) var(--ease-enter);
}

.hero__end {
    height: 1px;
}

.is-preload .top-bar__motion {
    --enter-y: -260px;
}

.is-preload .hero__motion {
    --enter-y: 1200px;
}

.hero__jump {
    position: absolute;
    z-index: 3;
    display: block;
    cursor: pointer;
}

.hero__jump--search {
    left: 624px;
    top: 628px;
    width: 270px;
    height: 84px;
}

.hero__jump--paths {
    left: 242px;
    top: 712px;
    width: 814px;
    height: 84px;
}

.hero__jump:hover ~ .hero__cards {
    animation: hero-card-perk 0.55s ease;
}

@keyframes hero-card-perk {
    0%, 100% { transform: none; }
    35% { transform: translateY(-4px) rotate(-2.5deg); }
    70% { transform: translateY(0) rotate(1.5deg); }
}

.bureau-m {
    display: none;
}

@media (max-width: 767px) {
    .hero,
    .panels,
    .hero__end,
    .top-bar {
        display: none !important;
    }

    .bureau-m {
        display: block;
        position: fixed;
        inset: 0;
        overflow: hidden;
        background: #ffffff;
    }

    .bureau-m__stage {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 390px;
        height: 844px;
        transform: translate(-50%, -50%) translateY(var(--enter-y, 0px)) scale(var(--bm-scale, 1));
        transform-origin: center center;
        transition: transform var(--intro-duration) var(--ease-enter);
    }

    .is-preload .bureau-m__stage {
        --enter-y: 900px;
    }

    .bureau-m__title {
        position: absolute;
        left: 0;
        top: 410px;
        width: 100%;
        margin: 0;
        font-family: "Activist", sans-serif;
        font-weight: 400;
        font-size: 90px;
        line-height: 1;
        letter-spacing: -0.08em;
        text-align: center;
        text-transform: uppercase;
        color: var(--color-ink);
    }

    .bureau-m__lead {
        position: absolute;
        left: 0;
        top: 524px;
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: 42px;
        line-height: 1;
        white-space: nowrap;
    }

    .bureau-m__intro {
        font-family: "ABC Whyte", sans-serif;
        font-weight: 200;
        letter-spacing: -0.06em;
    }

    .bureau-m__dash {
        font-family: "TT Tricks", serif;
        letter-spacing: -0.04em;
    }

    .bureau-m__body {
        position: absolute;
        left: 0;
        top: 566px;
        width: 100%;
        margin: 0;
        font-family: "TT Tricks", serif;
        font-size: 40px;
        line-height: 40px;
        letter-spacing: -0.04em;
        text-align: center;
        white-space: pre-wrap;
        color: var(--color-ink);
    }

    .bureau-m__u {
        position: relative;
        display: inline-block;
    }

    .bureau-m__u::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0.04em;
        height: 1.5px;
        background: repeating-linear-gradient(to right, var(--color-ink) 0 4px, transparent 4px 8px);
    }

    .bureau-m__cards {
        position: absolute;
        left: 206px;
        top: 610px;
        width: 50px;
        height: auto;
    }

    .bureau-m__rest {
        position: absolute;
        left: 66px;
        top: 732px;
        width: 44px;
        height: auto;
    }
}