/* =========================================================
   EXPERIENCES
   ========================================================= */

.experiences-page {
    width: 100%;
}


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

.experiences-intro {
    width: 100%;
    margin-bottom: 92px;
}


.experiences-eyebrow {
    margin: 0 0 12px;

    color: var(--color-copper);

    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


.experiences-intro h1 {
    margin: 0;

    color: var(--color-forest);

    font-family: var(--font-serif);
    font-size: clamp(3rem, 6vw, 5.8rem);
    font-weight: 400;
    line-height: 1.04;
}


.experiences-intro-copy {
    width: 100%;
    margin-top: 34px;
}


.experiences-intro-copy p,
.experiences-copy p {
    width: 100%;
    margin: 0 0 20px;

    color: var(--color-text);

    font-size: 1.05rem;
    line-height: 1.8;
}


.experiences-intro-copy p:last-child,
.experiences-copy p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.experiences-section {
    width: 100%;
    margin-top: 110px;
}


.experiences-copy {
    width: 100%;
    margin-top: 42px;
}


.experiences-copy h2,
.experiences-season h2,
.experiences-more h2 {
    margin: 0 0 30px;

    color: var(--color-forest);

    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 4vw, 3.8rem);
    font-weight: 400;
    line-height: 1.15;
}


/* =========================================================
   SCENES
   ========================================================= */

.experiences-scene {
    position: relative;

    width: 100%;
    height: clamp(390px, 50vw, 620px);

    margin: 0;

    overflow: hidden;

    background: rgba(31, 58, 46, 0.05);
}


.experiences-scene-large {
    height: clamp(430px, 56vw, 690px);
}


.experiences-scene img {
    position: absolute;

    top: -10%;
    left: 0;

    width: 100%;
    height: 120%;

    object-fit: cover;

    transform:
        translate3d(
            0,
            var(--parallax-y, 0px),
            0
        );

    will-change: transform;
}


/* =========================================================
   SEASONS
   ========================================================= */

.experiences-season {
    margin-top: 125px;
    padding: clamp(42px, 6vw, 72px) 0;

    border-top: 1px solid rgba(31, 58, 46, 0.12);
    border-bottom: 1px solid rgba(31, 58, 46, 0.12);
}


.experiences-season .experiences-copy {
    margin-top: 0;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.experiences-more {
    margin-top: 110px;
}


.experiences-more .experiences-copy {
    margin-top: 0;
}


.experiences-more-actions {
    margin-top: 38px;
}


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

@media (max-width: 760px) {

    .experiences-intro {
        margin-bottom: 68px;
    }


    .experiences-section {
        margin-top: 78px;
    }


    .experiences-scene,
    .experiences-scene-large {
        height: 58vw;
        min-height: 270px;
        max-height: 430px;
    }


    .experiences-scene img {
        top: 0;

        height: 100%;

        transform: none !important;

        will-change: auto;
    }


    .experiences-copy {
        margin-top: 30px;
    }


    .experiences-season {
        margin-top: 84px;
    }


    .experiences-more {
        margin-top: 82px;
    }


    .experiences-more-actions .button {
        width: 100%;

        text-align: center;
    }

}


@media (prefers-reduced-motion: reduce) {

    .experiences-scene img {
        top: 0;

        height: 100%;

        transform: none !important;

        will-change: auto;
    }

}