html, body {
    font-optical-sizing: auto;
    font-family: "Fraunces", serif;
    font-weight: 300;
    font-optical-sizing: auto;
    color: #331A0C;
    margin: 0;
    background-color: #F2F1EC;
}

h2 {
    margin: 0;
    font-weight: 300;
    font-size: clamp(35px,5vw,50px);
    text-transform: uppercase;
}

p {
    line-height: 25px;
    font-size: clamp(15px,1.8vw,16px);
}

.vertical-line {
    margin: 20px 0px;
    display: flex;
    width: 50%;
    border-right: 1px solid #BEAE9E;
    height: 80px;
}

main {
    position: relative;
}

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

.section {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    padding: 60px 30px;
    box-sizing: border-box;
}

.site-header {
    position: fixed;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    font-style: italic;
    font-size: 24px;
    height: 80px;
    box-sizing: border-box;
    background-color: #f3f1ed;
    /*    background-color: #FDFCFB;*/
    z-index: 1000;
}

.brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    height: 100%;
    box-sizing: border-box;
    margin-left: 5px;
}

    .brand img {
        height: 90%;
    }

.nav-desktop {
    display: none;
    gap: 30px;
}

    .nav-desktop a {
        text-decoration: none;
        color: #331A0C;
        opacity: 0.9;
        font-style: normal;
        font-size: 20px;
    }

        .nav-desktop a:hover {
            opacity: 1;
            color: #BEAE9E;
        }

.burger {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 10px;
    cursor: pointer;
    border-radius: 10px;
}

    .burger:focus-visible {
        outline: 1px solid #f3f1ed;
        outline-offset: 1px;
    }

.burger__lines {
    display: block;
    width: 35px;
    height: 20px; /* gives space between the two lines */
    position: relative;
}

    .burger__lines::before,
    .burger__lines::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        background: #331A0C;
        border-radius: 999px;
        transition: transform 180ms ease, top 180ms ease, bottom 180ms ease, opacity 180ms ease;
    }

    .burger__lines::before {
        top: 4px;
    }

    .burger__lines::after {
        bottom: 4px;
    }

.burger.is-open .burger__lines::before {
    top: 24px;
    width: 35px;
    transform: rotate(90deg);
}

.burger.is-open .burger__lines::after {
    width: 35px;
    bottom: -6px;
}

.nav-mobile {
    position: fixed;
    inset: 0;
    padding: 84px 20px 120px;
    background-color: #f3f1ed;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    z-index: 50;
    box-sizing: border-box;
}

    .nav-mobile a {
        width: 100%;
        text-decoration: none;
        text-align: center;
        color: #331A0C !important;
        font-style: italic;
        text-transform: lowercase;
        font-size: 20px;
        padding: 6px 10px;
        border-radius: 12px;
    }

        .nav-mobile a:hover {
            color: #BEAE9E !important;
        }

    .nav-mobile.is-open {
        opacity: 1;
        pointer-events: auto;
    }

.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    z-index: 40;
}

    .menu-overlay.is-open {
        opacity: 1;
        pointer-events: auto;
    }

.burger.is-open {
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 800;
}

#home-landing {
    padding: 0px 0px;
    margin-top: 80px;
    justify-content: center;
    overflow: hidden;
    position: relative;
    height: 600px;
}

.landing-carousel {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.1s ease-in-out;
}

    .carousel-image.active {
        opacity: 1;
    }

#home-intro {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    box-sizing: border-box;
    padding-top: 40px;
}

    #home-intro #headers {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        justify-content: left;
    }

        #home-intro #headers h2 {
            width: 100%;
            max-width: 600px;
            margin: 0;
            font-weight: 300;
            margin-top: 20px;
            margin-bottom: 50px;
            text-transform: lowercase;
            font-style: italic;
            color: #331A0C;
        }

        #home-intro #headers h4 {
            width: 100%;
            max-width: 600px;
            margin: 0;
            font-weight: 300;
            text-transform: uppercase;
            color: #331A0C;
            font-size: 13px;
            letter-spacing: 3px;
        }

    #home-intro #info {
        width: 80%;
        display: flex;
        flex-wrap: wrap;
    }

    #home-intro p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-weight: 300;
        margin-bottom: 20px;
        color: #1c1c1a;
        max-width: 800px;
    }

    #home-intro a {
        text-decoration: none;
        background-color: #f3f1ed;
        border: 1px solid #ab4003;
        color: #ab4003;
        padding: 13px 40px;
        margin-top: 30px;
        cursor: pointer;
        width: 100%;
        font-family: "Fraunces", serif;
        border-radius: 0px;
        font-weight: 300;
        text-align: center;
        font-size: 15px;
    }

        #home-intro a:hover {
            border: 1px solid #BEAE9E;
            color: #BEAE9E;
        }

.section-collage {
    display: flex;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    overflow: hidden;
}

#home-intro .section-collage {
    height: clamp(400px,100vw,890px);
}

    #home-intro .section-collage img:nth-of-type(2) {
        position: absolute;
        margin-bottom: 50px;
        width: 55%;
        object-fit: cover; /* fills container proportionally */
        display: block; /* removes bottom spacing gap */
        max-height: 800px;
        bottom: 0;
        left: 50%;
        transform: translateX(-12%);
        max-width: 400px;
    }

    #home-intro .section-collage img:first-of-type {
        position: absolute;
        margin-bottom: 50px;
        width: 55%;
        object-fit: cover; /* fills container proportionally */
        display: block; /* removes bottom spacing gap */
        max-height: 800px;
        top: 0;
        right: 50%;
        max-width: 400px;
        transform: translateX(12%);
    }

#home-meet {
    justify-content: center;
}

    #home-meet img {
        width: 100%;
        margin: 0;
        margin-bottom: 50px;
        color: #1c1c1a;
        max-width: 800px;
        max-height: 400px;
        object-fit: cover;
    }

    #home-meet h4 {
        width: 100%;
        font-size: 14px;
        margin: 0;
        font-weight: 300;
        text-transform: uppercase;
        margin-bottom: 6px;
        /*color: #BEAE9E;*/
        letter-spacing: 4px;
        text-align: center;
    }

    #home-meet h2 {
        width: 100%;
        margin: 0;
        line-height: 45px;
        font-weight: 300;
        text-transform: lowercase;
        font-style: italic;
        color: #331A0C;
        margin-bottom: 50px;
        font-size: 35px;
        text-align: center;
    }

    #home-meet p {
        width: 75%;
        margin: 0;
        margin-bottom: 30px;
        color: #1c1c1a;
        text-align: center;
    }

    #home-meet a {
        text-decoration: none;
        background-color: transparent;
        border: 1px solid #ab4003;
        color: #ab4003;
        padding: 13px 40px;
        margin-top: 30px;
        cursor: pointer;
        width: 100%;
        font-family: "Fraunces", serif;
        border-radius: 0px;
        font-weight: 300;
        text-align: center;
        font-size: 15px;
    }

        #home-meet a:hover {
            border: 1px solid #BEAE9E;
            color: #BEAE9E;
        }

#home-reviews {
    padding: 0;
    margin-bottom: 50px;
}

.carousel {
    position: relative;
    width: 100%;
    height: clamp(420px, 62vh, 760px);
    overflow: hidden;
    user-select: none;
    touch-action: pan-y;
}

.track {
    height: 100%;
    display: flex;
    will-change: transform;
    transform: translate3d(0,0,0);
    transition: transform 520ms cubic-bezier(.2,.8,.2,1);
    gap: 0;
    margin: 0;
    padding: 0;
}

.slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

    .slide img {
        box-sizing: border-box;
        width: 100%;
        overflow: hidden;
        height: 100%;
        object-fit: cover;
        display: block;
        max-height: 800px;
    }

.controls {
    position: absolute;
    left: 50%;
    bottom: 0;
    display: flex;
    z-index: 3000;
}

.slide-text {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #f3f1ed;
}

.quote {
    font-size: clamp(16px, 2.2vw, 22px);
    line-height: 1.45;
    margin: 0;
    margin-bottom: 15px;
    text-align: center;
}

.meta {
    margin: 0;
    color: #BEAE9E;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.carousel-controls {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    display: flex;
    z-index: 3000;
    margin-bottom: 20px;
}

.arrow-btn {
    appearance: none;
    border: none;
    padding: 12px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .12s ease;
    line-height: 1;
    user-select: none;
    background-color: transparent;
    color: #f3f1ed;
    font-size: 21px;
    font-family: "Fraunces", serif;
    font-weight: 100;
}

    .arrow-btn:active {
        transform: translateY(1px);
    }

    .arrow-btn:focus-visible {
        outline: 3px solid rgba(0,0,0,.25);
        outline-offset: 3px;
    }

@media (prefers-reduced-motion: reduce) {
    .track {
        transition: none;
    }

    .btn, .arrow {
        transition: none;
    }
}

@media (max-width: 820px) {
    .carousel-slide {
        flex-direction: column;
        min-height: unset;
    }

    .slide-image, .slide-text {
        width: 100%;
    }

    .slide-image {
        height: 400px;
    }

    .slide-text {
        padding: 22px 58px;
    }
}

.page-content {
    width: 100%;
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
}

.session-type {
    width: 100%;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 4px;
    padding: 120px 20px 0px 40px;
    margin: 0px 0px 20px 0px;
}

.page-header {
    width: 100%;
    font-weight: 400;
    text-transform: lowercase;
    font-style: italic;
    margin: 0px 40px 50px 0px;
    padding: 0px 40px;
    font-size: 28px;
}

.page-header-image {
    width: 100%;
    object-fit: cover;
}

.page-intro {
    display: flex;
    width: 100%;
    padding: 40px 0px;
    flex-wrap: wrap;
    justify-content: center;
}

    .page-intro p {
        text-align: center;
        padding: 0px 40px;
        font-style: italic;
    }

.page-what-is {
    width: 100%;
    padding: 40px;
}

    .page-what-is h3 {
        font-weight: 300;
        margin: 0;
        margin-bottom: 40px;
        margin-top: 20px;
        font-size: 16px;
        letter-spacing: 4px;
        text-transform: uppercase;
    }

.page-what-to-expect {
    width: 100%;
    display: flex;
    padding: 40px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

    .page-what-to-expect img {
        width: 100%;
        display: flex;
    }

    .page-what-to-expect div {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
    }

        .page-what-to-expect div h4,
        .page-what-to-expect div ul {
            width: 100%;
            margin: 0;
        }

        .page-what-to-expect div h4 {
            font-weight: 400;
            margin: 30px 0px 25px 0px;
            font-style: italic;
            font-size: 26px;
            text-transform: lowercase;
        }

        .page-what-to-expect div li {
            line-height: 32px;
            font-size: 14px;
        }

            .page-what-to-expect div li::marker {
                font-size: 12px;
            }

footer {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0px;
    box-sizing: border-box
}
#footer-logo 
{
    height: 40px;
}
    footer p {
        width: 100%;
        text-align: center;
        font-size: clamp(12px,2.6vw,16px);
    }

#footer-seo {
    width: 100%;
    font-size: clamp(13px,3vw,16px);
    font-style: italic;
    text-align: center;
    padding: 40px 50px 30px 50px;
}

a.active {
    color: #BEAE9E;
}

#faq a {
    color: #BEAE9E;
    font-style: initial;
    text-decoration: none;
}

:root {
    --arrow-size: 52px;
    --arrow-gap: 12px;
    --arrow-bottom: 18px;
}

#home-instagram {
    background-color: #f3f1ed;
}

    #home-instagram h4 {
        width: 100%;
        text-transform: lowercase;
        font-weight: 300;
        font-style: italic;
        text-align: center;
        font-size: 25px;
        margin: 0;
    }

    #home-instagram p {
        width: 100%;
        text-transform: lowercase;
        font-weight: 300;
        text-align: center;
        margin-bottom: 40px;
    }

    #home-instagram img {
        width: 50%;
        box-sizing: border-box;
        padding: 1px;
        object-fit: cover;
        aspect-ratio: 3 / 3.5;
    }

#portfolio-landing {
    padding: 10px 30px;
    margin-top: 80px;
    justify-content: center;
    align-content: center;
    overflow: hidden;
    position: relative;
    height: clamp(400px,50vw,800px);
}

    #portfolio-landing img {
        box-sizing: border-box;
        width: 100%;
        overflow: hidden;
        /*max-width: 1000px;*/
        height: 100%;
        object-fit: cover;
        display: block;
        min-height: 700px;
        max-height: 800px;
        /* border-top: 2px solid #BEAE9E;
        border-bottom: 2px solid #BEAE9E;*/
        padding: 10px 0px;
    }

#portfolio-intro {
    width: 80%;
    padding: 60px 30px 40px 30px;
    justify-content: center;
}

    #portfolio-intro p {
        text-align: center;
        width: 100%;
    }

    #portfolio-intro h2:nth-of-type(2) {
        font-style: italic;
        margin-bottom: 50px;
    }

    #portfolio-intro h2 {
        text-align: right;
        width: 100%;
    }

#portfolio-gallery {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    padding: 30px 0px 30px 0px;
}

#portfolio-gallery-link {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0px 0px 10px 0px;
    justify-content: center;
    padding: 30px;
}

    #portfolio-gallery-link img {
        width: 100%;
        border: 0px solid #331A0C;
        margin-bottom: 20px;
        height: clamp(250px, 50vw,350px);
        object-fit: cover;
    }

    #portfolio-gallery-link h3 {
        width: 100%;
        text-align: center;
        margin: 0;
        font-weight: 300;
        font-size: 26px;
        margin-bottom: 30px;
        text-transform: uppercase;
    }

    #portfolio-gallery-link h4 {
        width: 100%;
        text-align: center;
        margin: 0;
        margin-bottom: 10px;
        font-weight: 300;
        color: #BEAE9E;
        font-size: 13px;
    }

    #portfolio-gallery-link a {
        border: 1px solid #BEAE9E;
        background-color: #f3f1ed;
        color: #331A0C;
        border: 1px solid #ab4003;
        background-color: #ab4003;
        color: #fbfbf9;
        text-decoration: none;
        padding: 10px 60px;
        cursor: pointer;
        font-family: "Fraunces", serif;
        font-weight: 300;
        font-size: 14px;
    }

#contact-landing {
    padding: 40px;
    padding-top: 100px;
}

    #contact-landing h4 {
        width: 100%;
        font-weight: 400;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 4px;
        padding: 20px 0px 0px 0px;
        margin: 0px 0px 30px 0px;
    }
    #contact-landing h2 {
        width: 100%;
        font-weight: 400;
        text-transform: lowercase;
        font-style: italic;
        margin: 0px 0px 50px 0px;
        font-size: 28px;
    }

    #contact-landing p {
        width: 100%;
        margin: 0;
        text-align: justify;
        margin-bottom: 10px;
    }

#contact-form {
    padding: 0px 40px 100px 40px;
    flex-wrap: wrap;
    display: flex;
    width: 100%;
    max-width: 100%;
}

    #contact-form input {
        width: 100%;
        margin-bottom: 20px;
        background-color: #fbfbf9;
        border: 1px solid #BEAE9E;
        padding: 15px 20px;
        font-family: "Fraunces", serif;
        outline: none; /* remove default focus outline */
        appearance: none; /* remove OS styling */
        -webkit-appearance: none; /* Safari */
        border-radius: 4px;
        font-weight: 300;
    }

    #contact-form select {
        width: 100%;
        margin-bottom: 20px;
        background-color: #fbfbf9;
        border: 1px solid #BEAE9E;
        padding: 15px 20px;
        font-family: "Fraunces", serif;
        outline: none; /* remove default focus outline */
        appearance: none; /* remove OS styling */
        -webkit-appearance: none; /* Safari */
        border-radius: 4px;
        font-weight: 300;
    }
    #contact-form label {
        font-size: 14px;
        margin-bottom: 10px;
    }

    #contact-form input::placeholder {
        font-weight: 300;
        color: #BEAE9E;
    }

    #contact-form input:focus {
        outline: none;
        border: 1px solid #8E7F70; /* your custom border */
        box-shadow: 0 0 0 2px rgba(190,174,158,0.25); /* soft custom glow */
    }

    #contact-form textarea {
        width: 100%;
        max-width: 100%;
        height: 108px;
        min-height: 28px;
        margin-bottom: 20px;
        background-color: #fbfbf9;
        border: 1px solid #BEAE9E;
        padding: 15px 20px;
        font-family: "Fraunces", serif;
        border-radius: 4px;
        resize: vertical;
        outline: none; /* remove default focus outline */
        appearance: none; /* remove OS styling */
        -webkit-appearance: none; /* Safari */
        font-weight: 300;
    }

        #contact-form textarea:placeholder-shown {
            font-weight: 300;
            color: #BEAE9E;
        }

        #contact-form textarea:focus {
            outline: none;
            border: 1px solid #8E7F70; /* your custom border */
            box-shadow: 0 0 0 2px rgba(190,174,158,0.25); /* soft custom glow */
        }
/* Chrome, Safari, Edge (WebKit) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

#contact-form button {
    width: 100%;
    cursor: pointer;
    text-transform: lowercase;
    background-color: #f3f1ed;
    border: 1px solid #ab4003;
    color: #ab4003;
    padding: 10px 40px;
    margin-top: 30px;
    font-family: "Fraunces", serif;
    border-radius: 0px;
    font-weight: 300;
    text-align: center;
    font-size: 15px;
}
#contact-form button:hover {
    border: 1px solid #BEAE9E;
    color: #BEAE9E;
}

#about-landing {
    margin-top: 80px;
    padding: 10px 30px;
    height: fit-content;
}

    #about-landing img {
        width: 100%;
        margin-bottom: 20px;
    }

#about-intro {
    background-color: white;
    padding: 30px;
    border-bottom: 1px solid #BEAE9E;
}

    #about-intro h2 {
        margin: 0;
        margin-bottom: 10px;
    }

    #about-intro h4 {
        margin: 0;
        margin-bottom: 40px;
        font-weight: 300;
        text-transform: uppercase;
        font-size: 20px;
    }

    #about-intro p {
        text-align: justify;
    }

#about-image-left,
#about-image-right {
    display: flex;
    width: 100%;
}

#about-image-left {
    justify-content: left;
    padding: 50px 0px 30px 50px;
}

#about-image-right {
    justify-content: right;
    padding: 0px 50px 50px 0px;
}

    #about-image-left img,
    #about-image-right img {
        width: 65%;
        object-fit: cover;
        border: 0px solid #331A0C;
    }

#about-contact {
    width: 100%;
    padding: 50px 30px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

    #about-contact img {
        height: 40px;
        margin-bottom: 20px;
    }

    #about-contact h2 {
        width: 100%;
        text-align: center;
    }

    #about-contact p {
        width: 100%;
        margin-bottom: 50px;
        text-align: center;
    }

    #about-contact button {
        background-color: #fbfbf9;
        border: 1px solid #ab4003;
        color: #ab4003;
        background-color: #ab4003;
        border: 1px solid #ab4003;
        color: #fbfbf9;
        padding: 15px 40px;
        cursor: pointer;
        font-family: "Fraunces", serif;
        /*border-radius: 4px;*/
        margin-left: 10%;
        margin-right: 10%;
        font-weight: 300;
    }

        #about-contact button:hover {
            color: #f3f1ed;
        }

#gallery-landing {
    display: flex;
    margin-top: 80px;
    box-sizing: border-box;
    padding: 20px 0px 0px 0px;
}

    #gallery-landing h2 {
        text-align: center;
        width: 100%;
        margin-bottom: 10px;
    }

    #gallery-landing h4 {
        text-align: center;
        margin: 0;
        width: 100%;
        font-weight: 300;
        color: #BEAE9E;
        font-style: italic;
    }

#gallery-photos {
    padding: 0px 20px 60px 20px;
    column-count: 2;
    column-gap: 5px;
}

    #gallery-photos img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 0 5px 0;
        break-inside: avoid;
    }

#gallery-landing img {
    width: 100%;
    object-fit: cover;
}

#gallery-hero-text {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

    #gallery-hero-text h2,
    #gallery-hero-text h4 {
        width: 100%;
    }

.faq-header {
    margin-top: 120px;
    font-size: 26px;
    margin-bottom: 55px;
}
.faq {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    padding: 0px 25px;
    box-sizing: border-box;
    margin-bottom: 30px;
}
.faq-title {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.faq-title div {
    display: flex;
    justify-content: center;
    align-content:center;
    height: fit-content;
}
.faq-title:hover {
    cursor: pointer;
}
    .faq-title:hover h4 {
        color: #8E7F70;
    }
.faq-title h4 {
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 1px;
    margin: 0;
    max-width: 86%;
}
.faq__lines {
    display: block;
    width: 19px;
    height: 10px; /* gives space between the two lines */
    position: relative;
    padding-top: 6px;
}

    .faq__lines::before,
    .faq__lines::after {
        content: "";
        position: absolute;
        left: 0;
        width: 19px;
        height: 1px;
        background: #8E7F70;
        transform-origin: center;
        transition: transform 180ms ease, opacity 180ms ease, width 180ms ease;
    }

    .faq__lines::after {
        transform: translateY(-50%) rotate(90deg);
    }

.faq.is-open .faq__lines::after {
    transform: translateY(-50%) rotate(180deg);
}
.faq p {
    display: none;
    margin: 0;
    line-height: 26px;
}
.form-group 
{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
/* default (no value selected) */
.select-placeholder {
    color: #BEAE9E; /* greyed out */
}

    /* when a valid option is selected */
    .select-placeholder.has-value {
        color: #000; /* normal text */
    }
.material-symbols-rounded {
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 20
}
#contact-landing div {
    display: flex;
    width: 100%;
    align-content: center;
    align-items: center;
    margin-top: 10px;
}
#contact-landing div:first-of-type {
    margin-top: 36px;
}
    #contact-landing div:nth-of-type(2) {
        margin-bottom: 20px;
    }
#contact-landing div span {
    font-size: 20px;
    margin-right: 10px;
}
    #contact-landing div p, 
    #contact-landing div a {
        margin: 0;
        color: #331A0C;
        font-size: 15px;
        text-underline-offset: 4px;
    }
    .about-header-image {
        width: 100%;
        object-fit: cover;
        max-height: 500px;
        padding-left: 40px;
        padding-right: 40px;
    }
.about-photos-a {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-top: 60px;
    margin-bottom: 20px;
}
.about-photos-a img {
    width: 44%;
    border: 1px solid #BEAE9E;
    height: max-content;
}
    .about-photos-a img:nth-of-type(2) {
        margin-top: 50px;
    }
    .my-process {
        padding: 30px 40px;
        display: flex;
        flex-wrap: wrap;
    }
        .my-process h3 {
            font-weight: 300;
            margin: 0;
            margin-bottom: 40px;
            margin-top: 20px;
            font-size: 16px;
            letter-spacing: 4px;
            width: 100%;
            text-transform: uppercase;
        }
        .my-process p {
            margin: 0;
        }
        
.process-header {
    display: flex;
    align-content: end;
    align-items: end;
    margin-bottom: 16px;
}
.process-header p:nth-of-type(2) {
    height: fit-content;
    font-style: italic;
    margin-bottom: 2px;
    font-weight: 400;
    font-size: 17px;
}
p.process-nr {
    font-size: 13px;
    font-weight: 400;
    width: fit-content;
    margin-right: 5px;
}
.process-group {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.process-img {
    width: 100%;
}
.lets-connect {
    display: flex;
    flex-wrap: wrap;
    padding: 40px;
}
.lets-connect p {
    margin: 0;
    font-size: 18px;
    text-align: center;
    line-height: 35px;
    font-style: italic
}
.lets-connect a {
    text-decoration: none;
    background-color: #f3f1ed;
    border: 1px solid #ab4003;
    color: #ab4003;
    padding: 10px 40px;
    margin-top: 30px;
    cursor: pointer;
    width: 100%;
    font-family: "Fraunces", serif;
    border-radius: 0px;
    font-weight: 300;
    text-align: center;
    font-size: 15px;
}
    .lets-connect a:hover {
        border: 1px solid #BEAE9E;
        color: #BEAE9E;
    }
.ready-to-connect {
    display: flex;
    position: relative;
    width: 100%;
    flex-wrap: wrap;
}
.ready-to-connect img
{
    width: 100%;
    height: 600px;
    object-fit: cover;
}
    .ready-to-connect h3 {
        position: absolute;
        color: #f3f1ed;
        font-weight: 300;
        font-size: 15px;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-top: 50px;
        text-align: center;
        line-height: 30px;
        left: 50%;
        transform: translateX(-50%);
    }
    .ready-to-connect a {
        text-decoration: none;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 40px;
        background-color: #f3f1ed;
        border: 1px solid #f3f1ed;
        color: #331A0C;
        margin-top: 30px;
        padding: 10px 32px;
        cursor: pointer;
        font-family: "Fraunces", serif;
        border-radius: 0px;
        font-weight: 400;
        text-align: center;
        font-size: 12px;
        letter-spacing: 2px;
        text-transform: uppercase;
    }
    .ready-to-connect a:hover {
        border: 1px solid #BEAE9E;
        color: #BEAE9E;
    }
.other-session-a {
    display: flex;
    width: 100%;
    padding: 80px 40px;
    justify-content: space-between;
}
    .other-session-a div 
    {
        width: 47%;
        display: flex;
        flex-wrap: wrap;
    }
        .other-session-a div img {
            width: 100%;
            display: flex;
            object-fit: cover;
            height: 300px;
            border: 1px solid #331A0C;
        }
        .other-session-a div:first-of-type img {
            margin-bottom: 20px;
        }
        .other-session-a div:nth-of-type(2) img {
            margin-top: 30px;
        }
        .other-session-a div:first-of-type h4 {
            margin-bottom: 20px;
            text-align: end;
        }
        .other-session-a div h3 {
            font-weight: 300;
            margin: 0;
            font-size: 13px;
            letter-spacing: 2PX;
            width: 100%;
            margin-bottom: 10px;
        }
        .other-session-a div h4 {
            font-style: italic;
            text-transform: lowercase;
            font-weight: 400;
            margin: 0;
            font-size: 20px;
            width: 100%;
        }
        .other-session-a div a {
            margin: 0;
            text-decoration: none;
            color: #331A0C;
            font-size: 16px;
            text-transform: lowercase;
            text-align: end;
            display: flex;
        }
        .other-session-a div a p:nth-of-type(1){
            font-style: italic;
            margin-right: 4px;
        }
        .other-session-a div a:hover {
            color: #BEAE9E;
            cursor: pointer;
        }
        .other-session-a div:first-of-type {
            justify-content: end;
        }
        .other-session-a div:nth-of-type(2) {
            justify-content: end;
        }
.other-session-b {
    display: flex;
    margin: 40px;
    flex-wrap: wrap;
    position: relative;
    height: 500px;
    overflow: hidden;
}
    .other-session-b img {
        width: 100%;
        object-fit: cover;
    }
    .other-session-b div {
        display: flex;
        flex-wrap:wrap;
        position: absolute;
        top: 0;
        width: 100%;
        padding-top: 40px;
    }
    .other-session-b h3 {
        color: #f3f1ed;
        width: 100%;
        text-transform: lowercase;
        font-weight: 400;
        font-style: italic;
        margin: 0;
        text-align: center;
        margin-bottom: 25px;
    }
    .other-session-b div a {
        text-decoration: none;
        color: #f3f1ed;
        width: 100%;
        text-align: center;
        text-transform: uppercase;
        font-weight: 300;
        margin: 0;
        font-size: 13px;
        letter-spacing: 2px;
    }
    .other-session-b div a:hover {
        color: #BEAE9E;
        cursor: pointer;
    }
    .footer-links {
        display: flex;
        width: 100%;
        justify-content: center;
        padding-top: 20px;
    }
.footer-links a {
    font-size: 15px;
    margin: 0px 7px;
    text-decoration: none;
    text-transform: uppercase;
    color: #BEAE9E;
}
        .footer-links a:hover {
            color: #8E7F70;
        }
.texture-background {
    background-color: #fbfbf9;
    background-image: url("https://www.transparenttextures.com/patterns/diamond-eyes.png");
}
.page-intro a:first-of-type {
    font-size: 14px;
    width: 100%;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
}
.page-intro a:first-of-type:hover {
    color: #BEAE9E;
    cursor: pointer;
}
.page-intro a:nth-of-type(2) {
    text-decoration: none;
    background-color: transparent;
    border: 1px solid #ab4003;
    color: #ab4003;
    margin-top: 30px;
    padding: 10px 32px;
    cursor: pointer;
    font-family: "Fraunces", serif;
    border-radius: 0px;
    font-weight: 400;
    text-align: center;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.page-intro a:nth-of-type(2):hover {
    border: 1px solid #BEAE9E;
    color: #BEAE9E;
}
@media (min-width: 900px) {
    .section {
        padding-left: clamp(200px, 20vw, 500px);
        padding-right: clamp(200px, 20vw, 500px);
    }
    .site-header {
        padding: 20px 40px;
        font-size: 17px;
        justify-content: space-between;
        height: 100px;
        box-sizing: border-box;
    }
    .nav-desktop {
        display: flex;
    }
        .nav-desktop a {
            font-size: 17px;
            font-style: italic;
            color: #331A0C !important;
            text-transform: lowercase;
        }
        .nav-desktop a:hover {
            color: #BEAE9E !important;
            cursor: pointer;
        }
    .burger {
        display: none;
    }
    .brand {
        position: initial;
        transform: translateX(0%);
        height: 90%;
    }
    .nav-mobile {
        display: none;
    }
    .menu-overlay {
        display: none;
    }
    #home-instagram img {
        width: 25%;
    }
    #home-intro button {
        max-width: 800px;
    }
    #home-meet img {
        width: 60%;
    }

    #home-meet button {
        width: 60%;
        max-width: 800px;
        margin-left: 10%;
        margin-right: 10%;
    }

    #home-meet p {
        width: 60%;
        max-width: 800px;
        margin-left: 10%;
        margin-right: 10%;
    }

    #portfolio-gallery {
        width: 70%;
        justify-content: space-between;
        background-color: #f3f1ed;
    }

    #portfolio-gallery-link {
        width: 48%;
        box-sizing: border-box;
        max-width: 550px;
        padding-left: 0px;
        padding-right: 0px;
    }

    #portfolio-intro {
        width: 70%;
        display: flex;
        justify-content: center;
    }

    .page-content {
        width: 100%;
        flex-wrap: wrap;
        display: flex;
    }

    .session-type {
        width: 100%;
        font-weight: 400;
        text-transform: uppercase;
        margin: 60px 0px 35px 0px;
        font-size: 14px;
        letter-spacing: 4px;
        padding: 100px 120px 0px 120px;
    }

    .page-header {
        width: 100%;
        font-weight: 400;
        text-transform: lowercase;
        font-style: italic;
        margin: 0px 0px 65px 0px;
        padding: 0px 120px;
    }

    .page-header-image {
        width: 100%;
        padding: 0px 120px;
        object-fit: cover;
        max-height: 700px;
    }

    .page-intro {
        width: 100%;
        margin: 40px 0px;
    }

        .page-intro p {
            text-align: center;
        }

    .page-what-is {
        width: 100%;
        padding: 50px 200px;
    }

    .page-what-to-expect {
        width: 100%;
        display: flex;
        padding: 0px 150px
    }

        .page-what-to-expect img {
            width: 40%;
            margin: 70px 0px;
            display: flex;
        }

        .page-what-to-expect div {
            width: 50%;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
        }

            .page-what-to-expect div h4,
            .page-what-to-expect div ul {
                width: 100%;
            }

            .page-what-to-expect div ul {
                padding-left: 20%;
            }

            .page-what-to-expect div h4 {
                font-weight: 400;
                margin: 0;
                text-align: center;
                font-style: italic;
            }

            .page-what-to-expect div li {
                line-height: 40px;
                font-size: 14px;
            }

                .page-what-to-expect div li::marker {
                    font-size: 12px;
                }
    #home-intro #info {
        width: 100%;
        justify-content: center;
    }
    #home-intro a {
        max-width: 500px;
    }
}

@media (min-width: 1200px) {
    #home-instagram img {
        width: 12.5%;
    }
}