/* =========================================================
   EXPERIENCE DETAIL PAGE
========================================================= */

.experience-detail-page {
    background: #ffffff;
}


.experience-detail-container {
    width: calc(100% - (var(--site-gutter) * 2));
    max-width: 1280px;

    margin: 0 auto;
}


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

.experience-detail-hero {
    position: relative;

    min-height: 620px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: var(--narina-dark-green);
}


.experience-detail-hero > img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.experience-detail-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(3, 31, 20, .88),
            rgba(3, 31, 20, .18) 70%
        ),
        linear-gradient(
            to right,
            rgba(3, 31, 20, .55),
            transparent 67%
        );
}


.experience-detail-hero-content {
    position: relative;

    z-index: 2;

    width: calc(100% - (var(--site-gutter) * 2));
    max-width: 1280px;

    margin: 0 auto;

    padding:
        150px
        0
        65px;

    color: #ffffff;

    text-align: center;
}


.experience-back {
    display: inline-block;

    margin-bottom: 32px;

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

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

    letter-spacing: .12em;

    text-transform: uppercase;
}


.experience-detail-eyebrow {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 17px;

    color: rgba(255,255,255,.78);
}


.experience-detail-eyebrow > span {
    width: 32px;
    height: 2px;

    background: var(--narina-red);
}


.experience-detail-eyebrow strong {
    font-size: 9px;

    font-weight: 700;

    letter-spacing: .17em;

    text-transform: uppercase;
}


.experience-detail-hero h1 {
    max-width: 800px;

    margin: 0 auto;

    color: #ffffff;

    font-family: var(--font-heading);

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

    font-weight: 600;

    line-height: .98;

    letter-spacing: -.04em;
}


.experience-detail-hero p {
    max-width: 650px;

    margin:
        21px
        auto
        0;

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

    font-size: 15px;

    line-height: 1.7;
}


.experience-hero-cta {
    min-height: 52px;

    margin-top: 27px;

    padding:
        0
        24px;

    display: inline-flex;

    align-items: center;

    gap: 18px;

    color: #ffffff;

    background: var(--narina-red);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

    transition:
        transform .25s ease,
        background .25s ease;
}


.experience-hero-cta:hover {
    transform: translateY(-2px);

    background: var(--narina-dark-red);
}


/* =========================================================
   OVERVIEW
========================================================= */

.experience-detail-overview {
    padding:
        clamp(90px, 8vw, 125px)
        0;

    background: #ffffff;
}


.experience-overview-top {
    display: block;
}


.experience-detail-copy {
    max-width: 880px;

    margin: 0 auto;

    text-align: center;
}

.experience-detail-copy .section-eyebrow {
    justify-content: center;
}


.experience-detail-copy h2 {
    max-width: 850px;

    margin:
        14px
        auto
        0;

    color: #173f30;

    font-family: var(--font-heading);

    font-size: clamp(42px, 4.5vw, 62px);

    font-weight: 500;

    line-height: 1.04;

    letter-spacing: -.035em;
}


.experience-description {
    max-width: 780px;

    margin:
        27px
        auto
        0;

    color: #68736c;

    font-size: 15px;

    line-height: 1.85;
}


.experience-description p + p {
    margin-top: 17px;
}


/* =========================================================
   FACTS
========================================================= */

.experience-facts {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    background: #f7f6f1;

    border:
        1px solid
        rgba(4,60,37,.10);

    border-radius: 16px;

    overflow: hidden;
}


.experience-fact {
    min-height: 115px;

    padding: 25px;

    border-right:
        1px solid
        rgba(4,60,37,.09);

    border-bottom:
        1px solid
        rgba(4,60,37,.09);
}


.experience-fact:nth-child(even) {
    border-right: 0;
}


.experience-fact-wide {
    grid-column: 1 / -1;

    border-right: 0;

    border-bottom: 0;
}


.experience-fact span {
    display: block;

    margin-bottom: 10px;

    color: var(--narina-red);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .15em;

    text-transform: uppercase;
}


.experience-fact strong {
    color: #173f30;

    font-size: 13px;

    line-height: 1.55;
}


/* =========================================================
   IMMERSIVE IMAGE
========================================================= */

.experience-visual-section {
    padding:
        0
        0
        clamp(100px, 9vw, 145px);

    background: #ffffff;
}


.experience-secondary-figure {
    position: relative;

    height: min(660px, 65vw);

    min-height: 470px;

    margin: 0;

    overflow: hidden;

    border-radius: 18px;

    background: #173f30;
}


.experience-secondary-figure > img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.experience-image-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(3,31,20,.78),
            transparent 52%
        );
}


.experience-secondary-figure figcaption {
    position: absolute;

    z-index: 2;

    left: clamp(28px, 5vw, 66px);

    bottom: clamp(30px, 5vw, 60px);

    color: #ffffff;
}


.experience-secondary-figure figcaption span {
    display: block;

    margin-bottom: 11px;

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

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.experience-secondary-figure figcaption strong {
    display: block;

    font-family: var(--font-heading);

    font-size: clamp(38px, 4.6vw, 62px);

    font-weight: 500;

    line-height: 1;
}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.experience-highlights-section {
    padding:
        clamp(95px, 9vw, 135px)
        0;

    background: #f7f5ef;
}


.experience-section-heading {
    max-width: 730px;

    margin-bottom: 55px;
}


.experience-section-heading h2 {
    margin: 13px 0 0;

    color: #173f30;

    font-family: var(--font-heading);

    font-size: clamp(42px, 4.5vw, 62px);

    font-weight: 500;

    line-height: 1.03;
}


.experience-section-heading h2 em {
    color: var(--narina-green);

    font-weight: 500;
}


.experience-section-heading > p {
    max-width: 580px;

    margin-top: 17px;

    color: #707a74;

    font-size: 14px;

    line-height: 1.75;
}


.experience-highlights-grid {
    display: grid;

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

    gap: 18px;
}


.experience-highlight-card {
    min-height: 250px;

    padding: 32px;

    background: #ffffff;

    border:
        1px solid
        rgba(4,60,37,.08);
}


.experience-highlight-number {
    margin-bottom: 55px;

    color: var(--narina-red);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .14em;
}


.experience-highlight-card h3 {
    margin: 0;

    color: #173f30;

    font-family: var(--font-heading);

    font-size: 26px;

    font-weight: 600;
}


.experience-highlight-card p {
    margin-top: 12px;

    color: #747d78;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   WHAT TO EXPECT
========================================================= */

.experience-expect-section {
    padding:
        clamp(100px, 9vw, 145px)
        0;

    background: #0b553c;
}


.experience-expect-heading {
    display: grid;

    grid-template-columns:
        .8fr
        1.2fr;

    align-items: end;

    margin-bottom: 55px;
}


.experience-expect-heading h2 {
    margin: 0;

    color: #ffffff;

    font-family: var(--font-heading);

    font-size: clamp(43px, 5vw, 66px);

    font-weight: 500;

    line-height: 1;
}


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

    color: #cadbd2;

    font-weight: 500;
}


.section-eyebrow.light {
    color: rgba(255,255,255,.7);
}


.experience-expect-list {
    border-top:
        1px solid
        rgba(255,255,255,.18);
}


.experience-expect-item {
    min-height: 120px;

    display: grid;

    grid-template-columns:
        90px
        .9fr
        1.4fr;

    align-items: center;

    gap: 35px;

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


.experience-expect-item > span {
    color: var(--narina-red);

    font-size: 10px;

    font-weight: 700;
}


.experience-expect-item h3 {
    margin: 0;

    color: #ffffff;

    font-family: var(--font-heading);

    font-size: 26px;

    font-weight: 500;
}


.experience-expect-item p {
    margin: 0;

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

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   PRACTICAL
========================================================= */

.experience-practical-section {
    padding:
        90px
        0;

    background: #ffffff;
}


.experience-practical-box {
    padding:
        42px
        48px;

    display: grid;

    grid-template-columns:
        .8fr
        1.2fr;

    align-items: center;

    gap: 70px;

    background: #f7f5ef;
}


.experience-practical-box span {
    color: var(--narina-red);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.experience-practical-box h2 {
    margin: 8px 0 0;

    color: #173f30;

    font-family: var(--font-heading);

    font-size: 35px;

    font-weight: 500;
}


.experience-practical-box p {
    margin: 0;

    color: #68736c;

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   ENQUIRY
========================================================= */

.experience-enquiry-section {
    position: relative;

    padding:
        clamp(100px, 9vw, 140px)
        var(--site-gutter);

    background-color: #0b3f2e;

    overflow: hidden;

    isolation: isolate;
}


.experience-enquiry-section::before {
    content: "";

    position: absolute;

    z-index: 1;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3, 38, 26, .72) 0%,
            rgba(3, 38, 26, .52) 48%,
            rgba(3, 38, 26, .24) 100%
        );

    pointer-events: none;
}


.experience-enquiry-background {
    position: absolute;

    z-index: 0;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 42%;
}


.experience-enquiry-container {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1180px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(300px,.75fr)
        minmax(0,1.25fr);

    gap: clamp(60px, 9vw, 120px);

    align-items: start;
}


.experience-enquiry-intro {
    position: sticky;

    top: 140px;

    text-shadow:
        0 2px 18px
        rgba(0, 22, 14, .28);
}


.experience-enquiry-intro h2 {
    margin: 13px 0 0;

    color: #ffffff;

    font-family: var(--font-heading);

    font-size: clamp(40px, 4vw, 56px);

    font-weight: 500;

    line-height: 1.04;
}


.experience-enquiry-intro h2 span {
    display: block;

    color: #ffffff;
}


.experience-enquiry-intro > p {
    max-width: 390px;

    margin-top: 18px;

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

    font-size: 14px;

    line-height: 1.75;
}


.experience-enquiry-note {
    margin-top: 32px;

    padding-top: 22px;

    display: grid;

    grid-template-columns:
        38px
        1fr;

    gap: 18px;

    border-top:
        1px solid
        rgba(255,255,255,.22);
}


.experience-enquiry-note > span {
    color: #ffffff;

    font-size: 11px;

    font-weight: 700;
}


.experience-enquiry-note p {
    margin: 0;

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

    font-size: 14px;

    line-height: 1.65;
}


/* FORM */

.experience-enquiry-form {
    padding:
        clamp(32px, 4vw, 48px);

    background: #ffffff;

    border:
        1px solid
        rgba(4,60,37,.09);

    border-radius: 16px;

    box-shadow:
        0 28px 70px
        rgba(0, 20, 13, .24);
}


.experience-enquiry-intro .section-eyebrow {
    color: rgba(255,255,255,.88);
}


.experience-form-top {
    margin-bottom: 32px;

    padding-bottom: 25px;

    border-bottom:
        1px solid
        rgba(4,60,37,.10);
}


.experience-form-top span {
    display: block;

    margin-bottom: 7px;

    color: var(--narina-red);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .15em;

    text-transform: uppercase;
}


.experience-form-top strong {
    color: #173f30;

    font-family: var(--font-heading);

    font-size: 27px;

    font-weight: 500;
}


.experience-form-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        21px
        18px;
}


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


.experience-form-field label {
    display: block;

    margin-bottom: 8px;

    color: #173f30;

    font-size: 10px;

    font-weight: 700;
}


.experience-form-field input,
.experience-form-field select,
.experience-form-field textarea {
    width: 100%;

    padding:
        15px
        16px;

    color: #23352c;

    background: #fbfbf8;

    border:
        1px solid
        rgba(4,60,37,.14);

    border-radius: 8px;

    outline: none;

    font: inherit;

    font-size: 13px;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}


.experience-form-field textarea {
    min-height: 150px;

    resize: vertical;
}


.experience-form-field input:focus,
.experience-form-field select:focus,
.experience-form-field textarea:focus {
    border-color: var(--narina-green);

    box-shadow:
        0 0 0 3px
        rgba(4,60,37,.07);
}


.experience-form-footer {
    margin-top: 26px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}


.experience-form-footer small {
    max-width: 300px;

    color: #89918d;

    font-size: 10px;

    line-height: 1.6;
}


.experience-form-submit {
    min-height: 52px;

    padding:
        0
        25px;

    display: inline-flex;

    align-items: center;

    gap: 16px;

    color: #ffffff;

    background: var(--narina-red);

    border: 0;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .09em;

    text-transform: uppercase;

    cursor: pointer;
}


/* =========================================================
   RELATED
========================================================= */

.experience-related-section {
    padding:
        clamp(95px, 9vw, 135px)
        0;

    background: #ffffff;
}


.experience-related-heading {
    margin-bottom: 40px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;
}


.experience-related-heading h2 {
    margin: 12px 0 0;

    color: #173f30;

    font-family: var(--font-heading);

    font-size: 48px;

    font-weight: 500;
}


.experience-related-heading > a {
    color: #173f30;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.experience-related-grid {
    display: grid;

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

    grid-auto-rows: 390px;

    gap: 18px;
}


.experience-related-card {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 0;

    overflow: hidden;

    border-radius: 18px;

    background: #173f30;

    color: #ffffff;

    box-shadow:
        0 18px 42px
        rgba(10, 54, 38, .10);

    isolation: isolate;
}


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

    object-fit: cover;

    transition: transform .6s ease;
}


.experience-related-card::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(3,31,20,.94) 0%,
            rgba(3,31,20,.50) 43%,
            rgba(3,31,20,.04) 76%
        );

    transition:
        background .4s ease;
}


.experience-related-card-content {
    position: absolute;

    z-index: 2;

    left: 28px;
    right: 28px;
    bottom: 28px;
}


.experience-related-card-category {
    display: inline-flex;

    align-items: center;

    gap: 9px;

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

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.experience-related-card-category::before {
    content: "";

    width: 22px;
    height: 2px;

    background: var(--narina-red);
}


.experience-related-card-content h3 {
    margin: 9px 0 17px;

    color: #ffffff;

    font-family: var(--font-heading);

    font-size: 29px;

    font-weight: 500;
}


.experience-related-card-link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding-bottom: 5px;

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

    color: #ffffff;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .10em;

    text-transform: uppercase;
}


.experience-related-card-link b {
    font-size: 14px;

    font-weight: 400;

    transition: transform .3s ease;
}


.experience-related-card:hover img {
    transform: scale(1.05);
}


.experience-related-card:hover .experience-related-card-link b {
    transform: translateX(4px);
}


.experience-related-card:focus-visible {
    outline:
        3px solid
        var(--narina-red);

    outline-offset: 4px;
}


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

@media (max-width: 950px) {

    .experience-overview-top,
    .experience-enquiry-container {
        grid-template-columns: 1fr;
    }


    .experience-enquiry-intro {
        position: static;
    }


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


    .experience-expect-heading {
        grid-template-columns: 1fr;

        gap: 25px;
    }

}


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

@media (max-width: 650px) {

    .experience-detail-hero {
        min-height: 540px;
    }


    .experience-detail-hero-content {
        padding:
            145px
            0
            48px;
    }


    .experience-detail-hero h1 {
        font-size: 46px;
    }


    .experience-detail-hero p {
        font-size: 13px;
    }


    .experience-detail-overview {
        padding:
            70px
            0;
    }


    .experience-detail-copy h2 {
        font-size: 39px;
    }


    .experience-facts {
        grid-template-columns: 1fr;
    }


    .experience-fact,
    .experience-fact:nth-child(even) {
        border-right: 0;

        border-bottom:
            1px solid
            rgba(4,60,37,.09);
    }


    .experience-fact-wide {
        grid-column: auto;
    }


    .experience-secondary-figure {
        min-height: 410px;

        height: 410px;

        border-radius: 12px;
    }


    .experience-highlights-section {
        padding:
            70px
            0;
    }


    .experience-highlights-grid {
        grid-template-columns: 1fr;
    }


    .experience-highlight-card {
        min-height: 220px;
    }


    .experience-expect-section {
        padding:
            75px
            0;
    }


    .experience-expect-item {
        padding:
            25px
            0;

        grid-template-columns:
            40px
            1fr;

        gap:
            9px
            15px;
    }


    .experience-expect-item p {
        grid-column: 2;
    }


    .experience-practical-section {
        padding:
            55px
            0;
    }


    .experience-practical-box {
        padding:
            30px
            24px;

        grid-template-columns: 1fr;

        gap: 20px;
    }


    .experience-enquiry-section {
        padding:
            70px
            var(--site-gutter);
    }


    .experience-form-grid {
        grid-template-columns: 1fr;
    }


    .experience-form-field-full {
        grid-column: auto;
    }


    .experience-form-footer {
        flex-direction: column;

        align-items: stretch;
    }


    .experience-form-submit {
        justify-content: center;

        width: 100%;
    }


    .experience-related-heading {
        align-items: flex-start;

        flex-direction: column;
    }


    .experience-related-grid {
        grid-template-columns: 1fr;

        grid-auto-rows: 350px;
    }


    .experience-related-card {
        height: 100%;
    }

}


/* =========================================================
   EXPERIENCE FORM HONEYPOT
========================================================= */

.experience-honeypot {
    position: absolute !important;

    left: -9999px !important;
    top: -9999px !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;
}


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

.experience-form-status {
    display: none;

    width: 100%;

    margin:
        24px
        0
        4px;

    padding:
        16px
        18px;

    border-radius: 10px;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.55;
}


/* SUCCESS */

.experience-form-status.success {
    display: flex;

    align-items: center;

    gap: 13px;

    color: #0b553c;

    background: #edf8f2;

    border:
        1px solid
        rgba(11, 85, 60, .18);
}


.experience-form-status.success::before {
    content: "✓";

    width: 30px;
    height: 30px;

    flex-shrink: 0;

    display: flex;

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

    color: #ffffff;

    background: #0b553c;

    border-radius: 50%;

    font-size: 14px;

    font-weight: 700;
}


/* ERROR */

.experience-form-status.error {
    display: flex;

    align-items: center;

    gap: 13px;

    color: #b50918;

    background: #fff1f2;

    border:
        1px solid
        rgba(213, 0, 18, .15);
}


.experience-form-status.error::before {
    content: "!";

    width: 30px;
    height: 30px;

    flex-shrink: 0;

    display: flex;

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

    color: #ffffff;

    background: var(--narina-red);

    border-radius: 50%;

    font-size: 14px;

    font-weight: 700;
}


/* SENDING */

.experience-form-submit:disabled {
    opacity: 0.65;

    cursor: not-allowed;

    pointer-events: none;
}