/* ========================================
   ROOT
======================================== */

:root {

    --cream: #fffaf8;
    --soft-pink: #f8eeeb;

    --pink: #d9a5a1;
    --pink-dark: #b77b77;

    --brown: #3f302e;
    --text: #4b3c39;
    --muted: #796b68;

    --white: #ffffff;

    --border: #eadbd7;

    --shadow:
        0 20px 60px rgba(74, 48, 43, .10);

    --serif:
        "Playfair Display",
        Georgia,
        serif;

    --sans:
        "DM Sans",
        Arial,
        sans-serif;
}



/* ========================================
   RESET
======================================== */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family: var(--sans);

    background: var(--cream);

    color: var(--text);

    line-height: 1.6;

    overflow-x: hidden;

}


a {

    color: inherit;

    text-decoration: none;

}


img {

    width: 100%;

    display: block;

}


button,
input,
select,
textarea {

    font-family: inherit;

}



/* ========================================
   CONTAINER
======================================== */

.container {

    width: min(
        1160px,
        calc(100% - 40px)
    );

    margin: auto;

}


.section-padding {

    padding: 110px 0;

}



/* ========================================
   TYPOGRAPHY
======================================== */

h1,
h2 {

    font-family: var(--serif);

    font-weight: 600;

    line-height: 1.08;

}


h1 {

    font-size:
        clamp(
            3.2rem,
            6vw,
            5.8rem
        );

}


h2 {

    font-size:
        clamp(
            2.5rem,
            4vw,
            4rem
        );

}


h1 em,
h2 em {

    color: var(--pink-dark);

    font-style: italic;

}


p {

    color: var(--muted);

}


.eyebrow {

    display: inline-block;

    color: var(--pink-dark);

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .19em;

    margin-bottom: 17px;

}



/* ========================================
   NAVBAR
======================================== */

.navbar {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 1000;

    background:
        rgba(
            255,
            250,
            248,
            .88
        );

    backdrop-filter: blur(16px);

    border-bottom:
        1px solid transparent;

    transition: .3s;

}


.navbar.scrolled {

    border-color: var(--border);

    box-shadow:
        0 8px 30px
        rgba(60, 42, 39, .05);

}


.nav-container {

    height: 84px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



/* Logo */

.logo {

    display: flex;

    align-items: center;

    gap: 11px;

}


.logo-circle {

    width: 39px;

    height: 39px;

    border-radius: 50%;

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

    display: grid;

    place-items: center;

    font-family: var(--serif);

    font-size: 1.2rem;

}


.logo-text strong {

    display: block;

    font-family: var(--serif);

    letter-spacing: .13em;

    font-size: 1rem;

    line-height: 1;

}


.logo-text span {

    display: block;

    font-size: .49rem;

    letter-spacing: .28em;

    margin-top: 5px;

    color: var(--pink-dark);

}



/* Navigation */

.nav-menu {

    display: flex;

    align-items: center;

    gap: 31px;

}


.nav-menu a:not(.nav-book) {

    font-size: .83rem;

    color: #655754;

    position: relative;

}


.nav-menu a:not(.nav-book)::after {

    content: "";

    position: absolute;

    left: 0;

    right: 100%;

    bottom: -7px;

    height: 1px;

    background: var(--pink-dark);

    transition: .25s;

}


.nav-menu a:hover::after,
.nav-menu a.active::after {

    right: 0;

}


.nav-book {

    padding: 12px 21px;

    background: var(--brown);

    color: white !important;

    border-radius: 30px;

    font-size: .8rem;

    transition: .25s;

}


.nav-book:hover {

    background: var(--pink-dark);

    transform: translateY(-2px);

}



/* Mobile button */

.menu-toggle {

    display: none;

    border: none;

    background: transparent;

    cursor: pointer;

}


.menu-toggle span {

    display: block;

    width: 25px;

    height: 2px;

    background: var(--brown);

    margin: 5px;

}



/* ========================================
   HERO
======================================== */

.hero {

    min-height: 100vh;

    padding:
        150px 0
        100px;

    display: flex;

    align-items: center;

    position: relative;

    overflow: hidden;

}


.hero-container {

    display: grid;

    grid-template-columns:
        1.02fr .98fr;

    align-items: center;

    gap: 70px;

}


.hero-content {

    position: relative;

    z-index: 2;

}


.hero-content p {

    max-width: 550px;

    font-size: 1.03rem;

    margin:
        27px 0
        34px;

}


.hero-buttons {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

}



/* Buttons */

.btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

    min-height: 53px;

    padding:
        0 25px;

    border-radius: 3px;

    border: 1px solid transparent;

    font-weight: 700;

    font-size: .82rem;

    cursor: pointer;

    transition: .25s;

}


.btn-primary {

    color: white;

    background: var(--brown);

}


.btn-primary:hover {

    background: var(--pink-dark);

    transform:
        translateY(-2px);

}


.btn-secondary {

    background:
        rgba(
            255,
            255,
            255,
            .55
        );

    border-color:
        var(--border);

}


.btn-secondary:hover {

    border-color: var(--pink);

    transform:
        translateY(-2px);

}



/* Hero Features */

.hero-features {

    display: flex;

    gap: 35px;

    margin-top: 55px;

    align-items: center;

    flex-wrap: wrap;

}


.made-for-you {

    min-width: 220px;

}


.made-for-you .feature-icon {

    width: 37px;

    height: 37px;

    border-radius: 50%;

    background: var(--soft-pink);

    display: grid;

    place-items: center;

    color: var(--pink-dark);

    flex-shrink: 0;

}
.feature {

    display: flex;

    align-items: center;

    gap: 10px;

}


.feature-icon {

    color: var(--pink-dark);

    font-size: 1.3rem;

}


.feature strong,
.feature small {

    display: block;

}


.feature strong {

    font-size: .76rem;

}


.feature small {

    color: var(--muted);

    font-size: .68rem;

}



/* Hero image */

.hero-image-wrapper {

    position: relative;

    max-width: 520px;

    justify-self: end;

}


.hero-image {

    width: min(
        100%,
        500px
    );

    aspect-ratio: .86;

    overflow: hidden;

    border-radius:
        250px
        250px
        20px
        20px;

    box-shadow: var(--shadow);

    position: relative;

    z-index: 1;

}


.hero-image img {

    height: 100%;

    object-fit: cover;

}


.hero-circle {

    position: absolute;

    width: 145px;

    height: 145px;

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

    border-radius: 50%;

    right: -45px;

    top: -35px;

    opacity: .65;

}



/* Decorations */

.hero-decoration {

    position: absolute;

    border-radius: 50%;

    background: var(--soft-pink);

}


.decoration-one {

    width: 480px;

    height: 480px;

    right: -230px;

    top: 110px;

}


.decoration-two {

    width: 180px;

    height: 180px;

    left: -100px;

    bottom: -80px;

}



/* ========================================
   INTRO
======================================== */

.intro {

    background: var(--white);

}


.intro-container {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 90px;

    align-items: center;

}


.intro-text {

    max-width: 530px;

}


.intro-text p + p {

    margin-top: 17px;

}


.text-link {

    display: inline-flex;

    gap: 15px;

    margin-top: 28px;

    font-weight: 700;

    font-size: .8rem;

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

    padding-bottom: 6px;

}



/* ========================================
   SECTION HEADING
======================================== */

.section-heading {

    display: flex;

    justify-content: space-between;

    gap: 40px;

    align-items: end;

    margin-bottom: 50px;

}


.section-heading > p {

    max-width: 330px;

    font-size: .88rem;

}


.centered {

    display: block;

    text-align: center;

}


.centered p {

    margin:
        17px auto 0;

    max-width: 500px;

}



/* ========================================
   SERVICES
======================================== */

.services {

    background: var(--cream);

}


.service-grid {

    display: grid;

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

    gap: 14px;

}


.service-card {

    min-height: 355px;

    padding: 27px;

    background: white;

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

    position: relative;

    transition: .3s;

}


.service-card:hover {

    transform:
        translateY(-7px);

    box-shadow: var(--shadow);

}


.service-card.featured {

    background: var(--brown);

    color: white;

}


.service-card.featured p {

    color: #d9cecb;

}


.service-card.featured
.service-bottom {

    border-color:
        rgba(
            255,
            255,
            255,
            .2
        );

}


.service-card.featured
.service-bottom a {

    color: #f1b9b5;

}


.service-number {

    position: absolute;

    right: 24px;

    top: 24px;

    font-size: .67rem;

    color: var(--pink-dark);

}


.service-icon {

    font-size: 1.7rem;

    color: var(--pink-dark);

    margin-bottom: 42px;

}


.service-card h3 {

    font-family: var(--serif);

    font-size: 1.45rem;

    margin-bottom: 13px;

}


.service-card p {

    font-size: .78rem;

    line-height: 1.8;

}


.service-bottom {

    position: absolute;

    left: 27px;
    right: 27px;
    bottom: 25px;

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

    padding-top: 15px;

    display: flex;

    justify-content: space-between;

    font-size: .67rem;

}


.service-bottom a {

    font-weight: 700;

    color: var(--pink-dark);

}



/* ========================================
   GALLERY
======================================== */

.gallery {

    background: white;

}


.filter-buttons {

    display: flex;

    justify-content: center;

    gap: 9px;

    margin:
        40px 0
        30px;

    flex-wrap: wrap;

}


.filter-btn {

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

    background: white;

    padding:
        9px 17px;

    border-radius: 30px;

    color: var(--muted);

    cursor: pointer;

    font-size: .72rem;

    transition: .25s;

}


.filter-btn:hover,
.filter-btn.active {

    background: var(--brown);

    color: white;

    border-color: var(--brown);

}


.gallery-grid {

    display: grid;

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

    grid-auto-rows: 270px;

    gap: 13px;

}


.gallery-item {

    position: relative;

    overflow: hidden;

    margin: 0;

    cursor: pointer;

}


.gallery-item.tall {

    grid-row: span 2;

}


.gallery-item img {

    height: 100%;

    object-fit: cover;

    transition:
        transform .5s;

}


.gallery-item:hover img {

    transform:
        scale(1.06);

}


.gallery-item::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            transparent 55%,
            rgba(
                30,
                20,
                18,
                .6
            )
        );

}


.gallery-item figcaption {

    position: absolute;

    z-index: 2;

    left: 18px;

    bottom: 16px;

    color: white;

    font-family: var(--serif);

    font-size: 1.1rem;

}


.gallery-item.hidden {

    display: none;

}



/* ========================================
   HOW IT WORKS
======================================== */

.how {

    background:
        var(--soft-pink);

}


.steps {

    display: grid;

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

    gap: 30px;

    margin-top: 65px;

}


.step {

    text-align: center;

    position: relative;

}


.step:not(:last-child)::after {

    content: "→";

    position: absolute;

    right: -25px;

    top: 12px;

    color: var(--pink-dark);

}


.step-number {

    width: 56px;

    height: 56px;

    margin:
        0 auto 23px;

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

    border-radius: 50%;

    display: grid;

    place-items: center;

    color: var(--pink-dark);

    font-size: .72rem;

}


.step h3 {

    font-family: var(--serif);

    font-size: 1.35rem;

}


.step p {

    margin-top: 8px;

    font-size: .77rem;

}



/* ========================================
   BOOKING
======================================== */

.booking {

    background:
        var(--cream);

}


.booking-box {

    background: var(--brown);

    color: white;

    padding: 70px;

    display: grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap: 70px;

}


.booking-information p {

    color: #d6c9c6;

    max-width: 390px;

    margin-top: 20px;

}


.booking-form {

    display: grid;

    gap: 15px;

}


.form-row {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 15px;

}


.booking-form label {

    display: grid;

    gap: 7px;

    font-size: .68rem;

    color: #ddcfcc;

}


.booking-form input,
.booking-form select,
.booking-form textarea {

    width: 100%;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .18
        );

    background:
        rgba(
            255,
            255,
            255,
            .07
        );

    color: white;

    padding: 13px 14px;

    outline: none;

    border-radius: 2px;

}


.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {

    border-color: var(--pink);

}


.booking-form input::placeholder,
.booking-form textarea::placeholder {

    color: #a99a96;

}


.booking-form select option {

    color: var(--brown);

}


.full-button {

    width: 100%;

    margin-top: 4px;

}


.form-note {

    text-align: center;

    color: #a99a96;

    font-size: .64rem;

}



/* ========================================
   CONTACT
======================================== */

.contact {

    background: white;

}


.contact-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 90px;

    align-items: center;

}


.contact-information p {

    margin-top: 20px;

    max-width: 400px;

}


.contact-cards {

    display: grid;

    gap: 10px;

}


.contact-card {

    display: grid;

    grid-template-columns:
        42px 1fr 20px;

    align-items: center;

    gap: 15px;

    padding: 18px;

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

    transition: .25s;

}


.contact-card:hover {

    transform:
        translateX(5px);

    border-color:
        var(--pink);

}


.contact-card > span {

    color: var(--pink-dark);

    font-size: 1.2rem;

}


.contact-card small,
.contact-card strong {

    display: block;

}


.contact-card small {

    font-size: .63rem;

    color: var(--muted);

}


.contact-card strong {

    font-size: .82rem;

}


.contact-card b {

    color: var(--pink-dark);

}



/* ========================================
   FOOTER
======================================== */

.footer {

    background: var(--brown);

    color: white;

    padding: 30px 0;

}


.footer-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

}


.footer p,
.footer-container > span {

    color: #ad9c98;

    font-size: .68rem;

}


.footer .logo-circle {

    border-color: #9e8580;

}


.footer .logo-text span {

    color: #d9aaa5;

}



/* ========================================
   TOAST
======================================== */

.toast {

    position: fixed;

    right: 25px;

    bottom: 25px;

    z-index: 2000;

    background: var(--brown);

    color: white;

    padding: 14px 18px;

    box-shadow: var(--shadow);

    transform:
        translateY(120px);

    opacity: 0;

    transition: .35s;

    font-size: .75rem;

}


.toast.show {

    transform:
        translateY(0);

    opacity: 1;

}



/* ========================================
   ANIMATION
======================================== */

.reveal {

    opacity: 0;

    transform:
        translateY(25px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}


.reveal.visible {

    opacity: 1;

    transform:
        translateY(0);

}



/* ========================================
   TABLET
======================================== */

@media (max-width: 980px) {

    .nav-menu {

        gap: 18px;

    }


    .hero-container {

        gap: 35px;

    }


    .service-grid {

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

    }


    .gallery-grid {

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

    }


    .booking-box {

        padding: 50px;

        gap: 45px;

    }

}



/* ========================================
   MOBILE
======================================== */

@media (max-width: 760px) {

    .section-padding {

        padding: 80px 0;

    }


    .container {

        width:
            min(
                100% - 28px,
                600px
            );

    }


    /* Mobile Navbar */

    .menu-toggle {

        display: block;

        z-index: 1001;

    }


    .nav-menu {

        position: fixed;

        top: 0;

        right: -100%;

        width:
            min(
                300px,
                82%
            );

        height: 100vh;

        background: white;

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        padding: 35px;

        box-shadow:
            -15px 0 40px
            rgba(
                0,
                0,
                0,
                .08
            );

        transition: .3s;

    }


    .nav-menu.open {

        right: 0;

    }


    .nav-menu a:not(.nav-book) {

        font-size: 1rem;

    }


    .nav-book {

        margin-top: 10px;

    }



    /* Hero */

    .hero {

        padding-top: 125px;

    }


    .hero-container {

        grid-template-columns: 1fr;

    }


    .hero-image-wrapper {

        justify-self: center;

        width: 90%;

        margin-top: 25px;

    }

    .hero-features {

        align-items: flex-start;

    }

    .made-for-you {

        min-width: 0;

    }


    .floating-card {

        left: auto;

        right: 10px;

        bottom: 25px;

        width: min(235px, calc(100% - 20px));

    }



    /* Intro */

    .intro-container {

        grid-template-columns: 1fr;

        gap: 40px;

    }



    /* Heading */

    .section-heading {

        display: block;

    }


    .section-heading > p {

        margin-top: 20px;

    }



    /* Gallery */

    .gallery-grid {

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

        grid-auto-rows: 220px;

    }



    /* Steps */

    .steps {

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

        gap: 40px 20px;

    }


    .step:not(:last-child)::after {

        display: none;

    }



    /* Booking */

    .booking-box {

        grid-template-columns: 1fr;

        padding:
            38px 25px;

    }



    /* Contact */

    .contact-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }



    /* Footer */

    .footer-container {

        flex-direction: column;

        text-align: center;

    }

}



/* ========================================
   SMALL MOBILE
======================================== */

@media (max-width: 480px) {

    h1 {

        font-size: 3rem;

    }


    .hero-features {

        gap: 17px;

        flex-direction: column;

    }


    .service-grid {

        grid-template-columns: 1fr;

    }


    .gallery-grid {

        grid-template-columns:
            1fr 1fr;

        grid-auto-rows: 190px;

    }


    .form-row {

        grid-template-columns: 1fr;

    }

}

/* ========================================
   DOUBLE W IMAGE LOGO
   ======================================== */

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: auto;
    height: 84px;
}

.logo-image {
    width: 130px !important;
    height: 70px !important;
    max-width: 130px !important;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* Footer logo */
.footer .logo {
    height: auto;
}

.footer .logo-image {
    width: 120px !important;
    height: 65px !important;
    max-width: 120px !important;
}

/* Mobile */
@media (max-width: 760px) {
    .logo {
        height: 70px;
    }

    .logo-image {
        width: 105px !important;
        height: 58px !important;
        max-width: 105px !important;
    }

    .footer .logo-image {
        width: 105px !important;
        height: 58px !important;
        max-width: 105px !important;
    }
}