/* ==================================================
   HEADER
================================================== */

.header {

    position: absolute;

    top: 0;
    left: 0;

    z-index: 20;

    width: 100%;

    height: var(--header-height);

    padding:
        0 var(--page-padding);

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

}

.header img{
    width: 160px;
    mix-blend-mode: difference;
}


/* LOGO */

.header-logo {

    justify-self: start;

    font-size: 16px;

    letter-spacing: 1.8px;

    line-height: 1;

}


.logo-trace {

    font-weight: 300;

}


.logo-haus {

    font-weight: 700;

}


/* NAV */

.header-nav {

    display: flex;

    align-items: center;

    gap: clamp(28px, 3vw, 52px);

}

.header-nav a {

    position: relative;

    font-size: 11px;

    font-weight: 300;

    letter-spacing: 0;

}


.header-nav a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -5px;

    width: 0;
    height: 1px;

    background: var(--text);

    transition: width 0.3s ease;

}


.header-nav a:hover::after {

    width: 100%;

}


/* H MARK */

.header-mark {
    justify-self: end;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 16px;
    height: 16px;

    background: #0b0c11;
    color: #fff;

    font-size: 9px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;
}


/* =========================================================
   TOOLTIP
   ========================================================= */

.header-mark-tooltip {
    position: absolute;

    top: calc(100% + 12px);
    right: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;

    width: max-content;

    padding: 12px 14px;

    background: #0b0c11;
    color: #fff;

    font-size: 8px;
    font-weight: 400;
    line-height: 1.2;

    opacity: 0;
    visibility: hidden;

    transform: translateY(-5px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;

    pointer-events: none;
}


/* =========================================================
   HOVER
   ========================================================= */

.header-mark:hover .header-mark-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

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

.hero {

    position: relative;

    min-height: 100vh;

    width: 100%;

    background: var(--white);

}


.hero-content {

    position: relative;

    min-height: 100vh;

    width: 100%;

    padding:
        var(--header-height) var(--page-padding) 35px;

    display: grid;

    grid-template-columns: 0.78fr 1fr;

    grid-template-rows:
        minmax(220px, 31vh) 1fr auto;

}

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

.hero-title {

    grid-column: 1;

    grid-row: 1;

    align-self: end;

}


.hero-title h1 {

    font-size: clamp(48px, 4.8vw, 90px);

    line-height: 0.86;

    letter-spacing: -0.065em;

    font-weight: 400;

    text-transform: uppercase;

    margin-bottom: 10px;

}


.hero-title h2 {

    font-size: clamp(68px, 7.8vw, 135px);

    line-height: 0.86;

    letter-spacing: -0.065em;

    font-weight: 400;

    text-transform: uppercase;

    margin-bottom: -80px;

}

/* ==================================================
   MANIFESTO
================================================== */

.hero-manifesto {

    grid-column: 2;

    grid-row: 1;

    align-self: end;

    width: 260px;

    margin-left: 0;

    margin-right: 0;

    margin-bottom: 8px;

    padding-bottom: 4px;

}


.section-line {

    width: 16px;

    height: 2px;

    margin-bottom: 10px;

    background: var(--accent);

}


.eyebrow {

    display: block;

    margin-bottom: 16px;

    font-size: 11px;

    font-weight: 600;

    line-height: 1;

}


.hero-manifesto p {

    font-size: 12px;

    line-height: 1.45;

    letter-spacing: -0.01em;

    margin-bottom: 18px;

}


/* ==================================================
   BIG WORD
================================================== */

.hero-word {

    grid-column: 1 / -1;

    grid-row: 2;

    align-self: center;

    width: calc(100% + 20px);

    margin-top: -2vh;

    overflow: visible;

}


.hero-word span {

    display: block;

    width: max-content;

    font-size: clamp(150px, 16vw, 18vw);

    font-weight: 400;

    line-height: 0.72;

    letter-spacing: -0.08em;

    white-space: nowrap;

}


.hero-word span::after {
    content: ".";
    color: #ff3f68;
}

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

.hero-services {

    grid-column: 1;

    grid-row: 3;

    display: flex;

    align-items: center;

    gap: 14px;

    padding-bottom: 4px;

}


.hero-services span {

    font-size: 12px;

    font-weight: 600;

    letter-spacing: -0.02em;

}


.hero-services i {

    font-size: 11px;

    font-style: normal;

    color: var(--accent);

}


/* ==================================================
   HERO SCROLL ARROW
================================================== */

.hero-scroll {

    grid-column: 2;

    grid-row: 3;

    justify-self: end;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 30px;

    height: 30px;

    font-size: 28px;

    font-weight: 300;

    line-height: 1;

    transition:
        transform 0.3s ease;

}


.hero-scroll:hover {

    transform: translateY(5px);

}


/* ==================================================
   SIDE SCROLL
================================================== */

.hero-side-scroll {

    position: absolute;

    right: var(--page-padding);

    top: 50%;

    transform: translateY(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

}


.side-scroll-line {

    position: relative;

    width: 1px;

    height: 145px;

    background: #d9d9d7;

}


.side-scroll-line span {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: var(--black);

}


.side-scroll-label {

    font-size: 8px;

    font-weight: 600;

    writing-mode: vertical-rl;

    transform: rotate(180deg);

    letter-spacing: 0.02em;

}


/* ==================================================
   PLACEHOLDER
================================================== */

.placeholder-section {

    min-height: 100vh;

}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 900px) {

    :root {

        --page-padding: 24px;

    }


    .header {

        grid-template-columns: 1fr auto;

    }


    .header-nav {

        display: none;

    }


    .hero-content {

        grid-template-columns: 1fr;

        grid-template-rows:
            auto auto 1fr auto;

        padding-top: 110px;

    }


    .hero-title {

        grid-column: 1;

        grid-row: 1;

    }


    .hero-title h1 {

        font-size: clamp(54px, 14vw, 100px);
        margin-bottom: 0px;

    }


    .hero-title h2 {

        font-size: clamp(54px, 14vw, 100px);
        margin-bottom: 0px;

    }

    .hero-manifesto {

        grid-column: 1;

        grid-row: 2;

        justify-self: start;

        margin: 45px 0 0;

        max-width: 300px;

    }


    .hero-word {

        grid-column: 1;

        grid-row: 3;

        align-self: center;

        margin-top: 0;

    }


    .hero-word span {

        font-size: 25vw;

        letter-spacing: -0.08em;

    }


    .hero-services {

        grid-column: 1;

        grid-row: 4;

    }


    .hero-scroll {

        display: none;

    }


    .hero-side-scroll {

        display: none;

    }

    .hero {
        display: flex;
        flex-direction: column;
    }


    
    /* ----------------------------------------------
       HERO CONTENT
    ---------------------------------------------- */

    .hero-content {

        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows:
            auto auto auto;

        grid-template-areas:
            "title"
            "word"
            "manifesto";

        gap: 0;

        height: auto;

        min-height: 0;
        margin-top: 40px;

    }


    /* ----------------------------------------------
       TITLE
    ---------------------------------------------- */

    .hero-title {

        grid-area: title;

        position: relative;

        top: auto;
        left: auto;
        right: auto;
        bottom: auto;

        width: 100%;

        margin: 0;

    }


    /* ----------------------------------------------
       FORMA
    ---------------------------------------------- */

    .hero-word {

        grid-area: word;

        position: relative;

        top: auto;
        left: auto;
        right: auto;
        bottom: auto;

        width: 100%;

        margin-top: 45px;

    }


    /* ----------------------------------------------
       MANIFESTO
    ---------------------------------------------- */

    .hero-manifesto {

        grid-area: manifesto;

        position: relative;

        top: auto;
        left: auto;
        right: auto;
        bottom: auto;

        max-width: 100%;

        margin-top: 55px;

    }


}


@media (max-width: 500px) {


    :root {

        --page-padding: 18px;

    }


    .header {

        height: 70px;

    }


    .header-logo {

        font-size: 13px;

    }


    .hero-content {

        min-height: 100svh;

        padding:
            95px var(--page-padding) 25px;

    }


    .hero-title h1 {

        font-size: 17vw;

        line-height: 0.88;
        margin-bottom: 0;

    }

    
    .hero-title h2 {

        font-size: 17vw;

        line-height: 0.88;
        margin-bottom: -32px;

    }

    .hero-manifesto {

        margin-top: 35px;

    }


    .hero-manifesto p {

        font-size: 10px;

    }


    .hero-word {

        overflow: hidden;

    }


    .hero-word span {

        font-size: 25vw;

    }


    .hero-services {

        gap: 8px;

    }


    .hero-services span {

        font-size: 8px;

    }




    .hero-title {
        order: 1;
    }

    .hero-forma {
        order: 2;
    }

    .hero-manifesto {
        order: 3;
    }


    /* ----------------------------------------------
       HERO CONTENT
    ---------------------------------------------- */

    .hero-content {

        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows:
            auto auto auto;

        grid-template-areas:
            "title"
            "word"
            "manifesto";

        gap: 0;

        height: auto;

        min-height: 0;
        margin-top: 40px;

    }


    /* ----------------------------------------------
       TITLE
    ---------------------------------------------- */

    .hero-title {

        grid-area: title;

        position: relative;

        top: auto;
        left: auto;
        right: auto;
        bottom: auto;

        width: 100%;

        margin: 0;

    }


    /* ----------------------------------------------
       FORMA
    ---------------------------------------------- */

    .hero-word {

        grid-area: word;

        position: relative;

        top: auto;
        left: auto;
        right: auto;
        bottom: auto;

        width: 100%;

        margin-top: 45px;

    }


    /* ----------------------------------------------
       MANIFESTO
    ---------------------------------------------- */

    .hero-manifesto {

        grid-area: manifesto;

        position: relative;

        top: auto;
        left: auto;
        right: auto;
        bottom: auto;

        max-width: 100%;

        margin-top: 55px;

    }

}