/* =========================================================
   DIVINE HIMALAYAS — EDITORIAL LUXURY PACKAGE
   LIGHT / QUIET / PREMIUM
   ========================================================= */


/* =========================================================
   01 — FOUNDATION
   ========================================================= */

:root {

    --paper: #f4f1ea;
    --paper-light: #faf8f3;
    --paper-dark: #e9e4da;

    --ink: #171614;
    --ink-soft: #3d3a35;
    --muted: #77736b;

    --line: rgba(23,22,20,.13);
    --line-soft: rgba(23,22,20,.08);

    --champagne: #b4935a;
    --champagne-light: #c8aa70;

    --white: #fff;

    --serif:
        "Cormorant Garamond",
        "Bodoni Moda",
        Georgia,
        serif;

    --sans:
        "Plus Jakarta Sans",
        Arial,
        sans-serif;

    --max-width: 1380px;

}


/* =========================================================
   02 — RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--paper);
}

body {

    margin: 0;

    background: var(--paper);

    color: var(--ink);

    font-family: var(--sans);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

img {

    display: block;

    width: 100%;

    max-width: 100%;

}

a {

    color: inherit;

    text-decoration: none;

}

button {

    font-family: inherit;

}

::selection {

    background: var(--champagne);

    color: #fff;

}


/* =========================================================
   03 — NAVIGATION
   ========================================================= */

body .navbar {

    position: absolute !important;

    top: 0;
    left: 0;

    z-index: 1000;

    width: 100%;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.38),
            transparent
        ) !important;

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

}

body .navbar .logo a,
body .navbar .nav-links a {

    color: #fff;

}

body .navbar .nav-links a {

    transition:
        opacity .3s ease;

}

body .navbar .nav-links a:hover {

    opacity: .65;

}


/* =========================================================
   04 — HERO
   ========================================================= */

.package-detail-hero {

    position: relative;

    height: min(90vh, 940px);

    min-height: 680px;

    overflow: hidden;

    background: #333;

}


/* IMAGE */

.package-detail-image {

    position: absolute;

    inset: 0;

}

.package-detail-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    animation:
        luxuryHeroReveal
        1.8s
        cubic-bezier(.16,1,.3,1)
        both;

}

@keyframes luxuryHeroReveal {

    from {

        opacity: 0;

        transform: scale(1.06);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}


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

.package-detail-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(0,0,0,.55) 0%,
            rgba(0,0,0,.18) 48%,
            rgba(0,0,0,.04) 100%
        ),

        linear-gradient(
            to top,
            rgba(0,0,0,.62),
            transparent 50%
        );

}


/* =========================================================
   05 — HERO CONTENT
   ========================================================= */

.package-detail-hero-content {

    position: absolute;

    left: max(
        6vw,
        calc((100vw - var(--max-width)) / 2)
    );

    right: 6vw;

    bottom: 100px;

    z-index: 10;

    max-width: 920px;

    color: #fff;

    animation:
        heroTextReveal
        1.1s
        cubic-bezier(.16,1,.3,1)
        .15s
        both;

}

@keyframes heroTextReveal {

    from {

        opacity: 0;

        transform:
            translateY(35px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   BACK LINK
   ========================================================= */

.back-link {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 38px;

    padding: 0;

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

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .20em;

    text-transform: uppercase;

}

.back-link::before {

    content: "←";

    font-size: 16px;

    font-weight: 300;

    transition:
        transform .35s ease;

}

.back-link:hover::before {

    transform:
        translateX(-5px);

}


/* =========================================================
   CATEGORY
   ========================================================= */

.package-detail-category {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 19px;

    color: #e5c98f;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .28em;

    text-transform: uppercase;

}

.package-detail-category::before {

    content: "";

    width: 38px;

    height: 1px;

    background: currentColor;

}


/* =========================================================
   TITLE
   ========================================================= */

.package-detail-hero h1 {

    max-width: 950px;

    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(72px, 9vw, 138px);

    font-weight: 400;

    line-height: .82;

    letter-spacing:
        -.045em;

    text-wrap: balance;

}


/* =========================================================
   LOCATION
   ========================================================= */

.package-detail-location {

    margin:
        28px 0 0;

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

    font-size:
        12px;

    font-weight:
        500;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;

}


/* =========================================================
   06 — INTRO
   ========================================================= */

.package-detail-section {

    position: relative;

    padding:
        clamp(100px, 11vw, 170px) 6vw;

    background:
        var(--paper);

}


/* =========================================================
   CONTAINER
   ========================================================= */

.package-detail-container {

    width: 100%;

    max-width:
        var(--max-width);

    margin:
        0 auto;

}


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

.package-detail-section >
.package-detail-container {

    display: grid;

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

    gap:
        clamp(70px, 10vw, 150px);

    align-items:
        start;

}


/* =========================================================
   MAIN COPY
   ========================================================= */

.section-eyebrow {

    display: flex;

    align-items: center;

    gap: 13px;

    margin:
        0 0 25px;

    color:
        var(--champagne);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .27em;

    text-transform:
        uppercase;

}

.section-eyebrow::before {

    content: "";

    width: 35px;

    height: 1px;

    background:
        var(--champagne);

}


.package-detail-main h2 {

    max-width:
        780px;

    margin:
        0 0 32px;

    font-family:
        var(--serif);

    color:
        var(--ink);

    font-size:
        clamp(48px, 5.3vw, 78px);

    font-weight:
        400;

    line-height:
        .92;

    letter-spacing:
        -.045em;

}


.package-detail-description {

    max-width:
        690px;

    margin:
        0;

    color:
        var(--muted);

    font-size:
        15px;

    line-height:
        2;

}


/* =========================================================
   07 — INFO
   ========================================================= */

.package-info-grid {

    display:
        grid;

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

    margin-top:
        65px;

    border-top:
        1px solid var(--line);

}


.package-info-item {

    padding:
        25px 25px 25px 0;

    border-bottom:
        1px solid var(--line);

}


.package-info-item:nth-child(odd) {

    border-right:
        1px solid var(--line);

}


.package-info-item:nth-child(even) {

    padding-left:
        25px;

}


.package-info-item span {

    display:
        block;

    margin-bottom:
        9px;

    color:
        #9a968e;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;

}


.package-info-item strong {

    color:
        var(--ink);

    font-size:
        13px;

    font-weight:
        600;

}


/* =========================================================
   08 — BOOKING PANEL
   ========================================================= */

.package-booking-card {

    position:
        sticky;

    top:
        35px;

    padding:
        38px 35px 35px;

    border:
        1px solid var(--line);

    background:
        var(--paper-light);

}


.package-booking-card::before {

    content: "";

    display:
        block;

    width:
        100%;

    height:
        2px;

    margin-bottom:
        34px;

    background:
        var(--champagne);

}


.package-booking-card > span {

    display:
        block;

    color:
        #8b877e;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;

}


.package-booking-card h2 {

    margin:
        12px 0 0;

    color:
        var(--ink);

    font-family:
        var(--serif);

    font-size:
        55px;

    font-weight:
        400;

    line-height:
        .9;

    letter-spacing:
        -.04em;

}


.package-booking-card > p {

    margin:
        13px 0 32px;

    color:
        #8a867d;

    font-size:
        10px;

    line-height:
        1.7;

}


/* =========================================================
   BOOK BUTTON
   ========================================================= */

.package-book-button {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        100%;

    min-height:
        58px;

    padding:
        0 20px 0 23px;

    overflow:
        hidden;

    background:
        var(--ink);

    color:
        #fff;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;

    transition:
        background .35s ease;

}


.package-book-button::after {

    content:
        "→";

    font-size:
        18px;

    font-weight:
        300;

    transition:
        transform .35s ease;

}


.package-book-button:hover {

    background:
        var(--champagne);

}


.package-book-button:hover::after {

    transform:
        translateX(5px);

}


.package-booking-card .booking-note {

    margin:
        17px 0 0;

    color:
        #96928a;

    font-size:
        9px;

    line-height:
        1.7;

    text-align:
        center;

}


/* =========================================================
   09 — ITINERARY
   ========================================================= */

.package-itinerary-section {

    padding:
        clamp(110px, 12vw, 180px) 6vw;

    background:
        var(--paper-light);

}


.package-itinerary-container {

    max-width:
        var(--max-width);

    margin:
        0 auto;

}


.package-itinerary-heading {

    display:
        grid;

    grid-template-columns:
        300px
        1fr;

    gap:
        70px;

    margin-bottom:
        95px;

}


.package-itinerary-heading h2 {

    max-width:
        720px;

    margin:
        0;

    font-family:
        var(--serif);

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

    font-weight:
        400;

    line-height:
        .88;

    letter-spacing:
        -.055em;

}


/* =========================================================
   TIMELINE
   ========================================================= */

.package-itinerary {

    position:
        relative;

    max-width:
        1050px;

    margin-left:
        auto;

}


.package-itinerary::before {

    content:
        "";

    position:
        absolute;

    left:
        10px;

    top:
        15px;

    bottom:
        15px;

    width:
        1px;

    background:
        var(--line);

}


.itinerary-day {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        22px 150px minmax(0,1fr);

    gap:
        35px;

    padding:
        0 0 70px;

}


.itinerary-day:last-child {

    padding-bottom:
        0;

}


/* DOT */

.itinerary-number {

    position:
        relative;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        21px;

    height:
        21px;

    margin-top:
        3px;

    border:
        1px solid var(--champagne);

    border-radius:
        50%;

    background:
        var(--paper-light);

    color:
        transparent;

}


.itinerary-number::after {

    content:
        "";

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--champagne);

}


/* DAY LABEL */

.itinerary-content::before {

    content:
        "DAY";

    display:
        block;

    margin-bottom:
        8px;

    color:
        #a29d94;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .20em;

}


.itinerary-day .itinerary-content {

    grid-column:
        2 / 4;

}


/* TITLE */

.itinerary-content h3 {

    max-width:
        650px;

    margin:
        0 0 13px;

    color:
        var(--ink);

    font-family:
        var(--serif);

    font-size:
        35px;

    font-weight:
        400;

    line-height:
        1;

    letter-spacing:
        -.035em;

}


.itinerary-content p {

    max-width:
        680px;

    margin:
        0;

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.9;

}


/* =========================================================
   10 — HIGHLIGHTS
   ========================================================= */

.package-highlights-section {

    padding:
        clamp(100px, 11vw, 155px) 6vw;

    background:
        var(--paper);

}


.package-highlights-container {

    max-width:
        var(--max-width);

    margin:
        0 auto;

}


.package-highlights-grid {

    display:
        grid;

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

    margin-top:
        65px;

    border-top:
        1px solid var(--line);

}


.package-highlight {

    min-height:
        260px;

    padding:
        35px 40px 40px;

    border-right:
        1px solid var(--line);

    border-bottom:
        1px solid var(--line);

    background:
        transparent;

    transition:
        background .35s ease;

}


.package-highlight:first-child {

    border-left:
        1px solid var(--line);

}


.package-highlight:hover {

    background:
        rgba(255,255,255,.55);

}


.package-highlight-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        36px;

    height:
        36px;

    margin-bottom:
        35px;

    border:
        1px solid var(--line);

    border-radius:
        50%;

    color:
        var(--champagne);

    font-size:
        14px;

}


.package-highlight h3 {

    margin:
        0 0 12px;

    color:
        var(--ink);

    font-family:
        var(--serif);

    font-size:
        27px;

    font-weight:
        400;

}


.package-highlight p {

    max-width:
        280px;

    margin:
        0;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.8;

}


/* =========================================================
   11 — TRAVEL DETAILS
   ========================================================= */

.package-travel-section {

    padding:
        clamp(100px, 10vw, 145px) 6vw;

    background:
        var(--paper-dark);

}


.package-travel-grid {

    max-width:
        var(--max-width);

    margin:
        60px auto 0;

    display:
        grid;

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

    gap:
        0;

    border-top:
        1px solid var(--line);

}


.package-travel-card {

    padding:
        35px 40px 40px;

    border-bottom:
        1px solid var(--line);

}


.package-travel-card:nth-child(odd) {

    border-right:
        1px solid var(--line);

}


.package-travel-card h3 {

    margin:
        0 0 17px;

    color:
        var(--ink);

    font-family:
        var(--serif);

    font-size:
        27px;

    font-weight:
        400;

}


.package-travel-card p {

    max-width:
        520px;

    margin:
        0;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.9;

}


.package-travel-card strong {

    color:
        var(--ink);

    font-weight:
        700;

}


/* =========================================================
   12 — INCLUSIONS
   ========================================================= */

.package-inclusions-section {

    padding:
        clamp(100px, 11vw, 155px) 6vw;

    background:
        var(--paper-light);

}


.package-inclusions-grid {

    max-width:
        var(--max-width);

    margin:
        60px auto 0;

    display:
        grid;

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

    gap:
        70px;

}


.package-inclusion-box {

    padding:
        0;

}


.package-inclusion-box h3 {

    padding-bottom:
        20px;

    margin:
        0;

    border-bottom:
        1px solid var(--ink);

    color:
        var(--ink);

    font-family:
        var(--serif);

    font-size:
        32px;

    font-weight:
        400;

}


.package-inclusion-box ul {

    list-style:
        none;

    padding:
        0;

    margin:
        0;

}


.package-inclusion-box li {

    position:
        relative;

    padding:
        15px 0 15px 24px;

    border-bottom:
        1px solid var(--line-soft);

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.6;

}


.package-inclusion-box li::before {

    content:
        "＋";

    position:
        absolute;

    left:
        0;

    color:
        var(--champagne);

}


.package-inclusion-box.excluded li::before {

    content:
        "—";

    color:
        #999;

}


/* =========================================================
   13 — TAGS
   ========================================================= */

.package-tags-section {

    padding:
        30px 6vw 120px;

    background:
        var(--paper-light);

}


.package-tags {

    max-width:
        var(--max-width);

    margin:
        0 auto;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

}


.package-tags span {

    padding:
        9px 15px;

    border:
        1px solid var(--line);

    color:
        var(--muted);

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

    transition:
        color .3s ease,
        border-color .3s ease;

}


.package-tags span:hover {

    border-color:
        var(--champagne);

    color:
        var(--champagne);

}


/* =========================================================
   14 — FINAL CTA
   ========================================================= */

.package-detail-cta {

    position:
        relative;

    min-height:
        600px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        100px 6vw;

    overflow:
        hidden;

    background:
        var(--ink);

    color:
        #fff;

    text-align:
        center;

}


.package-detail-cta::before {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        -300px;

    width:
        700px;

    height:
        700px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

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

}


.package-detail-cta > div {

    position:
        relative;

    z-index:
        2;

    max-width:
        750px;

}


.package-detail-cta h2 {

    margin:
        0;

    font-family:
        var(--serif);

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

    font-weight:
        400;

    line-height:
        .86;

    letter-spacing:
        -.055em;

}


.package-detail-cta p:not(.section-eyebrow) {

    max-width:
        560px;

    margin:
        27px auto 37px;

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

    font-size:
        13px;

    line-height:
        1.9;

}


/* CTA EYEBROW */

.package-detail-cta .section-eyebrow {

    justify-content:
        center;

    color:
        var(--champagne-light);

}


/* CTA BUTTON */

.package-detail-cta .package-builder-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        58px;

    padding:
        0 27px;

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

    background:
        transparent;

    color:
        #fff;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease;

}


.package-detail-cta .package-builder-button::after {

    content:
        "→";

    margin-left:
        18px;

    font-size:
        17px;

}


.package-detail-cta .package-builder-button:hover {

    border-color:
        var(--champagne);

    background:
        var(--champagne);

    color:
        #fff;

}


/* =========================================================
   15 — ERROR
   ========================================================= */

.package-error {

    min-height:
        100vh;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        40px;

    background:
        var(--paper);

    color:
        var(--ink);

    text-align:
        center;

}


.package-error h1 {

    margin:
        0 0 15px;

    font-family:
        var(--serif);

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

    font-weight:
        400;

    line-height:
        .9;

}


.package-error p {

    max-width:
        480px;

    margin:
        0 0 30px;

    color:
        var(--muted);

}


.back-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        50px;

    padding:
        0 24px;

    border:
        1px solid var(--line);

    color:
        var(--ink);

    transition:
        all .3s ease;

}


.back-button:hover {

    border-color:
        var(--champagne);

    color:
        var(--champagne);

}


/* =========================================================
   16 — TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .package-detail-hero {

        height:
            800px;

    }

    .package-detail-section >
    .package-detail-container {

        grid-template-columns:
            1fr 320px;

        gap:
            55px;

    }

    .package-itinerary-heading {

        grid-template-columns:
            1fr;

        gap:
            25px;

        margin-bottom:
            65px;

    }

    .package-highlights-grid {

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

    }

}


/* =========================================================
   17 — MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .package-detail-hero {

        height:
            720px;

        min-height:
            720px;

    }

    .package-detail-overlay {

        background:

            linear-gradient(
                to top,
                rgba(0,0,0,.72),
                rgba(0,0,0,.12) 70%
            );

    }

    .package-detail-hero-content {

        left:
            6vw;

        right:
            6vw;

        bottom:
            55px;

    }

    .package-detail-hero h1 {

        font-size:
            clamp(58px, 16vw, 82px);

    }

    .package-detail-section >
    .package-detail-container {

        display:
            block;

    }

    .package-booking-card {

        position:
            relative;

        top:
            auto;

        margin-top:
            60px;

    }

    .package-highlights-grid {

        grid-template-columns:
            1fr;

    }

    .package-travel-grid {

        grid-template-columns:
            1fr;

    }

    .package-travel-card:nth-child(odd) {

        border-right:
            0;

    }

    .package-inclusions-grid {

        grid-template-columns:
            1fr;

        gap:
            60px;

    }

}


/* =========================================================
   18 — SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {

    .package-detail-section,
    .package-itinerary-section,
    .package-highlights-section,
    .package-travel-section,
    .package-inclusions-section {

        padding-left:
            5vw;

        padding-right:
            5vw;

    }

    .package-tags-section {

        padding-left:
            5vw;

        padding-right:
            5vw;

    }

    .package-detail-hero-content {

        left:
            5vw;

        right:
            5vw;

    }

    .package-detail-hero h1 {

        font-size:
            57px;

    }

    .package-detail-main h2 {

        font-size:
            45px;

    }

    .package-detail-description {

        font-size:
            13px;

        line-height:
            1.85;

    }

    .package-info-grid {

        grid-template-columns:
            1fr;

    }

    .package-info-item,
    .package-info-item:nth-child(even) {

        padding:
            21px 0;

        border-right:
            0;

    }

    .package-booking-card {

        padding:
            30px 24px;

    }

    .package-booking-card h2 {

        font-size:
            49px;

    }

    .package-itinerary-heading h2 {

        font-size:
            51px;

    }

    .package-itinerary::before {

        left:
            9px;

    }

    .itinerary-day {

        grid-template-columns:
            20px 1fr;

        gap:
            25px;

        padding-bottom:
            50px;

    }

    .itinerary-day .itinerary-content {

        grid-column:
            2;

    }

    .itinerary-content h3 {

        font-size:
            29px;

    }

    .package-highlight {

        padding:
            30px;

    }

    .package-travel-card {

        padding:
            30px 0;

    }

    .package-inclusion-box h3 {

        font-size:
            29px;

    }

    .package-detail-cta {

        min-height:
            520px;

        padding:
            80px 5vw;

    }

    .package-detail-cta h2 {

        font-size:
            55px;

    }

}


/* =========================================================
   19 — REDUCED MOTION
   ========================================================= */

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

    html {
        scroll-behavior:
            auto;
    }

    .package-detail-image img,
    .package-detail-hero-content {

        animation:
            none;

    }

    *,
    *::before,
    *::after {

        transition:
            none !important;

    }

}