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

.experiences-page {
    width: 100%;
    overflow: hidden;
    background: #f5f2ed;
    color: #062b49;
}

.experiences-page .container {
    width: min(1180px, calc(100% - 64px));
    margin: 0 auto;
}

.experiences-page a {
    -webkit-tap-highlight-color: transparent;
}


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

.experience-hero {
    position: relative;
    min-height: 790px;
    overflow: hidden;
    background: #062b49;
    color: #fff;
}

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

    background-image:
        url("https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=2200&q=90");

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

    transform: scale(1.08);

    animation: experienceHeroZoom 14s
        cubic-bezier(.2,.7,.2,1)
        forwards;
}

@keyframes experienceHeroZoom {
    from {
        transform: scale(1.08);
    }

    to {
        transform: scale(1);
    }
}

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

    background:
        linear-gradient(
            90deg,
            rgba(3,25,45,.95),
            rgba(3,25,45,.55) 55%,
            rgba(3,25,45,.12)
        ),
        linear-gradient(
            0deg,
            rgba(3,25,45,.88),
            transparent 60%
        );
}

.experience-hero-content {
    position: relative;
    z-index: 2;

    width: min(1180px, calc(100% - 64px));
    min-height: 790px;

    margin: auto;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 30px 0 35px;
}

.experience-hero-top,
.experience-hero-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .19em;
}

.experience-hero-top span:last-child,
.experience-hero-bottom span:last-child {
    color: rgba(255,255,255,.42);
}

.experience-hero-main {
    margin-top: auto;
    margin-bottom: auto;
}

.experience-small-label {
    display: block;

    margin-bottom: 22px;

    color: rgba(255,255,255,.45);

    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .22em;
}

.experience-hero-main h1 {
    max-width: 850px;

    margin: 0;

    color: #fff;

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

    font-size:
        clamp(82px, 11vw, 150px);

    line-height: .76;

    font-weight: 500;

    letter-spacing: -.075em;
}

.experience-hero-main h1 em {
    display: block;

    margin-top: 12px;

    color: #dfc0c3;

    font-style: italic;
    font-weight: 400;

    letter-spacing: -.045em;
}

.experience-hero-main p {
    max-width: 360px;

    margin: 38px 0 0;

    color: rgba(255,255,255,.62);

    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 1.8;
}

.experience-hero-main > a {
    display: inline-flex;
    align-items: center;
    gap: 27px;

    margin-top: 35px;

    padding-bottom: 11px;

    border-bottom:
        1px solid
        rgba(255,255,255,.4);

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .16em;

    text-decoration: none;
    text-transform: uppercase;

    transition:
        gap .35s ease,
        color .35s ease;
}

.experience-hero-main > a:hover {
    gap: 42px;
    color: #dfc0c3;
}

.experience-hero-main > a b {
    font-size: 16px;
    font-weight: 400;
}


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

.experience-intro {
    padding: 145px 0 135px;
    background: #f5f2ed;
}

.experience-intro-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 110px;
}

.section-eyebrow {
    display: block;

    color: #a92e35;

    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .2em;
}

.experience-intro h2 {
    max-width: 650px;

    margin: 18px 0 0;

    color: #062b49;

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

    font-size:
        clamp(64px, 7vw, 96px);

    line-height: .8;

    font-weight: 500;

    letter-spacing: -.07em;
}

.experience-intro h2 em {
    display: block;

    color: #a92e35;

    font-style: italic;
    font-weight: 400;
}

.experience-intro-copy {
    padding-top: 48px;
}

.experience-intro-large {
    max-width: 510px;

    margin: 0;

    color: #062b49;

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

    font-size: 25px;
    line-height: 1.38;

    letter-spacing: -.025em;
}

.experience-intro-copy > p:last-child {
    max-width: 450px;

    margin: 35px 0 0;

    color: #737b7d;

    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 1.95;
}


/* =========================================================
   FEATURED EXPERIENCE
========================================================= */

.featured-experience {
    position: relative;

    min-height: 720px;

    overflow: hidden;

    background: #062b49;
    color: #fff;
}

.featured-experience-image {
    position: absolute;
    inset: 0;
}

.featured-experience-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1.2s ease;
}

.featured-experience:hover
.featured-experience-image img {
    transform: scale(1.04);
}

.featured-experience-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3,25,45,.94),
            rgba(3,25,45,.58) 58%,
            rgba(3,25,45,.12)
        ),
        linear-gradient(
            0deg,
            rgba(3,25,45,.8),
            transparent 65%
        );
}

.featured-experience-content {
    position: relative;
    z-index: 2;

    min-height: 720px;

    display: grid;
    grid-template-columns: 110px 1fr;

    align-items: center;

    padding-top: 40px;
    padding-bottom: 40px;
}

.featured-number {
    align-self: flex-start;

    padding-top: 60px;

    color: rgba(255,255,255,.35);

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

    font-size: 22px;
}

.featured-details {
    max-width: 700px;
}

.featured-details > span {
    color: rgba(255,255,255,.43);

    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .2em;
}

.featured-details h2 {
    margin: 22px 0 0;

    color: #fff;

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

    font-size:
        clamp(68px, 8vw, 112px);

    line-height: .76;

    font-weight: 500;

    letter-spacing: -.07em;
}

.featured-details h2 em {
    display: block;

    color: #dfc0c3;

    font-style: italic;
    font-weight: 400;
}

.featured-details p {
    max-width: 430px;

    margin: 35px 0 0;

    color: rgba(255,255,255,.57);

    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 1.9;
}

.featured-details a {
    display: inline-flex;
    align-items: center;
    gap: 28px;

    margin-top: 35px;

    padding-bottom: 11px;

    border-bottom:
        1px solid
        rgba(255,255,255,.35);

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .16em;

    text-decoration: none;
    text-transform: uppercase;

    transition:
        gap .3s ease,
        color .3s ease;
}

.featured-details a:hover {
    gap: 42px;
    color: #dfc0c3;
}

.featured-details a b {
    font-size: 16px;
    font-weight: 400;
}


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

.experience-list-section {
    padding: 145px 0;

    background: #fff;
}

.experience-list-heading {
    display: grid;

    grid-template-columns: 1fr .7fr;

    gap: 100px;

    align-items: end;
}

.experience-list-heading h2 {
    max-width: 700px;

    margin: 18px 0 0;

    color: #062b49;

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

    font-size:
        clamp(62px, 7vw, 94px);

    line-height: .79;

    font-weight: 500;

    letter-spacing: -.07em;
}

.experience-list-heading h2 em {
    display: block;

    color: #a92e35;

    font-style: italic;
    font-weight: 400;
}

.experience-list-heading > p {
    max-width: 390px;

    margin: 0;

    color: #737b7d;

    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 1.9;
}

.experience-list {
    margin-top: 80px;

    border-top:
        1px solid
        rgba(6,43,73,.14);
}

.experience-row {
    position: relative;

    display: grid;

    grid-template-columns:
        70px
        250px
        1fr
        50px;

    align-items: center;

    min-height: 205px;

    padding: 25px 0;

    border-bottom:
        1px solid
        rgba(6,43,73,.14);

    text-decoration: none;

    transition:
        padding .45s ease,
        background .45s ease;
}

.experience-row:hover {
    padding-left: 20px;
    padding-right: 20px;

    background: #f5f2ed;
}

.experience-row-number {
    color: #a92e35;

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

    font-size: 12px;
}

.experience-row-image {
    width: 215px;
    height: 145px;

    overflow: hidden;

    background: #062b49;
}

.experience-row-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .8s ease;
}

.experience-row:hover
.experience-row-image img {
    transform: scale(1.08);
}

.experience-row-content {
    padding: 0 45px;
}

.experience-row-content > span {
    color: #8b8f91;

    font-family: Arial, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .18em;
}

.experience-row-content h3 {
    margin: 10px 0 0;

    color: #062b49;

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

    font-size: 36px;

    line-height: .95;

    font-weight: 500;

    letter-spacing: -.045em;
}

.experience-row-content h3 em {
    color: #a92e35;

    font-style: italic;
    font-weight: 400;
}

.experience-row-content p {
    max-width: 430px;

    margin: 17px 0 0;

    color: #7a8082;

    font-family: Arial, sans-serif;
    font-size: 9px;
    line-height: 1.7;
}

.experience-row-arrow {
    width: 42px;
    height: 42px;

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

    border:
        1px solid
        rgba(6,43,73,.2);

    border-radius: 50%;

    color: #062b49;

    font-size: 14px;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}

.experience-row:hover
.experience-row-arrow {
    transform: rotate(45deg);

    background: #062b49;

    color: #fff;
}


/* =========================================================
   QUOTE
========================================================= */

.experience-quote {
    position: relative;

    min-height: 620px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #062b49;

    color: #fff;
}

.experience-quote-bg {
    position: absolute;
    inset: 0;

    background-image:
        url("https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=2200&q=90");

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

    transition:
        transform 1.2s ease;
}

.experience-quote:hover
.experience-quote-bg {
    transform: scale(1.04);
}

.experience-quote-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3,25,45,.96),
            rgba(3,25,45,.62),
            rgba(3,25,45,.18)
        );
}

.experience-quote-content {
    position: relative;
    z-index: 2;
}

.experience-quote-content > span {
    color: rgba(255,255,255,.4);

    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .2em;
}

.experience-quote blockquote {
    max-width: 900px;

    margin: 25px 0 0;

    color: #fff;

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

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

    line-height: .86;

    font-weight: 400;

    letter-spacing: -.06em;
}

.experience-quote-line {
    width: 55px;
    height: 1px;

    margin-top: 45px;

    background: rgba(255,255,255,.4);
}

.experience-quote-content p {
    max-width: 420px;

    margin: 25px 0 0;

    color: rgba(255,255,255,.53);

    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 1.9;
}


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

.destination-experience-section {
    padding: 145px 0;

    background: #f5f2ed;
}

.destination-experience-heading h2 {
    max-width: 850px;

    margin: 18px 0 0;

    color: #062b49;

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

    font-size:
        clamp(65px, 7vw, 96px);

    line-height: .79;

    font-weight: 500;

    letter-spacing: -.07em;
}

.destination-experience-heading h2 em {
    display: block;

    color: #a92e35;

    font-style: italic;
    font-weight: 400;
}

.destination-experience-cards {
    display: grid;

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

    gap: 12px;

    margin-top: 75px;
}

.destination-experience-card {
    position: relative;

    height: 450px;

    overflow: hidden;

    background: #062b49;

    text-decoration: none;
}

.destination-experience-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .9s ease;
}

.destination-experience-card:hover img {
    transform: scale(1.08);
}

.destination-card-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(3,25,45,.92),
            rgba(3,25,45,.05) 68%
        );
}

.destination-card-content {
    position: absolute;

    z-index: 2;

    left: 22px;
    right: 22px;
    bottom: 22px;
}

.destination-card-content span {
    color: rgba(255,255,255,.48);

    font-family: Arial, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .17em;
}

.destination-card-content h3 {
    margin: 8px 0 0;

    color: #fff;

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

    font-size: 30px;

    font-weight: 500;

    letter-spacing: -.035em;
}

.destination-card-content b {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 35px;
    height: 35px;

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

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

    border-radius: 50%;

    color: #fff;

    font-size: 13px;
    font-weight: 400;

    transition:
        transform .35s ease;
}

.destination-experience-card:hover
.destination-card-content b {
    transform: rotate(45deg);
}


/* =========================================================
   CUSTOM JOURNEY
========================================================= */

.experience-custom {
    padding: 135px 0;

    background: #062b49;

    color: #fff;
}

.experience-custom-inner {
    display: grid;

    grid-template-columns:
        1.1fr
        .7fr;

    gap: 100px;

    align-items: end;
}

.experience-custom-inner > div:first-child > span {
    color: rgba(255,255,255,.4);

    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .2em;
}

.experience-custom h2 {
    max-width: 800px;

    margin: 20px 0 0;

    color: #fff;

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

    font-size:
        clamp(65px, 7vw, 100px);

    line-height: .78;

    font-weight: 500;

    letter-spacing: -.07em;
}

.experience-custom h2 em {
    display: block;

    color: #dfc0c3;

    font-style: italic;
    font-weight: 400;
}

.experience-custom-right {
    padding-bottom: 8px;
}

.experience-custom-right p {
    max-width: 390px;

    margin: 0;

    color: rgba(255,255,255,.52);

    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 1.9;
}

.experience-custom-right a {
    display: inline-flex;
    align-items: center;
    gap: 27px;

    margin-top: 32px;

    padding-bottom: 11px;

    border-bottom:
        1px solid
        rgba(255,255,255,.35);

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .16em;

    text-decoration: none;
    text-transform: uppercase;

    transition:
        gap .3s ease,
        color .3s ease;
}

.experience-custom-right a:hover {
    gap: 42px;
    color: #dfc0c3;
}

.experience-custom-right a b {
    font-size: 16px;
    font-weight: 400;
}


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

@media (max-width: 1000px) {

    .experiences-page .container,
    .experience-hero-content {
        width: min(900px, calc(100% - 48px));
    }

    .experience-intro-grid {
        gap: 60px;
    }

    .experience-list-heading {
        gap: 60px;
    }

    .experience-row {
        grid-template-columns:
            55px
            190px
            1fr
            45px;
    }

    .experience-row-image {
        width: 170px;
        height: 125px;
    }

    .experience-row-content {
        padding: 0 25px;
    }

    .experience-row-content h3 {
        font-size: 30px;
    }

    .destination-experience-cards {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


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

@media (max-width: 700px) {

    .experiences-page .container,
    .experience-hero-content {
        width: calc(100% - 40px);
    }


    /* HERO */

    .experience-hero,
    .experience-hero-content {
        min-height: 680px;
    }

    .experience-hero-main h1 {
        font-size: 68px;
    }

    .experience-hero-main h1 em {
        margin-top: 8px;
    }

    .experience-hero-top {
        gap: 20px;
    }

    .experience-hero-top span:last-child {
        text-align: right;
    }


    /* INTRO */

    .experience-intro {
        padding: 90px 0;
    }

    .experience-intro-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .experience-intro h2 {
        font-size: 59px;
    }

    .experience-intro-copy {
        padding-top: 0;
    }

    .experience-intro-large {
        font-size: 22px;
    }


    /* FEATURED */

    .featured-experience {
        min-height: 650px;
    }

    .featured-experience-content {
        min-height: 650px;

        grid-template-columns: 45px 1fr;
    }

    .featured-number {
        padding-top: 20px;
    }

    .featured-details h2 {
        font-size: 62px;
    }


    /* LIST */

    .experience-list-section {
        padding: 90px 0;
    }

    .experience-list-heading {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .experience-list-heading h2 {
        font-size: 59px;
    }

    .experience-list {
        margin-top: 55px;
    }

    .experience-row {
        grid-template-columns:
            35px
            105px
            1fr;

        min-height: 175px;

        padding: 20px 0;
    }

    .experience-row-number {
        align-self: flex-start;
        padding-top: 5px;
    }

    .experience-row-image {
        width: 95px;
        height: 130px;
    }

    .experience-row-content {
        padding: 0 0 0 18px;
    }

    .experience-row-content h3 {
        font-size: 25px;
        line-height: .9;
    }

    .experience-row-content p {
        display: none;
    }

    .experience-row-arrow {
        display: none;
    }


    /* QUOTE */

    .experience-quote {
        min-height: 560px;
    }

    .experience-quote blockquote {
        font-size: 54px;
    }


    /* DESTINATIONS */

    .destination-experience-section {
        padding: 90px 0;
    }

    .destination-experience-heading h2 {
        font-size: 59px;
    }

    .destination-experience-cards {
        grid-template-columns:
            1fr 1fr;

        gap: 8px;

        margin-top: 55px;
    }

    .destination-experience-card {
        height: 310px;
    }

    .destination-card-content {
        left: 15px;
        right: 15px;
        bottom: 15px;
    }

    .destination-card-content h3 {
        font-size: 23px;
    }


    /* CUSTOM */

    .experience-custom {
        padding: 90px 0;
    }

    .experience-custom-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .experience-custom h2 {
        font-size: 59px;
    }

}


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

@media (max-width: 420px) {

    .experiences-page .container,
    .experience-hero-content {
        width: calc(100% - 30px);
    }

    .experience-hero-main h1 {
        font-size: 57px;
    }

    .experience-intro h2,
    .experience-list-heading h2,
    .destination-experience-heading h2,
    .experience-custom h2 {
        font-size: 51px;
    }

    .featured-details h2 {
        font-size: 52px;
    }

    .experience-row {
        grid-template-columns:
            28px
            90px
            1fr;
    }

    .experience-row-image {
        width: 82px;
        height: 115px;
    }

    .experience-row-content {
        padding-left: 14px;
    }

    .experience-row-content h3 {
        font-size: 21px;
    }

    .destination-experience-card {
        height: 260px;
    }

    .destination-card-content h3 {
        font-size: 20px;
    }

    .experience-quote blockquote {
        font-size: 48px;
    }

}