:root{

    --black:#111111;
    --gold:#c18a18;
    --gold-dark:#966708;
    --cream:#f5f1e9;
    --soft:#faf9f6;
    --line:#e8e1d5;
    --gray:#666;

}


*{
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{

    margin:0;

    background:#fff;

    color:var(--black);

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

}



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

.header{

    height:112px;

    padding:0 5vw;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-bottom:1px solid var(--line);

    background:white;

}


.logo{

    display:flex;

    align-items:center;

    gap:16px;

}


.logo-ia{

    font-size:50px;

    line-height:.8;

    font-weight:900;

    letter-spacing:-5px;

}


.logo-copy strong{

    display:block;

    font-size:14px;

    letter-spacing:7px;

}


.logo-copy span{

    display:block;

    margin-top:7px;

    font-family:Georgia,serif;

    font-size:12px;

    color:#555;

}


.header-right{

    display:flex;

    align-items:center;

    gap:28px;

}


.language{

    font-family:Georgia,serif;

    font-size:12px;

}


.coming-mini{

    padding:10px 18px;

    border:1px solid var(--gold);

    font-size:10px;

    letter-spacing:2px;

    color:var(--gold-dark);

}



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

.hero{

    min-height:700px;

    display:grid;

    grid-template-columns:
        54% 46%;

}


.hero-copy{

    padding:
        100px 7vw
        80px 6vw;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


.hero-kicker{

    max-width:480px;

    display:flex;

    align-items:center;

    gap:14px;

    color:var(--gold-dark);

    font-size:11px;

    font-weight:800;

    letter-spacing:2.3px;

    line-height:1.5;

}


.hero-kicker span{

    width:55px;

    height:2px;

    background:var(--gold);

    flex:none;

}


h1{

    margin:
        25px 0 0;

    max-width:750px;

    font-family:
        Georgia,
        'Times New Roman',
        serif;

    font-size:
        clamp(
            60px,
            6vw,
            96px
        );

    line-height:.9;

    letter-spacing:-4px;

    font-weight:700;

}


h1 em{

    display:block;

    color:var(--gold);

    font-style:normal;

}


.hero h2{

    margin:
        40px 0 0;

    font-size:22px;

    line-height:1.35;

}


.hero p{

    max-width:570px;

    margin:
        27px 0 0;

    color:#555;

    font-size:17px;

    line-height:1.75;

}


.launch-box{

    margin-top:48px;

    display:flex;

    align-items:center;

    gap:17px;

}


.launch-line{

    width:70px;

    height:3px;

    background:var(--gold);

}


.launch-box small{

    display:block;

    color:#888;

    font-size:9px;

    letter-spacing:2.5px;

}


.launch-box strong{

    display:block;

    margin-top:5px;

    font-family:Georgia,serif;

    font-size:19px;

}



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

.hero-art{

    min-height:700px;

    position:relative;

    overflow:hidden;

    background:

        linear-gradient(
            145deg,
            #f7f4ee 0%,
            #ede7dc 60%,
            #f7f5f1 100%
        );

}


.hero-art:before{

    content:"";

    position:absolute;

    width:620px;

    height:620px;

    top:-290px;

    right:-270px;

    border:

        1px solid
        rgba(193,138,24,.35);

    border-radius:50%;

}


.hero-art:after{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    left:-300px;

    bottom:-320px;

    border:

        1px solid
        rgba(0,0,0,.10);

    border-radius:50%;

}


.art-number{

    position:absolute;

    top:45px;

    right:48px;

    font-family:Georgia,serif;

    color:rgba(0,0,0,.18);

    font-size:70px;

}


.gold-circle{

    position:absolute;

    width:330px;

    height:330px;

    border-radius:50%;

    border:

        1px solid
        rgba(193,138,24,.45);

    left:50%;

    top:50%;

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

}


.architectural-card{

    width:380px;

    height:470px;

    position:absolute;

    left:50%;

    top:50%;

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

    background:

        rgba(
            255,
            255,
            255,
            .72
        );

    backdrop-filter:
        blur(7px);

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .9
        );

    box-shadow:
        0 35px 70px
        rgba(0,0,0,.08);

}


.mini-title{

    padding:
        28px 30px;

    font-size:9px;

    letter-spacing:4px;

    border-bottom:
        1px solid var(--line);

}


.house{

    width:280px;

    height:280px;

    position:absolute;

    top:105px;

    left:50%;

    transform:
        translateX(-50%);

}


.roof{

    position:absolute;

    height:2px;

    background:#111;

    top:50px;

    transform-origin:left center;

}


.roof-left{

    width:170px;

    left:4px;

    transform:
        rotate(-35deg);

}


.roof-right{

    width:170px;

    left:138px;

    transform:
        rotate(35deg);

}


.wall{

    position:absolute;

    width:2px;

    height:135px;

    background:#111;

    top:146px;

}


.wall-left{
    left:45px;
}


.wall-right{
    right:45px;
}


.house:after{

    content:"";

    position:absolute;

    height:2px;

    background:#111;

    width:190px;

    left:45px;

    bottom:-1px;

}


.door{

    position:absolute;

    width:55px;

    height:105px;

    bottom:0;

    left:112px;

    border:
        2px solid var(--gold);

    border-bottom:0;

}


.window{

    position:absolute;

    width:45px;

    height:45px;

    border:
        2px solid #111;

    bottom:64px;

}


.w1{
    left:58px;
}


.w2{
    right:58px;
}


.window:before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    bottom:0;

    border-left:
        1px solid #111;

}


.window:after{

    content:"";

    position:absolute;

    top:50%;

    left:0;

    right:0;

    border-top:
        1px solid #111;

}


.card-footer{

    position:absolute;

    left:30px;

    right:30px;

    bottom:25px;

    display:flex;

    justify-content:
        space-between;

    font-size:8px;

    letter-spacing:2px;

    color:#777;

}


.vertical-text{

    position:absolute;

    right:20px;

    bottom:80px;

    writing-mode:
        vertical-rl;

    font-size:8px;

    letter-spacing:3px;

    color:#777;

}



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

.manifesto{

    min-height:360px;

    padding:
        80px 7vw;

    display:grid;

    grid-template-columns:
        1fr 1fr;

    align-items:center;

    border-top:
        1px solid var(--line);

}


.manifesto-title span{

    color:var(--gold-dark);

    letter-spacing:2px;

    font-size:10px;

}


.manifesto-title h3{

    max-width:520px;

    margin:15px 0 0;

    font-family:Georgia,serif;

    font-size:48px;

    line-height:1.05;

}


.manifesto-text{

    max-width:520px;

    padding-left:60px;

    border-left:
        1px solid var(--gold);

    color:#555;

    font-family:Georgia,serif;

    font-size:22px;

    line-height:1.6;

}



/* ========================= */
/* PILLARS                   */
/* ========================= */

.pillars{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    border-top:
        1px solid var(--line);

    border-bottom:
        1px solid var(--line);

}


.pillars article{

    min-height:330px;

    padding:
        55px 5vw;

    position:relative;

    border-right:
        1px solid var(--line);

}


.pillars article:last-child{

    border-right:0;

}


.pillar-number{

    position:absolute;

    right:30px;

    top:30px;

    color:#bbb;

    font-family:Georgia,serif;

}


.pillar-icon{

    color:var(--gold);

    font-size:28px;

}


.pillars h4{

    margin:
        35px 0 15px;

    font-family:Georgia,serif;

    font-size:29px;

}


.pillars p{

    max-width:330px;

    color:#666;

    line-height:1.65;

    font-size:14px;

}



/* ========================= */
/* CLOSING                   */
/* ========================= */

.closing{

    padding:
        120px 7vw;

    text-align:center;

    background:
        var(--black);

    color:white;

}


.closing-small{

    color:var(--gold);

    font-size:10px;

    letter-spacing:4px;

}


.closing h3{

    max-width:850px;

    margin:
        20px auto;

    font-family:Georgia,serif;

    font-size:
        clamp(
            42px,
            5vw,
            72px
        );

    line-height:1;

}


.closing p{

    color:#aaa;

    font-size:16px;

}



/* ========================= */
/* FOOTER                    */
/* ========================= */

footer{

    min-height:100px;

    padding:
        30px 5vw;

    display:flex;

    justify-content:
        space-between;

    align-items:center;

    color:#777;

    font-size:10px;

}


.footer-center{

    color:var(--gold-dark);

    letter-spacing:1px;

}



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

@media(max-width:950px){

    .hero{

        grid-template-columns:1fr;

    }

    .hero-art{

        min-height:560px;

    }

    .manifesto{

        grid-template-columns:1fr;

        gap:45px;

    }

    .manifesto-text{

        padding-left:0;

        border-left:0;

    }

}


@media(max-width:720px){

    .header{

        height:90px;

    }

    .coming-mini{

        display:none;

    }

    .logo-ia{

        font-size:40px;

    }

    .logo-copy strong{

        letter-spacing:4px;

        font-size:11px;

    }

    .hero-copy{

        padding:
            70px 7vw;

    }

    h1{

        letter-spacing:-2px;

    }

    .architectural-card{

        width:310px;

    }

    .pillars{

        grid-template-columns:1fr;

    }

    .pillars article{

        border-right:0;

        border-bottom:
            1px solid var(--line);

    }

    footer{

        flex-direction:column;

        gap:12px;

    }

}