/* =========================================
   Amber Ever After PHOTOGRAPHY
   EXPERIENCE PAGE
========================================= */


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

.experience-page {
    margin: 0;
    background: #f4efe8;
    color: #2d2823;
}


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

.experience-header {
    background: #f4efe8;
}

.experience-header .brand,
.experience-header .main-nav a {
    color: #2d2823;
}

.experience-header .nav-contact {
    border-color: #8d7d6f;
}

.experience-header
.mobile-menu-button span {
    background: #2d2823;
}


/* =========================================
   SHARED EXPERIENCE TYPOGRAPHY
========================================= */

.experience-eyebrow {
    margin: 0 0 28px;

    color: #9a795c;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 4px;

    text-transform: uppercase;
}

.experience-eyebrow.light {
    color: #c5a486;
}


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

.experience-hero {
    padding:
        210px 7%
        150px;

    background: #f4efe8;
}

.experience-hero-inner {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(320px, 0.55fr);

    gap: 130px;

    align-items: end;
}

.experience-hero h1 {
    max-width: 900px;

    margin: 0;

    color: #2d2823;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

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

    font-weight: 400;

    line-height: 0.98;

    letter-spacing: -4px;
}

.experience-hero h1 em {
    display: block;

    margin-top: 8px;

    color: #9d7f63;

    font-weight: 400;
}

.experience-hero-copy {
    padding-bottom: 10px;
}

.experience-hero-copy p {
    margin: 0 0 22px;

    color: #685e55;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    line-height: 1.85;
}

.experience-hero-copy
.experience-hero-lead {
    color: #332e29;

    font-size: 21px;

    line-height: 1.6;
}

.experience-text-link {
    display: inline-flex;

    align-items: center;

    gap: 25px;

    margin-top: 18px;

    padding-bottom: 8px;

    border-bottom:
        1px solid #9d8065;

    color: #332e29;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 3px;

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

.experience-text-link span {
    font-size: 15px;

    transition:
        transform 0.3s ease;
}

.experience-text-link:hover span {
    transform:
        translateY(5px);
}


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

.session-intro {
    padding:
        145px 7%
        105px;

    background: #eae0d4;
}

.session-intro-inner {
    max-width: 1100px;

    margin: 0 auto;

    text-align: center;
}

.session-intro h2 {
    margin: 0 auto 35px;

    color: #2d2823;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(52px, 6vw, 85px);

    font-weight: 400;

    line-height: 1;

    letter-spacing: -3px;
}

.session-intro h2 em {
    display: block;

    color: #9b7d61;

    font-weight: 400;
}

.session-intro-inner > p:last-child {
    max-width: 580px;

    margin: 0 auto;

    color: #6b6057;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 16px;

    line-height: 1.8;
}


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

.session-list {
    padding:
        0 7%
        140px;

    background: #eae0d4;
}

.session-row {
    max-width: 1400px;

    margin: 0 auto;

    padding:
        60px 0;

    display: grid;

    grid-template-columns:
        80px
        minmax(300px, 1fr)
        minmax(300px, 0.65fr);

    gap: 55px;

    align-items: start;

    border-top:
        1px solid
        rgba(
            74,
            63,
            54,
            0.25
        );
}

.session-row:last-child {
    border-bottom:
        1px solid
        rgba(
            74,
            63,
            54,
            0.25
        );
}

.session-number {
    padding-top: 6px;

    color: #a18367;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 12px;

    font-style: italic;
}

.session-name > p {
    margin:
        0 0 18px;

    color: #9a795c;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 4px;

    text-transform: uppercase;
}

.session-name h3 {
    max-width: 600px;

    margin: 0;

    color: #2d2823;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(35px, 4vw, 55px);

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -1.5px;
}

.session-name h3 em {
    display: block;

    color: #9b7d61;

    font-weight: 400;
}

.session-description p {
    margin:
        0 0 25px;

    color: #685e55;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    line-height: 1.85;
}

.session-link {
    display: inline-flex;

    align-items: center;

    gap: 24px;

    padding-bottom: 7px;

    border-bottom:
        1px solid
        #a58c75;

    color: #342e29;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 2.5px;

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

.session-link span {
    font-size: 15px;

    transition:
        transform 0.3s ease;
}

.session-link:hover span {
    transform:
        translateX(6px);
}


/* =========================================
   COMFORT SECTION
========================================= */

.comfort-section {
    padding:
        160px 7%;

    background: #2b2723;

    color: #fff;
}

.comfort-inner {
    max-width: 1250px;

    margin: 0 auto;
}

.comfort-number {
    display: block;

    margin-bottom: 35px;

    color: #c1a181;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 12px;

    font-style: italic;
}

.comfort-section h2 {
    max-width: 1000px;

    margin:
        0 0 70px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

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

    font-weight: 400;

    line-height: 0.98;

    letter-spacing: -3px;
}

.comfort-section h2 em {
    display: block;

    color: #c2a182;

    font-weight: 400;
}

.comfort-copy {
    max-width: 900px;

    margin-left: auto;

    display: grid;

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

    gap: 45px;
}

.comfort-copy p {
    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.7
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    line-height: 1.8;
}

.comfort-copy p:first-child {
    color: white;

    font-size: 19px;
}


/* =========================================
   PROCESS
========================================= */

.process-section {
    padding:
        150px 7%;

    background: #f4efe8;
}

.process-inner {
    max-width: 1400px;

    margin: 0 auto;
}

.process-heading {
    max-width: 900px;

    margin-bottom: 90px;
}

.process-heading h2 {
    margin: 0;

    color: #2d2823;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

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

    font-weight: 400;

    line-height: 0.98;

    letter-spacing: -3px;
}

.process-heading h2 em {
    display: block;

    color: #9c7d61;

    font-weight: 400;
}

.process-grid {
    display: grid;

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

    border-top:
        1px solid
        #cec0b2;

    border-bottom:
        1px solid
        #cec0b2;
}

.process-card {
    min-height: 350px;

    padding:
        38px 32px
        45px;

    border-right:
        1px solid
        #cec0b2;
}

.process-card:last-child {
    border-right: none;
}

.process-number {
    display: block;

    margin-bottom: 70px;

    color: #9c7d61;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 11px;

    font-style: italic;
}

.process-card h3 {
    margin:
        0 0 20px;

    color: #302a25;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 29px;

    font-weight: 400;
}

.process-card p {
    margin: 0;

    color: #6b6057;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================
   DETAILS / INFORMATION
========================================= */

.experience-info {
    padding:
        150px 7%;

    background: #eae0d4;
}

.experience-info-inner {
    max-width: 1400px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 0.6fr);

    gap: 130px;

    align-items: start;
}

.experience-info-heading h2 {
    max-width: 760px;

    margin: 0;

    color: #2d2823;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(52px, 6vw, 82px);

    font-weight: 400;

    line-height: 1;

    letter-spacing: -3px;
}

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

    color: #9b7d61;

    font-weight: 400;
}

.experience-info-copy {
    padding-top: 35px;
}

.experience-info-copy p {
    margin:
        0 0 22px;

    color: #675d54;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    line-height: 1.85;
}

.experience-outline-button {
    display: inline-flex;

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

    gap: 35px;

    margin-top: 25px;

    min-height: 58px;

    padding:
        0 30px;

    border:
        1px solid
        #6f6257;

    color: #302a25;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 2.5px;

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

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.experience-outline-button:hover {
    background: #2b2723;
    color: white;
}


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

.experience-cta {
    padding:
        165px 7%;

    background: #2b2723;

    color: white;
}

.experience-cta-inner {
    max-width: 1050px;

    margin: 0 auto;

    text-align: center;
}

.experience-cta h2 {
    margin:
        0 0 35px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

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

    font-weight: 400;

    line-height: 0.98;

    letter-spacing: -3px;
}

.experience-cta h2 em {
    display: block;

    color: #c2a182;

    font-weight: 400;
}

.experience-cta-inner > p:not(
    .experience-eyebrow
) {
    max-width: 610px;

    margin:
        0 auto 42px;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 16px;

    line-height: 1.8;
}

.experience-cta-button {
    display: inline-flex;

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

    gap: 35px;

    min-height: 60px;

    padding:
        0 34px;

    background: #f4efe8;

    color: #2b2723;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 2.5px;

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

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.experience-cta-button:hover {
    transform:
        translateY(-3px);

    background: white;
}

.experience-cta-button span {
    font-size: 15px;
}


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

@media (max-width: 1000px) {

    .experience-hero-inner {
        gap: 70px;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, 0.55fr);
    }

    .session-row {
        grid-template-columns:
            55px
            minmax(250px, 1fr)
            minmax(250px, 0.7fr);

        gap: 35px;
    }

    .comfort-copy {
        margin-left: 0;

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

        gap: 30px;
    }

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

    .process-card:nth-child(2) {
        border-right: none;
    }

    .process-card:nth-child(-n+2) {
        border-bottom:
            1px solid
            #cec0b2;
    }

    .experience-info-inner {
        gap: 70px;
    }

}


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

@media (max-width: 650px) {

    /* HERO */

    .experience-hero {
        padding:
            145px 6%
            95px;
    }

    .experience-hero-inner {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .experience-hero h1 {
        font-size: 56px;

        line-height: 1;

        letter-spacing: -2px;
    }

    .experience-hero-copy
    .experience-hero-lead {
        font-size: 19px;
    }


    /* INTRO */

    .session-intro {
        padding:
            100px 6%
            70px;
    }

    .session-intro h2 {
        font-size: 49px;

        letter-spacing: -2px;
    }


    /* SESSIONS */

    .session-list {
        padding:
            0 6%
            95px;
    }

    .session-row {
        padding:
            45px 0;

        grid-template-columns: 1fr;

        gap: 20px;
    }

    .session-number {
        margin-bottom: 5px;
    }

    .session-name h3 {
        font-size: 40px;
    }

    .session-description {
        padding-top: 10px;
    }


    /* COMFORT */

    .comfort-section {
        padding:
            105px 6%;
    }

    .comfort-section h2 {
        margin-bottom: 55px;

        font-size: 50px;

        letter-spacing: -2px;
    }

    .comfort-copy {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    /* PROCESS */

    .process-section {
        padding:
            105px 6%;
    }

    .process-heading {
        margin-bottom: 60px;
    }

    .process-heading h2 {
        font-size: 50px;

        letter-spacing: -2px;
    }

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

    .process-card {
        min-height: 0;

        padding:
            35px 15px
            45px;

        border-right: none;

        border-bottom:
            1px solid
            #cec0b2;
    }

    .process-card:nth-child(-n+2) {
        border-bottom:
            1px solid
            #cec0b2;
    }

    .process-card:last-child {
        border-bottom: none;
    }

    .process-number {
        margin-bottom: 28px;
    }


    /* INFO */

    .experience-info {
        padding:
            105px 6%;
    }

    .experience-info-inner {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .experience-info-heading h2 {
        font-size: 50px;

        letter-spacing: -2px;
    }

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


    /* CTA */

    .experience-cta {
        padding:
            110px 6%;
    }

    .experience-cta h2 {
        font-size: 52px;

        letter-spacing: -2px;
    }

}