main {
    position:relative;
    background-color:#000;
    overflow-x:clip;
}

.hero {
    position: relative;
    background-color:#fff;
    width:calc(100% - var(--padding));
    height:calc(var(--padding_x2) + 36px);
}

.contact {
    position:relative;
    padding:5rem 7.5vw;

    & .line1 {
        position:absolute;
        right: var(--padding);
        width: var(--padding);
        height:100%;
        top:0;
        border-left:1px solid var(--orange);
        border-right:1px solid var(--orange);
    }
}

h1 {
    position: relative;
    z-index:2;
    font-size:clamp(4rem,18cqw,18cqw);
    margin:0 0 2rem 0;
}

.nigel {
    position:absolute;
    right:0;
    bottom:0;
    height:100%;
    pointer-events:none;
}

.contactform {
    background-color:var(--orange);
    padding:clamp(1rem,5vw,2rem);
    width:50%;

    & input,
    & textarea {
        width:min(400px,100%);
    }
}


footer > * {
    position:Relative;
    z-index:3;
}

@media screen and (max-width:1100px){
    .nigel {
        right:calc(var(--padding) * -1);
    }
}

@media screen and (max-width:900px){

    .nigel {
        
        scale:-1 1;
        right:unset;
        left:70vw;
        z-index:2;
    }

    .contactform {
        width:80%;
    }
}

@media screen and (max-width:600px){
    .nigel {
        left:60vw;
        width:100%;
        height:100%;
        object-fit:cover;
        object-position: right;
    }
}