/* ================================
   RESET
================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    background: #000;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}


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

.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;

    background-image: url("images/coming-soon.webp");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    overflow: hidden;
}


/* ================================
   IMAGE OVERLAY
================================ */

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.00) 35%,
            rgba(0, 0, 0, 0.03) 55%,
            rgba(0, 0, 0, 0.20) 100%
        );
}


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

.header {
    position: absolute;

    top: 42px;
    right: 15%;

    z-index: 3;
}

.brand {
    display: block;
}

.brand img {
    display: block;

    width: 205px;
    height: auto;
}


/* ================================
   CONTENT
================================ */

.hero-content {
    position: absolute;
    z-index: 2;

    top: 50%;
    right: 7.5%;

    transform: translateY(-37%);

    width: 43%;

    text-align: center;
}


/* ================================
   MAIN HEADING
================================ */

.hero-content h1 {
    font-family:
        "Bodoni Moda",
        "Didot",
        "Bodoni 72",
        "Times New Roman",
        serif;

    font-size: clamp(58px, 5.1vw, 88px);

    font-weight: 400;
    font-style: normal;

    line-height: 0.96;

    letter-spacing: 0.015em;

    color: #f8f3eb;

    text-shadow:
        0 2px 18px rgba(0, 0, 0, 0.22);
}


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

.services {
    margin-top: 34px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 10px;
    font-weight: 400;

    letter-spacing: 0.24em;

    line-height: 1.8;

    color: rgba(255, 250, 242, 0.94);

    white-space: nowrap;
}


/* ================================
   DIVIDER
================================ */

.divider {
    width: 68px;
    height: 1px;

    margin: 34px auto 0;

    background: rgba(255, 255, 255, 0.78);
}


/* ================================
   COMING SOON
================================ */

.coming-soon {
    margin-top: 22px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;
    font-weight: 400;

    letter-spacing: 0.48em;

    color: #f8f3eb;

    text-transform: uppercase;
}


/* ================================
   TABLET
================================ */

@media (max-width: 1000px) {

    .header {
        top: 32px;
        right: 6%;
    }

    .brand img {
        width: 175px;
    }

    .hero-content {
        right: 5%;
        width: 48%;
    }

    .hero-content h1 {
        font-size: clamp(48px, 7vw, 72px);
    }

    .services {
        font-size: 8px;
        letter-spacing: 0.17em;
    }
}


/* ================================
   MOBILE
================================ */

@media (max-width: 600px) {

    html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .hero {
        width: 100%;
        height: 100svh;
        min-height: 0;

        background-size: cover;
        background-position: 56% center;
    }

    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.08) 0%,
                rgba(0, 0, 0, 0.02) 45%,
                rgba(0, 0, 0, 0.48) 100%
            );
    }


    /* LOGO */

    .header {
        top: 22px;
        right: 20px;
        left: auto;
    }

    .brand img {
        width: 120px;
        height: auto;
    }


    /* CONTENT */

    .hero-content {
        position: absolute;

        top: 30%;
        right: 4%;

        transform: none;

        width: 67%;

        padding: 0;

        text-align: right;
    }


    /* HEADING */

    .hero-content h1 {
        font-family:
            "Bodoni Moda",
            "Didot",
            "Bodoni 72",
            "Times New Roman",
            serif;

        font-size: clamp(34px, 9.5vw, 45px);

        font-weight: 400;
        font-style: normal;

        line-height: 0.98;

        letter-spacing: 0.01em;

        color: #f8f3eb;
    }


    /* SERVICES */

.services {
    position: absolute;

    top: -34px;
    right: 0;

    width: 100%;

    margin-top: 0;

    font-size: 6px;
    letter-spacing: 0.07em;
    line-height: 1.8;

    white-space: nowrap;

    text-align: right;

    color: rgba(255, 250, 242, 0.94);
}


    /* DIVIDER */

    .divider {
        width: 45px;
        height: 1px;

        margin: 24px 0 0 auto;

        background: rgba(255, 255, 255, 0.75);
    }


    /* COMING SOON */

    .coming-soon {
        margin-top: 16px;

        font-size: 9px;

        letter-spacing: 0.28em;

        color: #f8f3eb;
    }
}