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

:root {

    --heading: "Rye", serif;
    --font: "Liter", sans-serif;

    --mainFontSize: clamp(13px, 1.04vw, 20px);
    --h1FontSize: clamp(33px, 2.55vw, 49px);
    --h2FontSize: clamp(27px, 2.14vw, 41px);
    --h3FontSize: clamp(23px, 1.77vw, 34px);
    --h4FontSize: clamp(18px, 1.41vw, 27px);
 
    --text: #555555;
    --primary: #996d38;
    --gold: #703E01;
    --light: #dfd5ca;
    --dark: #2b231a;

    --container: 1350px;

}

body {
    font-family: var(--font);
    font-size: var(--mainFontSize);
    color: var(--dark);
    line-height: 1.65;
    background-image: url(bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    position: relative;
}

body * {
    position: relative;
    z-index: 10;
}

body:before {
    display: block;
    content: "";
    background-color: var(--light);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
    opacity: 0.45;
}

h1, h2, h3, h4 { 
    color: var(--dark);
    line-height: 1;
    font-family: var(--heading);
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: clamp(-1px, -0.05vw, -1px);
} 

h1 { font-size: var(--h1FontSize); }
h2 { font-size: var(--h2FontSize); }
h3 { font-size: var(--h3FontSize); }
h4 { font-size: var(--h4FontSize); }

a {
    transition: all 0.3s ease;
}

a.button {
    text-decoration: none;
    background-color: var(--primary);
    display: inline-block;
    color: #fff;
    padding: clamp(7px, 0.78125vw, 10px) clamp(20px, 1.56vw, 30px) clamp(6px, 0.78125vw, 8px);
    border-radius: clamp(133px, 10.42vw, 200px);
}

a.button:hover,
a.button:focus {
    background-color: var(--dark);
}


a:not(.button) {
    color: var(--gold);
}

a:not(.button):hover, a:not(.button):focus {
    color: var(--dark);
}

footer, section {
    max-width: var(--container);
    width: 90%;
    margin: 0 auto;
}


header {
    padding: clamp(17px, 1.30vw, 25px) 0;
    z-index: 100;
    position: sticky;
    top:0;
    transition: all 0.3s;
    background-color: rgba(237,227,212,0);
    box-shadow: 0 1px 5px rgba(122,96,55,0);
}

header section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

header.active {
    padding: clamp(9px, 1.30vw, 13px) 0;
    box-shadow: 0 5px 15px rgba(122,96,55,0.25);
    background-color: rgba(237,227,212,1);
}

header img {
    max-width: clamp(166.66666666666666px, 13.020833333333334vw, 250px);
    margin-right: auto;
    transition: all 0.3s;
}

header.active img {
    max-width: clamp(110px, 13.020833333333334vw, 150px);
}

header a:not(.button) {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark);
    text-decoration: none;
}

header a:not(.button):hover,
header a:not(.button):focus {
    color: var(--gold);
}

header a svg {
    max-height: clamp(13px, 1.04vw, 20px);
    width: auto;
    margin-right: clamp(7px, 0.52vw, 10px);
}

header a svg * {
    fill: var(--primary);
}

header a:not(:last-child) {
    margin-right: clamp(23px, 1.82vw, 35px);
}


.intro {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: clamp(17px, 1.30vw, 25px) 0 clamp(67px, 5.21vw, 100px);
}

.intro .intro-text {
    max-width: 55%;
    flex: 0 0 55%;
}

.intro .intro-pickup {
    max-width: 40%;
    flex: 0 0 40%;
}

.intro .intro-text h1 {
    margin: 0 0 clamp(10px, 0.78vw, 15px);
}

.intro .intro-text h2 {
    margin: 0 0 clamp(7px, 0.52vw, 10px);
}

.intro .intro-text p, .intro .intro-text ol {
    margin: 0 0 clamp(24px, 2.08vw, 32px);
}

.intro .intro-pickup iframe {
    width: 100%;
    max-height: clamp(93px, 7.29vw, 140px);
    margin: clamp(10px, 0.78vw, 15px) 0 clamp(3px, 0.26vw, 5px);
    border-radius: clamp(7px, 0.52vw, 10px);
    box-shadow: 0 clamp(1px, 0.10vw, 2px) clamp(8px, 0.63vw, 12px) rgba(0,0,0,0.1);
}

.intro .intro-pickup p:not(:last-child), .intro .intro-pickup ul {
    margin: 0 0 clamp(10px, 0.78vw, 15px);
}

.intro .intro-pickup ul { 
    list-style: none;
    background-color: rgba(122,96,55,0.1);
    border-radius: clamp(7px, 0.52vw, 10px);
    padding: clamp(13px, 1.04vw, 20px) clamp(20px, 1.56vw, 30px);
}

.intro .intro-pickup ul li {
    display: flex;
    justify-content: space-between;
}

.intro .intro-pickup ul li:not(:last-child) {
    margin: 0 0 clamp(3px, 0.26vw, 5px);
    padding: 0 0 clamp(3px, 0.26vw, 5px);
    border-bottom: clamp(1px, 0.05vw, 1px) solid rgba(0,0,0,0.125);
}

.intro .intro-pickup ul li span {
    color: var(--dark);
}

.intro .intro-text ol {
    list-style: none;
}

.intro .intro-text ol li {
    display: flex;
    align-items: center;
}

.intro .intro-text ol li svg * {
    fill: var(--primary);
}

.intro .intro-text ol li svg {
    max-width: clamp(18px, 1.3020833333333333vw, 25px);
    height: auto;
    position: relative;
    top: clamp(-2px, -0.10416666666666667vw, -1.3333333333333333px);
    margin-right: clamp(6.666666666666667px, 0.5208333333333334vw, 10px);
}

.intro .intro-text ol li:not(:last-child) {
    margin: 0 0 clamp(6.666666666666667px, 0.5208333333333334vw, 10px);
}

.intro .intro-text p:last-child {
    margin: 0;
}

.preview {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

.preview h2, .preview .col + p {
    flex: 0 0 100%;
    max-width: 100%;
}

.preview .col {
    flex: 0 0 31%;
    max-width: 31%;
    margin: 0 1%;
}

.preview img {
    max-width: 100%;
    height: auto;
    border-radius: clamp(7px, 0.52vw, 10px);
    box-shadow: 0 clamp(1px, 0.10vw, 2px) clamp(8px, 0.63vw, 12px) rgba(0,0,0,0.1);
    display: block;
    margin: 0 0 clamp(20px, 1.56vw, 30px);
}

.preview h2 {
    margin: 0 0 clamp(23px, 1.82vw, 35px);
}

.preview .col + p {
    margin-top: clamp(60px, 4.69vw, 90px);
}

footer {
    padding: clamp(33px, 2.60vw, 50px) 0;
    text-align: center;
    font-size: clamp(13px, 0.78vw, 15px);
}

.bg-light {
    padding: clamp(67px, 5.21vw, 100px) 0;
    background-color: rgba(122,96,55,0.2);
}

.consignments {
    padding: clamp(67px, 5.21vw, 100px) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}


.consignments img {
    max-width: 35%;
    flex: 0 0 35%;
    border-radius: clamp(7px, 0.52vw, 10px);
}

.consignments div {
    max-width: 60%;
    flex: 0 0 60%;
}

.consignments h2 {
    margin: 0 0 clamp(16px, 1.82vw, 20px);
}

.intro.pp .intro-text {
    max-width: 100%;
}

.intro.pp {
    display: block;
}

.intro.pp ul {
    margin: 0 0 30px 20px;
}

.intro.pp ul li {
    margin: 0 0 14px;
}

.intro.pp ul li strong {
    display: block;
}

.intro.pp h3, .intro.pp h4 {
    margin: 0 0 20px;
}

@media (max-width: 800px) {

    header a span {
        display: none;
    }
    
    header a svg {
        margin: 0;
        width: 24px;
        max-height: unset;
    }
    
    header a:not(.button) {
        background-color: var(--primary);
        width: 40px;
        height: 40px;
        border-radius: 7px;
    }
    
    header a svg * {
        fill: #fff;
    }
    
    header a:not(:last-child) {margin-right: 13px;}
    
    .intro {
        display: block;
    }
    
    .intro .intro-text, .intro .intro-pickup {
        max-width: 100%;
    }
    
    .intro .intro-text {
        margin: 0 0 50px;
    }
    
    .intro .intro-pickup iframe {
        max-height: clamp(133.33333333333334px, 10.416666666666666vw, 200px);
    }

    header a.button {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 0;
        text-align: center;
        font-size: 20px;
        padding: 17px;
        border-top: 2px solid var(--light);
        box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    }
    
    footer {
        padding-bottom: 120px;
    }

    .consignments img {
        margin-bottom:  15px;
    }
    .consignments img,
.consignments div {
    max-width: 100%;
    flex: 0 0 100%;
}

}

@media (max-width: 640px) {

    .preview .col {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .preview .col:not(:last-of-type) {
        margin: 0 0 40px;
    }

    a.button {
        font-size: 16px;
    }

}