@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');

* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: "DM Sans", Arial, sans-serif
}

body {
    background: #4c3210;
    color: #fff
}

.page {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: min(1600px, 100%);
    margin: auto;
    padding: 28px 26px 0
}

.bg {
    position: absolute;
    inset: 0;
    background: url("assets/background.jpg") center/cover no-repeat;
    transform: scale(1.03)
}

.wash {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 249, 237, .12), rgba(255, 247, 229, .78) 28%, rgba(255, 250, 241, .91) 58%, rgba(255, 248, 235, .35)), linear-gradient(0deg, rgba(30, 18, 3, .55), transparent 25%)
}

.header,
.hero,
.contact {
    position: relative;
    z-index: 2
}

.header {
    display: flex;
    justify-content: center
}

.header img {
    width: min(250px, 60vw);
    max-height: 150px;
    object-fit: contain;
    filter: drop-shadow(0 6px 8px rgba(75, 40, 0, .15))
}

.hero {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

.content {
    width: min(850px, 92vw);
    padding: 24px 28px 30px
}

.eyebrow {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
    color: #76500d
}

.content h1 {
    font-size: clamp(48px, 7vw, 88px);
    line-height: 1;
    margin: 12px 0 7px;
    color: #6d4608;
    letter-spacing: -.045em;
    font-weight: 800
}

.headline {
    font-size: 18px;
    color: #16110b;
    margin: 0
}

.ornament {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    color: #8a5d12;
    margin: 13px 0 10px;
    font-size: 20px
}

.ornament span {
    width: 95px;
    height: 1px;
    background: #9b7a42
}

.description {
    font-size: 13px;
    line-height: 1.55;
    color: #30281c;
    margin: 0
}

.contact {
    background: linear-gradient(90deg, #093b74, #2872b1);
    display: flex;
    justify-content: space-around;
    gap: 22px;
    align-items: center;
    padding: 13px 22px;
    margin: 0 -26px;
    color: #fff;
    min-height: 66px
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    line-height: 1.35
}

.symbol {
    font-size: 20px;
    color: #fff
}

@media(max-width:750px) {
    .page {
        padding: 20px 10px 0
    }

    .header img {
        width: min(330px, 82vw)
    }

    .content h1 {
        font-size: 46px
    }

    .headline {
        font-size: 15px
    }

    .description {
        font-size: 12px
    }

    .contact {
        margin: 0 -10px;
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 22px
    }

    .contact-item {
        font-size: 11px
    }

    .ornament span {
        width: 55px
    }
}