:root {
    --color-bg: #e3deda;
    --color-bg-secondary: #c5b9ad;
    --color-bg-alt: #d9d3cc;
    --color-text: #705f4d;
    --color-accent: #a68250;
    --border: #d8d2cc;
    --font-display: "Cormorant Garamond", serif;
    --font-body: "Manrope", sans-serif;
    --container-width: 1380px;
    --page-padding: clamp(24px, 5vw, 80px);
    --transition-eclat: 600ms cubic-bezier(.22, .61, .36, 1);
}




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

html {
    scroll-behavior: smooth;
}

body {
    background: var( --color-bg);
    color: var(--color-text);
    font-family: "Manrope", sans-serif;
    overflow-x: hidden;
}


html,
body {
    overflow-x: hidden;
}

section {
    overflow: hidden;
}


.container {
    width: min( calc(100% - (var(--page-padding) * 2)), var(--container-width) );
    margin-inline: auto;
}

/* NAVBAR */

.navbar {
    width: 100%;
    backdrop-filter: blur(14px);
    background: var(--color-bg);
    border-bottom: 1px solid var(--border);
    color: var(--color-text);
    padding-top: 40px;
    padding-bottom: 40px;
}

    .navbar.scrolled {
        background: var(--bg-soft);
        box-shadow: 0 10px 30px rgba(0,0,0,.35);
    }


/*.navbar .container {
        width: min( calc(100% - (var(--page-padding) * 2)), var(--container-width) );
        margin-inline: auto;
    }*/

.nav-wrapper {
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: white;
}

    .logo img {
        width: 260px;
    }


.menu {
    display: flex;
    gap: 35px;
}

    .menu a {
        color: var(--color-text);
        text-decoration: none;
        font-family: "Cormorant Garamond", serif;
        font-size: 1.8rem;
        transition: .3s;
    }

        .menu a:hover {
            color: var(--color-accent);
        }

        .menu a.active {
            color: var(--color-accent);
            border-bottom: 1px solid var(--color-accent);
        }


.btn {
    background: #a68250;
    color: #fff;
    padding: 16px 38px;
    border-radius: 999px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Cormorant Garamond", serif;
    letter-spacing: 1px;
    font-size: 1.1rem;
    /*font-weight: 600;*/
    letter-spacing: .18em;
    transition: .3s;
    text-transform: uppercase;
    border: none;
}

    .btn:hover {
        background: #8f7043;
        cursor: pointer;
    }

/* MENU MOVIL */

.menu-toggle {
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 16px;
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-size: 1.2rem;
    cursor: pointer;
    display: none;
    transition: .3s;
}

    .menu-toggle:hover {
        background: var(--color-bg-secondary);
        color: #fff;
    }


/*OPENING*/

.opening {
    position: relative;
    display: flex;
    /*min-height: calc(100svh - 92px);*/
    padding: 60px 0 60px;
    overflow: hidden;
    background: var(--color-bg);
    color: var(--color-text);
}

/*.opening .container {
        width: min( calc(100% - (var(--page-padding) * 2)), var(--container-width) );
        margin-inline: auto;
    }*/

.opening-grid {
    display: grid;
    grid-template-columns: minmax(340px, .78fr) minmax(560px, 1.22fr);
    align-items: center;
    gap: clamp(40px, 6vw, 50px);
    /*width: 100%;*/
}

.opening-content {
    position: relative;
    z-index: 2;
    max-width: 530px;
}

.opening-eyebrow {
    display: block;
    margin-bottom: 28px;
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.opening-title {
    max-width: 720px;
    margin: 0;
    font-family: var(--font-display);
    font-size: 5.4rem;
    font-weight: 500;
    line-height: 1.1em;
    letter-spacing: -.045em;
    color: var(--color-text);
    text-wrap: balance;
}

    .opening-title span {
        display: block;
        font-style: italic;
        font-weight: 400;
        padding-left: 10px;
    }

.opening-anchor {
    width: 96px;
    height: 1px;
    margin: 50px 0 40px;
    background: var(--color-accent);
    transform-origin: left center;
}

.opening-description {
    max-width: 420px;
    margin: 0 0 38px;
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.15vw, 1.15rem);
    font-weight: 400;
    line-height: 1.75;
    color: var(--color-text);
}

.opening-button {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    padding: 0 34px;
    border: 1px solid var(--color-accent);
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-body);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color var(--transition-eclat), border-color var(--transition-eclat), transform var(--transition-eclat);
}

    .opening-button:hover {
        border-color: #8e6d42;
        background: #8e6d42;
        transform: translateY(-2px);
    }

.opening-visual {
    position: relative;
    overflow: hidden;
    /*border-radius: 28px;*/
    aspect-ratio: 1.5 / 1;
}

    .opening-visual::after {
        position: absolute;
        inset: 0;
        content: "";
        pointer-events: none;
        background: linear-gradient( 90deg, rgba(112, 95, 77, .05), transparent 22% );
    }

    .opening-visual img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: 50% 50%;
        transition: transform 1.4s cubic-bezier(.22, .61, .36, 1);
    }

    .opening-visual:hover img {
        transform: scale(1.018);
    }

.opening-footer {
    position: absolute;
    right: 0;
    bottom: 28px;
    left: 0;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    font-family: var(--font-body);
    font-size: .67rem;
    font-weight: 500;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: rgba(112, 95, 77, .72);
}

.opening-scroll {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

    .opening-scroll::after {
        width: 48px;
        height: 1px;
        content: "";
        background: currentColor;
    }


/*==================================================
    EDITORIAL NOTE / INTERLUDE
==================================================*/

.editorial-note {
    position: relative;
    display: flex;
    align-items: center;
    /*min-height: 62vh;*/
    padding: 120px 0 120px;
    overflow: hidden;
    background: var(--color-bg);
    color: var(--color-text);
}

.editorial-note-inner {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    /*width: 100%;*/
}

.editorial-note-quote {
    max-width: 760px;
    margin: 0;
    color: rgba(112, 95, 77, .88);
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.05;
    letter-spacing: -.025em;
}

    .editorial-note-quote span {
        display: block;
    }



/*==================================================
    FEATURED BRIDAL WORK
==================================================*/

.featured-work {
    position: relative;
    padding: 40px 0 40px;
    background: var(--color-bg);
}

.featured-work-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    grid-template-rows: minmax(260px, 34vw) minmax(240px, 30vw);
    gap: 54px 64px;
}

.featured-photo {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--color-bg-alt);
}

    .featured-photo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 1.4s cubic-bezier(.22, .61, .36, 1);
    }

    .featured-photo:hover img {
        transform: scale(1.018);
    }


/* Foto grande izquierda */

.featured-photo-large {
    grid-column: 1;
    grid-row: 1 / span 2;
}

    .featured-photo-large img {
        object-position: center;
    }


/* Foto pequeña superior derecha */

.featured-photo-top {
    grid-column: 2;
    grid-row: 1;
    width: 90%;
    justify-self: end;
    align-self: start;
    aspect-ratio: 4 / 5;
}


/* Foto pequeña inferior */

.featured-photo-bottom {
    /*grid-column: 2;
    grid-row: 2;
    width: 62%;
    justify-self: start;
    align-self: end;
    aspect-ratio: 3 / 4;*/
    grid-column: 2;
    grid-row: 2;
    width: 90%;
    justify-self: start;
    aspect-ratio: 4/5;
}





/*==================================================
    PORTFOLIO LINK
==================================================*/

.featured-work-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 120px;
}

.editorial-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-bottom: 8px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .18em;
    text-decoration: none;
    text-transform: uppercase;
}

    .editorial-link::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 1px;
        content: "";
        background: var(--color-accent);
        transform: scaleX(.35);
        transform-origin: left center;
        transition: transform .5s cubic-bezier(.22, .61, .36, 1);
    }

    .editorial-link:hover::after {
        transform: scaleX(1);
    }


/*==================================================
    SECOND EDITORIAL NOTE
==================================================*/

.editorial-note-second {
    /*min-height: 58vh;*/
    padding-top: 40px;
    padding-bottom: 120px;
}


/*==================================================
    MEET ALEJANDRA
==================================================*/

.meet-alejandra {
    position: relative;
    padding: 150px 0;
    background: var(--color-bg-secondary);
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.meet-alejandra-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 32%);
    align-items: center;
    gap: 110px;
}


/*==================================================
    CONTENT
==================================================*/

.meet-alejandra-content {
    max-width: 760px;
}

.section-eyebrow {
    display: block;
    margin-bottom: 28px;
    color: var(--color-accent);
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.meet-alejandra-title {
    max-width: 730px;
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 4.7rem;
    font-weight: 500;
    line-height: .94;
    letter-spacing: -.035em;
}

    .meet-alejandra-title span {
        display: block;
        font-style: italic;
        font-weight: 400;
    }

.meet-alejandra-line {
    width: 74px;
    height: 1px;
    margin: 38px 0 32px;
    background: var(--color-accent);
}

.meet-alejandra-copy {
    max-width: 650px;
}

    .meet-alejandra-copy p {
        margin: 0;
        color: rgba(112, 95, 77, .92);
        font-family: var(--font-body);
        font-size: 1.15rem;
        font-weight: 400;
        line-height: 1.85;
    }

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


/*==================================================
    EDITORIAL DETAILS
==================================================*/

.meet-alejandra-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin-top: 52px;
    padding-top: 28px;
    border-top: 1px solid rgba(112, 95, 77, .22);
}

.meet-detail {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .meet-detail strong {
        color: var(--color-text);
        font-family: var(--font-display);
        font-size: 1.75rem;
        font-weight: 500;
        line-height: 1.15;
    }

    .meet-detail span {
        max-width: 180px;
        color: rgba(112, 95, 77, .72);
        font-family: var(--font-body);
        font-size: .80rem;
        font-weight: 500;
        line-height: 1.55;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

.meet-alejandra-link {
    margin-top: 42px;
}


/*==================================================
    PHOTO
==================================================*/

.meet-alejandra-photo {
    align-self: center;
    width: 100%;
    margin: 42px 0 0;
    overflow: hidden;
    background: var(--color-bg);
    aspect-ratio: 3 / 4;
}

    .meet-alejandra-photo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 1.4s cubic-bezier(.22, .61, .36, 1);
    }

    .meet-alejandra-photo:hover img {
        transform: scale(1.018);
    }



/*==================================================
    4 ESSENTIALS
==================================================*/

.essentials {
    padding: 150px 0 170px;
    background: var(--color-bg);
    color: var(--color-text);
}

/*.essentials-inner {
    width: 100%;
}*/


/*==================================================
    HEADER
==================================================*/

.essentials-header {
    text-align: center;
    margin-bottom: 150px;
}

.essentials-display {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 18px;
    font-family: var(--font-display);
    color: var(--color-text);
}

.essentials-number {
    display: inline-block;
    font-size: 9.5rem;
    font-weight: 400;
    line-height: .72;
    letter-spacing: -.06em;
}

.essentials-word {
    display: inline-block;
    font-size: 4.8rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.025em;
}

.essentials-subtitle {
    margin: 28px 0 0;
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--color-text);
}


/*==================================================
    LIST
==================================================*/

.essentials-list {
    display: flex;
    flex-direction: column;
    gap: 145px;
}

.essential-item {
    width: 100%;
    max-width: 560px;
}

.essential-left {
    align-self: flex-start;
}

.essential-right {
    align-self: flex-end;
}

.essential-heading {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-bottom: 18px;
}

.essential-number {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: 2.7rem;
    font-weight: 400;
    line-height: 1;
    color: var(--color-accent);
}

.essential-heading h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.025em;
    color: var(--color-text);
}

.essential-item p {
    max-width: 480px;
    margin: 0 0 0 62px;
    font-family: var(--font-body);
    font-size: 1.08rem;
    font-weight: 400;
    line-height: 1.75;
    color: rgba(112, 95, 77, .9);
}


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

@media (max-width: 980px) {

    .essentials {
        padding: 125px 0 140px;
    }

    .essentials-header {
        margin-bottom: 120px;
    }

    .essentials-number {
        font-size: 8rem;
    }

    .essentials-word {
        font-size: 4rem;
    }

    .essentials-subtitle {
        font-size: 2.35rem;
    }

    .essentials-list {
        gap: 115px;
    }

    .essential-item {
        max-width: 520px;
    }

    .essential-heading h3 {
        font-size: 2.65rem;
    }

    .essential-item p {
        font-size: 1rem;
    }
}


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

@media (max-width: 640px) {

    .essentials {
        padding: 100px 0 115px;
    }

    .essentials-header {
        margin-bottom: 90px;
    }

    .essentials-display {
        gap: 10px;
    }

    .essentials-number {
        font-size: 5.8rem;
    }

    .essentials-word {
        font-size: 2.9rem;
    }

    .essentials-subtitle {
        margin-top: 18px;
        font-size: 2rem;
        line-height: 1.15;
    }

    .essentials-list {
        gap: 85px;
    }

    .essential-item,
    .essential-left,
    .essential-right {
        width: 100%;
        max-width: 100%;
        align-self: stretch;
    }

    .essential-heading {
        gap: 12px;
        margin-bottom: 14px;
    }

    .essential-number {
        font-size: 2.15rem;
    }

    .essential-heading h3 {
        font-size: 2.35rem;
    }

    .essential-item p {
        max-width: 100%;
        margin-left: 47px;
        font-size: .96rem;
        line-height: 1.7;
    }
}


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

.services-home {
    position: relative;
    padding: 160px 0 170px;
    background: var(--color-bg-alt);
    color: var(--color-text);
}


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

.services-header {
    max-width: 760px;
    margin-bottom: 110px;
}

.services-title {
    max-width: 760px;
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 4.8rem;
    font-weight: 500;
    line-height: .95;
    letter-spacing: -.035em;
}

    .services-title span {
        display: block;
        font-style: italic;
        font-weight: 400;
    }


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

.services-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 38%);
    align-items: start;
    gap: 110px;
}


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

.services-list {
    border-top: 1px solid rgba(112, 95, 77, .22);
}

.service-item {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 20px;
    padding: 34px 0;
    border-bottom: 1px solid rgba(112, 95, 77, .22);
    cursor: pointer;
    outline: none;
}

    .service-item::after {
        position: absolute;
        right: 0;
        bottom: -1px;
        left: 0;
        height: 1px;
        content: "";
        background: var(--color-accent);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 700ms cubic-bezier(.22, .61, .36, 1);
    }

    .service-item:hover::after,
    .service-item.active::after,
    .service-item:focus-visible::after {
        transform: scaleX(1);
    }


/*==================================================
    SERVICE NUMBER
==================================================*/

.service-index {
    padding-top: 8px;
    color: rgba(166, 130, 80, .8);
    font-family: var(--font-body);
    font-size: .67rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .18em;
}


/*==================================================
    SERVICE CONTENT
==================================================*/

.service-content h3 {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 2.65rem;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.025em;
    transition: color 500ms ease, transform 600ms cubic-bezier(.22, .61, .36, 1);
}

.service-item:hover h3,
.service-item.active h3,
.service-item:focus-visible h3 {
    color: var(--color-accent);
    transform: translateX(8px);
}


/*==================================================
    SERVICE DESCRIPTION
==================================================*/

.service-description {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 700ms cubic-bezier(.22, .61, .36, 1), opacity 500ms ease;
}

    .service-description p {
        max-width: 520px;
        min-height: 0;
        margin: 0;
        overflow: hidden;
        color: rgba(112, 95, 77, .86);
        font-family: var(--font-body);
        font-size: .98rem;
        font-weight: 400;
        line-height: 1.75;
    }

.service-item.active .service-description {
    grid-template-rows: 1fr;
    opacity: 1;
}

    .service-item.active .service-description p {
        padding-top: 16px;
    }


/*==================================================
    SERVICE PREVIEW
==================================================*/

.service-preview {
    position: sticky;
    top: 125px;
    width: 100%;
    margin: 0;
}

.service-preview-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--color-text);
    aspect-ratio: 3 / 4;
}

    .service-preview-image::after {
        position: absolute;
        inset: 0;
        content: "";
        pointer-events: none;
        background: linear-gradient( to top, rgba(60, 45, 30, .08), transparent 30% );
    }

.service-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 1;
    transition: opacity 650ms ease, transform 1.4s cubic-bezier(.22, .61, .36, 1);
}

.service-preview.is-changing img {
    opacity: 0;
    transform: scale(1.012);
}

.service-preview figcaption {
    margin-top: 18px;
    color: rgba(112, 95, 77, .72);
    font-family: var(--font-body);
    font-size: .63rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .18em;
    text-transform: uppercase;
    transition: opacity 500ms ease;
}


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

.services-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 80px;
}


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

@media (max-width: 980px) {

    .services-home {
        padding: 125px 0 140px;
    }

    .services-header {
        margin-bottom: 85px;
    }

    .services-title {
        font-size: 4rem;
    }

    .services-layout {
        grid-template-columns: minmax(0, 1fr) minmax(290px, 40%);
        gap: 60px;
    }

    .service-content h3 {
        font-size: 2.25rem;
    }

    .service-preview {
        top: 105px;
        margin-top: 38px;
    }
}


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

@media (max-width: 640px) {

    .services-home {
        padding: 100px 0 110px;
    }

    .services-header {
        margin-bottom: 65px;
    }

    .services-title {
        font-size: 3.5rem;
        line-height: .96;
    }

    .services-layout {
        display: flex;
        flex-direction: column;
        gap: 48px;
    }

    .services-list {
        width: 100%;
    }

    .service-item {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 10px;
        padding: 27px 0;
    }

    .service-index {
        padding-top: 7px;
        font-size: .6rem;
    }

    .service-content h3 {
        font-size: 2.05rem;
    }

    .service-description p {
        font-size: .92rem;
        line-height: 1.7;
    }

    .service-item.active .service-description p {
        padding-top: 13px;
    }

    .service-preview {
        position: relative;
        top: auto;
        width: 88%;
        margin: 0 0 0 auto;
    }

    .service-preview-image {
        aspect-ratio: 4 / 5;
    }

    .services-footer {
        justify-content: flex-start;
        margin-top: 55px;
    }
}



/* =========================
   REVEAL ANIMATIONS
========================= */

/* BASE */

.reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1s ease, transform 1s ease;
    will-change: opacity, transform;
}

    /* ACTIVO */

    .reveal.active {
        opacity: 1;
        transform: translateY(0);
    }


/* ZOOM SUAVE */

.reveal-zoom {
    opacity: 0;
    transform: scale(.92);
    transition: opacity 1s ease, transform 1s ease;
}

    .reveal-zoom.active {
        opacity: 1;
        transform: scale(1);
    }




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

.booking-epilogue {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--color-bg);
    color: var(--color-text);
}


/*==================================================
    BACKGROUND IMAGE
==================================================*/

.booking-epilogue-background {
    position: absolute;
    inset: 0;
    background-image: linear-gradient( rgba(227, 222, 218, .91), rgba(227, 222, 218, .90) ), url("../Imagenes/hero-bridal-riviera-maya.jpg");
    background-repeat: no-repeat;
    background-position: center 58%;
    background-size: cover;
    filter: saturate(.72) contrast(.92) brightness(.96);
    transform: scale(1.02);
}


/* Capa adicional para suavizar la fotografía */

.booking-epilogue::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient( 180deg, rgba(227, 222, 218, .18) 0%, rgba(227, 222, 218, .04) 42%, rgba(227, 222, 218, .28) 100% );
}


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

.booking-epilogue-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 150px;
    padding-bottom: 80px;
    text-align: center;
}


/*==================================================
    MAIN CONTENT
==================================================*/

.booking-epilogue-content {
    width: 100%;
    max-width: 880px;
}

.booking-eyebrow {
    margin-bottom: 30px;
}

.booking-epilogue-title {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 6rem;
    font-weight: 500;
    line-height: .88;
    letter-spacing: -.045em;
}

    .booking-epilogue-title span {
        display: block;
        font-style: italic;
        font-weight: 400;
    }

.booking-epilogue-description {
    max-width: 600px;
    margin: 40px auto 0;
    color: rgba(112, 95, 77, .9);
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.8;
}


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

.booking-epilogue-button {
    min-height: 56px;
    margin-top: 44px;
    padding-right: 38px;
    padding-left: 38px;
    transition: background-color .5s ease, border-color .5s ease, color .5s ease, letter-spacing .5s ease, transform .5s ease;
    text-transform: uppercase;
}

    .booking-epilogue-button:hover {
        letter-spacing: .22em;
    }


/*==================================================
    SIGNATURE / COLOPHON
==================================================*/

.booking-epilogue-signature {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    margin-top: 140px;
    color: var(--color-text);
}

.booking-brand {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
}

.booking-specialty,
.booking-location {
    font-family: var(--font-body);
    font-size: .62rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.booking-specialty {
    margin-top: 8px;
    color: rgba(112, 95, 77, .78);
}

.booking-location {
    color: var(--color-accent);
}

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

.site-footer {
    background: linear-gradient( 180deg, rgba(227,222,218,.98) 0%, rgba(227,222,218,1) 100% );
    color: var(--color-text);
}


/*==================================================
    MAIN
==================================================*/

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 90px;
    padding: 90px 0 70px;
}


/*==================================================
    BRAND
==================================================*/

.footer-brand h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 500;
    letter-spacing: -.03em;
}

.footer-brand p {
    margin: 18px 0 10px;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(112,95,77,.78);
}

.footer-brand span {
    display: block;
    font-family: var(--font-body);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-accent);
}


/*==================================================
    COLUMNS
==================================================*/

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .footer-column h4 {
        margin: 0 0 12px;
        font-family: var(--font-body);
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: rgba(112,95,77,.55);
    }

    .footer-column a {
        width: fit-content;
        position: relative;
        text-decoration: none;
        color: var(--color-text);
        font-family: var(--font-body);
        font-size: 1rem;
        transition: color .35s ease, transform .35s ease;
    }

        .footer-column a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -4px;
            width: 0;
            height: 1px;
            background: var(--color-accent);
            transition: width .35s ease;
        }

        .footer-column a:hover {
            color: var(--color-accent);
            transform: translateX(6px);
        }

            .footer-column a:hover::after {
                width: 100%;
            }


/*==================================================
    BOTTOM
==================================================*/

.footer-bottom {
    border-top: 1px solid rgba(112,95,77,.12);
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 24px 0;
}

.footer-bottom span {
    font-family: var(--font-body);
    font-size: .72rem;
    letter-spacing: .06em;
    color: rgba(112,95,77,.62);
}



/*==================================================
    ABOUT PAGE — THE ARTIST
==================================================*/

.about-artist {
    padding: 60px 0;
    color: var(--color-text);
}

.about-artist-grid {
    display: grid;
    grid-template-columns: minmax(320px, 42%) minmax(0, 1fr);
    align-items: center;
    gap: 120px;
}

.about-artist-photo {
    width: 100%;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 3 / 4;
}

    .about-artist-photo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

.about-artist-content {
    max-width: 650px;
}

.about-artist-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 5rem;
    font-weight: 500;
    line-height: .88;
    letter-spacing: -.04em;
    color: var(--color-text);
}

    .about-artist-title span {
        display: block;
        font-style: italic;
        font-weight: 400;
    }

.about-artist-line {
    width: 74px;
    height: 1px;
    margin: 38px 0 32px;
    background: var(--color-accent);
}

.about-artist-copy {
    max-width: 590px;
}

    .about-artist-copy p {
        margin: 0;
        font-family: var(--font-body);
        font-size: 1rem;
        line-height: 1.85;
        color: rgba(112, 95, 77, .92);
    }

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


/*==================================================
    ABOUT PAGE — PHILOSOPHY
==================================================*/

.about-philosophy {
    /*min-height: 62vh;*/
    display: flex;
    align-items: center;
    padding: 60px 0 120px;
    background: var(--color-bg);
    color: var(--color-text);
}

.about-philosophy-inner {
    max-width: 920px;
    margin-inline: auto;
    text-align: center;
}

.about-philosophy-quote {
    max-width: 880px;
    margin: 0;
    font-family: var(--font-display);
    font-size: 5.2rem;
    font-weight: 400;
    font-style: italic;
    line-height: .95;
    letter-spacing: -.04em;
    color: rgba(112, 95, 77, .9);
}

    .about-philosophy-quote span {
        display: block;
    }


/*==================================================
    ABOUT PAGE — EXPERIENCE & EXPERTISE
==================================================*/

.about-expertise {
    padding: 150px 0 165px;
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.about-expertise-header {
    max-width: 820px;
    margin-bottom: 110px;
}

.about-expertise-title {
    max-width: 820px;
    margin: 0;
    font-family: var(--font-display);
    font-size: 4.8rem;
    font-weight: 500;
    line-height: .94;
    letter-spacing: -.04em;
    color: var(--color-text);
}

    .about-expertise-title span {
        display: block;
        font-style: italic;
        font-weight: 400;
    }

.about-expertise-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 46px;
}

.about-expertise-item {
    padding-top: 28px;
    border-top: 1px solid rgba(112, 95, 77, .22);
}

.about-expertise-number {
    display: block;
    margin-bottom: 40px;
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .18em;
    color: var(--color-accent);
}

.about-expertise-item h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 2.15rem;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.025em;
    color: var(--color-text);
}

.about-expertise-item p {
    max-width: 220px;
    margin: 16px 0 0;
    font-family: var(--font-body);
    font-size: .88rem;
    font-weight: 400;
    line-height: 1.7;
    color: rgba(112, 95, 77, .78);
}


/*==================================================
    ABOUT PAGE — THE TEAM
==================================================*/

.about-team {
    padding: 165px 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.about-team-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    align-items: start;
    gap: 120px;
}

.about-team-heading {
    max-width: 720px;
}

    .about-team-heading h2 {
        margin: 0;
        font-family: var(--font-display);
        font-size: 5rem;
        font-weight: 500;
        line-height: .92;
        letter-spacing: -.04em;
        color: var(--color-text);
    }

        .about-team-heading h2 span {
            display: block;
            font-style: italic;
            font-weight: 400;
        }

.about-team-copy {
    max-width: 520px;
    padding-top: 56px;
}

    .about-team-copy p {
        margin: 0;
        font-family: var(--font-body);
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.85;
        color: rgba(112, 95, 77, .88);
    }

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

/*==================================================
    ABOUT PAGE — CLOSING CTA
==================================================*/

.about-closing {
    min-height: 72vh;
    display: flex;
    align-items: center;
    padding: 140px 0;
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.about-closing-inner {
    max-width: 900px;
    margin-inline: auto;
    text-align: center;
}

.about-closing-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 5.7rem;
    font-weight: 500;
    line-height: .9;
    letter-spacing: -.045em;
    color: var(--color-text);
}

    .about-closing-title span {
        display: block;
        font-style: italic;
        font-weight: 400;
    }

.about-closing-description {
    max-width: 600px;
    margin: 38px auto 0;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.8;
    color: rgba(112, 95, 77, .86);
}

.about-closing-button {
    margin-top: 42px;
}



.portfolio-brides {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 34px;
}

    .portfolio-brides a {
        display: block;
        overflow: hidden;
    }

        .portfolio-brides a:nth-child(1) {
            grid-column: 1/3;
            max-width: 1200px;
        }

        .portfolio-brides a:nth-child(4) {
            grid-column: 1/3;
            margin-top: 50px;
            max-width: 1200px;
        }

        .portfolio-brides a:nth-child(6) {
            justify-self: end;
            margin-top: 45px;
            width: 82%;
        }



.portfolio-party {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
}



.portfolio-hero {
    display: block;
    margin-top: 40px;
    max-width: 1200px;
}



.portfolio-social {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 36px;
    align-items: end;
}

    .portfolio-social a:last-child {
        margin-top: 60px;
    }


.portfolio-section {
    padding: 150px 0;
    background: var(--color-bg);
}

.portfolio-header {
    margin-bottom: 60px;
}

.section-number {
    display: block;
    margin-bottom: 16px;
    font-size: .7rem;
    letter-spacing: .18em;
    color: var(--color-accent);
}

.portfolio-header h2 {
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 400;
    margin: 0;
}

.portfolio-section img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .8s ease, opacity .8s ease;
    cursor: zoom-in;
}

.portfolio-section a:hover img {
    transform: translateY(-5px);
    opacity: .95;
}

/*==================================================
    PORTFOLIO PAGE — OPENING
==================================================*/

.portfolio-opening {
    min-height: 78vh;
    display: flex;
    align-items: center;
    padding: 150px 0 120px;
    background: var(--color-bg);
    color: var(--color-text);
}

.portfolio-opening-inner {
    max-width: 980px;
}

.portfolio-opening-title {
    max-width: 900px;
    margin: 0;
    font-family: var(--font-display);
    font-size: 5.8rem;
    font-weight: 500;
    line-height: .88;
    letter-spacing: -.045em;
    color: var(--color-text);
}

    .portfolio-opening-title span {
        display: block;
        font-style: italic;
        font-weight: 400;
    }

.portfolio-opening-lead {
    max-width: 600px;
    margin: 46px 0 0;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.8;
    color: rgba(112, 95, 77, .88);
}

.portfolio-brides a,
.portfolio-party a,
.portfolio-hero,
.portfolio-social a {
    display: block;
    overflow: hidden;
}

    .portfolio-brides img,
    .portfolio-party img,
    .portfolio-hero img,
    .portfolio-social img {
        display: block;
        width: 100%;
        height: auto;
    }

/*.portfolio-closing h2 {
    font-size: 3.5rem;
    font-weight: 500;
    line-height: .9;
    letter-spacing: -.045em;
}

.portfolio-closing .btn {
    margin-top: 40px;
}*/


/*==================================================
    PORTFOLIO — CLOSING
==================================================*/

.portfolio-closing {
    padding: 170px 0;
    background: var(--color-bg-alt);
    color: var(--color-text);
}

    .portfolio-closing .container {
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
    }

    .portfolio-closing h2 {
        margin: 0;
        font-family: var(--font-display);
        font-size: 5.6rem;
        font-weight: 500;
        line-height: .9;
        letter-spacing: -.045em;
        color: var(--color-text);
    }

        .portfolio-closing h2 span {
            display: block;
            font-style: italic;
            font-weight: 400;
        }

    .portfolio-closing p {
        max-width: 580px;
        margin: 38px auto 0;
        font-family: var(--font-body);
        font-size: 1rem;
        line-height: 1.8;
        color: rgba(112,95,77,.85);
    }

    .portfolio-closing .btn {
        margin-top: 42px;
    }


/*==================================================
    SERVICES PAGE — OPENING
==================================================*/

.services-page-opening {
    min-height: 78vh;
    display: flex;
    align-items: center;
    padding: 150px 0 120px;
    background: var(--color-bg);
    color: var(--color-text);
}

.services-page-opening-inner {
    max-width: 980px;
}

.services-page-opening-title {
    max-width: 920px;
    margin: 0;
    font-family: var(--font-display);
    font-size: 5.8rem;
    font-weight: 500;
    line-height: .88;
    letter-spacing: -.045em;
    color: var(--color-text);
}

    .services-page-opening-title span {
        display: block;
        font-style: italic;
        font-weight: 400;
    }

.services-page-opening-lead {
    max-width: 640px;
    margin: 46px 0 0;
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(112, 95, 77, .88);
}


/*==================================================
    SERVICES PAGE — DETAIL SECTIONS
==================================================*/

.service-detail {
    padding: 155px 0;
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.service-detail-alt {
    background: var(--color-bg);
}

.service-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 38%);
    align-items: center;
    gap: 115px;
}

.service-detail-grid-reverse {
    grid-template-columns: minmax(330px, 38%) minmax(0, 1fr);
}

.service-detail-content {
    max-width: 700px;
}

.service-detail-number {
    display: none;
    margin-bottom: 22px;
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .2em;
    color: var(--color-accent);
}

.service-detail-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 5rem;
    font-weight: 500;
    line-height: .89;
    letter-spacing: -.04em;
    color: var(--color-text);
}

    .service-detail-title span {
        display: block;
        font-style: italic;
        font-weight: 400;
    }

.service-detail-line {
    width: 74px;
    height: 1px;
    margin: 38px 0 32px;
    background: var(--color-accent);
}

.service-detail-copy {
    max-width: 590px;
}

    .service-detail-copy p {
        margin: 0;
        font-family: var(--font-body);
        font-size: 1rem;
        line-height: 1.85;
        color: rgba(112, 95, 77, .9);
    }

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

.service-detail-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 34px;
    max-width: 590px;
    margin-top: 42px;
    padding-top: 28px;
    border-top: 1px solid rgba(112, 95, 77, .22);
}

    .service-detail-points span {
        font-family: var(--font-body);
        font-size: .68rem;
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: rgba(112, 95, 77, .75);
    }

.service-detail-link {
    margin-top: 42px;
}

.service-detail-photo {
    width: 100%;
    margin: 40px 0 0;
    overflow: hidden;
    aspect-ratio: 3 / 4;
}

    .service-detail-photo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

/*==================================================
    SERVICES PAGE — PHOTO SHOOT GLAM
==================================================*/

.service-editorial {
    padding: 160px 0;
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.service-editorial-header {
    max-width: 780px;
    margin-bottom: 80px;
}

    .service-editorial-header h2 {
        margin: 0;
        font-family: var(--font-display);
        font-size: 5.2rem;
        font-weight: 500;
        line-height: .9;
        letter-spacing: -.04em;
        color: var(--color-text);
    }

        .service-editorial-header h2 span {
            display: block;
            font-style: italic;
            font-weight: 400;
        }

.service-editorial-photo {
    width: 100%;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 16 / 8;
}

    .service-editorial-photo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

.service-editorial-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
    margin-top: 48px;
}

    .service-editorial-bottom p {
        max-width: 580px;
        margin: 0;
        font-family: var(--font-body);
        font-size: 1rem;
        line-height: 1.8;
        color: rgba(112, 95, 77, .88);
    }


/*==================================================
    SOCIAL COLLECTIONS
==================================================*/

.social-collections {
    width: 100%;
    margin-top: 120px;
}

.social-collections-header {
    max-width: 760px;
    margin: 0 auto 70px;
    text-align: center;
}

    .social-collections-header h2 {
        margin: 0;
        color: var(--color-text);
        font-family: var(--font-display);
        font-size: 4.2rem;
        font-weight: 500;
        line-height: .95;
        letter-spacing: -.035em;
    }

.social-collections-line {
    width: 58px;
    height: 1px;
    margin: 26px auto 24px;
    background: var(--color-accent);
}

.social-collections-header p {
    margin: 0;
    color: rgba(112, 95, 77, .82);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
}


/*==================================================
    SOCIAL SERVICE CARDS
==================================================*/

.social-packages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 30px;
    width: 100%;
}

.social-package {
    display: flex;
    flex-direction: column;
    min-height: 360px;
    height: 100%;
    padding: 34px 30px 28px;
    border: 1px solid rgba(112, 95, 77, .1);
    border-radius: 14px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, .76) 0%, rgba(255, 255, 255, .58) 100% );
    box-shadow: 0 14px 34px rgba(78, 62, 46, .045);
    transition: transform 450ms cubic-bezier(.22, .61, .36, 1), border-color 450ms ease;
}

    .social-package:hover {
        transform: translateY(-4px);
        border-color: rgba(166, 130, 80, .25);
    }

.social-package-content {
    flex: 1 1 auto;
}

.social-package h3 {
    margin: 0 0 28px;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.025em;
}

.social-package ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.social-package li {
    position: relative;
    padding: 8px 0 8px 20px;
    color: rgba(112, 95, 77, .84);
    font-family: var(--font-body);
    font-size: .88rem;
    line-height: 1.55;
}

    .social-package li::before {
        position: absolute;
        top: 17px;
        left: 2px;
        width: 5px;
        height: 5px;
        content: "";
        border-radius: 50%;
        background: var(--color-accent);
    }


/*==================================================
    SOCIAL PRICE AND BUTTON
==================================================*/

.social-package-footer {
    margin-top: auto;
    padding-top: 28px;
    border-top: 1px solid rgba(112, 95, 77, .14);
}

.social-package-price {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

    .social-package-price span {
        color: rgba(112, 95, 77, .58);
        font-family: var(--font-body);
        font-size: .61rem;
        font-weight: 600;
        letter-spacing: .18em;
        text-transform: uppercase;
    }

    .social-package-price strong {
        color: var(--color-text);
        font-family: var(--font-display);
        font-size: 2.25rem;
        font-weight: 500;
        line-height: 1;
    }

.social-package-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin-top: 24px;
    padding: 0 22px;
    border: 1px solid var(--color-accent);
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-body);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 450ms ease, border-color 450ms ease, transform 450ms cubic-bezier(.22, .61, .36, 1);
}

    .social-package-button:hover {
        background: #8f7043;
        transform: translateY(-2px);
    }


/*==================================================
    SERVICES PAGE — CLOSING
==================================================*/

.services-page-closing {
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 130px 0;
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.services-page-closing-inner {
    max-width: 900px;
    margin-inline: auto;
    text-align: center;
}

.services-page-closing h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 5.6rem;
    font-weight: 500;
    line-height: .9;
    letter-spacing: -.045em;
}

    .services-page-closing h2 span {
        display: block;
        font-style: italic;
        font-weight: 400;
    }

.services-page-closing p {
    max-width: 560px;
    margin: 36px auto 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(112, 95, 77, .86);
}

.services-page-closing .btn {
    margin-top: 40px;
}


/*==================================================
    BRIDAL COLLECTIONS
==================================================*/

.bridal-collections {
    /*width: 100%;*/
    margin-top: 120px;
}


/*==================================================
    COLLECTIONS HEADER
==================================================*/

.bridal-collections-header {
    max-width: 760px;
    margin: 0 auto 70px;
    text-align: center;
}

    .bridal-collections-header h2 {
        margin: 0;
        color: var(--color-text);
        font-family: var(--font-display);
        font-size: 4.4rem;
        font-weight: 500;
        line-height: .95;
        letter-spacing: -.035em;
    }

.bridal-collections-line {
    width: 58px;
    height: 1px;
    margin: 26px auto 24px;
    background: var(--color-accent);
}

.bridal-collections-header p {
    margin: 0;
    color: rgba(112, 95, 77, .82);
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.7;
}


/*==================================================
    PACKAGE GRID
==================================================*/

.bridal-packages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 30px;
    /*width: 100%;*/
}


/*==================================================
    PACKAGE CARD
==================================================*/

.bridal-package {
    display: flex;
    flex-direction: column;
    min-height: 420px;
    height: 100%;
    padding: 34px 30px 28px;
    border: 1px solid rgba(112, 95, 77, .1);
    border-radius: 14px;
    /*background: linear-gradient( 180deg, rgba(255, 255, 255, .76) 0%, rgba(255, 255, 255, .58) 100% );*/
    background: linear-gradient(180deg, rgba(255, 255, 255, .48) 0%, rgba(255, 255, 255, .32) 100%);
    box-shadow: 0 14px 34px rgba(78, 62, 46, .045);
    transition: transform 450ms cubic-bezier(.22, .61, .36, 1), border-color 450ms ease, background-color 450ms ease;
}

    .bridal-package:hover {
        transform: translateY(-4px);
        border-color: rgba(166, 130, 80, .25);
    }


/*==================================================
    PACKAGE CONTENT
==================================================*/

.bridal-package-content {
    flex: 1 1 auto;
    padding-bottom: 10px;
}

.bridal-package h3 {
    margin: 0 0 28px;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.025em;
}

.bridal-package ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bridal-package li {
    position: relative;
    padding: 8px 0 8px 20px;
    color: rgba(112, 95, 77, .84);
    font-family: var(--font-body);
    font-size: .88rem;
    font-weight: 400;
    line-height: 1.55;
}

    .bridal-package li::before {
        position: absolute;
        top: 17px;
        left: 2px;
        width: 5px;
        height: 5px;
        content: "";
        border-radius: 50%;
        background: var(--color-accent);
    }


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

.bridal-package-footer {
    margin-top: auto;
    padding-top: 28px;
    border-top: 1px solid rgba(112, 95, 77, .14);
}


/*==================================================
    PRICE
==================================================*/

.bridal-package-price {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

    .bridal-package-price span {
        color: rgba(112, 95, 77, .58);
        font-family: var(--font-body);
        font-size: .61rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: .18em;
        text-transform: uppercase;
    }

    .bridal-package-price strong {
        color: var(--color-text);
        font-family: var(--font-display);
        font-size: 2.25rem;
        font-weight: 500;
        line-height: 1;
        letter-spacing: -.02em;
    }


/*==================================================
    PACKAGE BUTTON
==================================================*/

.bridal-package-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin-top: 24px;
    padding: 0 22px;
    border: 1px solid var(--color-accent);
    border-radius: 999px;
    background: var(--color-accent);
    color: #ffffff;
    font-family: var(--font-body);
    font-size: .66rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .16em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 450ms ease, border-color 450ms ease, transform 450ms cubic-bezier(.22, .61, .36, 1);
}

    .bridal-package-button:hover {
        /*border-color: var(--color-accent-hover);
        background: var(--color-accent-hover);*/
        transform: translateY(-2px);
        background: #8f7043;
    }

/*.bridal-package-button:focus-visible {
        outline: 2px solid var(--color-text);
        outline-offset: 4px;
    }*/


/*==================================================
    BRIDAL PARTY SERVICES
==================================================*/

.party-services {
    width: 100%;
    margin-top: 120px;
}


/*==================================================
    HEADER
==================================================*/

.party-services-header {
    max-width: 760px;
    margin: 0 auto 68px;
    text-align: center;
}

    .party-services-header h2 {
        margin: 0;
        color: var(--color-text);
        font-family: var(--font-display);
        font-size: 4.2rem;
        font-weight: 500;
        line-height: .95;
        letter-spacing: -.035em;
    }

.party-services-line {
    width: 58px;
    height: 1px;
    margin: 25px auto 23px;
    background: var(--color-accent);
}

.party-services-header p {
    max-width: 520px;
    margin: 0 auto;
    color: rgba(112, 95, 77, .82);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
}


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

.party-services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 24px 28px;
}


/*==================================================
    INDIVIDUAL SERVICE
==================================================*/

.party-service {
    display: flex;
    flex-direction: column;
    min-height: 205px;
    height: 100%;
    padding: 30px 30px 26px;
    border: 1px solid rgba(112, 95, 77, .11);
    border-radius: 12px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, .48) 0%, rgba(255, 255, 255, .32) 100% );
    transition: transform 450ms cubic-bezier(.22, .61, .36, 1), border-color 450ms ease, background-color 450ms ease;
}

    .party-service:hover {
        transform: translateY(-3px);
        border-color: rgba(166, 130, 80, .27);
    }


/*==================================================
    NAME AND PRICE
==================================================*/

.party-service-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 28px;
    flex: 1 1 auto;
}

.party-service h3 {
    max-width: 310px;
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.025em;
}

.party-service-price {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 4px;
    text-align: right;
}

    .party-service-price strong {
        color: var(--color-text);
        font-family: var(--font-display);
        font-size: 2.25rem;
        font-weight: 500;
        line-height: .9;
        letter-spacing: -.025em;
    }

    .party-service-price span {
        color: rgba(112, 95, 77, .58);
        font-family: var(--font-body);
        font-size: .6rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: .18em;
        text-transform: uppercase;
    }


/*==================================================
    RESERVE BUTTON
==================================================*/

.party-service-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 32px;
    padding-bottom: 7px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: .66rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .17em;
    text-decoration: none;
    text-transform: uppercase;
}

    .party-service-button::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 1px;
        content: "";
        background: var(--color-accent);
        transform: scaleX(.35);
        transform-origin: left center;
        transition: transform 450ms cubic-bezier(.22, .61, .36, 1);
    }

    .party-service-button:hover::after {
        transform: scaleX(1);
    }

    .party-service-button:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 5px;
    }

/*==================================================
    FAQ PAGE — OPENING
==================================================*/

.faq-opening {
    min-height: 72vh;
    display: flex;
    align-items: center;
    padding: 150px 0 115px;
    background: var(--color-bg);
    color: var(--color-text);
}

.faq-opening-inner {
    max-width: 980px;
}

.faq-opening-title {
    max-width: 900px;
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 5.8rem;
    font-weight: 500;
    line-height: .89;
    letter-spacing: -.045em;
}

    .faq-opening-title span {
        display: block;
        font-style: italic;
        font-weight: 400;
    }

.faq-opening-lead {
    max-width: 620px;
    margin: 44px 0 0;
    color: rgba(112, 95, 77, .86);
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.8;
}


/*==================================================
    FAQ CONTENT
==================================================*/

.faq-content {
    padding: 155px 0 170px;
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.faq-layout {
    display: grid;
    grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr);
    align-items: start;
    gap: 120px;
}


/*==================================================
    FAQ SIDEBAR
==================================================*/

.faq-sidebar {
    position: sticky;
    top: 130px;
    max-width: 430px;
}

    .faq-sidebar h2 {
        margin: 0;
        color: var(--color-text);
        font-family: var(--font-display);
        font-size: 4.2rem;
        font-weight: 500;
        line-height: .92;
        letter-spacing: -.04em;
    }

        .faq-sidebar h2 span {
            display: block;
            font-style: italic;
            font-weight: 400;
        }

    .faq-sidebar p {
        margin: 34px 0 0;
        color: rgba(112, 95, 77, .82);
        font-family: var(--font-body);
        font-size: .95rem;
        line-height: 1.8;
    }


/*==================================================
    FAQ GROUPS
==================================================*/

.faq-group + .faq-group {
    margin-top: 95px;
}

.faq-group-header {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-bottom: 30px;
}

    .faq-group-header span {
        color: var(--color-accent);
        font-family: var(--font-body);
        font-size: .65rem;
        font-weight: 600;
        letter-spacing: .18em;
    }

    .faq-group-header h2 {
        margin: 0;
        color: var(--color-text);
        font-family: var(--font-display);
        font-size: 2.8rem;
        font-weight: 500;
        line-height: 1;
    }


/*==================================================
    FAQ ITEM
==================================================*/

.faq-item {
    border-top: 1px solid rgba(112, 95, 77, .2);
}

    .faq-item:last-child {
        border-bottom: 1px solid rgba(112, 95, 77, .2);
    }

.faq-question {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    align-items: center;
    gap: 30px;
    width: 100%;
    padding: 28px 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
}

    .faq-question > span:first-child {
        font-family: var(--font-display);
        font-size: 1.85rem;
        font-weight: 500;
        line-height: 1.2;
    }


/*==================================================
    FAQ ICON
==================================================*/

.faq-icon {
    position: relative;
    width: 24px;
    height: 24px;
}

    .faq-icon::before,
    .faq-icon::after {
        position: absolute;
        top: 50%;
        left: 50%;
        content: "";
        background: var(--color-accent);
        transform: translate(-50%, -50%);
        transition: transform 400ms ease;
    }

    .faq-icon::before {
        width: 18px;
        height: 1px;
    }

    .faq-icon::after {
        width: 1px;
        height: 18px;
    }

.faq-item.open .faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}


/*==================================================
    FAQ ANSWER
==================================================*/

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 550ms cubic-bezier(.22, .61, .36, 1), opacity 400ms ease;
}

.faq-answer-inner {
    min-height: 0;
    overflow: hidden;
}

.faq-answer p {
    max-width: 650px;
    margin: 0;
    padding: 0 54px 30px 0;
    color: rgba(112, 95, 77, .84);
    font-family: var(--font-body);
    font-size: .95rem;
    line-height: 1.8;
}

.faq-item.open .faq-answer {
    grid-template-rows: 1fr;
    opacity: 1;
}



/*==================================================
    BOOKING PAGE — OPENING
==================================================*/

.booking-opening {
    display: flex;
    align-items: center;
    min-height: 74vh;
    padding: 150px 0 115px;
    background: var(--color-bg);
    color: var(--color-text);
}

.booking-opening-inner {
    max-width: 980px;
}

.booking-opening-title {
    max-width: 920px;
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 5.8rem;
    font-weight: 500;
    line-height: .89;
    letter-spacing: -.045em;
}

    .booking-opening-title span {
        display: block;
        font-style: italic;
        font-weight: 400;
    }

.booking-opening-lead {
    max-width: 640px;
    margin: 44px 0 0;
    color: rgba(112, 95, 77, .86);
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.8;
}


/*==================================================
    EDITORIAL NOTE
==================================================*/

.booking-note {
    display: flex;
    align-items: center;
    min-height: 52vh;
    padding: 115px 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.booking-note-inner {
    display: flex;
    justify-content: center;
}

.booking-note-quote {
    max-width: 900px;
    margin: 0;
    color: rgba(112, 95, 77, .9);
    font-family: var(--font-display);
    font-size: 4.8rem;
    font-weight: 400;
    font-style: italic;
    line-height: .96;
    letter-spacing: -.04em;
    text-align: center;
}

    .booking-note-quote span {
        display: block;
    }


/*==================================================
    INQUIRY SECTION
==================================================*/

.booking-inquiry {
    padding: 60px 0 60px;
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.booking-layout {
    display: grid;
    grid-template-columns: minmax(270px, 35%) minmax(0, 65%);
    align-items: start;
    gap: 110px;
}


/*==================================================
    LEFT SUMMARY
==================================================*/

.booking-summary {
    position: sticky;
    /*top: 125px;*/
}

.booking-summary-eyebrow,
.booking-selected-label {
    display: block;
    margin-bottom: 22px;
    color: var(--color-accent);
    font-family: var(--font-body);
    font-size: .66rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.booking-summary h2 {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 3.8rem;
    font-weight: 500;
    line-height: .94;
    letter-spacing: -.04em;
}

    .booking-summary h2 span {
        display: block;
        font-style: italic;
        font-weight: 400;
    }

.booking-summary-intro {
    margin: 32px 0 0;
    color: rgba(112, 95, 77, .82);
    font-family: var(--font-body);
    font-size: .94rem;
    line-height: 1.8;
}

.booking-summary-details {
    margin-top: 55px;
    border-top: 1px solid rgba(112, 95, 77, .2);
}

.booking-summary-detail {
    padding: 24px 0;
    border-bottom: 1px solid rgba(112, 95, 77, .2);
}

    .booking-summary-detail span {
        display: block;
        margin-bottom: 7px;
        color: rgba(112, 95, 77, .58);
        font-family: var(--font-body);
        font-size: .6rem;
        font-weight: 600;
        letter-spacing: .17em;
        text-transform: uppercase;
    }

    .booking-summary-detail strong {
        color: var(--color-text);
        font-family: var(--font-display);
        font-size: 1.55rem;
        font-weight: 500;
    }


/*==================================================
    SELECTED SUMMARY
==================================================*/

.booking-selected-summary,
.booking-no-selection {
    margin-top: 55px;
    padding: 30px 28px;
    border: 1px solid rgba(112, 95, 77, .12);
    border-radius: 12px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .38) );
}

    .booking-selected-summary h3 {
        margin: 0;
        color: var(--color-text);
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 500;
        line-height: 1.1;
    }

.booking-selected-includes {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

    .booking-selected-includes li {
        position: relative;
        padding: 7px 0 7px 18px;
        color: rgba(112, 95, 77, .8);
        font-family: var(--font-body);
        font-size: .82rem;
        line-height: 1.55;
    }

        .booking-selected-includes li::before {
            position: absolute;
            top: 15px;
            left: 0;
            width: 5px;
            height: 5px;
            content: "";
            border-radius: 50%;
            background: var(--color-accent);
        }

.booking-selected-price {
    margin-top: 27px;
    padding-top: 22px;
    border-top: 1px solid rgba(112, 95, 77, .14);
}

    .booking-selected-price span {
        display: block;
        margin-bottom: 7px;
        color: rgba(112, 95, 77, .58);
        font-family: var(--font-body);
        font-size: .6rem;
        font-weight: 600;
        letter-spacing: .18em;
        text-transform: uppercase;
    }

    .booking-selected-price strong {
        color: var(--color-text);
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 500;
    }

.booking-change-selection {
    position: relative;
    display: inline-flex;
    margin-top: 24px;
    padding-bottom: 6px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-decoration: none;
    text-transform: uppercase;
}

    .booking-change-selection::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 1px;
        content: "";
        background: var(--color-accent);
    }

.booking-no-selection span {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 500;
}

.booking-no-selection p {
    margin: 15px 0 0;
    color: rgba(112, 95, 77, .78);
    font-family: var(--font-body);
    font-size: .85rem;
    line-height: 1.7;
}


/*==================================================
    FORM
==================================================*/

.booking-form-column {
    min-width: 0;
}

.booking-form-group {
    margin: 0;
    padding: 0 0 65px;
    border: 0;
}

    .booking-form-group + .booking-form-group {
        /*padding-top: 65px;*/
        border-top: 1px solid rgba(112, 95, 77, .2);
    }

    .booking-form-group legend {
        margin-bottom: 44px;
        color: var(--color-accent);
        font-family: var(--font-body);
        font-size: .67rem;
        font-weight: 600;
        letter-spacing: .2em;
        text-transform: uppercase;
    }

.booking-fields {
    display: grid;
    gap: 42px 36px;
}

.booking-fields-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-field {
    position: relative;
}

.booking-field-full {
    grid-column: 1 / -1;
}

.booking-field label {
    display: block;
    margin-bottom: 10px;
    color: rgba(112, 95, 77, .68);
    font-family: var(--font-body);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.booking-input {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 5px 0 12px;
    border: 0;
    border-bottom: 1px solid rgba(112, 95, 77, .32);
    border-radius: 0;
    outline: none;
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color 400ms ease, background-color 400ms ease;
}

    .booking-input:focus {
        border-bottom-color: var(--color-accent);
    }

.booking-select {
    cursor: pointer;
}

.booking-textarea {
    /*min-height: 145px;*/
    padding-top: 10px;
    resize: vertical;
}


/*==================================================
    SELECTED SERVICE INSIDE FORM
==================================================*/

.booking-form-selection {
    padding: 28px 30px;
    border: 1px solid rgba(112, 95, 77, .12);
    border-radius: 12px;
    background: rgba(255, 255, 255, .38);
}

    .booking-form-selection span {
        display: block;
        margin-bottom: 8px;
        color: rgba(112, 95, 77, .58);
        font-family: var(--font-body);
        font-size: .6rem;
        font-weight: 600;
        letter-spacing: .17em;
        text-transform: uppercase;
    }

    .booking-form-selection strong {
        display: block;
        color: var(--color-text);
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 500;
    }

    .booking-form-selection a {
        display: inline-flex;
        margin-top: 18px;
        color: var(--color-accent);
        font-family: var(--font-body);
        font-size: .62rem;
        font-weight: 600;
        letter-spacing: .14em;
        text-decoration: none;
        text-transform: uppercase;
    }


/*==================================================
    VALIDATION
==================================================*/

.booking-field-error {
    display: block;
    margin-top: 8px;
    color: #8c5149;
    font-family: var(--font-body);
    font-size: .7rem;
}

.booking-validation-summary {
    margin-bottom: 50px;
    padding: 24px 28px;
    border-left: 2px solid #8c5149;
    background: rgba(255, 255, 255, .35);
    color: #8c5149;
    font-family: var(--font-body);
    font-size: .84rem;
    line-height: 1.7;
}

    .booking-validation-summary ul {
        margin-bottom: 0;
    }


/*==================================================
    SUBMIT
==================================================*/

.booking-submit {
    padding-top: 10px;
}

.booking-submit-button {
    min-height: 55px;
    padding-inline: 38px;
}

.booking-submit p {
    max-width: 430px;
    margin: 22px 0 0;
    color: rgba(112, 95, 77, .66);
    font-family: var(--font-body);
    font-size: .73rem;
    line-height: 1.65;
}


/*==================================================
    SUCCESS
==================================================*/

.booking-success {
    max-width: 900px;
    margin: 0 auto;
    padding: 100px 0;
    text-align: center;
}

    .booking-success h2 {
        margin: 0;
        color: var(--color-text);
        font-family: var(--font-display);
        font-size: 5.2rem;
        font-weight: 500;
        line-height: .92;
        letter-spacing: -.04em;
    }

        .booking-success h2 span {
            display: block;
            font-style: italic;
            font-weight: 400;
        }

    .booking-success p {
        max-width: 610px;
        margin: 38px auto 0;
        color: rgba(112, 95, 77, .82);
        font-family: var(--font-body);
        font-size: 1rem;
        line-height: 1.8;
    }

    .booking-success .btn {
        margin-top: 40px;
    }


/*==================================================
    CLOSING NOTE
==================================================*/

.booking-closing-note {
    padding: 145px 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.booking-closing-note-inner {
    text-align: center;
}

.booking-closing-note p {
    margin: 0;
    font-family: var(--font-display);
    font-size: 4.4rem;
    font-weight: 500;
    line-height: .95;
    letter-spacing: -.04em;
}

    .booking-closing-note p span {
        display: block;
        font-style: italic;
        font-weight: 400;
    }

.booking-closing-note small {
    display: block;
    margin-top: 27px;
    color: rgba(112, 95, 77, .7);
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.mobileonly {
    display: none;
}

/*RESPONSIVE*/
@media (max-width: 1280px) {
    .menu a {
        font-size: 1.5rem;
    }

    .opening-title {
        margin: 0;
        font-size: 4.2rem;
        font-weight: 500;
        line-height: 1.1em;
        letter-spacing: -.045em;
    }

    .meet-alejandra-title {
        margin: 0;
        font-size: 4rem;
        font-weight: 500;
        line-height: .94;
        letter-spacing: -.035em;
    }

    .services-title {
        margin: 0;
        font-size: 4rem;
        line-height: .95;
        letter-spacing: -.035em;
    }

    .about-team-heading h2 {
        font-size: 4.2rem;
        line-height: .92;
        letter-spacing: -.04em;
    }

    .portfolio-opening-title {
        font-size: 4.8rem;
    }

    .portfolio-opening {
        min-height: initial;
        padding: 120px 0 60px;
    }

    .portfolio-brides a:nth-child(1) {
        grid-column: 1 / 3;
        max-width: 800px;
    }

    .portfolio-brides a:nth-child(4) {
        grid-column: 1 / 3;
        margin-top: 50px;
        max-width: 800px;
    }

    .portfolio-hero {
        display: block;
        margin-top: 40px;
        max-width: 800px;
    }

    .services-page-opening-title {
        font-size: 4.2rem;
    }

    .service-detail-title {
        font-size: 4rem;
    }

    .bridal-collections-header h2 {
        font-size: 4rem;
    }

    .party-services-header h2 {
        font-size: 4rem;
    }

    .service-editorial-header h2 {
        font-size: 4rem;
    }

    .faq-opening-title {
        font-size: 4.8rem;
    }

    .faq-sidebar h2 {
        font-size: 3.5rem;
        line-height: .92;
        letter-spacing: -.04em;
    }
}


@media (max-width: 980px) {

    .logo img {
        width: 220px;
    }

    .navbar .btn {
        display: none;
    }

    .mobileonly {
        display: block;
    }

    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: -10px;
    }

    .menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: rgba(197, 185, 173, 0.75);
        backdrop-filter: blur(12px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 35px;
        transition: .45s ease;
        z-index: 999;
    }

        .menu.active {
            right: 0;
        }

        .menu li {
            list-style: none;
        }

        .menu a {
            color: #fff;
            font-size: 1.5rem;
            text-decoration: none;
            font-weight: 400;
        }

    .navbar {
        width: 100%;
        backdrop-filter: none;
        background: var(--color-bg);
        border-bottom: 1px solid var(--border);
        color: var(--color-text);
        padding-top: 20px;
        padding-bottom: 10px;
    }

    .opening {
        min-height: auto;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .opening-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .opening-title {
        font-size: 4.5rem;
    }

    .opening-description {
        max-width: 520px;
    }

    .opening-visual {
        width: 100%;
        aspect-ratio: 4 / 3;
    }

    .opening-footer {
        position: static;
        align-items: flex-start;
        flex-direction: column;
        margin-top: 36px;
    }

    .editorial-note {
        min-height: 54vh;
        padding: 100px 0 90px;
    }

    .editorial-note-quote {
        max-width: 680px;
        font-size: 3.5rem;
    }

    .featured-work {
        padding-bottom: 40px;
    }

    .featured-work-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 540px 360px;
        gap: 36px;
    }

    .featured-photo-large {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .featured-photo-top {
        width: 100%;
    }

    .featured-photo-bottom {
        width: 78%;
    }

    .featured-photo-wide {
        right: 4%;
        width: 42%;
    }

    .featured-work-footer {
        margin-top: 105px;
    }

    .meet-alejandra {
        padding: 120px 0;
    }

    .meet-alejandra-grid {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 34%);
        gap: 60px;
    }

    .meet-alejandra-title {
        font-size: 4rem;
    }

    .meet-alejandra-details {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .meet-detail {
        padding-bottom: 18px;
        border-bottom: 1px solid rgba(112, 95, 77, .16);
    }

        .meet-detail:last-child {
            padding-bottom: 0;
            border-bottom: none;
        }

    .booking-epilogue {
        min-height: 82vh;
    }

    .booking-epilogue-inner {
        padding-top: 125px;
        padding-bottom: 70px;
    }

    .booking-epilogue-title {
        font-size: 5rem;
    }

    .booking-epilogue-signature {
        margin-top: 110px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 55px;
        padding: 70px 0 50px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .about-opening-title {
        font-size: 5rem;
    }

    .about-artist-grid {
        grid-template-columns: minmax(280px, 40%) minmax(0, 1fr);
        gap: 65px;
    }

    .about-artist-title {
        font-size: 4.2rem;
    }

    .about-philosophy-quote {
        font-size: 4.4rem;
    }

    .about-expertise {
        padding: 125px 0 135px;
    }

    .about-expertise-title {
        font-size: 4rem;
    }

    .about-expertise-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 70px 42px;
    }

    .about-team {
        padding: 130px 0;
    }

    .about-team-grid {
        grid-template-columns: 1fr 1fr;
        gap: 65px;
    }

    .about-team-heading h2 {
        font-size: 4.2rem;
    }

    .about-team-copy {
        padding-top: 46px;
    }

    .about-closing-title {
        font-size: 4.8rem;
    }

    .portfolio-opening {
        min-height: 70vh;
        padding: 125px 0 105px;
    }

    .portfolio-opening-title {
        font-size: 4.8rem;
    }

    .portfolio-opening-lead {
        margin-top: 38px;
    }

    .portfolio-section {
        padding: 120px 0;
    }

    .portfolio-header {
        margin-bottom: 48px;
    }

        .portfolio-header h2 {
            font-size: 3.5rem;
        }


    /* BRIDES */

    .portfolio-brides {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }

        .portfolio-brides a:nth-child(1),
        .portfolio-brides a:nth-child(4) {
            grid-column: 1 / 3;
        }

        .portfolio-brides a:nth-child(4) {
            margin-top: 32px;
        }

        .portfolio-brides a:nth-child(6) {
            width: 88%;
            margin-top: 32px;
        }


    /* BRIDAL PARTY */

    .portfolio-party {
        gap: 28px;
    }


    /* PHOTOSHOOT */

    .portfolio-hero {
        margin-top: 32px;
    }


    /* SOCIAL */

    .portfolio-social {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }

        .portfolio-social a:last-child {
            margin-top: 42px;
        }

    .portfolio-closing {
        padding: 140px 0;
    }

        .portfolio-closing h2 {
            font-size: 4.7rem;
        }

    .services-page-opening-title {
        font-size: 4.2rem;
    }

    .service-detail-grid,
    .service-detail-grid-reverse {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 38%);
        gap: 65px;
    }

    .service-detail-title,
    .service-editorial-header h2,
    .service-social-detail-heading h2 {
        font-size: 4.2rem;
    }

    .service-editorial-photo {
        aspect-ratio: 16 / 9;
    }

    .service-social-detail-grid {
        grid-template-columns: 1fr 1fr;
        gap: 70px;
    }

    .services-page-closing h2 {
        font-size: 4.7rem;
    }

    .bridal-collections {
        margin-top: 100px;
    }

    .bridal-collections-header {
        margin-bottom: 58px;
    }

        .bridal-collections-header h2 {
            font-size: 3.8rem;
        }

    .bridal-packages {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px;
    }

    .bridal-package {
        min-height: 400px;
    }

    .party-services {
        margin-top: 100px;
    }

    .party-services-header {
        margin-bottom: 56px;
    }

        .party-services-header h2 {
            font-size: 3.7rem;
        }

    .party-services-grid {
        gap: 22px;
    }

    .party-service {
        min-height: 195px;
        padding: 27px 25px 24px;
    }

    .party-service-main {
        gap: 20px;
    }

    .party-service h3 {
        font-size: 1.8rem;
    }

    .party-service-price strong {
        font-size: 2rem;
    }

    .social-collections {
        margin-top: 100px;
    }

    .social-collections-header h2 {
        font-size: 3.7rem;
    }

    .social-package {
        min-height: 340px;
    }

    .faq-opening-title {
        font-size: 4.8rem;
    }

    .faq-layout {
        grid-template-columns: minmax(240px, .75fr) minmax(0, 1.25fr);
        gap: 65px;
    }

    .faq-sidebar h2 {
        font-size: 3.6rem;
    }

    .faq-question > span:first-child {
        font-size: 1.65rem;
    }

    .booking-opening-title {
        font-size: 4.8rem;
    }

    .booking-note-quote {
        font-size: 4rem;
    }

    .booking-layout {
        grid-template-columns: minmax(240px, 34%) minmax(0, 66%);
        gap: 60px;
    }

    .booking-summary h2 {
        font-size: 3.25rem;
    }

    .booking-fields-two {
        grid-template-columns: 1fr;
    }

    .booking-field-full {
        grid-column: auto;
    }

    .booking-success h2 {
        font-size: 4.5rem;
    }
}


@media (max-width: 640px) {
    .opening-eyebrow {
        margin-bottom: 22px;
        font-size: .65rem;
        letter-spacing: .19em;
    }

    .opening-title {
        font-size: 3.5rem;
    }

    .opening-anchor {
        margin: 30px 0 24px;
    }

    .opening-description {
        margin-bottom: 30px;
        font-size: .96rem;
        line-height: 1.7;
    }

    .opening-button {
        min-height: 52px;
        padding-inline: 28px;
    }

    .opening-visual {
        aspect-ratio: 3 / 4;
    }

        .opening-visual img {
            object-position: center;
        }

    .opening-scroll {
        display: none;
    }

    .editorial-note {
        min-height: auto;
        padding: 100px 0;
    }

    .editorial-note-quote {
        max-width: 100%;
        font-size: 3rem;
        line-height: 1.02;
        letter-spacing: -.02em;
    }

    .featured-work {
        padding: 20px 0 20px;
    }

    .featured-work-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 28px;
    }

    .featured-photo-large,
    .featured-photo-top,
    .featured-photo-bottom,
    .featured-photo-wide {
        position: relative;
        right: auto;
        bottom: auto;
        grid-column: auto;
        grid-row: auto;
        width: 100%;
        height: auto;
        justify-self: stretch;
        align-self: stretch;
        transform: none;
    }

    .featured-photo-large {
        aspect-ratio: 4 / 5;
    }

    .featured-photo-top {
        width: 78%;
        justify-self: end;
        aspect-ratio: 3 / 4;
    }

    .featured-photo-bottom {
        /*width: 72%;*/
        justify-self: start;
        aspect-ratio: 3 / 4;
    }

    .featured-photo-wide {
        width: 100%;
        aspect-ratio: 4 / 3;
    }

    .featured-work-footer {
        justify-content: flex-start;
        margin-top: 0px;
    }

    .editorial-note-second {
        min-height: auto;
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .meet-alejandra {
        padding: 95px 0;
    }

    .meet-alejandra-grid {
        grid-template-columns: 1fr;
        gap: 58px;
    }

    .section-eyebrow {
        margin-bottom: 22px;
        font-size: .62rem;
        letter-spacing: .2em;
    }

    .meet-alejandra-title {
        max-width: 100%;
        font-size: 3.2rem;
        line-height: .94;
    }

    .meet-alejandra-line {
        margin: 30px 0 26px;
    }

    .meet-alejandra-copy p {
        font-size: .95rem;
        line-height: 1.78;
    }

    .meet-alejandra-details {
        margin-top: 40px;
        padding-top: 24px;
    }

    .meet-detail strong {
        font-size: 2rem;
    }

    .meet-alejandra-link {
        margin-top: 36px;
    }

    .meet-alejandra-photo {
        width: 100%;
        margin: 0 0 0 auto;
        aspect-ratio: 3 / 4;
    }

    .services-title {
        font-size: 3.5rem;
        line-height: .96;
    }

    .service-item:hover h3, .service-item.active h3, .service-item:focus-visible h3 {
        transform: none;
    }

    .booking-epilogue {
        min-height: 90svh;
    }

    .booking-epilogue-background {
        background-position: 62% center;
        background-image: linear-gradient( rgba(227, 222, 218, .9), rgba(227, 222, 218, .96) ), url("../Imagenes/hero-bridal-riviera-maya.jpg");
    }

    .booking-epilogue-inner {
        justify-content: center;
        min-height: 90svh;
        padding-top: 100px;
        padding-bottom: 55px;
    }

    .booking-eyebrow {
        margin-bottom: 24px;
    }

    .booking-epilogue-title {
        font-size: 4rem;
        line-height: .9;
    }

    .booking-epilogue-description {
        max-width: 420px;
        margin-top: 30px;
        font-size: .94rem;
        line-height: 1.72;
    }

    .booking-epilogue-button {
        min-height: 53px;
        margin-top: 36px;
        padding-right: 30px;
        padding-left: 30px;
    }

    .booking-epilogue-signature {
        margin-top: 95px;
    }

    .booking-brand {
        font-size: 1.75rem;
    }

    .footer-grid {
        gap: 42px;
        padding: 55px 0 40px;
    }

    .footer-brand h3 {
        font-size: 1.9rem;
    }

    .footer-column a {
        font-size: .95rem;
    }

    .footer-bottom {
        margin-top: 15px;
    }

    .about-opening {
        min-height: auto;
        padding: 110px 0 95px;
    }

    .about-opening-title {
        font-size: 3.7rem;
        line-height: .91;
    }

    .about-opening-lead {
        margin-top: 34px;
        font-size: .96rem;
    }

    .about-artist {
        padding: 95px 0;
    }

    .about-artist-grid {
        grid-template-columns: 1fr;
        gap: 58px;
    }

    .about-artist-photo {
        width: 86%;
        aspect-ratio: 3 / 4;
    }

    .about-artist-title {
        font-size: 3.6rem;
    }

    .about-philosophy {
        min-height: auto;
        padding: 105px 0;
    }

    .about-philosophy-quote {
        font-size: 3.4rem;
        line-height: .98;
    }

    .about-expertise {
        padding: 100px 0 110px;
    }

    .about-expertise-header {
        margin-bottom: 75px;
    }

    .about-expertise-title {
        font-size: 3.5rem;
        line-height: .95;
    }

    .about-expertise-grid {
        grid-template-columns: 1fr;
        gap: 58px;
    }

    .about-expertise-number {
        margin-bottom: 28px;
    }

    .about-expertise-item h3 {
        font-size: 2rem;
    }

    .about-team {
        padding: 105px 0;
    }

    .about-team-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-team-heading h2 {
        font-size: 3.6rem;
        line-height: .94;
    }

    .about-team-copy {
        padding-top: 0;
    }

        .about-team-copy p {
            font-size: .95rem;
            line-height: 1.78;
        }

    .about-closing {
        min-height: auto;
        padding: 110px 0;
    }

    .about-closing-title {
        font-size: 2.8rem;
        line-height: .92;
    }

    .about-closing-description {
        margin-top: 30px;
        font-size: .94rem;
        line-height: 1.72;
    }

    .about-closing-button {
        margin-top: 34px;
    }

    .portfolio-opening {
        min-height: auto;
        padding: 110px 0 95px;
    }

    .portfolio-opening-title {
        font-size: 3.7rem;
        line-height: .91;
    }

    .portfolio-opening-lead {
        max-width: 100%;
        margin-top: 32px;
        font-size: .95rem;
        line-height: 1.72;
    }

    .portfolio-section {
        padding: 90px 0;
    }

    .portfolio-header {
        margin-bottom: 38px;
    }

    .section-number {
        margin-bottom: 12px;
        font-size: .62rem;
    }

    .portfolio-header h2 {
        font-size: 3rem;
        line-height: .95;
    }


    /* BRIDES */

    .portfolio-brides {
        grid-template-columns: 1fr;
        gap: 24px;
    }

        .portfolio-brides a:nth-child(1),
        .portfolio-brides a:nth-child(2),
        .portfolio-brides a:nth-child(3),
        .portfolio-brides a:nth-child(4),
        .portfolio-brides a:nth-child(5),
        .portfolio-brides a:nth-child(6) {
            grid-column: 1;
            width: 100%;
            margin-top: 0;
            justify-self: stretch;
        }


    /* BRIDAL PARTY */

    .portfolio-party {
        grid-template-columns: 1fr;
        gap: 24px;
    }


    /* PHOTOSHOOT */

    .portfolio-hero {
        margin-top: 24px;
    }


    /* SOCIAL */

    .portfolio-social {
        grid-template-columns: 1fr;
        gap: 24px;
    }

        .portfolio-social a:last-child {
            margin-top: 0;
        }


    /* IMAGE HOVER */

    .portfolio-section a:hover img {
        transform: none;
        opacity: 1;
    }

    .portfolio-closing {
        padding: 100px 0;
    }

        .portfolio-closing h2 {
            font-size: 2.8rem;
            line-height: .92;
        }

        .portfolio-closing p {
            margin-top: 28px;
            font-size: .95rem;
            line-height: 1.72;
        }

        .portfolio-closing .btn {
            margin-top: 34px;
        }

    .services-page-opening {
        min-height: auto;
        padding: 110px 0 95px;
    }

    .services-page-opening-title {
        font-size: 3.2rem;
        line-height: .91;
    }

    .services-page-opening-lead {
        margin-top: 34px;
        font-size: .95rem;
        line-height: 1.72;
    }

    .service-detail,
    .service-editorial,
    .service-social-detail {
        padding: 100px 0;
    }

    .service-detail-grid,
    .service-detail-grid-reverse,
    .service-social-detail-grid {
        grid-template-columns: 1fr;
        gap: 58px;
    }

        .service-detail-grid-reverse .service-detail-photo {
            order: 2;
        }

        .service-detail-grid-reverse .service-detail-content {
            order: 1;
        }

    .service-detail-title,
    .service-editorial-header h2,
    .service-social-detail-heading h2 {
        font-size: 3.6rem;
        line-height: .93;
    }

    .service-detail-points {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .service-detail-photo {
        width: 86%;
        margin: 0 0 0 auto;
    }

    .service-editorial-header {
        margin-bottom: 52px;
    }

    .service-editorial-photo {
        aspect-ratio: 4 / 5;
    }

    .service-editorial-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 30px;
        margin-top: 34px;
    }

    .service-social-detail-content {
        padding-top: 0;
    }

    .services-page-closing {
        min-height: auto;
        padding: 105px 0;
    }

        .services-page-closing h2 {
            font-size: 2.8rem;
            line-height: .92;
        }

    .bridal-collections {
        margin-top: 80px;
    }

    .bridal-collections-header {
        margin-bottom: 46px;
    }

        .bridal-collections-header h2 {
            font-size: 3.2rem;
            line-height: .96;
        }

        .bridal-collections-header p {
            font-size: .94rem;
        }

    .bridal-packages {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .bridal-package {
        min-height: 0;
        padding: 28px 24px 25px;
        border-radius: 12px;
    }

        .bridal-package h3 {
            margin-bottom: 24px;
            font-size: 1.9rem;
        }

        .bridal-package li {
            font-size: .86rem;
        }

    .bridal-package-price strong {
        font-size: 2.05rem;
    }

    .bridal-package-button {
        min-height: 50px;
    }

    .party-services {
        margin-top: 80px;
    }

    .party-services-header {
        margin-bottom: 44px;
    }

        .party-services-header h2 {
            font-size: 2.8rem;
            line-height: .96;
        }

        .party-services-header p {
            font-size: .94rem;
        }

    .party-services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .party-service {
        min-height: 180px;
        padding: 26px 23px 23px;
        border-radius: 11px;
    }

    .party-service-main {
        gap: 18px;
    }

    .party-service h3 {
        font-size: 1.75rem;
    }

    .party-service-price strong {
        font-size: 1.95rem;
    }

    .party-service-button {
        margin-top: 28px;
    }

    .social-collections {
        margin-top: 80px;
    }

    .social-collections-header {
        margin-bottom: 46px;
    }

        .social-collections-header h2 {
            font-size: 3.15rem;
        }

    .social-packages {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .social-package {
        min-height: 0;
        padding: 28px 24px 25px;
        border-radius: 12px;
    }

        .social-package h3 {
            font-size: 1.95rem;
        }

    .social-package-price strong {
        font-size: 2.05rem;
    }

    .faq-opening {
        min-height: auto;
        padding: 110px 0 95px;
    }

    .faq-opening-title {
        font-size: 4rem;
        line-height: .92;
    }

    .faq-opening-lead {
        margin-top: 32px;
        font-size: .95rem;
        line-height: 1.72;
    }

    .faq-content {
        padding: 100px 0 110px;
    }

    .faq-layout {
        grid-template-columns: 1fr;
        gap: 75px;
    }

    .faq-sidebar {
        position: static;
        max-width: 100%;
    }

        .faq-sidebar h2 {
            font-size: 3.5rem;
        }

    .faq-group + .faq-group {
        margin-top: 75px;
    }

    .faq-group-header h2 {
        font-size: 2.5rem;
    }

    .faq-question {
        grid-template-columns: minmax(0, 1fr) 28px;
        gap: 20px;
        padding: 24px 0;
    }

        .faq-question > span:first-child {
            font-size: 1.5rem;
        }

    .faq-answer p {
        padding-right: 30px;
        font-size: .92rem;
        line-height: 1.72;
    }

    .booking-opening {
        min-height: auto;
        padding: 110px 0 95px;
    }

    .booking-opening-title {
        font-size: 3.7rem;
        line-height: .92;
    }

    .booking-opening-lead {
        margin-top: 32px;
        font-size: .95rem;
        line-height: 1.72;
    }

    .booking-note {
        min-height: auto;
        padding: 100px 0;
    }

    .booking-note-quote {
        font-size: 3.35rem;
        line-height: .98;
    }

    .booking-inquiry {
        padding: 60px 0 60px;
    }

    .booking-layout {
        grid-template-columns: 1fr;
        gap: 80px;
    }

    .booking-summary {
        position: static;
    }

        .booking-summary h2 {
            font-size: 3.5rem;
        }

    .booking-selected-summary,
    .booking-no-selection {
        padding: 26px 23px;
    }

    .booking-form-group {
        padding-bottom: 52px;
    }

        .booking-form-group + .booking-form-group {
            padding-top: 52px;
        }

        .booking-form-group legend {
            margin-bottom: 35px;
        }

    .booking-fields-two {
        grid-template-columns: 1fr;
    }

    .booking-fields {
        gap: 34px;
    }

    .booking-form-selection {
        padding: 25px 23px;
    }

    .booking-submit-button {
        width: 100%;
    }

    .booking-success {
        padding: 55px 0;
    }

        .booking-success h2 {
            font-size: 3.75rem;
        }

    .booking-closing-note {
        padding: 105px 0;
    }

        .booking-closing-note p {
            font-size: 3.45rem;
        }
}