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

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

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


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

        body {
            background: #ffffff;
            font-family: Arial, Helvetica, sans-serif;
            overflow-x: hidden;
            overflow-y: auto;
        }


        /* ========================================
           MAIN WHITE PAGE
        ======================================== */

        .page {
            position: relative;

            width: 820px;
            min-height: 100vh;

            margin: 0 auto;

            background: #ffffff;

            /* allow overflowing absolutely-positioned content to be visible so
               the page can scroll when bottom content extends past the viewport */
            overflow: visible;
        }


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

        .hero {
            position: relative;

            width: 100%;
            height: 620px;
        }


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

        .brand {
            position: absolute;

            left: 39px;
            top: 300px;

            z-index: 5;

            display: flex;
            align-items: center;

            gap: 14px;
        }


        /* Logo + tagline */

        .brand-content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }


        /* Tagline */

        .brand-tagline {
            margin-top: 8px;

            font-size: 13px;
            line-height: 15px;
            font-weight: 400;

            color: #555555;

            letter-spacing: -0.3px;

            white-space: nowrap;
        }


        /* Logo image */

        .brand-logo {
            display: block;

            width: 150px;
            height: auto;

            object-fit: contain;
        }


        /* ========================================
           YELLOW DOTS
        ======================================== */

        .brand-dots {
            display: flex;
            align-items: center;

            gap: 10px;

            margin-top: 22px;
        }


        .dot {
            width: 23px;
            height: 23px;

            border-radius: 50%;

            background: #ffd12f;

            flex-shrink: 0;
        }


        /* ========================================
           LARGE YELLOW CIRCLE
        ======================================== */

.yellow-circle {
  position: absolute;
  width: 482px;
  height: 482px;
  right: 0px;
  top: 85px;
  border-radius: 50%;
  background: #ffd536;
  z-index: 1;
}


        /* ========================================
           TEXT INSIDE YELLOW CIRCLE
        ======================================== */

.circle-content {
  position: relative;
    left: 83px;
    top: 77px;
    width: 315px;
    max-width: 315px;
    color: #4e4e4e;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: center;
    overflow-wrap: break-word;
}


        .circle-content p {
            margin: 0 0 21px 0;
        }


        .circle-content p:last-child {
            margin-bottom: 0;
        }


        .circle-content strong {
            font-weight: 700;
        }


        /* ========================================
           BOTTOM SECTION
        ======================================== */

        .bottom {
            position: absolute;

            left: -30px;
            top: 680px;
            bottom: auto;

            width: 100%;

            text-align: center;

            z-index: 10;
        }


        /* Under construction */

        .construction {
            font-size: 16px;

            color: #222222;

            margin-bottom: 20px;

            letter-spacing: 0.1px;
        }


        /* Stay tuned */

        .stay-tuned {
            font-family: "Ephesis", cursive;

            font-size: 36px;

            line-height: 38px;

            font-weight: 400;

            color: #111111;

            letter-spacing: -1px;

            margin-bottom: 60px
        }


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

        @media (max-width: 1024px) {

            body {
                background: #ffffff;
            }


            .page {
                width: 100%;
                min-height: 100vh;

                margin: 0;
            }


            .hero {
                height: 650px;
            }


            .yellow-circle {
                right: 0px;
            }


            .brand {
                left: 5%;
            }

        }


/* ========================================
   MOBILE - 600px AND BELOW
======================================== */

@media (max-width: 600px) {

    body {
        background: #ffffff;
        overflow-x: hidden;
    }

    .page {
        width: 100%;
        min-height: 100vh;
        margin: 0;
        background: #ffffff;
        overflow: hidden;
    }

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

    .hero {
        position: relative;

        width: 100%;

        /*
        Enough height for:
        Logo
        +
        Circle
        +
        Bottom text
        */
        height: 720px;
    }


    /*
    ========================================
    BRAND
    Logo appears FIRST
    ========================================
    */

    .brand {

        position: absolute;

        /*
        Center horizontally
        */
        left: 50%;
        top: 25px;

        transform: translateX(-50%);

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 8px;

        z-index: 10;
    }


    /*
    Logo + tagline
    */

    .brand-content {

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        width: 100%;
    }


    /*
    Tagline
    */

    .brand-tagline {

        order: 1;

        margin-top: 5px;
        margin-bottom: 0;

        font-size: 10px;

        line-height: 13px;

        color: #555555;

        letter-spacing: -0.2px;

        white-space: nowrap;

        text-align: center;
    }


    /*
    Logo
    */

    .brand-logo {

        order: 0;

        display: block;

        width: 145px;

        height: auto;

        max-width: 70vw;

        object-fit: contain;
    }


    /*
    ========================================
    YELLOW DOTS
    ========================================
    */

    .brand-dots {

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 7px;

        margin-top: 7px;
    }


    .dot {

        width: 18px;

        height: 18px;

        border-radius: 50%;

        background: #ffd12f;

        flex-shrink: 0;
    }


    /*
    ========================================
    YELLOW CIRCLE
    FULL CIRCLE ON MOBILE
    ========================================
    */

    .yellow-circle {

        position: absolute;

        /*
        Center the circle
        */

        left: 50%;

        top: 150px;

        right: auto;

        transform: translateX(-50%);

        width: 360px;

        height: 360px;

        max-width: calc(100vw - 30px);

        max-height: calc(100vw - 30px);

        border-radius: 50%;

        background: #ffd536;

        z-index: 1;

        overflow: hidden;
    }


    /*
    ========================================
    TEXT INSIDE CIRCLE
    ========================================
    */

    .circle-content {

        position: absolute;

        /*
        Center the text area
        */

        left: 50%;

        top: 50%;

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

        width: 275px;

        max-width: calc(100% - 70px);

        color: #4e4e4e;

        font-size: 10px;

        line-height: 15px;

        letter-spacing: 0;

        text-align: left;

        overflow: visible;
    }


    .circle-content p {

        margin: 0 0 16px 0;
    }


    .circle-content p:last-child {

        margin-bottom: 0;
    }


    .circle-content strong {

        font-weight: 700;
    }


    /*
    ========================================
    BOTTOM CONTENT
    Appears AFTER circle
    ========================================
    */

    .bottom {

        position: absolute;

        left: 0;

        /*
        Circle:
        top 150px
        height 360px
        ends at 510px

        Bottom starts at 545px
        */

        top: 545px;

        bottom: auto;

        width: 100%;

        padding: 0 20px;

        text-align: center;

        z-index: 10;
    }


    /*
    Under construction
    */

    .construction {

        font-size: 10px;

        line-height: 14px;

        color: #222222;

        margin-bottom: 15px;

        letter-spacing: 0.1px;
    }


    /*
    Stay tuned
    */

    .stay-tuned {

        font-family:
            "Brush Script MT",
            "Segoe Script",
            "Lucida Handwriting",
            cursive;

        font-size: 25px;

        line-height: 32px;

        font-weight: 400;

        color: #111111;

        letter-spacing: -0.7px;

        text-align: center;
    }
}



/* ========================================
   SMALL MOBILE - 400px AND BELOW
======================================== */

@media (max-width: 400px) {

    body {
        background: #ffffff;
    }


    .page {
        width: 100%;

        min-height: 100vh;

        background: #ffffff;

        overflow: hidden;
    }


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

    .hero {

        width: 100%;

        /*
        Logo
        +
        Circle
        +
        Bottom
        */

        height: 680px;
    }


    /*
    ========================================
    BRAND
    ========================================
    */

    .brand {

        left: 50%;

        top: 20px;

        transform: translateX(-50%);

        width: 100%;

        gap: 6px;
    }


    .brand-logo {

        width: 125px;

        max-width: 65vw;
    }


    .brand-tagline {

        font-size: 9px;

        line-height: 12px;

        margin-top: 4px;
    }


    .brand-dots {

        gap: 6px;

        margin-top: 5px;
    }


    .dot {

        width: 16px;

        height: 16px;
    }


    /*
    ========================================
    YELLOW CIRCLE
    ========================================
    */

    .yellow-circle {

        left: 50%;

        top: 135px;

        right: auto;

        transform: translateX(-50%);

        width: 345px;

        height: 345px;

        max-width: calc(100vw - 24px);

        max-height: calc(100vw - 24px);

        border-radius: 50%;

        overflow: hidden;
    }


    /*
    ========================================
    CIRCLE TEXT
    ========================================
    */

    .circle-content {

        left: 50%;

        top: 50%;

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

        width: 265px;

        max-width: calc(100% - 55px);

        font-size: 9px;

        line-height: 14px;

        color: #4e4e4e;

        text-align: left;
    }


    .circle-content p {

        margin-bottom: 13px;
    }


    .circle-content p:last-child {

        margin-bottom: 0;
    }


    /*
    ========================================
    BOTTOM
    ========================================
    */

    .bottom {

        position: absolute;

        left: 0;

        top: 515px;

        bottom: auto;

        width: 100%;

        padding: 0 15px;

        text-align: center;
    }


    .construction {

        font-size: 9px;

        line-height: 13px;

        margin-bottom: 12px;
    }


    .stay-tuned {

        font-size: 22px;

        line-height: 29px;

        letter-spacing: -0.5px;
    }

}