* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 1rem;
    line-height: 1em;
    font-family: 'DM Sans';
    transition: all 200ms ease-in-out;
}

html { scroll-behavior: smooth; }

body {
    overflow-x: hidden;
    color: #0f0f0f;
}

::selection {
  color: #ffffff;
  background: #71a37c;
}

h1 {
    font-size: 2.8rem;
    letter-spacing: -0.02em;
    font-weight: 400;
    font-family: 'DM Serif Display';
}

h2 {
    font-size: 1.3rem;
    color: #71a37c;
    font-weight: 300;
    font-style: italic;
}

#navbar-pages-button { display: none; }

#navbar-pages-button span { font-size: 1.2rem; }

#navbar-ceremonies-button span { font-size: 0.75rem; }

#navbar-ceremonies-button.open span { transform: rotate(180deg); }

#navbar-ceremonies-menu, #navbar-pages-menu {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: fixed;
    top: 70px;
    padding: 15px 23px;
    border-radius: 10px;
    background: #ffffff99;
    backdrop-filter: blur(4px);
    z-index: 9999;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-10px);
    pointer-events: none;
}

#navbar-ceremonies-menu { right: 170px; }

#navbar-pages-menu {
    right: 0;
    border-radius: 10px 0 0 10px;
}

#navbar-ceremonies-menu.show, #navbar-pages-menu.show {
    max-height: 300px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

body:has(> nav.top-scroll) #navbar-ceremonies-menu,
body:has(> nav.top-scroll) #navbar-pages-menu {
    top: 86px;
    background: linear-gradient(135deg, #07120ee6 0%, #07120e 100%);
    backdrop-filter: none;
}

#navbar-ceremonies-menu h3, #navbar-pages-menu h3 {
    margin-left: -5px;
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    line-height: 1.5em;
    font-weight: 500;
    color: #0f0f0f99;
}

body:has(> nav.top-scroll) #navbar-ceremonies-menu h3,
body:has(> nav.top-scroll) #navbar-pages-menu h3 {
    color: #ffffff66;
}

#navbar-ceremonies-menu a span,
#navbar-pages-menu a span {
    font-size: 9px;
}

nav {
    position: fixed;
    display: flex;
    width: 100vw;
    align-items: center;
    justify-content: end;
    padding: 10px 38px;
    gap: 22px;
    background: #ffffff99;
    box-shadow: 0 0 2px #00000040;
    backdrop-filter: blur(4px);
    z-index: 9999;
}

nav.top-scroll {
    padding: 16px 38px;
    background: linear-gradient(90deg, #07120e00 0%, #07120e 75%);
    box-shadow: none;
    backdrop-filter: none;
}

nav a, #navbar-ceremonies-menu a, #navbar-pages-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #0f0f0f;
    font-size: 1rem;
    line-height: 2em;
    font-weight: 500;
}

nav.top-scroll a,
body:has(> nav.top-scroll) #navbar-ceremonies-menu a,
body:has(> nav.top-scroll) #navbar-pages-menu a {
    color: #ffffff;
}

#navbar-ceremonies-menu a:hover,
#navbar-pages-menu a:hover {
    transform: translateX(3px);
}

nav a:hover { transform: translateY(-3px); }

nav a#enquiries-button {
    padding: 4px 24px;
    border-radius: 100px;
    background: #0f0f0f;
    color: #ffffff;
}

nav.top-scroll #enquiries-button {
    padding: 6px 24px;
    background: #ffffff;
    color: #0f0f0f
}

#hero-wrapper {
    display: flex;
    flex-direction: column;
    height: 62vh;
    color: #ffffff;
    overflow-x: hidden;
}

#hero {
    flex-direction: column;
    flex-grow: 1;
    align-content: center;
    min-width: 1920px;
    background: linear-gradient(90deg, #000000b3 0%, #00000000 50%);
    padding: 0 120px;
}

#hero h3 {
    max-width: 780px;
    font-size: 6.7rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    font-family: 'DM Serif Display';
}

#hero h4 {
    max-width: 780px;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #aed4ae;
}

#hero p {
    max-width: 780px;
    font-size: 1.25rem;
    font-weight: 300;
    letter-spacing: 0.01em;
    font-style: italic;
    color: #ffffffb3;
}

#hero #buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 74px;
}

#hero #buttons a {
    padding: 18px 32px;
    border-radius: 100px;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 500;
    color: #ffffff;
    box-shadow: 0 1px 2px #00000040;
    background: linear-gradient(135deg, #07120e 0%, #07120e80 100%);
    cursor: pointer;
}

#hero #buttons a:hover { transform: translateY(-3px); }

#hero #buttons a:not(#enquiries-button):hover { background-color: #71a37c; }

#hero #buttons a#enquiries-button {
    color: #0f0f0f;
    background: #ffffff;
}

#read-more-button {
    display: flex;
    position: absolute;
    top: calc(86vh - 30px);
    align-self: center;
    width: 160px;
    justify-content: center;
    z-index: 2;
}

#read-more-button a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 60px;
    overflow: hidden;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 500;
    background: #ffffff;
    color: #71a37c;
    box-shadow: 0 1px 2px #00000040;
}

#read-more-button a p {
    font-size: 1.2rem;
    text-wrap-mode: nowrap;
}

#read-more-button a span { display: none; }

#read-more-button:hover a { width: 80px; }

#read-more-button:hover a p { display: none; }

#read-more-button:hover a span { display: inline-block; }

section {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 92px 40px;
    text-align: center;
    align-items: center;
    overflow: hidden;
}

section.white { background: #ffffff; }

section.grey { background: #f2f2f2; }

section .vine {
    position: absolute;
    width: 36vw;
    height: 48vw;
    background: url('../images/vine.png') center / contain no-repeat;
    mix-blend-mode: multiply;
    opacity: 0.5;
}

.vine.top.left {
    top: 0;
    left: -18vw;
    transform: translateY(-50%) rotate(216deg);
}

.vine.top.right {
    top: 0;
    right: -17vw;
    transform: translateY(-50%) rotate(39deg);
}

.vine.bottom.left {
    bottom: 0;
    left: -18vw;
    transform: translateY(50%) rotate(216deg);
}

.vine.bottom.right {
    bottom: 0;
    right: -17vw;
    transform: translateY(50%) rotate(39deg);
}

section .section-title, section .section-content {
    display: flex;
    width: 100%;
    max-width: 1000px;
    transform: translateY(60px);
    opacity: 0;
    transition: transform 1000ms ease-in-out, opacity 1000ms ease-in-out;
    will-change: transform, opacity;
}

section .section-title {
    flex-direction: column;
    gap: 10px;
}

section .section-title.appear, section .section-content.appear {
    transform: translateY(0);
    opacity: 1;
}

#welcome { flex-direction: column; }

#welcome a {
    align-self: center;
    align-content: center;
    padding: 0 72px;
    margin-top: 54px;
    width: fit-content;
    height: 46px;
    border-radius: 100px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;
    background: #71a37c;
    color: #ffffff;
}

#welcome div a:hover { opacity: 0.8; }

#top-wrapper .outer-content {
    display: none;
    padding: 0 40px;
    transform: translateY(60px);
    opacity: 0;
    transition:
        transform 1000ms ease-in-out,
        opacity 1000ms ease-in-out,
        background 200ms ease-in-out;
    will-change: transform, opacity, background;
}

#top-wrapper .outer-content.appear {
    transform: translateY(0);
    opacity: 1;
}

#top {
    min-height: 420px;
    border-radius: 10px;
    text-align: left;
    justify-content: start;
}

#top-background {
    display: flex;
    width: 100%;
    border-radius: 10px;
    background: #ffffffcc;
    backdrop-filter: blur(4px);
    mask: linear-gradient(90deg, #ffffff 50%, #ffffff00 65%);
}

#top-background div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50%;
    padding: 60px;
}

#top-background div .quote {
    display: flex;
    flex-direction: column;
    margin-top: 54px;
    gap: 28px;
    text-align: center;
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    font-family: 'DM Serif Text';
}

#top-background div .quote i {
    font-size: 1rem;
    letter-spacing: 0.01em;
    font-weight: 300;
    color: #0f0f0fcc;
}

#top-background div a {
    align-content: center;
    padding: 0 32px;
    margin-top: 54px;
    width: fit-content;
    height: 46px;
    border-radius: 100px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;
    background: #71a37c;
    color: #ffffff;
}

#top-background div a:hover { opacity: 0.8; }

#top-background div ul, #prices ul {
    margin-top: 10px;
    margin-right: auto;
}

#prices div ul {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
}

#top-background div ul li, #prices ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
}

#top-background div ul li + li,
#prices ul li + li {
    margin-top: 6px;
}

#top-background div ul li::before,
#prices ul li::before {
    content: '';
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    color: #71a37c;
    background: url('../images/leaf_green.svg') center / contain no-repeat;
}

#prices {
    flex-direction: column;
    text-align: left;
}

#prices p b {
    font-size: 1.2rem;
    font-weight: 600;
    color: #0f0f0f;
}

#prices-tabs {
    display: flex;
    height: 60px;
    margin-top: 40px;
    align-items: center;
    border-radius: 10px;
    background: linear-gradient(120deg, #f2f2f2 0%, #f2f2f299 100%);
}

#prices-tabs div {
    width: 33.33%;
    font-size: 1.1rem;
    color: #0f0f0fb3;
    text-align: center;
    cursor: pointer;
    z-index: 1;
}

#prices-tabs div.active { color: #ffffff; }
#prices-tabs #tab-background {
    position: absolute;
    left: 0;
    height: 60px;
    border-radius: 10px;
    background: #71a37c;
}

#prices-content {
    margin-top: 36px;
    padding: 48px;
    border-radius: 10px;
    background: linear-gradient(120deg, #f2f2f2 0%, #f2f2f299 100%);
}

#prices-content div {
    display: none;
    flex-direction: column;
    gap: 36px;
    text-align: center;
    color: #0f0f0fb3;
}

#prices-content div.active { display: flex; }

#quote-wrapper {
    align-items: end;
    padding: 0;
    background: url('../images/IMG_29281.JPG') 50% 30% / cover no-repeat;
}

#quote-background {
    display: flex;
    width: 100%;
    background: #ffffffcc;
    backdrop-filter: blur(4px);
    mask: linear-gradient(90deg, #ffffff00 30%, #ffffff 45%);
    justify-content: end;
}

#quote {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    gap: 28px;
    width: 55%;
    min-height: 600px;
    padding: 80px;
    text-align: right;
    color: #3a3a3a;
}

#quote p {
    font-size: 2.2rem;
    letter-spacing: -0.02em;
    font-family: 'DM Serif Text';
    transform: translateY(60px);
    opacity: 0;
    transition:
        transform 1000ms ease-in-out,
        opacity 1000ms ease-in-out;
    will-change: transform, opacity;
}

#quote i {
    font-size: 1.6rem;
    letter-spacing: 0.01em;
    font-weight: 300;
    color: #3a3a3acc;
    transform: translateY(60px);
    opacity: 0;
    transition:
        transform 1000ms ease-in-out,
        opacity 1000ms ease-in-out;
    will-change: transform, opacity;
}

#quote p.appear, #quote i.appear {
    transform: translateY(0);
    opacity: 1;
}

#ceremonies {
    flex-direction: column;
    gap: 10px;
}

#ceremonies .ceremony-card {
    padding: 20px;
    border-radius: 10px;
    text-align: left;
    background: linear-gradient(120deg, #ffffff 0%, #ffffff99 100%);
}

#ceremonies .ceremony-card div {
    display: flex;
    gap: 12px;
    align-items: center;
    cursor: pointer;
}

#ceremonies .ceremony-card div h3 {
    margin-left: auto;
    font-size: 1.2rem;
    font-weight: 700;
    color: #71a37c;
}

#ceremonies .ceremony-card div span { font-size: 0.75rem; }

#ceremonies .ceremony-card p {
    display: flex;
    flex-direction: column;
    gap: 26px;
    max-height: 0;
    overflow: hidden;
    margin: 0 0 0 24px;
    line-height: 1.2em;
    color: #0f0f0fb3;
    opacity: 0;
}

#ceremonies .ceremony-card p a {
    align-self: center;
    align-content: center;
    width: fit-content;
    height: 46px;
    padding: 0 32px;
    border: solid 2.5px #71a37c;
    border-radius: 100px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;
    color: #71a37c;
}

#ceremonies .ceremony-card p a:hover { opacity: 0.8; }

#ceremonies .ceremony-card.open div span { transform: rotate(180deg); }

#ceremonies .ceremony-card.open p {
    max-height: 500px;
    opacity: 1;
    margin: 16px 0 0 24px;
}

#ceremonies #buttons {
    display: flex;
    gap: 12px;
    margin-top: 30px;
    justify-content: center;
}

#ceremonies #buttons a {
    align-content: center;
    height: 46px;
    padding: 0 32px;
    border-radius: 100px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;;
    color: #ffffff;
    background: #71a37c;
    cursor: pointer;
}

#ceremonies #buttons a:hover { opacity: 0.8; }

#prices-content h3 {
    font-size: 1.4rem;
    font-weight: 400;
    font-family: 'DM Serif Text';
    color: #0f0f0f;
}

#prices-content h4 {
    text-align: right;
    font-size: 2rem;
    font-weight: 700;
    color: #71a37c;
}

#prices-wrapper #enquiries-button,
#top-wrapper #prices-button {
    align-content: center;
    height: 46px;
    padding: 0 72px;
    border-radius: 100px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;;
    color: #ffffff;
    background: #71a37c;
    cursor: pointer;
    transform: translateY(60px);
    opacity: 0;
    transition:
        transform 1000ms ease-in-out,
        opacity 1000ms ease-in-out,
        background 200ms ease-in-out;
    will-change: transform, opacity, background;
}

#prices-wrapper #enquiries-button,
#top-wrapper #prices-button.appear {
    transform: translateY(0);
    opacity: 1;
}

#prices-wrapper #enquiries-button:hover,
#top-wrapper #prices-button:hover {
    background: #8db596;
}

#enquiries {
    border-radius: 10px;
    background: url('../images/IMG_29381.JPG') 0% 0% / cover no-repeat;
}

#enquiries #enquiries-background {
    display: flex;
    width: 100%;
    border-radius: 10px;
    background: #ffffffcc;
    backdrop-filter: blur(4px);
    mask: linear-gradient(90deg, #ffffff 45%, #ffffff00 60%);
}

#enquiries form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 40px 60px;
    width: 45%;
    text-align: left;
}

#enquiries form label {
    font-size: 0.9rem;
    color: #0f0f0fcc;
}

#enquiries form ::placeholder { color: #0f0f0f99; }

#enquiries form input, select, textarea {
    margin-bottom: 10px;
    padding: 8px 20px;
    height: 38px;
    border-radius: 10px;
    border: none;
    outline: 1px solid #0f0f0f1a;
    background: linear-gradient(120deg, #ffffff 0%, #ffffff66 100%);
}

#enquiries form select {
    appearance: none;
    color: #0f0f0f80;
}

#enquiries form select:valid { color: #0f0f0f; }

#enquiries form select option { color: #0f0f0f; }

#enquiries form span.select-arrow {
    height: 0;
    margin-left: 65%;
    transform: translate(-24px, -45px);
    text-align: right;
    font-size: 0.75rem;
    color: #0f0f0f80;
    pointer-events: none;
}

#enquiries form input[type="date"] { color: #0f0f0f80; }

#enquiries form input[type="date"]:valid { color: #0f0f0f; }

#enquiries form input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.5; }

#enquiries form textarea {
    resize: vertical;
    min-height: 100px;
}

#enquiries form button {
    width: 100%;
    max-width: 180px;
    padding: 12px 0;
    border: none;
    border-radius: 20px;
    align-self: center;
    font-weight: 500;
    color: #ffffff;
    background: #71a37c;
    cursor: pointer;
}

#enquiries-wrapper.expanded { padding: 100px 0 0 0; }

#enquiries-wrapper.expanded #enquiries {
    max-width: none;
    border-radius: 0;
    background: url('../images/IMG_29301.JPG') 0% 40% / cover no-repeat;
}

#enquiries-wrapper.expanded #enquiries #enquiries-background {
    border-radius: 0;
}

#enquiries-wrapper.expanded #enquiries form {
    max-width: 500px;
    margin: 120px 50% 120px max(60px, 16%);
}

#enquiries-wrapper.expanded #enquiries #enquiries-background {
    mask: linear-gradient(90deg, #ffffff 55%, #ffffff00 70%);
}

footer {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 78px 40px;
    justify-content: center;
    background: #aed4ae;
}

footer div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

footer div b { font-weight: 400; }

footer div p, footer div a {
    text-decoration: none;
    color: #0f0f0f80;
}

@media (max-width: 920px) {
    nav a { display: none; }

    nav a#enquiries-button { display: flex; }

    #navbar-pages-button {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    nav {
        justify-content: end;
        gap: 12px;
    }
    
    section:has(#top) { padding: 92px 0; }
    
    #top {
        width: 100%;
        max-width: none;
        padding: 0;
        border-radius: 0;
    }

    #top-background { border-radius: 0; }

    #top-background div .inner-content { display: none; }

    #top-wrapper .outer-content { display: block; }

    #quote {
        width: 100%;
        align-items: start;
        text-align: left;
    }

    #quote-background { mask: none; }

    #enquiries-wrapper { padding: 40px 0 0 0; }

    #enquiries-wrapper .section-title { padding: 0 40px; }

    #enquiries {
        align-items: center;
        max-width: none;
        border-radius: 0;
    }

    #enquiries form {
        width: 100%;
        max-width: 500px;
    }

    #enquiries #enquiries-background {
        mask: none !important;
        border-radius: 0 !important;
        justify-content: center !important;
    }

    #enquiries-wrapper.expanded #enquiries form {
        margin: 120px 60px;
    }
}

@media (max-width: 780px) {
    #hero h3 { font-size: calc((100vw - 240px) * 0.1985185185); }

    #hero h4 { font-size: calc((100vw - 240px) * 0.05925925926); }

    #hero p { font-size: calc((100vw - 240px) * 0.03703703704); }
}

@media (max-width: 600px) {
    #hero-wrapper { background-position: 60% 50% !important; }

    #hero {
        min-width: 0;
        padding: 0 40px;
        background: linear-gradient(180deg, #000000b3 0%, #00000000 70%);
    }

    #hero h3 { font-size: calc((100vw - 80px) * 0.1785185185); }

    #hero h4 { font-size: calc((100vw - 80px) * 0.06925925926); }

    #hero p { font-size: calc((100vw - 80px) * 0.05703703704); }

    #top-background { mask: none; }

    #top-background div { width: 100%; }
}