:root{

    --black:#1A1A1C;
    --anthracite:#2A2A2E;

    --white:#F2F1EE;
    --light:#D8D7D4;

    --gold:#C9A15A;

    --transition:300ms ease;

    --container:1600px;
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Manrope',sans-serif;
    background:var(--white);
    color:var(--black);
    line-height:1.6;
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

.site-main{
    overflow:hidden;
}

/* Header */

.site-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:100;
    padding:30px 50px;
    background:rgba(255,255,255,0.4);

    transition:
        padding 300ms ease,
        background 300ms ease,
        backdrop-filter 300ms ease;
}

.site-header__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.site-header__brand img{
    height:60px;
    transition:height 300ms ease;
}

.site-nav__list{
    display:flex;
    gap:40px;
    list-style:none;
}

.site-nav__list a{
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:2px;

    transition:
        font-size 300ms ease,
        color 300ms ease;
}

.site-nav__list a:hover{
    color:var(--gold);
}

.site-header__cta{
    border:1px solid var(--gold);
    padding:14px 28px;
    transition:var(--transition);
}

.site-header__cta:hover{
    background:var(--gold);
    color:var(--black);
}

.site-header__burger{
    display:none;
}

/* Header Scrolled */

.site-header--scrolled{
    padding:15px 50px;
    background:rgba(242,241,238,0.82);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.site-header--scrolled .site-header__brand img{
    height:38px;
}

.site-header--scrolled .site-nav__list a{
    font-size:12px;
}

/* Hero */

.hero{
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:100vh;
    position:relative;
}

.hero__left{
    display:flex;
    align-items:center;
    padding:8vw;
    background:var(--white);
}

.hero__right img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(100%);
}

.hero__content{
    max-width:650px;
}

.hero__eyebrow{
    display:block;
    margin-bottom:30px;
    text-transform:uppercase;
    letter-spacing:4px;
    color:var(--gold);
    font-size:14px;
}

.hero__title{
    font-size:clamp(4rem,7vw,8rem);
    line-height:0.95;
    font-weight:300;
    margin-bottom:40px;
}

.hero__title span{
    color:var(--gold);
}

.hero__text{
    max-width:520px;
    margin-bottom:40px;
    font-size:18px;
}

.hero__actions{
    display:flex;
    gap:20px;
}

.hero__center-logo{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:5;
}

.hero__center-logo img{
    width:180px;
}

/* Buttons */
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 32px;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:2px;
    border:1px solid transparent;
    transition:var(--transition);
}

.button--gold{
    background:var(--black);
    color:var(--gold);
    border-color:var(--black);
}

.button--gold:hover{
    background:transparent;
    color:var(--gold);
}

.button--outline{
    border-color:var(--black);
    color:var(--black);
}

.button--outline:hover{
    border-color:var(--gold);
    color:var(--gold);
}

/* Service Tiles */

.service-tiles{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    background:var(--black);
}

.service-tile{
    aspect-ratio:1 / 1;
    padding:40px;
    border-right:1px solid rgba(242,241,238,0.12);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:var(--black);
    color:var(--white);
    transition:var(--transition);
}

.service-tile:last-child{
    border-right:none;
}

.service-tile:hover{
    background:var(--gold);
    color:var(--black);
}

.service-tile__number{
    font-size:13px;
    letter-spacing:3px;
    opacity:0.6;
}

.service-tile h2{
    font-size:clamp(1.4rem,2vw,2.2rem);
    line-height:1.1;
    font-weight:300;
}

/* Split Section */
.split-section{
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:80vh;
}

.split-section--reverse .split-section__image{
    order:2;
}

.split-section--reverse .split-section__content{
    order:1;
}

.split-section__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(100%);
}

.split-section__content{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:8vw;
    background:var(--white);
}

.split-section:nth-of-type(even) .split-section__content{
    background:var(--light);
}

.split-section__eyebrow{
    display:block;
    margin-bottom:24px;
    color:var(--gold);
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:13px;
}

.split-section__title{
    font-size:clamp(3rem,4.5vw,6rem);
    line-height:0.95;
    font-weight:300;
    margin-bottom:32px;
    max-width:720px;
}

.split-section__text{
    max-width:560px;
    margin-bottom:40px;
    font-size:18px;
}

/* Footr */

.site-footer__bottom{
    display:flex;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
}

.site-footer__credit a{
    color:var(--gold);
}

.site-footer__credit a:hover{
    color:var(--white);
}

.site-footer{
    background:var(--black);
    color:var(--white);
    padding:90px 50px 30px;
}

.site-footer__inner{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:60px;
    max-width:var(--container);
    margin:0 auto;
}

.site-footer__brand img{
    max-width:180px;
    margin-bottom:30px;
}

.site-footer h3{
    color:var(--gold);
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:3px;
    margin-bottom:20px;
}

.site-footer p,
.site-footer a{
    font-size:15px;
    color:rgba(242,241,238,0.75);
}

.site-footer a:hover{
    color:var(--gold);
}

.site-footer__menu{
    list-style:none;
}

.site-footer__menu li{
    margin-bottom:8px;
}

.site-footer__bottom{
    max-width:var(--container);
    margin:60px auto 0;
    padding-top:30px;
    border-top:1px solid rgba(242,241,238,0.12);
    font-size:13px;
    color:rgba(242,241,238,0.5);
}

/* Responsive */

@media(max-width:1100px){

    .site-header__cta{
        display:none;
    }

    .site-header__burger{
        display:flex;
        flex-direction:column;
        gap:6px;
        background:none;
        border:none;
        cursor:pointer;
    }

    .site-header__burger span{
        width:32px;
        height:2px;
        background:var(--black);
        display:block;
    }

    .hero,
    .split-section{
        grid-template-columns:1fr;
    }

    .hero__center-logo{
        display:none;
    }

    .hero__left{
        min-height:70vh;
        padding:140px 8vw 80px;
    }

    .hero__right{
        height:70vh;
    }

    .split-section--reverse .split-section__image,
    .split-section--reverse .split-section__content{
        order:initial;
    }

    .split-section__image{
        min-height:60vh;
    }

    .service-tiles{
        grid-template-columns:repeat(2,1fr);
    }

    .site-footer__inner{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:640px){

    .site-header{
        padding:20px 24px;
    }
    .site-header--scrolled{
        padding:20px 24px;
    }

    .site-header__brand img{
        height:48px;
    }

    .hero__title{
        font-size:3.4rem;
    }

    .hero__actions{
        flex-direction:column;
        align-items:flex-start;
    }

    .service-tiles{
        grid-template-columns:1fr;
    }

    .service-tile{
        aspect-ratio:auto;
        min-height:220px;
    }

    .split-section__content{
        padding:80px 24px;
    }

    .split-section__title{
        font-size:3rem;
    }

    .site-footer{
        padding:70px 24px 30px;
    }

    .site-footer__inner{
        grid-template-columns:1fr;
    }

    .page-hero__title{
        font-size:clamp(3.1rem, 13vw, 4.6rem);
        line-height:1.02;
        hyphens:none;
    }

    .page-content h2{
        font-size:clamp(2.4rem, 10vw, 3.4rem);
        line-height:1.08;
        hyphens:none;
    }

    .page-content h3{
        font-size:clamp(1.7rem, 7vw, 2.4rem);
        line-height:1.12;
        hyphens:none;
    }
}

/* Nav */

@media(max-width:1100px){

    .site-nav{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100vh;
        min-height:100dvh;
        background:var(--black);
        display:flex;
        align-items:center;
        justify-content:center;
        overflow-y:auto;
        padding:120px 40px 60px;
        opacity:0;
        pointer-events:none;
        transition:var(--transition);
        z-index:90;
    }

    .nav-open .site-nav{
        opacity:1;
        pointer-events:auto;
    }

    .site-nav__list{
        flex-direction:column;
        text-align:center;
        gap:28px;
        width:100%;
    }

    .site-nav__list a{
        color:var(--white);
        font-size:28px;
        letter-spacing:3px;
    }
    .site-header--scrolled .site-nav__list a{
        font-size:28px;
    }

    .nav-open .site-header__burger span{
        background:var(--white);
    }

    .nav-open .site-header__brand{
        position:relative;
        z-index:110;
    }

    .site-header__burger{
        position:relative;
        z-index:110;
    }
}

/* Page */
.page-hero{
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:80vh;
    background:var(--white);
}

.page-hero__content{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:8vw;
}

.page-hero__eyebrow{
    display:block;
    margin-bottom:24px;
    color:var(--gold);
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:13px;
}

.page-hero__title{
    font-size:clamp(3rem,7vw,8rem);
    line-height:0.95;
    font-weight:300;
    margin-bottom:32px;
}

.page-hero__text{
    max-width:560px;
    font-size:18px;
}

.page-hero__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(100%);
}

.page-content{
    background:var(--white);
    padding:100px 8vw;
}

.page-content__inner{
    max-width:1100px;
    margin:0 auto;
}

.page-content h2{
    font-size:clamp(3rem,5vw,5rem);
    line-height:1;
    font-weight:300;
    margin:80px 0 32px;
}

.page-content h2:first-child{
    margin-top:0;
}

.page-content h3{
    font-size:clamp(2rem,3vw,3rem);
    line-height:1.1;
    font-weight:300;
    margin:60px 0 24px;
}

.page-content p{
    max-width:760px;
    font-size:18px;
    margin-bottom:24px;
}

.page-content ul{
    margin:32px 0;
    padding-left:20px;
    max-width:760px;
}

.page-content li{
    margin-bottom:12px;
    font-size:17px;
}

@media(max-width:1100px){

    .page-hero{
        grid-template-columns:1fr;
    }

    .page-hero__content{
        padding:140px 8vw 80px;
    }

    .page-hero__image{
        min-height:60vh;
    }
}

@media(max-width:640px){

    .site-header{
        padding:20px 24px;
    }
    .site-header--scrolled{
        padding:20px 24px;
    }

    .site-header__brand img{
        height:48px;
    }

    .hero__title{
        font-size:3.4rem;
    }

    .hero__actions{
        flex-direction:column;
        align-items:flex-start;
    }

    .service-tiles{
        grid-template-columns:1fr;
    }

    .service-tile{
        aspect-ratio:auto;
        min-height:220px;
    }

    .split-section__content{
        padding:80px 24px;
    }

    .split-section__title{
        font-size:3rem;
    }

    .site-footer{
        padding:70px 24px 30px;
    }

    .site-footer__inner{
        grid-template-columns:1fr;
    }
}

/* Kontakt */
.contact-hero{
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:80vh;
    background:var(--white);
}

.contact-hero__content{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:8vw;
}

.contact-hero__eyebrow,
.contact-section__eyebrow{
    display:block;
    margin-bottom:24px;
    color:var(--gold);
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:13px;
}

.contact-hero__title{
    font-size:clamp(4rem,7vw,8rem);
    line-height:0.95;
    font-weight:300;
    margin-bottom:32px;
}

.contact-hero__text{
    max-width:560px;
    font-size:18px;
    margin-bottom:40px;
}

.contact-hero__actions{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.contact-hero__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(100%);
}

.contact-section{
    display:grid;
    grid-template-columns:1fr 1fr;
    background:var(--white);
}

.contact-section__info,
.contact-section__form{
    padding:8vw;
}

.contact-section__info{
    background:var(--light);
}

.contact-section__form{
    background:var(--white);
}

.contact-section h2{
    font-size:clamp(3rem,5vw,5rem);
    line-height:1;
    font-weight:300;
    margin-bottom:32px;
}

.contact-section p{
    max-width:620px;
    font-size:17px;
    margin-bottom:32px;
}

.contact-cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-top:50px;
}

.contact-card{
    border:1px solid rgba(26,26,28,0.15);
    padding:30px;
    background:rgba(242,241,238,0.65);
}

.contact-card h3{
    color:var(--gold);
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:3px;
    margin-bottom:16px;
}

.contact-card a{
    color:var(--black);
}

.contact-card a:hover{
    color:var(--gold);
}

.contact-section__form form{
    margin-top:40px;
}

.contact-section__form input,
.contact-section__form textarea,
.contact-section__form select{
    width:100%;
    border:1px solid rgba(26,26,28,0.2);
    background:transparent;
    padding:16px;
    margin-bottom:18px;
    font:inherit;
    color:var(--black);
}

.contact-section__form textarea{
    min-height:160px;
    resize:vertical;
}

.contact-section__form input:focus,
.contact-section__form textarea:focus,
.contact-section__form select:focus{
    outline:none;
    border-color:var(--gold);
}

.contact-section__form input[type="submit"],
.contact-section__form button{
    width:auto;
    background:var(--black);
    color:var(--white);
    border-color:var(--black);
    padding:16px 32px;
    text-transform:uppercase;
    letter-spacing:2px;
    cursor:pointer;
    transition:var(--transition);
}

.contact-section__form input[type="submit"]:hover,
.contact-section__form button:hover{
    background:var(--gold);
    border-color:var(--gold);
    color:var(--black);
}

.contact-map{
    filter:grayscale(100%);
}

@media(max-width:1100px){

    .contact-hero,
    .contact-section{
        grid-template-columns:1fr;
    }

    .contact-hero__content{
        padding:140px 8vw 80px;
    }

    .contact-hero__image{
        min-height:60vh;
    }
}

@media(max-width:640px){

    .contact-hero__title{
        font-size:3.4rem;
    }

    .contact-section__info,
    .contact-section__form{
        padding:80px 24px;
    }

    .contact-cards{
        grid-template-columns:1fr;
    }
}