:root {
    --background: #f5f0e6;
    --background-alt: #ebe3d5;
    --surface: #faf7f1;

    --text: #2f302b;
    --muted: #706f67;

    --olive: #72785c;
    --olive-dark: #555b43;

    --brown: #9b7254;

    --border: #d9d0c2;

    --max-width: 1180px;
}


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


html {
    scroll-behavior: smooth;
}


body {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    background:
        var(--background);

    color:
        var(--text);

    line-height:
        1.6;
}


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


button,
input,
select,
textarea {
    font: inherit;
}


.container {
    width:
        min(
            calc(100% - 40px),
            var(--max-width)
        );

    margin:
        0 auto;
}


.section {
    padding:
        110px 0;
}


.alt-section {
    background:
        var(--background-alt);
}


/* HEADER */

.site-header {
    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    background:
        rgba(
            245,
            240,
            230,
            0.95
        );

    backdrop-filter:
        blur(12px);

    border-bottom:
        1px solid var(--border);
}


.nav-container {
    min-height:
        76px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;
}


.logo {
    font-size:
        1.25rem;

    font-weight:
        700;

    letter-spacing:
        0.03em;
}


.main-nav {
    display:
        flex;

    align-items:
        center;

    gap:
        28px;

    font-family:
        Arial,
        sans-serif;

    font-size:
        0.9rem;
}


.main-nav a {
    color:
        var(--muted);
}


.main-nav a:hover {
    color:
        var(--text);
}


.nav-button {
    padding:
        11px 18px;

    border:
        1px solid var(--text);

    font-family:
        Arial,
        sans-serif;

    font-size:
        0.85rem;
}


/* HERO */

.hero {
    min-height:
        720px;

    display:
        flex;

    align-items:
        center;

    position:
        relative;

    overflow:
        hidden;
}


.hero-content {
    max-width:
        850px;

    text-align:
        center;
}


.eyebrow {
    font-family:
        Arial,
        sans-serif;

    letter-spacing:
        0.18em;

    font-size:
        0.75rem;

    font-weight:
        700;

    color:
        var(--olive-dark);

    margin-bottom:
        22px;
}


.hero h1 {
    font-size:
        clamp(
            3.4rem,
            8vw,
            6.6rem
        );

    line-height:
        0.98;

    font-weight:
        500;

    letter-spacing:
        -0.04em;
}


.hero h1 span {
    display:
        block;

    font-style:
        italic;

    color:
        var(--olive-dark);
}


.hero-description {
    max-width:
        650px;

    margin:
        35px auto 0;

    color:
        var(--muted);

    font-family:
        Arial,
        sans-serif;

    font-size:
        1.08rem;

    line-height:
        1.8;
}


.hero-buttons {
    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        36px;
}


.button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        52px;

    padding:
        0 26px;

    border:
        1px solid transparent;

    cursor:
        pointer;

    font-family:
        Arial,
        sans-serif;

    font-size:
        0.9rem;
}


.primary-button {
    background:
        var(--olive-dark);

    color:
        white;
}


.primary-button:hover {
    background:
        var(--text);
}


.secondary-button {
    border-color:
        var(--text);
}


.secondary-button:hover {
    background:
        var(--surface);
}


.decor {
    position:
        absolute;

    font-size:
        12rem;

    color:
        rgba(
            114,
            120,
            92,
            0.08
        );

    pointer-events:
        none;
}


.decor-one {
    top:
        110px;

    left:
        -30px;
}


.decor-two {
    right:
        -20px;

    bottom:
        30px;
}


/* SECTION HEADINGS */

.section-heading {
    max-width:
        680px;

    margin-bottom:
        55px;
}


.section-heading h2,
.about h2,
.contact h2 {
    font-size:
        clamp(
            2.4rem,
            5vw,
            4.2rem
        );

    line-height:
        1.05;

    font-weight:
        500;

    letter-spacing:
        -0.035em;
}


.section-heading > p:last-child {
    margin-top:
        22px;

    color:
        var(--muted);

    font-family:
        Arial,
        sans-serif;

    line-height:
        1.8;
}


/* SERVICES */

.service-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    border-top:
        1px solid var(--border);

    border-left:
        1px solid var(--border);
}


.service-card {
    min-height:
        290px;

    padding:
        32px;

    border-right:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);

    background:
        rgba(
            255,
            255,
            255,
            0.15
        );
}


.service-number {
    display:
        block;

    font-family:
        Arial,
        sans-serif;

    color:
        var(--brown);

    font-size:
        0.8rem;

    margin-bottom:
        80px;
}


.service-card h3 {
    font-size:
        1.6rem;

    font-weight:
        500;

    margin-bottom:
        15px;
}


.service-card p {
    color:
        var(--muted);

    font-family:
        Arial,
        sans-serif;

    font-size:
        0.94rem;
}


/* HOW IT WORKS */

.steps-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap:
        24px;
}


.step span {
    width:
        48px;

    height:
        48px;

    border:
        1px solid var(--olive);

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--olive-dark);

    font-family:
        Arial,
        sans-serif;

    margin-bottom:
        25px;
}


.step h3 {
    font-size:
        1.35rem;

    font-weight:
        500;

    margin-bottom:
        12px;
}


.step p {
    color:
        var(--muted);

    font-family:
        Arial,
        sans-serif;

    font-size:
        0.93rem;
}


/* MENU */

.menu-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            1fr
        );

    gap:
        18px;
}


.menu-item {
    padding:
        40px;

    border:
        1px solid var(--border);

    min-height:
        220px;

    background:
        rgba(
            255,
            255,
            255,
            0.12
        );
}


.menu-type {
    font-family:
        Arial,
        sans-serif;

    font-size:
        0.7rem;

    letter-spacing:
        0.15em;

    color:
        var(--brown);

    margin-bottom:
        38px;
}


.menu-item h3 {
    font-size:
        1.8rem;

    font-weight:
        500;

    margin-bottom:
        12px;
}


.menu-item > p:last-child {
    color:
        var(--muted);

    font-family:
        Arial,
        sans-serif;
}


/* ABOUT */

.about-layout {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        80px;
}


.about-copy {
    font-family:
        Arial,
        sans-serif;

    color:
        var(--muted);

    font-size:
        1rem;

    line-height:
        1.9;
}


.about-copy p + p {
    margin-top:
        22px;
}


/* FAQ */

.faq-list {
    max-width:
        850px;
}


details {
    border-top:
        1px solid var(--border);

    padding:
        24px 0;
}


details:last-child {
    border-bottom:
        1px solid var(--border);
}


summary {
    cursor:
        pointer;

    font-size:
        1.25rem;

    list-style:
        none;
}


summary::-webkit-details-marker {
    display:
        none;
}


details p {
    max-width:
        680px;

    margin-top:
        18px;

    color:
        var(--muted);

    font-family:
        Arial,
        sans-serif;
}


/* CONTACT */

.contact {
    background:
        var(--text);

    color:
        var(--background);
}


.contact-layout {
    display:
        grid;

    grid-template-columns:
        0.85fr 1.15fr;

    gap:
        90px;
}


.contact .eyebrow {
    color:
        #c6c7ad;
}


.contact-intro > p:last-child {
    margin-top:
        24px;

    max-width:
        450px;

    color:
        #c8c5bb;

    font-family:
        Arial,
        sans-serif;

    line-height:
        1.8;
}


.contact-form {
    display:
        flex;

    flex-direction:
        column;

    gap:
        22px;
}


.form-row {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        18px;
}


.form-group {
    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;
}


.form-group label {
    font-family:
        Arial,
        sans-serif;

    font-size:
        0.78rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.09em;

    color:
        #d5d2c9;
}


input,
select,
textarea {
    width:
        100%;

    padding:
        15px;

    border:
        1px solid #55564f;

    background:
        #353630;

    color:
        white;

    outline:
        none;

    border-radius:
        0;
}


input:focus,
select:focus,
textarea:focus {
    border-color:
        #b6b997;
}


textarea {
    resize:
        vertical;
}


.form-button {
    align-self:
        flex-start;

    background:
        #c2c5a3;

    color:
        #282923;
}


/* FOOTER */

.site-footer {
    background:
        #242520;

    color:
        #c5c2b9;

    padding:
        35px 0;

    font-family:
        Arial,
        sans-serif;
}


.footer-layout {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        30px;

    align-items:
        center;
}


.footer-layout p {
    margin-top:
        5px;

    font-size:
        0.88rem;
}


.footer-links {
    display:
        flex;

    gap:
        25px;

    font-size:
        0.88rem;
}


/* RESPONSIVE */

@media (
    max-width: 950px
) {

    .main-nav {
        display:
            none;
    }


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


    .about-layout,
    .contact-layout {
        grid-template-columns:
            1fr;

        gap:
            45px;
    }

}


@media (
    max-width: 650px
) {

    .section {
        padding:
            80px 0;
    }


    .nav-button {
        display:
            none;
    }


    .hero {
        min-height:
            650px;
    }


    .hero h1 {
        font-size:
            3.7rem;
    }


    .service-grid,
    .steps-grid,
    .menu-grid,
    .form-row {
        grid-template-columns:
            1fr;
    }


    .service-card {
        min-height:
            auto;
    }


    .service-number {
        margin-bottom:
            45px;
    }


    .footer-layout {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

}

.hero-note {
    margin-top: 22px;
    font-family: Arial, sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: var(--muted);
}