/* =========================================================
   LA CLÉ PRIVADA
========================================================= */

.privada-page {
    background: #ece6dc;
}


/* HERO */

.privada-hero {
    position: relative;

    min-height: 100vh;
    min-height: 100svh;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background: #070b08;
}


.privada-hero-image {
    position: absolute;
    inset: 0;

    background-image:
        url("../img/privada/privada.jpg");

    background-size: cover;
    background-position: center;

    filter:
        brightness(.67)
        saturate(.78);

    transform: scale(1.02);
}


.privada-hero-overlay {
    position: absolute;
    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(5,12,8,.91) 0%,
            rgba(6,10,8,.67) 42%,
            rgba(4,6,4,.16) 76%
        ),

        linear-gradient(
            0deg,
            rgba(3,6,4,.73),
            transparent 58%
        );
}


.privada-index {
    position: absolute;

    z-index: 2;

    right:
        clamp(25px, 5vw, 90px);

    top:
        clamp(120px, 16vh, 180px);

    font-family: var(--serif);

    font-size:
        clamp(140px, 18vw, 285px);

    line-height: .7;

    color:
        rgba(221,185,111,.18);
}


.privada-hero-content {
    position: relative;

    z-index: 3;

    width:
        min(900px, 82%);

    margin:
        0
        0
        clamp(70px, 9vh, 115px)
        clamp(30px, 8vw, 135px);

    color: var(--ivory);
}


.privada-overline {
    margin-bottom: 18px;

    font-size: 9px;

    letter-spacing: .26em;

    text-transform: uppercase;

    color: var(--gold-light);
}


.privada-hero h1 {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(70px, 8vw, 130px);

    font-weight: 400;

    line-height: .83;

    letter-spacing: -.035em;
}


.privada-hero-content > p {
    width:
        min(560px, 100%);

    margin:
        30px 0;

    font-family: var(--serif);

    font-size:
        clamp(20px, 1.7vw, 28px);

    line-height: 1.45;

    color:
        rgba(247,237,217,.82);
}


.privada-discover {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    font-size: 9px;

    letter-spacing: .2em;

    text-transform: uppercase;

    color: var(--gold-light);
}


.privada-discover span {
    font-family: var(--serif);

    font-size: 25px;
}


.privada-hero-note {
    position: absolute;

    z-index: 3;

    right:
        clamp(24px, 4vw, 65px);

    bottom:
        clamp(30px, 4vh, 52px);

    display: flex;
    align-items: center;

    gap: 13px;

    font-size: 8px;

    letter-spacing: .2em;

    text-transform: uppercase;

    color:
        rgba(242,230,203,.48);
}


.privada-hero-note i {
    width: 30px;
    height: 1px;

    background:
        rgba(218,180,104,.55);
}


/* INTRO */

.privada-intro {
    padding:
        clamp(100px, 12vw, 185px)
        clamp(30px, 8vw, 140px);

    display: grid;

    grid-template-columns:
        .5fr 1.35fr .9fr;

    gap:
        clamp(30px, 5vw, 85px);

    background: #eee8df;

    color: #181914;
}


.privada-intro-title h2 {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(50px, 5vw, 83px);

    line-height: .9;

    font-weight: 400;
}


.privada-intro-copy p {
    margin:
        0 0 23px;

    font-size: 13px;

    line-height: 1.85;

    color: #696158;
}


.privada-intro-copy .privada-lead {
    font-family: var(--serif);

    font-size:
        clamp(20px, 1.55vw, 25px);

    line-height: 1.45;

    color: #292a24;
}


/* STATEMENT */

.privada-statement {
    position: relative;

    min-height: 650px;

    padding:
        clamp(90px, 10vw, 160px)
        clamp(30px, 9vw, 155px);

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            140deg,
            #173327,
            #06110c
        );

    color: var(--ivory);
}


.privada-statement-mark {
    position: absolute;

    right: -20px;
    bottom: -110px;

    font-family: var(--serif);

    font-size:
        clamp(260px, 38vw, 590px);

    line-height: .7;

    color:
        rgba(201,158,77,.045);
}


.privada-statement-content {
    position: relative;

    z-index: 2;

    width:
        min(970px, 90%);
}


.privada-statement blockquote {
    margin:
        22px 0 31px;

    font-family: var(--serif);

    font-size:
        clamp(54px, 6vw, 100px);

    line-height: .88;

    font-weight: 400;

    color: #f2e7d1;
}


.privada-statement p {
    width:
        min(610px, 100%);

    font-size: 12px;

    line-height: 1.8;

    color:
        rgba(239,231,216,.56);
}


/* OCCASIONS */

.privada-occasions {
    padding:
        clamp(100px, 11vw, 175px)
        clamp(30px, 7vw, 115px);

    background: #e9e2d8;

    color: #1c1d18;
}


.occasions-heading {
    width:
        min(760px, 100%);

    margin-bottom:
        clamp(60px, 8vw, 105px);
}


.occasions-heading h2 {
    margin:
        18px 0 25px;

    font-family: var(--serif);

    font-size:
        clamp(55px, 6vw, 95px);

    line-height: .88;

    font-weight: 400;
}


.occasions-heading p {
    width:
        min(550px, 100%);

    margin: 0;

    font-size: 12px;

    line-height: 1.8;

    color: #71695f;
}


.occasions-grid {
    display: grid;

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

    border-top:
        1px solid #c6bcac;
}


.occasion-card {
    min-height: 320px;

    padding:
        30px
        clamp(19px, 2.5vw, 38px);

    border-right:
        1px solid #c6bcac;
}


.occasion-card:last-child {
    border-right: 0;
}


.occasion-card > span {
    display: block;

    margin-bottom: 65px;

    font-family: var(--serif);

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


.occasion-card h3 {
    margin:
        0 0 17px;

    font-family: var(--serif);

    font-size:
        clamp(27px, 2.3vw, 37px);

    line-height: 1;

    font-weight: 400;
}


.occasion-card p {
    margin: 0;

    font-size: 11px;

    line-height: 1.75;

    color: #746c61;
}


/* IMAGE BREAK */

.privada-image-break {
    position: relative;

    min-height: 90vh;

    display: flex;
    align-items: flex-end;

    overflow: hidden;
}


.privada-break-image {
    position: absolute;

    inset: 0;

    background-image:
        url("../img/casa/salon-prive.webp");

    background-size: cover;

    background-position: center;
}


.privada-break-overlay {
    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(8,6,7,.83),
            rgba(7,6,6,.43) 52%,
            rgba(4,4,4,.14)
        ),

        linear-gradient(
            0deg,
            rgba(5,5,5,.78),
            transparent 58%
        );
}


.privada-break-copy {
    position: relative;

    z-index: 2;

    width:
        min(920px, 85%);

    margin:
        0 0
        clamp(65px, 8vh, 110px)
        clamp(30px, 8vw, 135px);

    color: var(--ivory);
}


.privada-break-copy h2 {
    margin:
        18px 0 0;

    font-family: var(--serif);

    font-size:
        clamp(58px, 6vw, 100px);

    line-height: .87;

    font-weight: 400;
}


/* SPACES */

.privada-spaces {
    padding:
        clamp(100px, 11vw, 175px)
        clamp(30px, 8vw, 135px);

    background: #f0ebe2;

    color: #191a15;
}


.privada-spaces-heading {
    margin-bottom:
        clamp(60px, 8vw, 105px);
}


.privada-spaces-heading h2 {
    margin:
        18px 0 0;

    font-family: var(--serif);

    font-size:
        clamp(55px, 6vw, 95px);

    line-height: .88;

    font-weight: 400;
}


.privada-space-list {
    border-top:
        1px solid #c8beb0;
}


.privada-space {
    min-height: 125px;

    display: grid;

    grid-template-columns:
        90px 1fr 1.2fr;

    align-items: center;

    gap: 30px;

    border-bottom:
        1px solid #c8beb0;
}


.privada-space-number {
    font-family: var(--serif);

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


.privada-space-title {
    font-family: var(--serif);

    font-size:
        clamp(26px, 2.3vw, 38px);
}


.privada-space-description {
    max-width: 500px;

    font-size: 11px;

    line-height: 1.75;

    color: #756d63;
}


/* SALON FEATURE */

.privada-salon {
    display: grid;

    grid-template-columns:
        1.25fr .75fr;

    min-height: 780px;

    background: #0d1711;

    color: var(--ivory);
}


.privada-salon-image {
    overflow: hidden;
}


.privada-salon-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


.privada-salon-content {
    padding:
        clamp(75px, 8vw, 130px)
        clamp(38px, 6vw, 95px);

    display: flex;
    flex-direction: column;

    justify-content: center;
}


.privada-salon-content h2 {
    margin:
        17px 0 27px;

    font-family: var(--serif);

    font-size:
        clamp(60px, 6vw, 95px);

    line-height: .88;

    font-weight: 400;
}


.privada-salon-content p {
    margin: 0;

    font-size: 12px;

    line-height: 1.85;

    color:
        rgba(241,233,216,.59);
}


.privada-salon-tags {
    margin-top: 38px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


.privada-salon-tags span {
    padding:
        9px 12px;

    border:
        1px solid rgba(219,183,111,.27);

    font-size: 8px;

    letter-spacing: .15em;

    text-transform: uppercase;

    color: var(--gold-light);
}


/* PROCESS */

.privada-process {
    padding:
        clamp(100px, 11vw, 175px)
        clamp(30px, 7vw, 115px);

    background: #eae4da;

    color: #1c1d18;
}


.process-heading {
    margin-bottom:
        clamp(60px, 8vw, 105px);
}


.process-heading h2 {
    margin:
        18px 0 0;

    font-family: var(--serif);

    font-size:
        clamp(55px, 6vw, 95px);

    line-height: .88;

    font-weight: 400;
}


.process-grid {
    display: grid;

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

    border-top:
        1px solid #c6bdaf;
}


.process-grid article {
    min-height: 280px;

    padding:
        30px
        clamp(19px, 2.5vw, 38px);

    border-right:
        1px solid #c6bdaf;
}


.process-grid article:last-child {
    border-right: 0;
}


.process-grid article > span {
    display: block;

    margin-bottom: 55px;

    font-family: var(--serif);

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


.process-grid h3 {
    margin:
        0 0 16px;

    font-family: var(--serif);

    font-size:
        clamp(27px, 2.2vw, 35px);

    font-weight: 400;
}


.process-grid p {
    margin: 0;

    font-size: 11px;

    line-height: 1.75;

    color: #746c62;
}


/* PRINCIPLES */

.privada-principles {
    padding:
        clamp(100px, 11vw, 175px)
        clamp(30px, 8vw, 135px);

    background:
        linear-gradient(
            145deg,
            #173025,
            #07110c
        );

    color: var(--ivory);
}


.principles-intro {
    width:
        min(800px, 100%);

    margin-bottom:
        clamp(65px, 8vw, 105px);
}


.principles-intro h2 {
    margin:
        18px 0 0;

    font-family: var(--serif);

    font-size:
        clamp(55px, 6vw, 95px);

    line-height: .88;

    font-weight: 400;
}


.principles-list {
    display: grid;

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

    border-top:
        1px solid rgba(221,186,115,.31);
}


.principles-list > div {
    min-height: 170px;

    padding:
        28px 18px;

    border-right:
        1px solid rgba(221,186,115,.22);
}


.principles-list > div:last-child {
    border-right: 0;
}


.principles-list strong {
    display: block;

    margin-bottom: 47px;

    font-family: var(--serif);

    font-size: 23px;

    font-weight: 400;

    color: var(--gold-light);
}


.principles-list span {
    font-size: 9px;

    letter-spacing: .15em;

    text-transform: uppercase;

    color:
        rgba(241,232,215,.58);
}


/* CTA */

.privada-cta {
    min-height: 720px;

    padding:
        90px 25px;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    text-align: center;

    background:

        radial-gradient(
            circle at 50% 40%,
            rgba(199,156,77,.12),
            transparent 31%
        ),

        #060c08;

    color: var(--ivory);
}


.privada-cta-small {
    margin-bottom: 23px;

    font-size: 9px;

    letter-spacing: .24em;

    text-transform: uppercase;

    color: var(--gold-light);
}


.privada-cta h2 {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(70px, 8vw, 125px);

    line-height: .8;

    font-weight: 400;
}


.privada-cta > p {
    width:
        min(540px, 100%);

    margin:
        30px auto;

    font-size: 12px;

    line-height: 1.8;

    color:
        rgba(239,231,215,.59);
}


.privada-cta small {
    margin-top: 28px;

    font-size: 8px;

    letter-spacing: .12em;

    text-transform: uppercase;

    color:
        rgba(222,187,117,.42);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

    .privada-intro {
        grid-template-columns:
            1fr 2fr;
    }

    .privada-intro-copy {
        grid-column: 2;
    }

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

    .privada-salon {
        grid-template-columns: 1fr;
    }

    .privada-salon-image {
        min-height: 70vw;
    }

    .principles-list {
        grid-template-columns:
            repeat(3, 1fr);
    }

}


@media (max-width: 700px) {

    .privada-hero-content {
        width: auto;

        margin:
            0 24px 62px;
    }

    .privada-index {
        top: 110px;
        right: 15px;

        font-size: 130px;
    }

    .privada-hero h1 {
        font-size:
            clamp(63px, 18vw, 90px);
    }

    .privada-hero-note {
        display: none;
    }


    .privada-intro {
        display: block;

        padding:
            90px 24px;
    }

    .privada-intro-title {
        margin:
            24px 0 35px;
    }

    .privada-intro-title h2 {
        font-size: 54px;
    }


    .privada-statement {
        min-height: 560px;

        padding:
            85px 24px;
    }

    .privada-statement-content {
        width: 100%;
    }

    .privada-statement blockquote {
        font-size: 52px;
    }


    .privada-occasions {
        padding:
            90px 24px;
    }

    .occasions-heading h2 {
        font-size: 56px;
    }

    .occasions-grid {
        grid-template-columns: 1fr;
    }

    .occasion-card {
        min-height: 245px;

        border-right: 0;

        border-bottom:
            1px solid #c6bcac;
    }

    .occasion-card > span {
        margin-bottom: 40px;
    }


    .privada-image-break {
        min-height: 78vh;
    }

    .privada-break-copy {
        width: auto;

        margin:
            0 24px 60px;
    }

    .privada-break-copy h2 {
        font-size: 54px;
    }


    .privada-spaces {
        padding:
            90px 24px;
    }

    .privada-spaces-heading h2 {
        font-size: 56px;
    }

    .privada-space {
        padding:
            24px 0;

        grid-template-columns:
            40px 1fr;

        gap: 9px 15px;
    }

    .privada-space-description {
        grid-column: 2;
    }


    .privada-salon-image {
        min-height: 80vh;
    }

    .privada-salon-content {
        padding:
            80px 24px;
    }

    .privada-salon-content h2 {
        font-size: 60px;
    }


    .privada-process {
        padding:
            90px 24px;
    }

    .process-heading h2 {
        font-size: 56px;
    }

    .process-grid {
        grid-template-columns: 1fr;
    }

    .process-grid article {
        min-height: 235px;

        border-right: 0;

        border-bottom:
            1px solid #c6bdaf;
    }


    .privada-principles {
        padding:
            90px 24px;
    }

    .principles-intro h2 {
        font-size: 55px;
    }

    .principles-list {
        grid-template-columns: 1fr;
    }

    .principles-list > div {
        min-height: auto;

        padding:
            25px 0;

        display: flex;

        justify-content: space-between;

        border-right: 0;

        border-bottom:
            1px solid rgba(221,186,115,.22);
    }

    .principles-list strong {
        margin: 0;
    }


    .privada-cta {
        min-height: 650px;

        padding:
            80px 24px;
    }

    .privada-cta h2 {
        font-size: 64px;
    }

}