:root {
    --pkg-cream: #fffaf7;
    --pkg-white: #ffffff;
    --pkg-brown: #8b5e59;
    --pkg-dark: #3e302e;
    --pkg-gold: #d9b86c;
    --pkg-blush: #ead6d2;
    --pkg-soft: #f5ebe7;
    --pkg-muted: #786866;
    --pkg-border: rgba(139,94,89,.15);
    --pkg-shadow: 0 25px 70px rgba(62,48,46,.12);
    --pkg-radius: 24px;
    --pkg-ease: cubic-bezier(.22,.61,.36,1);
}


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

html,
body {
    margin: 0 !important;
    padding: 0 !important;
}

    body:has(.package-name-page) {
        margin: 0 !important;
        padding: 0 !important;
    }

        body:has(.package-name-page) main.package-name-page {
            margin: 0 !important;
            padding: 0 !important;
            width: 100%;
            max-width: none !important;
        }

.package-name-page,
.package-name-page *,
.package-name-page *::before,
.package-name-page *::after {
    box-sizing: border-box;
}

.package-name-page {
    width: 100%;
    overflow: hidden;
    background: var(--pkg-cream);
    color: var(--pkg-dark);
}


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

.pkg-hero {
    min-height: calc(100vh - 76px);
    position: relative;
    display: flex;
    align-items: center;
    padding: 80px 8%;
    color: #fff;
    overflow: hidden;
    background: linear-gradient( 90deg, rgba(43,27,25,.90), rgba(43,27,25,.30) ), url("https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=2200&q=90") center/cover no-repeat;
}

    .pkg-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient( circle at 75% 40%, rgba(217,184,108,.18), transparent 34% );
        pointer-events: none;
    }

.pkg-hero-content {
    position: relative;
    z-index: 2;
    max-width: 780px;
}

.pkg-eyebrow,
.pkg-section-title > span,
.pkg-bottom > span {
    color: var(--pkg-gold);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .22em;
}

.pkg-hero h1 {
    max-width: 800px;
    font-size: clamp(2.8rem,6.5vw,6.2rem);
    line-height: .96;
    margin: 18px 0;
}

.pkg-hero p {
    max-width: 650px;
    color: rgba(255,255,255,.84);
    line-height: 1.7;
}

.pkg-hero-btn {
    display: inline-flex;
    margin-top: 26px;
    padding: 13px 23px;
    border-radius: 999px;
    background: var(--pkg-gold);
    color: var(--pkg-dark);
    text-decoration: none;
    font-weight: 800;
    transition: .3s ease;
}

    .pkg-hero-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 35px rgba(217,184,108,.28);
    }


/* =====================================================
   FLOATING EVENT WORDS
   ===================================================== */

.pkg-hero-floating {
    position: absolute;
    right: 7%;
    bottom: 45px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: right;
}

    .pkg-hero-floating span {
        color: rgba(255,255,255,.52);
        font-size: .65rem;
        font-weight: 700;
        letter-spacing: .18em;
    }

        .pkg-hero-floating span:first-child {
            color: var(--pkg-gold);
        }


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

.pkg-intro {
    padding: 70px 8% 35px;
}

.pkg-section-title {
    max-width: 760px;
}

    .pkg-section-title h2 {
        font-size: clamp(2.1rem,4vw,4.2rem);
        line-height: 1.02;
        margin: 13px 0;
    }

    .pkg-section-title p {
        color: var(--pkg-muted);
        line-height: 1.7;
        margin: 0;
    }

.pkg-centered {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


/* =====================================================
   PACKAGES
   ===================================================== */

.pkg-packages {
    padding: 40px 8% 85px;
}


/* =====================================================
   FILTER
   ===================================================== */

.pkg-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 30px 0 38px;
}

.pkg-filter-btn {
    border: 1px solid var(--pkg-border);
    background: #fff;
    color: var(--pkg-dark);
    padding: 10px 17px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
    transition: transform .25s ease, background .25s ease, color .25s ease;
}

    .pkg-filter-btn:hover {
        transform: translateY(-2px);
    }

    .pkg-filter-btn.active {
        background: var(--pkg-brown);
        color: #fff;
        border-color: var(--pkg-brown);
    }


/* =====================================================
   GRID
   ===================================================== */

.pkg-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    perspective: 1600px;
}


/* =====================================================
   CARD
   ===================================================== */

.pkg-card {
    height: 510px;
    position: relative;
    perspective: 1400px;
    cursor: pointer;
    opacity: 1;
    transition: opacity .4s ease, transform .4s ease;
}

    .pkg-card.hidden {
        display: none;
    }

.pkg-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1.05s var(--pkg-ease);
    will-change: transform;
}


/*
    Initial click:
    230 degree rotation
*/
.pkg-card.rotating .pkg-card-inner {
    transform: rotateY(230deg) scale(.97);
}


/*
    Final open:
    360 degree rotation
*/
.pkg-card.opened .pkg-card-inner {
    transform: rotateY(360deg) scale(1.04);
}


/* =====================================================
   CARD FACES
   ===================================================== */

.pkg-card-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--pkg-radius);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border: 1px solid var(--pkg-border);
    box-shadow: 0 15px 45px rgba(62,48,46,.09);
}


/* =====================================================
   FRONT
   ===================================================== */

.pkg-front {
    background: #fff;
}

.pkg-image {
    height: 270px;
    position: relative;
    overflow: hidden;
}

    .pkg-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .8s var(--pkg-ease);
    }

.pkg-card:hover
.pkg-image img {
    transform: scale(1.06);
}

.pkg-image > span {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(62,48,46,.80);
    color: #fff;
    font-size: .72rem;
    font-weight: 900;
    backdrop-filter: blur(7px);
}

.pkg-card-body {
    padding: 23px;
}

    .pkg-card-body small,
    .pkg-back small {
        color: var(--pkg-brown);
        font-size: .67rem;
        font-weight: 900;
        letter-spacing: .15em;
    }

    .pkg-card-body h3,
    .pkg-back h3 {
        font-size: 1.55rem;
        line-height: 1.1;
        margin: 10px 0;
    }

    .pkg-card-body p,
    .pkg-back p {
        color: var(--pkg-muted);
        line-height: 1.55;
        font-size: .88rem;
        margin: 0;
    }

.pkg-open {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
    padding: 11px 0;
    border: 0;
    border-top: 1px solid var(--pkg-border);
    background: transparent;
    color: var(--pkg-brown);
    font-weight: 800;
    cursor: pointer;
}

    .pkg-open b {
        font-size: 1.2rem;
        transition: transform .25s ease;
    }

.pkg-card:hover
.pkg-open b {
    transform: translate(4px,-4px);
}


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

.pkg-back {
    transform: rotateY(180deg);
    padding: 32px 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: radial-gradient( circle at 80% 10%, rgba(217,184,108,.20), transparent 30% ), var(--pkg-brown);
    color: #fff;
}

    .pkg-back::before {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        right: -80px;
        bottom: -80px;
        border: 1px solid rgba(255,255,255,.16);
        border-radius: 50%;
    }

.pkg-back-number {
    color: var(--pkg-gold);
    font-size: 3.5rem;
    line-height: 1;
    font-weight: 900;
    margin-bottom: 15px;
}

.pkg-back small {
    color: var(--pkg-gold);
}

.pkg-back h3 {
    font-size: 1.8rem;
}

.pkg-back p {
    color: rgba(255,255,255,.76);
}

.pkg-mini-services {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 20px 0;
}

    .pkg-mini-services span {
        padding: 6px 9px;
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 999px;
        color: rgba(255,255,255,.88);
        font-size: .68rem;
    }

.pkg-details-btn {
    width: 100%;
    padding: 11px;
    border: 0;
    border-radius: 999px;
    background: var(--pkg-gold);
    color: var(--pkg-dark);
    font-weight: 900;
    cursor: pointer;
    transition: .3s ease;
}

    .pkg-details-btn:hover {
        transform: translateY(-3px);
    }


/* =====================================================
   BOTTOM
   ===================================================== */

.pkg-bottom {
    margin: 0 8% 70px;
    padding: 55px 8%;
    border-radius: 28px;
    text-align: center;
    background: var(--pkg-brown);
    color: #fff;
}

    .pkg-bottom h2 {
        max-width: 800px;
        margin: 13px auto 25px;
        font-size: clamp(2rem,4vw,4rem);
        line-height: 1;
    }

    .pkg-bottom a {
        display: inline-flex;
        padding: 12px 22px;
        border-radius: 999px;
        background: var(--pkg-gold);
        color: var(--pkg-dark);
        text-decoration: none;
        font-weight: 800;
    }


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width:1100px) {

    .pkg-grid {
        grid-template-columns: repeat(3,1fr);
    }

    .pkg-card {
        height: 500px;
    }
}

@media (max-width:850px) {

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

    .pkg-hero-floating {
        opacity: .55;
    }
}

@media (max-width:600px) {

    .pkg-hero {
        min-height: 78vh;
        padding: 70px 6% 80px;
    }

        .pkg-hero h1 {
            font-size: clamp( 2.5rem, 12vw, 4rem );
        }

    .pkg-hero-floating {
        display: none;
    }

    .pkg-intro {
        padding: 55px 6% 25px;
    }

    .pkg-packages {
        padding: 30px 6% 60px;
    }

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

    .pkg-card {
        height: 520px;
    }

    .pkg-bottom {
        margin: 0 6% 45px;
        padding: 38px 22px;
    }
}