header{
    height: var(--headerHeight);
    padding: 0 var(--gutterSpacing);

    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
    background-color: var(--color-header);

    -webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.7); 
    box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.7);

    display: flex;
    justify-content: space-between;
}

header ul{
    display: grid;
    grid-auto-flow: column;
    gap: var(--lineSpacing);
    align-items: center;
    height: 100%;
}
header li{
    width: fit-content;
}

header .logoWrapper{
    height: 100%;
    display: flex;
    padding: calc((10 /16 * 1rem) + ((15 - 10) * ((100vw - 320px) / (1920 - 320)))) 0;
}

header .logoWrapper img{
    display: block;
    height: 100%;
}

.nav-toggle-label, .nav-toggle{
    display: none;
}

@media screen and (max-width:1125px){
    header .logoWrapper{
        display: none;
    }

    header {
        justify-content: center;
    }
}

@media screen and (max-width:935px){
    header .logoWrapper{
        display: block;
    }
    
    header{
        justify-content: space-between;
    }

    header nav{
        position: absolute;
        top: var(--headerHeight);
        left: 0;
        right: 0;
        background-color: var(--color-header);

        padding: var(--gutterSpacing);

        transform: scale(1,0);

        transform-origin: top;
        transition: 0.2s ease;

        -webkit-box-shadow: 0px 7px 6px -4px rgba(0,0,0,0.42); 
        box-shadow: 0px 7px 6px -4px rgba(0,0,0,0.42);
    }

    header ul{
        grid-auto-flow: row;
        align-items: center;
        justify-items: end;
    }

    header .nav-toggle-label{
        display: flex;
        justify-content: space-between;
        flex-direction: column;

        --barThickness: calc(var(--headerHeight) * 0.1);

        width: calc(var(--barThickness) * 7);
        height: calc(var(--barThickness) * 5);
        align-self: center;
    }

    header .nav-toggle-label span{
        background-color: var(--color-dark1);

        width: 100%;
        height: var(--barThickness);
    }


    header .nav-toggle:checked ~ nav{
        transform: scale(1,1);
    }
      
}



.subHero{
    display: flex;
    padding: 0;
    padding-top: var(--headerHeight);
    padding-bottom: calc(var(--sectionSpacing)/2);
    height: min-content;
}
.subHero .container{
    padding: calc(var(--lineSpacing) * 4) var(--gutterSpacing);
    border-right: 10px solid transparent;
    border-image: linear-gradient(
        to bottom,
        var(--color-gold3),
        var(--color-gold1),
        var(--color-gold2)
    ) 1;
    width: fit-content;
}
.subHero > .container * {
    width: fit-content;
}
.subHero .imgWrapper{
    flex: 1;
    position: relative;
    width: 100%;

    background-color: rgb(59, 59, 59);
}
.subHero img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}

@media screen and (max-width:530px){
    .subHero{
        flex-direction: column;
    }
    .subHero .container{
        width: 100%;
        border-right: 0;
        border-bottom: 10px solid transparent;
        border-image: linear-gradient(
            to right,
            var(--color-gold3),
            var(--color-gold1),
            var(--color-gold2)
        ) 1;
    }
    .subHero h1{
        text-align: center;
        margin: auto;
    }

    .subHero img{
        display: none;
    }
}


.subsubHero{
    padding:0;
    padding-top: var(--headerHeight);
}
.subsubHero .container{
    padding: var(--lineSpacing) var(--gutterSpacing);
    position: relative;
}
.subsubHero .container::before{
    content: '';
    background-color: var(--color-gold2);
    width: calc(var(--gutterSpacing) * 0.15);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}


.hero{
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: calc(var(--lineSpacing) * 1.2);

    margin-top: var(--headerHeight);
    padding-top: calc(var(--lineSpacing) * 2);
    background-color: var(--color-background);
}

.hero .container > *:not(:last-child){
    margin-bottom: var(--lineSpacing);
}
.hero .imgWrapper{
    position: relative;
    height: max-content;
}
.hero .imgWrapper img{
    width: 100%;
    aspect-ratio: 1.2;
    height: 100%;
    object-fit: cover;
}

.hero .infoCard{
    position: absolute;
    background-color: var(--color-dark2);

    right: -15%;
    bottom: -5%;
    
    padding: var(--lineSpacing);


    display: grid;
    gap: calc(var(--lineSpacing)* 1.8);

}

.hero .infoCard .separator{
    width: 100%;
    background-color: var(--color-light2);
    height: 2px;
}

@media screen and (max-width:1350px){
    .hero .imgWrapper{
        height: 100%;
    }
}

@media screen and (max-width:900px){
    .hero{
        grid-template-columns: 1fr;
    }
    

    .hero .infoCard{
        display: flex;
        right:  -20px;
        left: -20px;
        top: -15px;
        bottom: unset;

        padding: calc(var(--lineSpacing)*0.7);

        gap: 0;
        justify-content: space-between;
    }

    .hero .infoCard .separator{
        display: none;
    }
}





.contactForm{
    display: grid;
    gap: var(--lineSpacing);
    grid-template-columns: 1fr auto 1fr;
    padding: calc(var(--lineSpacing) * 1.4) calc(var(--lineSpacing) * 2.5);
    margin: 0 var(--gutterSpacing);
    position: relative;
    z-index: 10;
}
.contactForm .separator{
    height: 100%;
    background-image: linear-gradient(
        to bottom,
        var(--color-gold3),
        var(--color-gold1),
        var(--color-gold2)
    );
    width: 3px;
}
.contactForm form > *:not(:last-child){
    margin-bottom: calc(var(--lineSpacing) * 1.2);
}
.contactForm .inpCard > *:first-child{
    margin-bottom: 0.5em;
    display: block;
}
.contactForm .inpCard input, .contactForm .inpCard textarea{
    width: 100%;
    background-color: white;
    padding: 0.3em;
}
.contactForm .inpCard textarea{
    height: calc(var(--headerHeight));
    resize: vertical;
}

.contactForm .contactInfo .top{
    margin-bottom: calc(var(--lineSpacing) * 2);
}

.contactForm .contactInfo .contactCard:not(:last-child){
    margin-bottom: var(--lineSpacing);
}

.contactForm .contactInfo .contactCard{
    display: flex;
    align-items: center;
    flex-direction: row;
}
.contactForm .contactInfo .contactCard .info{
    flex: 1;
}

.contactForm .contactInfo .contactCard img{
    width: 40px;
    aspect-ratio: 1;
    margin-right: var(--lineSpacing);
}

@media screen and (max-width:1050px){
    
    .contactForm{
        padding: calc(var(--sectionSpacing) /2) var(--gutterSpacing);
        margin: 0;
        margin-top: calc(-1 * var(--sectionSpacing) /2);
    }
}

@media screen and (max-width:860px){
    .contactForm{
        grid-template-columns: 1fr;
        gap: calc(var(--sectionSpacing) * 0.4);
    }

    .contactForm .separator{
        height: 2px;
        width: 100%;
        background-image: linear-gradient(
            to right,
            var(--color-gold3),
            var(--color-gold1),
            var(--color-gold2)
        );
    }
}

.map{
    padding: 0;
    z-index: -10;
}

.mapElem{
    width: 100%;
    height: calc(var(--headerHeight) * 7);
}





.--layout-4{
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: calc(var(--lineSpacing) * 2);

    align-items: center;
}

.--layout-4 .container > *:not(:last-child){
    margin-bottom: 0.6em;
}

.--layout-4 .container{
    height: fit-content;
    grid-column: span 5;
}

.--layout-4 .imgWrapper{
    height: 0;
    padding-bottom: 80%;
    position: relative;
    grid-column: span 3;
}

.--layout-4 img{
    position: absolute;

    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

@media screen and (max-width:1200px){
    .--layout-4 .imgWrapper{
        height: 100%;
        padding: 0;
    }
}

@media screen and (max-width:600px){
    .--layout-4 {
        grid-template-columns: 1fr;
    }
    .--layout-4 .container{
        grid-column: auto;
    }
    .--layout-4 .imgWrapper{
        height: 100%;
        width: 100%;
        padding: 0;
        grid-column: auto;
    }
    .--layout-4 img{
        position: static;

    }
}



.--layout-1 > *:first-child{
    margin: auto;
    width: fit-content;
}
.--layout-1 > *:not(:last-child){
    margin-bottom: calc(var(--lineSpacing) * 5);
}

.--layout-1 > h2{
    text-align: center;
}
.--layout-1 > a, .--layout-1 > button{
    width: fit-content;
    margin: auto;
    margin-top: calc(var(--headerHeight) * 0.9);
}


.--layout-2{
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--lineSpacing) * 0.9);
}

.--layout-2 > *:first-child{
    flex: 1.6;
    flex-basis: 300px;
}

.--layout-2 > *:last-child{
    flex: 1;
    flex-basis: 300px;
}




.--layout-3{
    display: grid;
    grid-template-columns: 1fr 1fr;
    
    gap: calc(var(--lineSpacing) * 2.4);
}

@media screen and (max-width:1000px){
    .--layout-3{
        grid-template-columns: 1fr;
    }
}



.--layout-5{
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: calc(var(--gutterSpacing) * 0.4);
}
.--layout-5 .container{
    grid-column: span 5;
}
.--layout-5 .container> *:not(:last-child){
    margin-bottom: calc(var(--lineSpacing) * 2);
}

.--layout-5 .imgWrapper{
    height: 0;
    padding-bottom: 120%;
    position: relative;
    grid-column: span 4;
}
.--layout-5 .imgWrapper img{
    position: absolute;
    object-fit: cover;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

@media screen and (max-width:1000px){
    .--layout-5 .imgWrapper{
        height: 100%;
    }
    .--layout-5 .imgWrapper img{
        height: 100%;
        padding: 0;
    }
}

@media screen and (max-width:600px){
    .--layout-5{
        grid-template-columns: 1fr;
        gap: calc(var(--lineSpacing) *2);
    }

    .--layout-5 .imgWrapper{
        height: auto;
        width: 100%;
        padding: 0;

        grid-column: auto;
    }


    .--layout-5 .container{
        grid-column: auto;
    }
    .--layout-5 .imgWrapper img{
        position: static;
    }
}



.--layout-6{
    display: flex;
    gap: var(--lineSpacing);
    flex-wrap: wrap;
}
.--layout-6 > *{
    flex: 1;
    flex-basis: 0;
}



.--layout-7{
    padding: 0 calc(var(--gutterSpacing) * 0.2);
}




.--layout-CTA{
    padding-right: calc((20 /16 * 1rem) + ((490 - 20) * ((100vw - 320px) / (1920 - 320))));
    padding-left: calc((20 /16 * 1rem) + ((490 - 20) * ((100vw - 320px) / (1920 - 320))));

    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("/assets/modern_house.jpg");
    background-position: center;
    background-size: cover;
}

.--layout-CTA > *{
    text-align: center;
    margin: auto;
    width: fit-content;
}
.--layout-CTA > *:not(:last-child){
    margin-bottom: calc(var(--lineSpacing) * 2);
    --color-dark1: var(--color-background);
}



.--layout-gallery1{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: var(--lineSpacing);
}

.--layout-gallery1 img{
    width: 100%;
    aspect-ratio: 1.33; /* REMOVE*/
    height: 100%;
    object-fit: cover;
}

.--layout-gallery1 .img1{
    grid-column: span 4;
    grid-row: span 2;
}

.--layout-gallery1 .img2,
.--layout-gallery1 .img3{
    grid-column: span 2;
}

.--layout-gallery1 .img4,
.--layout-gallery1 .img5{
    grid-column: span 3;
}
@media screen and (max-width: 650px){
    .--layout-gallery1{
        display: block;
    }
    .--layout-gallery1 img{
        margin-bottom: var(--lineSpacing);
    }
}



.--layout-centerP{
    text-align: center;
    font-weight: 900;
}
.--layout-centerP p{
    font-weight: 900;
}
.--layout-centerP > *{
    margin: auto;
    width: calc((280 /16 * 1rem) + ((1200 - 280) * ((100vw - 320px) / (1920 - 320))));
}


.--layout-doubleP{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lineSpacing);
}

@media screen and (max-width:575px){
    .--layout-doubleP{
        grid-template-columns: 1fr;
    }
}

.--layout-tripleP{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--lineSpacing);
}
.--layout-tripleP .--layout-informational li{
    list-style-position: inside;
}

@media screen and (max-width:1300px){
    .--layout-tripleP{
        grid-template-columns: 1fr;
    }
}


.--layout-other{
    padding: 0;
}


.--layout-sideInformational{
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: calc(var(--lineSpacing) * 2);
}

@media screen and (max-width:800px){
    .--layout-sideInformational{
        grid-template-columns: 1fr;
    }
}
.--layout-sideInformational img {
    width: 100%;
}

.--layout-sideInformational img:not(:last-child){
    margin-bottom: var(--lineSpacing);
}

.--layout-sideInformational .imgWrapper{
    width: auto;
}



.--layout-informational *{
    margin-bottom: 0.5em;
}
.--layout-informational li{
    list-style: disc;
}
.--layout-informational h2{
    margin-top: 1.2em;
    color: var(--color-dark1);
    font-size: calc((26 /16 * 1rem) + ((34 - 26) * ((100vw - 320px) / (1920 - 320))));
    font-weight: 600;

}


.--layout-2BlockSplit{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--lineSpacing) *5 );
}
.--layout-2BlockSplit .container{
    padding: calc(var(--lineSpacing) *2);

    border: 10px solid transparent;
    border-top: none;
    border-left: none;
    border-image: linear-gradient(
        135deg,
        var(--color-gold3),
        var(--color-gold1),
        var(--color-gold2)
    ) 1;
}
.--layout-2BlockSplit .container > *:not(:last-child){
    margin-bottom: 0.5em;
}
.--layout-2BlockSplit h2{
    font-size: calc((30 /16 * 1rem) + ((50 - 30) * ((100vw - 320px) / (1920 - 320))));
    font-weight: 500;
}

@media screen and (max-width:1100px){
    .--layout-2BlockSplit{
        grid-template-columns: 1fr;
        gap: calc(var(--lineSpacing) *3 );
    }
    .--layout-2BlockSplit .container{
        padding: calc(var(--lineSpacing) *1);
    }
}




.--btn-card1{
    width:auto ;
    position: relative;
}

.--btn-card1::after{
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-gold2);
    height: 7px;
    z-index: 100;
    transition-duration: 0.2s;
}
.--btn-card1:hover::after{
    height: 100%;
}
.--card-1{
    display: flex;
    background-color: var(--color-light1);
    padding: calc(var(--lineSpacing) * 0.6);

    position: relative;

    height: 100%;

}

.--card-1 .container> *:not(:last-child){
    margin-bottom: 0.8em;
}

.--card-1 .container > *:last-child{
    margin-top: auto;
}
.--card-1 .container{
    width: 80%;
}

.--card-1 img{
    position: absolute;
    right: calc(var(--lineSpacing) * 0.6);
    top: calc(var(--lineSpacing) * 0.6);
    width: 12%;
}




.--card-2{
    background-color: var(--color-light1);
    --padding: calc(var(--lineSpacing)* 1.2);
    padding: var(--padding);

    width: calc((280 /16 * 1rem) + ((400 - 280) * ((100vw - 320px) / (1920 - 320))));


    flex: 1 1 auto; /* Grow and shrink equally, basis auto */
}

.--card-2 .container{
    display: flex;
    justify-content: space-between;
}
.--card-2 .container img{
    margin-top: calc(-1 *calc((60 /16 * 1rem) + ((70 - 60) * ((100vw - 320px) / (1920 - 320)))));
    width: calc((70 /16 * 1rem) + ((160 - 70) * ((100vw - 320px) / (1920 - 320))));
}
.--card-2 .separator{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.--card-2 > *:not(:last-child){
    margin-bottom: var(--lineSpacing);
}
.--card-2 .separator::before, .--card-2 .separator::after{
    background-color: var(--color-gold2);
    position: absolute;
    height: 2px;
    content: '';
    width: 40%;
}
.--card-2 .separator::before{
    left: calc(-1 * var(--padding));
}
.--card-2 .separator::after{
    right: calc(-1 * var(--padding));
}
.--card-2 .separator img{
    width: 15%;

}



.--card-3{
    text-align: center;
}



.--band-1{
    padding: 0;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--gutterSpacing);
}
.--band-1 .container{
    padding: var(--lineSpacing) 0;
    padding-left: var(--gutterSpacing);
    display: flex;
    flex-direction: column;
}

.--band-1 .container > *:not(:last-child){
    margin-bottom: 1em;
}

.--band-1 .imgWrapper{ 
    padding: var(--lineSpacing) var(--gutterSpacing);
    padding-left: calc(var(--gutterSpacing)* 0.4);

    display: flex;
    align-items: center;
}

.--band-1 .imgWrapper{
    background-image: url("/assets/BBB\ Flare.svg");
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
}

.--band-1 img{
    width: 100%;
}

.--band-1 .container > *:last-child{
    margin-top: auto;
}

@media screen and (max-width:600px){
    .--band-1 {
        grid-template-columns: 1fr;
    }
    .--band-1 .container{
        padding: calc(var(--lineSpacing)) var(--gutterSpacing);
    }
    .--band-1 .imgWrapper{
        justify-content: center;
        background-position: right;

        padding: 0;
        padding-bottom: var(--lineSpacing);
    }
    .--band-1 .imgWrapper img{
        width: 50%;
    }
}


.--band-2{
    background-color: var(--color-dark3);
    display: grid;
    grid-auto-flow: column;
    padding: calc(var(--lineSpacing) * 0.5) var(--gutterSpacing);
    justify-content: end;
    gap: calc(var(--gutterSpacing) * 0.4);

    clip-path: polygon(0 80%, 30% 0,100% 0,100% 100%,0 100%);
    margin-bottom: -4px;

    z-index: 20;
    position: relative;
}

@media screen and (max-width:650px){
    .--band-2{
        gap: 0;
        clip-path: none;

        justify-content: space-between;
    }
}





.--layout-singleImage .imgWrapper{
    margin: auto;
    width: 80%;
}
.--layout-singleImage img{
    width: 100%;
    transition: 0.15s ease;
}
@media screen and (max-width:780px){
    .--layout-singleImage .imgWrapper{
        width: 100%;
    }
}
.--layout-singleImage img:hover{
    scale: 1.03;
}




.footer-container{
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: calc(var(--lineSpacing) * 4);
    
    padding: calc(var(--sectionSpacing) * 0.5) var(--gutterSpacing);
    margin: auto;
}
.footer-headingContainer{
    min-width: 240px;
}
.footer-headingContainer > *:first-child{
    margin-bottom: var(--lineSpacing);
}

.footer-logo{
    width: 100%;
}
footer .imgWrapper{
    width: 100%;
}

.footer-linkContainer{
    display: grid;
    grid-auto-flow: column;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.footer-card{
    display: flex;
    flex-direction: column;
    width: max-content;
    margin-right: auto;

    min-width: 120px;
}
.footer-card li{
    width: fit-content;
}

.footer-card *:not(:last-child){
    margin-bottom: 0.7em;
}
.footer-card .--typo-pSmall{
    margin-left: 1em;
}

.footer-external img{
    width: calc((80 /16 * 1rem) + ((95 - 80) * ((100vw - 320px) / (1920 - 320))));
}
.footer-external a:hover{
    transform: scale( 1.1);
}


.footer-band{
    background-color: #2b2d2e;
    text-align: center;
    padding: calc(var(--lineSpacing) /2);
}
.footer-band, .footer-band *{
    color: var(--color-light1);
    font-size: calc((12 /16 * 1rem) + ((18 - 12) * ((100vw - 320px) / (1920 - 320))));
    font-family: 'Courier New', Courier, monospace;
}

.footer-band a{
    display: inline;
    text-decoration: underline;
    font-weight: 700;
}


@media screen and (max-width:1000px){
    .footer-linkContainer{
        grid-auto-flow: row;

        gap: calc(var(--lineSpacing) * 2);
    }
}

@media screen and (max-width:650px){
    .footer-container{
        grid-template-columns: 1fr;
    }
    .footer-linkContainer{
        width: fit-content;
    }
}