:root {
    /* ===============================
       AYANA LAKE RESORT COLOR SYSTEM
       =============================== */

    /* Primary Brand */
    --olive: #146052;
    --sage: #BEC0A7;
    --terracotta: #C45B34;
    --sand: #e6cf87;
    --dusty-rose: #D99A92;
    --seafoam: #79AAA6;

    /* Base */
    --white: #FFFFFF;
    --off-white: #F8F6F1;

    /* ==================================
       Global Mapping
       ================================== */

    /* Backgrounds */
    --bg-body: var(--off-white);
    --bg-section: var(--white);
    --bg-alt: #F3F0E8;

    /* Navbar */
    --navbar-bg: rgba(92, 101, 66, .88);
    --navbar-text: var(--white);
    --navbar-hover: var(--sand);
    --navbar-active: var(--terracotta);

    /* Headings */
    --heading-color: var(--olive);

    /* Body Text */
    --text-color: #565656;
    --text-light: #808080;

    /* Buttons */
    --btn-primary: var(--olive);
    --btn-primary-hover: var(--terracotta);
    --btn-primary-text: var(--white);
    --btn-secondary-bg: transparent;
    --btn-secondary-border: var(--olive);
    --btn-secondary-text: var(--olive);

    /* Links */
    --link: var(--olive);
    --link-hover: var(--terracotta);

    /* Cards */
    --card-bg: var(--white);
    --card-border: rgba(92, 101, 66, .12);

    /* Forms */
    --input-bg: var(--white);
    --input-border: rgba(92, 101, 66, .18);
    --input-focus: var(--terracotta);

    /* Footer */
    --footer-bg: var(--olive);
    --footer-heading: var(--sand);
    --footer-text: rgba(255, 255, 255, .82);

    /* Borders */
    --border: rgba(92, 101, 66, .12);

    /* Status */
    --success: var(--seafoam);
    --warning: var(--terracotta);

    /* Effects */
    --shadow: 0 18px 45px rgba(0, 0, 0, .08);

    /* Radii */
    --radius-sm: 10px;
    --radius: 18px;
    --radius-lg: 24px;

    /* Spacing Tokens */
    --space-xxs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;

    /* Typography */
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Manrope', sans-serif;
    --fs-h1: 68px;
    --fs-h2: 52px;
    --fs-h3: 38px;
    --fs-h4: 28px;
    --fs-body: 17px;
    --fw-h1: 600;
    --fw-h2: 500;
    --fw-h3: 500;
    --fw-h4: 500;
    --fw-body: 400;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body, 'Manrope', sans-serif);
    color: var(--text-color, #565656);
    background: var(--bg-body, #F8F6F1);
    font-size: var(--fs-body, 17px);
    font-weight: var(--fw-body, 400);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

p {
    color: var(--text-color, #565656);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    color: var(--heading-color, var(--olive));
    font-weight: 500;
}


a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px clamp(18px, 5vw, 72px);
    color: var(--white);
    background: transparent !important;
    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background .3s ease, box-shadow .3s ease, padding .3s ease, backdrop-filter .3s ease;
}

.site-header.scrolled {
    background: #FFFFFF !important;
    box-shadow: 0 14px 50px rgba(0, 0, 0, .18);
    padding-block: 12px;
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}


.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0;
    text-decoration: none;
}

.brand img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.brand span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brand strong {
    font-family: 'Montserrat', 'Jost', sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--white);
    line-height: 1;
}

.brand small {
    font-family: 'Montserrat', 'Jost', sans-serif;
    color: var(--sand, #e6cf87);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    line-height: 1;
}


@font-face {
    font-family: 'Canto Roman';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Canto Roman'), local('Canto-Roman'), local('Canto');
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: 'Canto Roman', 'Canto', 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 400;
}

.main-nav a {
    font-family: 'Canto Roman', 'Canto', 'Cormorant Garamond', serif !important;
    font-weight: 400 !important;
    opacity: .86;
    letter-spacing: 0.04em;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--sand);
    opacity: 1;
}


.main-nav a.nav-cta {
    background: var(--sand) !important;
    color: var(--olive) !important;
    border: none !important;
    padding: 10px 22px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.main-nav a.nav-cta:hover {
    background: var(--terracotta) !important;
    color: var(--white) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}


.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: var(--radius);
    color: var(--white);
    background: rgba(0, 0, 0, .2);
}

.hero {
    min-height: 100vh;
    position: relative;
    display: grid;
    background: var(--black);
    overflow: hidden;
}

.hero-tagline {
    color: #ffffff !important;
}


.hero-swiper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-swiper .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-swiper,
.hero-slide {
    min-height: 100vh;
    height: 100vh;
}

.hero-slide {
    position: absolute;
    inset: 0;
    display: grid;
    align-items: center;
    padding: 130px clamp(20px, 7vw, 108px) 230px;
    color: var(--white);
    overflow: hidden;
    background-color: var(--black);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    animation: heroCrossfade 24s infinite ease-in-out;
    transform: none !important;
}

.hero-slide:nth-child(1) {
    animation-delay: 0s;
}

.hero-slide:nth-child(2) {
    animation-delay: 8s;
}

.hero-slide:nth-child(3) {
    animation-delay: 16s;
}

@keyframes heroCrossfade {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    62% {
        opacity: 1;
    }

    78% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0, 0, 0, .32), rgba(0, 0, 0, .04), rgba(0, 0, 0, .18));
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transform: scale(1);
    transform-origin: center;
    animation: heroImageZoom 24s infinite ease-in-out;
}

.hero-slide:nth-child(1) .hero-media {
    animation-delay: 0s;
}

.hero-slide:nth-child(2) .hero-media {
    animation-delay: 8s;
}

.hero-slide:nth-child(3) .hero-media {
    animation-delay: 16s;
}

@keyframes heroImageZoom {
    0% {
        transform: scale(1);
    }

    10% {
        transform: scale(1.01);
    }

    62% {
        transform: scale(1.075);
    }

    78% {
        transform: scale(1.09);
    }

    100% {
        transform: scale(1.09);
    }
}

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

.hero-content,
.page-hero>div {
    max-width: 760px;
}

.eyebrow {
    margin: 0 0 12px;
    color: var(--gold);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
    font-size: 13px;
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    line-height: 1.02;
    margin: 0;
}

h1 {
    font-size: clamp(48px, 8vw, 110px);
}

h2 {
    font-size: clamp(34px, 5vw, 62px);
}

h3 {
    font-size: 28px;
}

.hero-content p:not(.eyebrow),
.page-hero p:not(.eyebrow) {
    max-width: 650px;
    font-size: clamp(17px, 2vw, 21px);
    color: rgba(255, 255, 255, .84);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 0;
    border-radius: var(--radius);
    padding: 12px 24px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.button.primary,
.button.secondary {
    background: var(--forest-green);
    color: var(--warm-white);
    box-shadow: 0 4px 12px rgba(46, 75, 59, 0.12);
}

.button.primary:hover,
.button.secondary:hover {
    transform: translateY(-2px);
    background: var(--sage-green);
    color: var(--warm-white);
    box-shadow: 0 8px 20px rgba(46, 75, 59, 0.22);
}

.button.ghost,
.button.outline {
    background: transparent;
    border: 1px solid var(--antique-gold);
    color: var(--forest-green);
}

.button.ghost:hover,
.button.outline:hover {
    transform: translateY(-2px);
    background: var(--forest-green);
    color: var(--warm-white);
    border-color: var(--forest-green);
    box-shadow: 0 6px 18px rgba(46, 75, 59, 0.15);
}

.booking-strip {
    position: absolute;
    left: clamp(16px, 5vw, 80px);
    right: clamp(16px, 5vw, 80px);
    bottom: clamp(22px, 5vh, 5px);
    z-index: 10;
    width: auto;
    max-width: 1040px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(120px, .65fr) minmax(160px, .55fr);
    align-items: end;
    gap: 12px;
    padding: 16px;
    background: rgba(251, 248, 239, .96);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.booking-strip label,
.booking-strip button {
    min-width: 0;
    width: 100%;
}

label {
    display: grid;
    gap: 7px;
    color: var(--gray);
    font-size: 13px;
    font-weight: 800;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--stone);
    border-radius: var(--radius);
    padding: 13px 14px;
    background: var(--white);
    color: var(--charcoal);
}

.section {
    padding: clamp(72px, 9vw, 126px) clamp(18px, 5vw, 72px);
}

.section,
.feature-split,
.promo-strip {
    position: relative;
    overflow: hidden;
}

.section-heading,
.section-copy,
.stats,
.image-card,
.room-card,
.package-card,
.facility-card,
.testimonial,
.values-grid article,
.timeline-list div,
.gallery-item,
.contact-panel,
.lux-form,
.summary-card,
.promo-strip>* {
    will-change: transform, opacity;
}

.section-heading,
.intro-band {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 34px;
}

.section-heading a {
    color: var(--green);
    font-weight: 800;
    border-bottom: 2px solid var(--gold);
}

.section-copy {
    max-width: 760px;
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.stats div {
    min-width: 145px;
    padding: 20px;
    background: var(--white);
    border: 1px solid var(--stone);
    border-radius: var(--radius);
}

.stats strong {
    display: block;
    color: var(--green);
    font-size: 42px;
    line-height: 1;
}

.stats span {
    color: var(--gray);
    font-weight: 700;
}

.image-card,
.room-card,
.package-card,
.facility-card,
.testimonial,
.summary-card,
.contact-panel,
.lux-form,
.values-grid article {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 14px 45px rgba(11, 13, 11, .09);
}

.image-card img,
.room-card img,
.package-card img {
    width: 100%;
    height: 330px;
    object-fit: cover;
    transition: transform .5s ease;
}

.image-card:hover img,
.room-card:hover img,
.package-card:hover img {
    transform: scale(1.055);
}

.image-card div,
.package-card div {
    padding: 24px;
}

.image-card p,
.facility-card p,
.testimonial p,
.summary-card p,
.contact-panel p {
    color: var(--gray);
}

.feature-split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    align-items: center;
    gap: clamp(28px, 6vw, 86px);
    padding: clamp(72px, 9vw, 126px) clamp(18px, 5vw, 72px);
    background: var(--stone);
}

.feature-split img {
    width: 100%;
    height: min(70vh, 680px);
    object-fit: cover;
    border-radius: var(--radius);
    will-change: transform;
}

.feature-split p:not(.eyebrow) {
    color: #5d574f;
    font-size: 18px;
}

.feature-split>div {
    will-change: transform, opacity;
}

.dark-section {
    background: var(--black);
    color: var(--white);
    overflow: visible;
}

.facility-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    overflow: visible;
}

.facility-grid.light {
    background: var(--ivory);
    align-items: stretch;
    overflow: visible;
}

.facility-card {
    position: relative;
    padding: 28px;
    min-height: 220px;
    transition: transform .32s ease, background .32s ease, box-shadow .32s ease, border-color .32s ease;
}

.dark-section .facility-card {
    background: rgba(255, 255, 255, .08);
    box-shadow: none;
}

.facility-card:hover {
    transform: translateY(-6px);
}

.facility-card.expandable {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 285px;
    border: 1px solid rgba(200, 163, 95, .18);
    isolation: isolate;
}

.facility-card.expandable::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(145deg, rgba(18, 53, 42, .08), rgba(200, 163, 95, .12));
    opacity: 0;
    transition: opacity .32s ease;
}

.facility-card.expandable:hover {
    transform: translateY(-10px) scale(1.015);
    border-color: rgba(200, 163, 95, .45);
    box-shadow: 0 26px 70px rgba(18, 53, 42, .16);
}

.facility-card.expandable:hover::before {
    opacity: 1;
}

.facility-card.expandable i {
    transition: transform .32s ease, color .32s ease;
}

.facility-card.expandable:hover i {
    color: var(--green);
    transform: translateY(-4px) scale(1.08);
}

.facility-card.expandable h2,
.facility-card.expandable p {
    transition: transform .32s ease;
}

.facility-card.expandable:hover h2,
.facility-card.expandable:hover p {
    transform: translateY(-6px);
}

.facility-more {
    margin-top: auto;
    padding-top: 18px;
    transform: translateY(14px);
    opacity: 0;
    transition: transform .32s ease, opacity .32s ease;
}

.facility-card.expandable:hover .facility-more {
    transform: translateY(0);
    opacity: 1;
}

.facility-more span {
    display: block;
    color: var(--green);
    font-weight: 900;
    font-size: 13px;
    text-transform: uppercase;
}

.facility-more small {
    display: block;
    margin-top: 6px;
    color: var(--gray);
    font-weight: 700;
    line-height: 1.5;
}

.facility-card i {
    color: var(--gold);
    font-size: 31px;
    margin-bottom: 20px;
}

.facility-card h2 {
    font-size: 32px;
}

.facility-story-section {
    background: #ffffff;
    overflow: visible;
}

.facility-story-stage {
    position: relative;
    height: 100vh;
    min-height: 750px;
    padding: clamp(42px, 5vw, 72px) clamp(18px, 4vw, 64px);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.facility-story-panel {
    position: absolute;
    inset: clamp(42px, 5vw, 72px) clamp(18px, 4vw, 64px);
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
    gap: clamp(42px, 6vw, 92px);
    align-items: stretch;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity;
}

.facility-story-panel.is-active {
    opacity: 1;
    visibility: visible;
}

.facility-story-text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 680px;
    min-height: 100%;
    margin: 0;
    padding: clamp(16px, 2vw, 28px) 0;
    text-align: left;
    will-change: transform, opacity;
}

.facility-story-text h2 {
    margin: 0;
    color: var(--charcoal);
    font-family: var(--font-heading);
    font-size: clamp(42px, 5vw, 78px);
    font-weight: 400;
    line-height: 1.02;
}

.facility-story-text p:last-child {
    max-width: 620px;
    margin: clamp(18px, 2vw, 28px) 0 0;
    color: rgba(37, 37, 31, 0.74);
    font-family: var(--font-body), Urbanist, sans-serif;
    font-size: clamp(16px, 1.25vw, 20px);
    line-height: 1.75;
}

.facility-story-text ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(24px, 4vw, 58px);
    padding: 0;
    margin: clamp(44px, 10vw, 180px) 0 0;
    list-style: none;
}

.facility-story-text li {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 62px;
    color: rgba(37, 37, 31, 0.88);
    border-bottom: 1px solid rgba(37, 37, 31, 0.16);
    font-family: var(--font-body), Urbanist, sans-serif;
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.35;
}

.facility-story-text li i {
    color: rgba(11, 58, 38, 0.6);
}

.facility-story-image {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 620px;
    aspect-ratio: auto;
    margin: 0;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: none;
    will-change: transform, opacity;
}

.facility-story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    will-change: transform;
}

@media (max-width: 760px) {
    .facility-story-stage {
        height: auto;
        min-height: auto;
        padding: 72px 18px;
        gap: 44px;
        display: grid;
        overflow: visible;
    }

    .facility-story-panel {
        position: relative;
        inset: auto;
        grid-template-columns: 1fr;
        opacity: 1;
        visibility: visible;
        display: grid;
        gap: 24px;
        pointer-events: auto;
    }

    .facility-story-text {
        order: 2;
        max-width: none;
        min-height: auto;
        padding: 0;
    }

    .facility-story-text h2 {
        font-size: clamp(44px, 14vw, 68px);
    }

    .facility-story-text ul {
        grid-template-columns: 1fr;
        margin-top: 28px;
    }

    .facility-story-image {
        order: 1;
        width: 100%;
        min-height: auto;
        aspect-ratio: 4 / 5;
        opacity: 1;
        transform: none;
    }
}

.wellness-retreats-section {
    background: #ffffff;
    padding: clamp(84px, 10vw, 150px) clamp(20px, 5vw, 72px);
}

.wellness-retreats-intro {
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(320px, 1fr);
    gap: clamp(44px, 8vw, 120px);
    align-items: center;
    max-width: 1320px;
    margin: 0 auto clamp(58px, 8vw, 110px);
}

.wellness-retreats-intro figure {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 5.35;
    background: #f7f4ef;
}

.wellness-retreats-intro img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.wellness-retreats-intro:hover img {
    transform: scale(1.025);
}

.wellness-label {
    margin: 0 0 18px;
    color: var(--antique-gold);
    font-family: var(--font-body), Urbanist, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.wellness-retreats-intro h2 {
    max-width: 720px;
    margin: 0;
    color: var(--green);
    font-family: var(--font-heading);
    font-size: clamp(42px, 5vw, 74px);
    font-weight: 400;
    line-height: 1.04;
}

.wellness-retreats-intro p:not(.wellness-label) {
    max-width: 560px;
    margin: clamp(22px, 3vw, 34px) 0 0;
    color: rgba(37, 37, 31, 0.78);
    font-family: var(--font-body), Urbanist, sans-serif;
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.75;
}

.wellness-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(22px, 3vw, 38px);
    max-width: 1180px;
    margin: 0 auto;
}

.wellness-card {
    position: relative;
    min-height: clamp(420px, 42vw, 560px);
    overflow: hidden;
    padding: 0;
    border: 0;
    background: #111;
    isolation: isolate;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.wellness-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 20%, rgba(0, 0, 0, 0.62) 100%);
    opacity: 1;
    transition: opacity 0.35s ease;
}

.wellness-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(145deg, rgba(11, 58, 38, 0.92), rgba(122, 143, 106, 0.82));
    opacity: 0;
    transition: opacity 0.35s ease;
}

.wellness-card>img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease, filter 0.45s ease;
}

.wellness-card h3 {
    margin: 0;
    color: #fffaf0;
    font-family: var(--font-heading);
    font-size: clamp(34px, 3.7vw, 56px);
    font-weight: 400;
    line-height: 1.02;
    transition: color 0.35s ease, transform 0.35s ease;
}

.wellness-card p {
    margin: 18px 0 0;
    color: rgba(255, 250, 240, 0.9);
    font-family: var(--font-body), Urbanist, sans-serif;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.7;
    transition: color 0.35s ease, transform 0.35s ease, opacity 0.35s ease;
}

.wellness-card-front,
.wellness-card-detail {
    position: absolute;
    inset: clamp(28px, 3vw, 44px);
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;
}

.wellness-card-detail {
    justify-content: center;
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.wellness-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 80px rgba(11, 58, 38, 0.16);
}

.wellness-card:hover::after {
    opacity: 1;
}

.wellness-card:hover>img {
    transform: scale(1.04);
    filter: brightness(0.88);
}

.wellness-card:hover .wellness-card-front {
    opacity: 0;
    transform: translateY(-18px);
}

.wellness-card:hover .wellness-card-detail {
    opacity: 1;
    transform: translateY(0);
}

.wellness-card:hover h3,
.wellness-card:hover p {
    color: #fffaf0;
}

@media (max-width: 900px) {

    .wellness-retreats-intro,
    .wellness-card-grid {
        grid-template-columns: 1fr;
    }

    .wellness-retreats-intro figure {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 560px) {
    .wellness-retreats-section {
        padding: 72px 18px;
    }

    .wellness-card {
        min-height: 430px;
    }
}

.facility-events-section {
    display: grid !important;
    grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.35fr) !important;
    gap: clamp(48px, 6vw, 96px) !important;
    align-items: start !important;
    background: #FFFFFF !important;
    padding: clamp(78px, 9vw, 132px) clamp(20px, 5vw, 72px) !important;
}

.facility-events-left {
    position: sticky !important;
    top: clamp(100px, 12vh, 140px) !important;
    max-width: 500px !important;
    display: flex !important;
    flex-direction: column !important;
}

.facility-events-label {
    margin: 0 0 12px 0 !important;
    color: #C45B34 !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

.events-left-heading {
    margin: 0 0 16px 0 !important;
    color: #146052 !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(42px, 4.5vw, 56px) !important;
    font-weight: 500 !important;
    line-height: 1.08 !important;
}

.events-left-desc {
    margin: 0 0 28px 0 !important;
    color: #555555 !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: clamp(15px, 1.2vw, 17px) !important;
    line-height: 1.7 !important;
}

.facility-events-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #146052 !important;
    color: #FFFFFF !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    padding: 14px 28px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    width: fit-content !important;
    box-shadow: 0 8px 24px rgba(20, 96, 82, 0.18) !important;
}

.facility-events-link:hover {
    background: #C45B34 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 30px rgba(196, 91, 52, 0.25) !important;
    color: #FFFFFF !important;
}

.events-context-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 36px !important;
    padding-top: 28px !important;
    border-top: 1px solid rgba(200, 180, 138, 0.3) !important;
}

.events-context-chips span {
    font-family: 'Manrope', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: #FAF8F5 !important;
    color: #146052 !important;
    border: 1px solid rgba(20, 96, 82, 0.15) !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.events-context-chips span i {
    color: #C45B34 !important;
    font-size: 11px !important;
}

/* Right Panel Events List (Large Editorial Blocks) */
.facility-events-list {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(60px, 8vw, 100px) !important;
}

.facility-event-block {
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: clamp(40px, 6vw, 70px) !important;
    border-bottom: 1px solid rgba(200, 180, 138, 0.28) !important;
}

.facility-event-block:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.event-block-num {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(28px, 3vw, 38px) !important;
    font-weight: 700 !important;
    color: #D6B35A !important;
    display: block !important;
    margin-bottom: 4px !important;
}

.event-block-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(30px, 3.8vw, 46px) !important;
    font-weight: 500 !important;
    color: #146052 !important;
    margin: 0 0 18px 0 !important;
    line-height: 1.1 !important;
}

.event-block-image {
    width: 100% !important;
    height: clamp(340px, 36vw, 480px) !important;
    margin: 0 0 20px 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 16px 45px rgba(20, 96, 82, 0.1) !important;
}

.event-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.facility-event-block:hover .event-block-image img {
    transform: scale(1.03) !important;
}

.event-block-text {
    font-family: 'Manrope', sans-serif !important;
    font-size: clamp(15px, 1.25vw, 18px) !important;
    line-height: 1.7 !important;
    color: #444444 !important;
    margin: 0 !important;
    max-width: 680px !important;
}

@media (max-width: 980px) {
    .facility-events-section {
        grid-template-columns: 1fr !important;
        padding: 50px 20px !important;
    }

    .facility-events-left {
        position: relative !important;
        top: auto !important;
        max-width: 100% !important;
        margin-bottom: 40px !important;
    }
}


@media (max-width: 640px) {
    .facility-events-section {
        padding: 72px 18px;
    }

    .facility-event-copy {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .facility-event-card figure {
        aspect-ratio: 4 / 5;
    }
}

.testimonial {
    padding: clamp(28px, 5vw, 52px);
    min-height: 235px;
}

.testimonial p {
    color: var(--charcoal);
    font-family: var(--font-heading);
    font-size: clamp(27px, 4vw, 42px);
    line-height: 1.12;
}

.promo-strip {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 24px;
    background: var(--green);
    color: var(--white);
}

.countdown {
    display: flex;
    gap: 10px;
}

.countdown span {
    display: grid;
    place-items: center;
    min-width: 88px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 800;
}

.countdown b {
    color: var(--gold-soft);
    font-size: 28px;
}



.page-hero {
    min-height: 70vh;
    display: grid;
    align-items: end;
    padding: 140px clamp(20px, 7vw, 108px) 80px;
    color: var(--white);
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.62) 100%), var(--hero-image);
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    overflow: hidden;
    will-change: background-position;
}

.page-hero.compact {
    min-height: 100vh;
}

.page-hero h1 {
    color: var(--ivory);
    font-family: var(--font-heading);
    font-size: clamp(26px, 3.5vw, 44px);
    font-weight: 500;
    letter-spacing: 1.5px;
    line-height: 1.2;
}

.about-page-hero {
    min-height: 62vh;
    align-items: end;
    padding-bottom: clamp(42px, 8vh, 82px);
}

.about-page-hero>div {
    max-width: 680px;
}

.about-page-hero h1 {
    color: var(--ivory);
    font-family: var(--font-heading);
    font-size: clamp(26px, 3.5vw, 44px);
    font-weight: 500;
    letter-spacing: 1.5px;
    line-height: 1.2;
    max-width: 720px;
}

.dining-hero {
    grid-template-columns: minmax(0, .95fr) minmax(320px, .72fr);
    align-items: center;
    gap: clamp(28px, 5vw, 72px);
    background: linear-gradient(90deg, rgba(11, 13, 11, .96), rgba(18, 53, 42, .88));
}

.dining-hero figure {
    margin: 0;
    width: 100%;
    max-width: 620px;
    justify-self: end;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .34);
}

.dining-hero img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.dining-page-master-container,
.dining-page-master-container>section,
.dining-page-hero {
    opacity: 1 !important;
    visibility: visible !important;
}

.dining-page-hero {
    min-height: 76vh;
    background: linear-gradient(90deg, rgba(11, 13, 11, 0.66), rgba(11, 58, 38, 0.18)), var(--hero-image) center/cover !important;
}

.dining-page-hero>div {

    max-width: 760px;
}

.dining-page-hero p:not(.eyebrow) {
    max-width: 620px;
    margin: 18px 0 0;
    color: rgba(255, 250, 240, 0.86);
    font-size: clamp(16px, 1.45vw, 20px);
    line-height: 1.7;
}

.dining-story-section {
    background: #FFFFFF !important;
    padding: clamp(50px, 6vw, 80px) clamp(20px, 5vw, 72px) !important;
    text-align: center !important;
}

.dining-story-container {
    max-width: 800px !important;
    margin: 0 auto !important;
}

.dining-story-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(36px, 4.5vw, 52px) !important;
    font-weight: 500 !important;
    color: #146052 !important;
    margin: 6px 0 16px 0 !important;
}

.dining-story-paragraph {
    font-family: 'Manrope', sans-serif !important;
    font-size: clamp(15px, 1.25vw, 18px) !important;
    line-height: 1.75 !important;
    color: #444444 !important;
    margin: 0 0 24px 0 !important;
}

.dining-highlights-chips {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px 18px !important;
}

.dining-highlights-chips span {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: #FAF8F5 !important;
    color: #146052 !important;
    border: 1px solid rgba(20, 96, 82, 0.18) !important;
    padding: 8px 20px !important;
    border-radius: 25px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.dining-highlights-chips span i {
    color: #C45B34 !important;
    font-size: 12px !important;
}

/* Dining Editorial Section (3-Image Section) */
.dining-editorial-section {
    background: #F8F6F1 !important;
    padding: clamp(80px, 10vw, 140px) clamp(20px, 5vw, 72px);
}


.dining-editorial-grid {
    max-width: 1320px;
    min-height: 760px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}

.dining-editorial-card {
    display: grid;
    gap: 22px;
    will-change: transform, opacity;
}

.dining-card-two {
    margin-top: clamp(72px, 10vw, 140px);
}

.dining-card-three {
    margin-top: clamp(28px, 5vw, 86px);
}

.dining-editorial-card figure {
    margin: 0;
    overflow: hidden;
    background: #f7f4ef;
    border-radius: 18px;
}

.dining-card-one figure,
.dining-card-three figure {
    aspect-ratio: 4 / 5;
}

.dining-card-two figure {
    aspect-ratio: 4 / 6;
}

.dining-editorial-card img {
    width: 100%;
    height: 112%;
    object-fit: cover;
    transform: translateY(-6%);
    transition: transform 0.45s ease, filter 0.45s ease;
}

.dining-editorial-card:hover img {
    transform: translateY(-6%) scale(1.025);
    filter: brightness(1.03);
}

.dining-editorial-card h3 {
    margin: 0;
    color: var(--charcoal);
    font-family: var(--font-heading);
    font-size: clamp(30px, 3.3vw, 50px);
    font-weight: 400;
    line-height: 1.05;
}

.dining-editorial-card p {
    margin: 12px 0 0;
    color: rgba(37, 37, 31, 0.76);
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.7;
}

/* Dining Atmosphere Reel Carousel */
.dining-reel-section {
    overflow: hidden;
    background: #ffffff;
    padding: clamp(70px, 8vw, 110px) 0;
}

.dining-reel-track {
    display: flex;
    width: max-content;
    gap: clamp(18px, 2.4vw, 34px);
    animation: diningReel 48s linear infinite;
    will-change: transform;
}

.dining-reel-section:hover .dining-reel-track {
    animation-play-state: paused;
}

.dining-reel-item {
    flex: 0 0 clamp(280px, 32vw, 520px);
    aspect-ratio: 4 / 3;
    margin: 0;
    overflow: hidden;
    border-radius: 18px;
    background: #f7f4ef;
}

.dining-reel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes diningReel {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-50% - clamp(9px, 1.2vw, 17px)));
    }
}

/* Dining Featured Lakeside Experience */
.dining-featured-experience {
    min-height: clamp(620px, 78vh, 820px);
    display: grid;
    place-items: center;
    padding: clamp(70px, 8vw, 120px) clamp(20px, 5vw, 72px);
    background: linear-gradient(rgba(11, 58, 38, 0.18), rgba(11, 58, 38, 0.28)), var(--featured-dining) center/cover;
}

.dining-featured-card {
    max-width: 620px;
    padding: clamp(34px, 5vw, 64px);
    border-radius: 28px;
    background: rgba(8, 41, 31, 0.94);
    color: #fffaf0;
    text-align: center;
    box-shadow: 0 34px 110px rgba(0, 0, 0, 0.25);
}

.dining-featured-card h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(40px, 5vw, 68px);
    font-weight: 400;
    line-height: 1.02;
}

.dining-featured-card p {
    margin: 22px auto 0;
    color: rgba(255, 250, 240, 0.84);
    line-height: 1.75;
}

/* Our Dining Philosophy Section */

.dining-philosophy-section {
    padding: clamp(70px, 8vw, 110px) clamp(20px, 5vw, 72px) !important;
    background: #F8F6F1 !important;
    border-top: 1px solid rgba(200, 180, 138, 0.25) !important;
    border-bottom: 1px solid rgba(200, 180, 138, 0.25) !important;
}

.dining-philosophy-container {
    max-width: 1100px !important;
    margin: 0 auto !important;
}

.philosophy-header {
    max-width: 780px !important;
    margin: 0 auto clamp(40px, 5vw, 60px) auto !important;
}

.philosophy-header h2 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(36px, 4.5vw, 52px) !important;
    font-weight: 500 !important;
    color: #146052 !important;
    margin: 6px 0 16px 0 !important;
}

.philosophy-lead {
    font-family: 'Manrope', sans-serif !important;
    font-size: clamp(15px, 1.25vw, 18px) !important;
    line-height: 1.75 !important;
    color: #444444 !important;
    margin: 0 !important;
}

.philosophy-points-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: clamp(30px, 4vw, 50px) !important;
}

.philosophy-point {
    text-align: left !important;
    padding-top: 16px !important;
    border-top: 2px solid #D6B35A !important;
}

.point-num {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #C45B34 !important;
    display: block !important;
    margin-bottom: 8px !important;
}

.philosophy-point h3 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    color: #146052 !important;
    margin: 0 0 10px 0 !important;
}

.philosophy-point p {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: #555555 !important;
    margin: 0 !important;
}

/* Prominent Reserve Table Button */
.dining-reserve-btn-prominent {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #C45B34 !important;
    color: #FFFFFF !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 16px 36px !important;
    border-radius: 35px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 10px 30px rgba(196, 91, 52, 0.35) !important;
    margin-top: 24px !important;
}

.dining-reserve-btn-prominent:hover {
    background: #146052 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 35px rgba(20, 96, 82, 0.4) !important;
    color: #FFFFFF !important;
}

/* "Dining, Your Way" Redesigned Asymmetric Grid */
.dining-ways-section {
    padding: clamp(75px, 9vw, 120px) clamp(20px, 5vw, 72px) !important;
    background: #FFFFFF !important;
}

.dining-ways-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.dining-ways-editorial-grid {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: clamp(24px, 3vw, 40px) !important;
    margin-top: clamp(40px, 5vw, 60px) !important;
}

.dining-way-card {
    background: #FAF8F5 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    border: 1px solid rgba(200, 180, 138, 0.3) !important;
    box-shadow: 0 16px 45px rgba(20, 96, 82, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}

.dining-way-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 24px 60px rgba(20, 96, 82, 0.14) !important;
}

.way-private {
    grid-column: span 7 !important;
}

.way-lakeside {
    grid-column: span 5 !important;
}

.way-bbq {
    grid-column: span 5 !important;
}

.way-celebrations {
    grid-column: span 7 !important;
}

.way-image-wrap {
    width: 100% !important;
    height: clamp(260px, 25vw, 360px) !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.way-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.dining-way-card:hover .way-image-wrap img {
    transform: scale(1.04) !important;
}

.way-content {
    padding: clamp(24px, 3vw, 36px) !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.way-tag {
    font-family: 'Manrope', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1.8px !important;
    color: #C45B34 !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
}

.way-content h3 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(26px, 2.5vw, 34px) !important;
    font-weight: 600 !important;
    color: #146052 !important;
    margin: 0 0 10px 0 !important;
}

.way-content p {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: #555555 !important;
    margin: 0 0 20px 0 !important;
    flex-grow: 1 !important;
}

.way-link {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #146052 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: color 0.25s ease, transform 0.25s ease !important;
}

.way-link:hover {
    color: #C45B34 !important;
    transform: translateX(4px) !important;
}

/* Dining Moments Quote Banner */
.dining-moments-quote-banner {
    padding: clamp(65px, 8vw, 100px) clamp(20px, 5vw, 60px) !important;
    background: #F8F6F1 !important;
    border-top: 1px solid rgba(200, 180, 138, 0.25) !important;
}

.quote-inner-container {
    max-width: 820px !important;
    margin: 0 auto !important;
}

.dining-quote-text {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(28px, 3.8vw, 42px) !important;
    font-weight: 500 !important;
    font-style: italic !important;
    line-height: 1.32 !important;
    color: #146052 !important;
    margin: 16px 0 12px 0 !important;
    border: none !important;
    padding: 0 !important;
}

.dining-quote-author {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    color: #C45B34 !important;
    text-transform: uppercase !important;
    display: block !important;
    margin-bottom: 24px !important;
    font-style: normal !important;
}

@media (max-width: 900px) {
    .philosophy-points-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .way-private,
    .way-lakeside,
    .way-bbq,
    .way-celebrations {
        grid-column: span 12 !important;
    }
}


.dining-services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 34px);
    max-width: 1120px;
    margin: 0 auto;
}

.dining-service-card {
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(11, 58, 38, 0.12);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.82);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.dining-service-card figure {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #F7F4EF;
}

.dining-service-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.dining-service-card>div {
    padding: clamp(24px, 3vw, 38px);
}

.dining-service-card h3 {
    margin: 0;
    color: var(--green);
    font-family: var(--font-heading);
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 400;
    line-height: 1.05;
}

.dining-service-card p {
    margin: 18px 0 0;
    color: rgba(37, 37, 31, 0.76);
    font-size: 16px;
    line-height: 1.7;
}

.dining-service-card a {
    display: inline-flex;
    margin-top: 26px;
    padding: 12px 20px;
    border: 1px solid var(--green);
    border-radius: 999px;
    color: var(--green);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

.dining-service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(11, 58, 38, 0.24);
    box-shadow: 0 28px 70px rgba(11, 58, 38, 0.1);
}

.dining-service-card:hover img {
    transform: scale(1.035);
    filter: brightness(1.03);
}

.dining-service-card:hover a {
    background: var(--green);
    color: #fffaf0;
    transform: translateY(-2px);
}

.story-grid,
.contact-grid,
.booking-layout {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(28px, 6vw, 86px);
}

.story-grid img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    border-radius: var(--radius);
}

.about-story-editorial {
    display: block;
    background: #E9DFC8;
    padding: clamp(92px, 11vw, 150px) clamp(20px, 5vw, 72px);
    overflow: hidden;
}

.about-story-intro {
    max-width: 900px;
    margin: 0 auto clamp(70px, 9vw, 120px);
    text-align: center;
}

.about-story-label {
    margin: 0 0 18px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 3.5px;
    text-transform: uppercase;
}

.about-story-intro h2 {
    font-size: clamp(42px, 6.2vw, 86px);
    font-weight: 500;
    color: var(--charcoal);
    line-height: 0.98;
    margin: 0 0 24px;
}

.about-story-intro p {
    max-width: 820px;
    margin: 0 auto;
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.85;
    color: rgba(43, 43, 43, 0.74);
}

.about-story-composition {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(28px, 4vw, 56px);
    max-width: 1480px;
    margin: 0 auto;
}

.about-story-item {
    will-change: transform, opacity;
}

.about-story-left,
.about-story-right {
    padding-top: clamp(70px, 7vw, 112px);
}

.about-story-image {
    margin: 0 0 22px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.16);
}

.about-story-image img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 0;
    transform: scale(1.001);
    transition: transform 0.35s ease, filter 0.35s ease;
    will-change: transform;
}

.about-story-image:hover img {
    transform: scale(1.02);
    filter: brightness(1.04);
}

.about-story-left .about-story-image,
.about-story-right .about-story-image {
    aspect-ratio: 4 / 4.1;
}

.about-story-center .about-story-image {
    aspect-ratio: 4 / 4.35;
}

.about-story-copy {
    max-width: 520px;
}

.about-story-copy h3 {
    font-size: clamp(30px, 3.4vw, 48px);
    font-weight: 500;
    line-height: 1.08;
    color: var(--charcoal);
    margin: 0 0 16px;
}

.about-story-copy p {
    margin: 0;
    font-size: clamp(14px, 1.35vw, 17px);
    line-height: 1.72;
    color: rgba(43, 43, 43, 0.76);
}

.about-values-section {
    background: #ffffff;
    padding: clamp(86px, 10vw, 138px) clamp(20px, 5vw, 72px);
    overflow: hidden;
}

.about-values-inner {
    max-width: 1380px;
    margin: 0 auto;
}

.about-values-section h2 {
    max-width: 760px;
    margin: 0 auto clamp(58px, 7vw, 92px);
    text-align: center;
    font-size: clamp(42px, 5.7vw, 82px);
    font-weight: 500;
    line-height: 1.08;
    color: #0f220d;
}

.about-values-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.92fr) minmax(0, 0.9fr);
    gap: clamp(30px, 4.8vw, 72px);
    align-items: center;
}

.about-values-column {
    display: grid;
    gap: clamp(34px, 4.5vw, 58px);
}

.about-value-item {
    padding-bottom: clamp(26px, 3vw, 38px);
    border-bottom: 1px solid rgba(43, 43, 43, 0.16);
}

.about-value-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.about-value-item h3 {
    margin: 0 0 18px;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 500;
    color: var(--charcoal);
}

.about-value-item p {
    margin: 0;
    font-size: clamp(15px, 1.35vw, 18px);
    line-height: 1.65;
    color: rgba(43, 43, 43, 0.78);
}

.about-values-image {
    margin: 0;
    aspect-ratio: 4 / 5.25;
    overflow: hidden;
}

.about-values-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: none;
    transform: scale(1.02);
    will-change: transform;
}

.about-know-section {
    background: #fbf3e4;
    padding: clamp(82px, 9vw, 128px) clamp(18px, 4vw, 56px);
    overflow: hidden;
}

.about-know-heading {
    max-width: 1480px;
    margin: 0 auto 28px;
}

.about-know-heading span {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(48px, 6vw, 86px);
    line-height: 0.95;
    color: #102c0e;
}

.about-know-layout {
    display: grid;
    grid-template-columns: minmax(190px, 0.78fr) minmax(320px, 1.42fr) minmax(320px, 1.55fr);
    gap: clamp(18px, 3vw, 42px);
    align-items: start;
    max-width: 1480px;
    margin: 0 auto;
}

.about-know-layout h2 {
    font-family: var(--font-heading);
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: 0;
    text-transform: none;
    color: var(--charcoal);
    margin: 0 0 18px;
}

.about-know-history figure,
.about-know-image {
    margin: 0;
    overflow: hidden;
}

.about-know-history figure {
    aspect-ratio: 3 / 2;
    margin-bottom: 20px;
}

.about-know-history img,
.about-know-image img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform 0.35s ease, filter 0.35s ease;
}

.about-know-history figure:hover img,
.about-know-image:hover img {
    transform: scale(1.025);
    filter: brightness(1.04);
}

.about-know-history p {
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(15px, 1.35vw, 18px);
    line-height: 1.65;
    color: rgba(43, 43, 43, 0.78);
}

.about-know-image {
    aspect-ratio: 4 / 5.15;
}

.about-know-inspiration {
    padding-top: clamp(54px, 5vw, 0px);
}

.about-know-copy h3 {
    margin: 0 0 22px;
    font-family: var(--font-body);
    font-size: clamp(15px, 1.35vw, 18px);
    font-weight: 600;
    line-height: 1.65;
    text-transform: none;
    color: rgba(43, 43, 43, 0.78);
}

.about-know-copy p {
    margin: 0 0 22px;
    font-family: var(--font-body);
    font-size: clamp(15px, 1.35vw, 18px);
    line-height: 1.65;
    text-transform: none;
    color: rgba(43, 43, 43, 0.78);
}

.destination-journal-section {
    min-height: 100vh;
    background: #ffffff;
    overflow-x: clip;
    overflow-y: visible;
    position: relative;
}

.destination-journal-stage {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 0.3fr) minmax(360px, 0.4fr) minmax(0, 0.3fr);
    align-items: center;
    gap: clamp(34px, 4.5vw, 86px);
    padding: clamp(70px, 8vw, 110px) clamp(24px, 5vw, 88px);
    overflow: hidden;
}

.destination-card img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.destination-card figcaption {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 20px;
    z-index: 2;
    font-family: var(--font-heading);
    font-size: clamp(20px, 2vw, 30px);
    line-height: 1.05;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}

.destination-column,
.destination-center {
    position: relative;
    z-index: 2;
}

.destination-column {
    height: clamp(560px, 78vh, 760px);
    overflow: hidden;
    will-change: transform, opacity;
}

.destination-column-track {
    display: grid;
    gap: clamp(28px, 4vh, 46px);
    will-change: transform;
}

.destination-column-left {
    align-self: start;
    padding-top: 0;
}

.destination-column-right {
    align-self: end;
    padding-bottom: 0;
}

.destination-card {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;
    height: clamp(360px, 58vh, 560px);
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 18px 46px rgba(43, 43, 43, 0.10);
    background: rgba(255, 255, 255, 0.18);
}

.destination-card::after {
    content: "";
    position: absolute;
    inset: 48% 0 0;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.42));
    pointer-events: none;
}

.destination-card img {
    transform: scale(1.01);
    transition: transform 0.35s ease, filter 0.35s ease;
    will-change: transform;
}

.destination-card:hover img {
    transform: scale(1.02);
    filter: brightness(1.03);
}

.destination-center {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    color: var(--charcoal);
}

.destination-label {
    margin: 0 0 18px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3.4px;
    text-transform: uppercase;
    color: var(--gold);
}

.destination-center h2 {
    font-size: clamp(54px, 7vw, 104px);
    font-weight: 300;
    line-height: 0.9;
    color: #102c0e;
    margin: 0 0 28px;
}

.destination-center p:not(.destination-label) {
    max-width: 610px;
    margin: 0 auto 28px;
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.65;
    color: rgba(43, 43, 43, 0.78);
}

.destination-center a {
    position: relative;
    display: inline-flex;
    padding-bottom: 6px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: #102c0e;
}

.destination-center a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform-origin: left;
    transform: scaleX(0.55);
    transition: transform 0.3s ease;
}

.destination-center a:hover::after {
    transform: scaleX(1);
}

.destination-mobile-swiper {
    display: none;
}

.about-final-cta-section {
    min-height: 160vh;
    background: #E9DFC8;
    position: relative;
    overflow: clip;
}

.about-final-cta-stage {
    min-height: 100vh;
    position: relative;
    display: grid;
    place-items: center;
    padding: clamp(64px, 7vw, 110px) clamp(20px, 5vw, 88px);
}

.about-final-collage {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.about-final-image {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    width: clamp(240px, 22vw, 390px);
    aspect-ratio: 4 / 4.8;
    overflow: hidden;
    transform: translate(-50%, -50%);
    box-shadow: 0 22px 64px rgba(43, 43, 43, 0.12);
    will-change: transform, opacity;
}

.about-final-image img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform 0.3s ease, filter 0.3s ease;
}

.about-final-image:hover img {
    transform: scale(1.02);
    filter: brightness(1.03);
}

.about-final-image-one {
    z-index: 2;
}

.about-final-image-two {
    z-index: 1;
}

.about-final-image-three {
    z-index: 4;
}

.about-final-image-four {
    z-index: 3;
}

.about-final-content {
    position: relative;
    z-index: 2;
    max-width: 820px;
    text-align: center;
    color: var(--charcoal);
    will-change: transform, opacity;
}

.about-final-content h2 {
    font-size: clamp(54px, 7vw, 112px);
    font-weight: 500;
    line-height: 0.98;
    margin: 0 0 24px;
}

.about-final-content p {
    max-width: 680px;
    margin: 0 auto 28px;
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.65;
    color: rgba(43, 43, 43, 0.78);
}

.about-final-content a {
    position: relative;
    display: inline-flex;
    padding-bottom: 7px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.7px;
    text-transform: uppercase;
    color: var(--forest-green);
    transform: translateY(0);
    transition: transform 0.2s ease;
}

.about-final-content a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0.55);
    transform-origin: left;
    transition: transform 0.2s ease;
}

.about-final-content a:hover {
    transform: translateY(-2px);
}

.about-final-content a:hover::after {
    transform: scaleX(1);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.values-grid article {
    padding: 30px;
}

.timeline {
    background: var(--green);
    color: var(--white);
}

.timeline-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.timeline-list div {
    border-left: 2px solid var(--gold);
    padding-left: 18px;
}

.timeline-list span {
    color: var(--gold-soft);
    font-weight: 900;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.filter-bar button {
    border: 1px solid var(--stone);
    background: var(--white);
    color: var(--charcoal);
    border-radius: var(--radius);
    padding: 10px 15px;
    font-weight: 800;
    cursor: pointer;
}

.filter-bar button.active {
    background: var(--green);
    color: var(--white);
    border-color: var(--green);
}

.room-grid,
.package-grid,
.dining-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.package-grid {
    overflow: visible;
}

.room-card {
    display: flex;
    flex-direction: column;
}

.room-body {
    padding: 24px;
    display: grid;
    gap: 16px;
    flex: 1;
}

.room-title {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
}

.room-title h2 {
    font-size: 34px;
}

.room-title strong,
.package-card strong {
    color: var(--green);
    font-size: 22px;
    white-space: nowrap;
}

/* Accommodations Hero Custom Styling */
.accommodation-hero-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.accommodation-hero-features {
    list-style: none;
    padding: 0;
    margin: 22px auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 24px;
}

.accommodation-hero-features li {
    font-family: 'Manrope', 'Inter', sans-serif;
    font-size: clamp(13.5px, 1.6vw, 15.5px);
    font-weight: 600;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 8px 18px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.accommodation-hero-features li i {
    color: #D6B35A;
    font-size: 13px;
}


.accommodation-page,
.accommodation-page *,
.gsap-active .accommodation-page,
.gsap-active .accommodation-page *,
.gsap-active .accommodation-label,
.gsap-active .accommodation-intro h2,
.gsap-active .accommodation-intro>p,
.gsap-active .accommodation-highlight,
.gsap-active .accommodation-filter button,
.gsap-active .accommodation-room-card,
.gsap-active .accommodation-reservations-note,
.gsap-active .accommodation-faq-heading>*,
.gsap-active .accommodation-faq-item {
    opacity: 1 !important;
    visibility: visible !important;
}

.accommodation-page {
    background: #F8F6F1 !important;
    padding: clamp(10px, 2vw, 30px) clamp(20px, 5vw, 72px) clamp(84px, 10vw, 120px) !important;
    overflow: hidden;
}

.accommodation-highlights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2.2vw, 26px);
    max-width: 1180px;
    margin: 0 auto clamp(40px, 5vw, 60px) !important;
}


.accommodation-highlight {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: clamp(24px, 3vw, 34px) 20px;
    background: rgba(255, 252, 244, 0.78);
    border: 1px solid rgba(195, 157, 96, 0.22);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(43, 35, 21, 0.08);
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.accommodation-highlight:hover {
    transform: translateY(-5px);
    border-color: rgba(195, 157, 96, 0.42);
    box-shadow: 0 24px 54px rgba(43, 35, 21, 0.12);
}

.accommodation-highlight i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--gold);
    background: rgba(11, 58, 38, 0.08);
    border-radius: 50%;
    font-size: 18px;
}

.accommodation-highlight strong {
    color: var(--green);
    font-family: var(--font-heading);
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 400;
    line-height: 1;
}

.accommodation-highlight span {
    color: rgba(37, 37, 31, 0.72);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.accommodation-filter {
    justify-content: center;
    gap: 12px;
    max-width: 1000px;
    margin: 0 auto clamp(42px, 6vw, 72px);
}

.accommodation-listing-panel {
    width: calc(100% + clamp(40px, 10vw, 144px));
    margin: clamp(44px, 6vw, 72px) calc(clamp(20px, 5vw, 72px) * -1) 0;
    padding: clamp(54px, 7vw, 92px) clamp(20px, 5vw, 72px);
    background: var(--white);
}

.accommodation-filter button {
    border: 1px solid rgba(11, 58, 38, 0.16);
    background: rgba(255, 252, 244, 0.82);
    color: var(--green);
    border-radius: 999px;
    padding: 12px 20px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.accommodation-filter button:hover {
    border-color: rgba(11, 58, 38, 0.34);
    background: rgba(11, 58, 38, 0.08);
    transform: translateY(-2px);
}

.accommodation-filter button.active {
    border-color: var(--green);
    background: var(--green);
    color: var(--white);
}

.accommodation-room-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(24px, 4vw, 40px);
    max-width: 1240px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .accommodation-room-grid {
        grid-template-columns: 1fr !important;
    }
}

.accommodation-room-card {
    background: #FFFFFF !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    border: 1px solid rgba(200, 180, 138, 0.28) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s ease !important;
}

.accommodation-room-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(20, 96, 82, 0.35) !important;
    box-shadow: 0 24px 54px rgba(20, 96, 82, 0.12) !important;
}

.accommodation-room-card .room-image {
    width: 100% !important;
    height: 260px !important;
    aspect-ratio: auto !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.accommodation-room-card .room-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.accommodation-room-card:hover .room-image img {
    transform: scale(1.06) !important;
}

.room-badge {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    background: #C45B34 !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.accommodation-room-card .room-body {
    padding: 28px 26px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    gap: 0 !important;
}

.room-header-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
}

.room-header-wrap .room-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(24px, 2.5vw, 30px) !important;
    font-weight: 600 !important;
    color: #146052 !important;
    margin: 0 !important;
}

.room-stars {
    display: flex !important;
    gap: 4px !important;
    color: #D6B35A !important;
    font-size: 14px !important;
}

.room-price-box {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.room-price-original {
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important;
    color: #888888 !important;
    text-decoration: line-through !important;
}

.room-price-offer {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #146052 !important;
}

.room-price-unit {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    color: #666666 !important;
}

.room-short-desc {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: #555555 !important;
    margin: 0 0 20px 0 !important;
}

.room-amenities-container {
    background: #FAF8F5 !important;
    padding: 16px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(200, 180, 138, 0.22) !important;
    margin-bottom: 24px !important;
}

.amenities-label {
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #C45B34 !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 10px !important;
}

.room-amenities-2col {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px 12px !important;
}

.room-amenities-2col li {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.room-amenities-2col li i {
    color: #146052 !important;
    font-size: 11px !important;
}

/* Room Card Actions Bar & Book Now Button Animation */
.room-actions-bar {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: auto !important;
}

.room-learn-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #146052 !important;
    text-decoration: none !important;
    padding: 12px 18px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(20, 96, 82, 0.22) !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
}

.room-learn-btn:hover {
    background: rgba(20, 96, 82, 0.08) !important;
    border-color: #146052 !important;
    color: #146052 !important;
    transform: translateX(-2px) !important;
}

.room-book-btn {
    flex-grow: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #146052 !important;
    color: #FFFFFF !important;
    padding: 13px 22px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
    box-shadow: 0 6px 18px rgba(20, 96, 82, 0.2) !important;
}

.room-book-btn .btn-text {
    transition: transform 0.3s ease !important;
}

.room-book-btn .btn-home-icon {
    font-size: 14px !important;
    opacity: 0 !important;
    transform: translateX(-10px) scale(0.6) !important;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease !important;
    color: #D6B35A !important;
}

.room-book-btn:hover {
    background: #C45B34 !important;
    box-shadow: 0 10px 26px rgba(196, 91, 52, 0.3) !important;
    transform: translateY(-2px) !important;
}

.room-book-btn:hover .btn-text {
    transform: translateX(-3px) !important;
}

.room-book-btn:hover .btn-home-icon {
    opacity: 1 !important;
    transform: translateX(0) scale(1) !important;
}

letter-spacing: 0.14em;
line-height: 1;
text-transform: uppercase;
transition: transform 0.2s ease,
background 0.2s ease,
color 0.2s ease,
border-color 0.2s ease;
}

.room-learn-btn {
    border: 1px solid var(--green);
    background: var(--green);
    color: var(--white);
}

.room-book-btn {
    border: 1px solid var(--green);
    background: transparent;
    color: var(--green);
}

.room-learn-btn:hover,
.room-book-btn:hover {
    transform: translateY(-2px);
}

.room-book-btn:hover {
    border-color: var(--gold);
    background: var(--gold);
    color: var(--charcoal);
}

/* 4-Image Swiper Slider on Room Cards */
.room-card-swiper {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

.room-card-swiper .swiper-slide {
    width: 100% !important;
    height: 100% !important;
}

.room-card-swiper .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.room-card-pagination {
    bottom: 12px !important;
    z-index: 10 !important;
}

.room-card-pagination .swiper-pagination-bullet {
    background: #FFFFFF !important;
    opacity: 0.5 !important;
    transition: all 0.3s ease !important;
    width: 8px !important;
    height: 8px !important;
}

.room-card-pagination .swiper-pagination-bullet-active {
    background: #D6B35A !important;
    opacity: 1 !important;
    width: 20px !important;
    border-radius: 6px !important;
}

/* Reservations Note & FAQ Section Editorial Styling */
.accommodation-reservations-note {
    max-width: 1080px;
    margin: clamp(40px, 5vw, 64px) auto 0;
    padding: clamp(24px, 3vw, 36px);
    background: #FAF8F5;
    border-radius: 18px;
    border: 1px solid rgba(200, 180, 138, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    text-align: center;
}

.accommodation-reservations-note p {
    margin: 0;
    color: #1A2B27;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(20px, 2.2vw, 26px);
    line-height: 1.5;
}

.accommodation-reservations-note a {
    color: #146052;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: #D6B35A;
    text-underline-offset: 4px;
}

.accommodation-quote-banner {
    margin-top: clamp(48px, 6vw, 80px) !important;
    border-radius: 20px !important;
}

.accommodation-faq {
    max-width: 1080px;
    margin: clamp(48px, 6vw, 80px) auto 0;
    padding: clamp(40px, 5vw, 60px) clamp(20px, 4vw, 40px);
    background: #F8F6F1;
    border-radius: 20px;
    border: 1px solid rgba(200, 180, 138, 0.25);
}

.accommodation-faq-heading {
    text-align: center;
    margin-bottom: 36px;
}

.accommodation-faq-heading .accommodation-label {
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #C45B34;
    font-weight: 700;
    margin-bottom: 10px;
    display: block;
}

.accommodation-faq-heading h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 500;
    color: #146052;
    margin: 0;
}

.accommodation-faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.accommodation-faq-item {
    background: #FFFFFF;
    border-radius: 14px;
    border: 1px solid rgba(200, 180, 138, 0.25);
    padding: 20px 24px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.accommodation-faq-item[open] {
    border-color: rgba(20, 96, 82, 0.35);
    box-shadow: 0 10px 30px rgba(20, 96, 82, 0.08);
}

.accommodation-faq-item summary {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(19px, 2vw, 24px);
    font-weight: 600;
    color: #146052;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.accommodation-faq-item p {
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #555555;
    margin: 14px 0 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(20, 96, 82, 0.1);
}

display: grid;
gap: 10px;
margin-bottom: clamp(28px, 4vw, 44px);
text-align: center;
}

.accommodation-faq-heading .accommodation-label {
    margin: 0;
}

.accommodation-faq-heading h2 {
    margin: 0;
    color: var(--green);
    font-family: var(--font-heading);
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 400;
    line-height: 1;
}

.accommodation-faq-list {
    display: grid;
    gap: 14px;
}

.accommodation-faq-item {
    background: rgba(255, 252, 244, 0.78);
    border: 1px solid rgba(195, 157, 96, 0.22);
    border-radius: 14px;
    box-shadow: 0 16px 42px rgba(43, 35, 21, 0.07);
    overflow: hidden;
}

.accommodation-faq-item summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px clamp(20px, 3vw, 30px);
    color: var(--green);
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: clamp(24px, 2.8vw, 34px);
    line-height: 1.12;
    list-style: none;
}

.accommodation-faq-item summary::-webkit-details-marker {
    display: none;
}

.accommodation-faq-item summary::after {
    content: "+";
    flex: 0 0 auto;
    color: var(--gold);
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 600;
    transition: transform 0.2s ease;
}

.accommodation-faq-item[open] summary::after {
    transform: rotate(45deg);
}

.accommodation-faq-item p {
    margin: 0;
    padding: 0 clamp(20px, 3vw, 30px) 24px;
    color: rgba(37, 37, 31, 0.72);
    font-size: 16px;
    line-height: 1.75;
}

.room-detail-page {
    background: #fbf3e4;
    padding: clamp(110px, 12vw, 160px) clamp(20px, 7vw, 150px) clamp(84px, 10vw, 138px);
}

.room-detail-missing {
    min-height: 70vh;
    display: grid;
    align-content: center;
    gap: 20px;
}

.room-detail-missing h1 {
    margin: 0;
    color: var(--green);
    font-family: var(--font-heading);
    font-size: clamp(52px, 8vw, 96px);
    font-weight: 400;
    line-height: 1;
}

.room-detail-missing p {
    max-width: 620px;
    color: rgba(37, 37, 31, 0.72);
}

.room-detail-hero {
    max-width: 1480px;
    margin: 0 auto;
}

.room-detail-back {
    display: inline-flex;
    margin-bottom: 20px;
    color: var(--green);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--gold);
}

.room-detail-hero h1 {
    max-width: 1100px;
    margin: 0;
    color: var(--charcoal);
    font-family: var(--font-heading);
    font-size: clamp(62px, 9vw, 132px);
    font-weight: 400;
    line-height: 0.92;
}

.room-detail-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 42px;
    margin-top: clamp(24px, 4vw, 42px);
    color: var(--charcoal);
    font-size: clamp(15px, 1.2vw, 18px);
}

.room-detail-facts span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.room-detail-facts i {
    color: rgba(37, 37, 31, 0.55);
}

.room-detail-image-deck {
    position: relative;
    max-width: 1180px;
    margin: clamp(58px, 7vw, 90px) auto 0;
    padding: 0 clamp(58px, 6vw, 86px);
}

.room-detail-deck-stack {
    position: relative;
    width: min(100%, 980px);
    height: clamp(390px, 52vw, 500px);
    margin: 0 auto;
    isolation: isolate;
}

.room-detail-deck-card {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 18px;
    background: rgba(255, 252, 244, 0.72);
    box-shadow: 0 26px 70px rgba(43, 35, 21, 0.18);
    cursor: pointer;
    transform-origin: center bottom;
    will-change: transform, opacity;
}

.room-detail-deck-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease, filter 0.35s ease;
}

.room-detail-deck-card.is-top:hover img {
    transform: scale(1.01);
    filter: brightness(1.03);
}

.room-detail-deck-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: min(100%, 980px);
    margin: 34px auto 0;
}

.room-detail-deck-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 86px;
}

.room-detail-deck-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(11, 58, 38, 0.24);
    transition: transform 0.2s ease, background 0.2s ease;
}

.room-detail-deck-dots span.active {
    background: var(--green);
    transform: scale(1.35);
}

.room-detail-deck-prev,
.room-detail-deck-next {
    position: absolute;
    top: 50%;
    z-index: 8;
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(11, 58, 38, 0.24);
    border-radius: 50%;
    background: rgba(255, 252, 244, 0.86);
    color: var(--green);
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(43, 35, 21, 0.09);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.room-detail-deck-prev {
    left: 0;
    transform: translateY(-50%);
}

.room-detail-deck-next {
    right: 0;
    transform: translateY(-50%);
}

.room-detail-deck-prev:hover,
.room-detail-deck-next:hover {
    background: var(--green);
    color: var(--white);
    transform: translateY(-50%) scale(1.04);
    box-shadow: 0 16px 34px rgba(43, 35, 21, 0.14);
}

.room-detail-about,
.room-detail-amenities {
    display: grid;
    grid-template-columns: minmax(220px, 0.42fr) minmax(0, 0.58fr);
    gap: clamp(34px, 7vw, 110px);
    max-width: 1120px;
    margin: clamp(62px, 8vw, 104px) auto 0;
    padding-bottom: clamp(52px, 7vw, 82px);
    border-bottom: 1px solid rgba(37, 37, 31, 0.16);
}

.room-detail-about h2,
.room-detail-amenities h2,
.room-detail-section-heading h2 {
    margin: 0;
    color: var(--charcoal);
    font-family: var(--font-heading);
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 400;
    line-height: 1.04;
}

.room-detail-about-copy {
    display: grid;
    gap: 26px;
}

.room-detail-price {
    display: flex;
    align-items: end;
    gap: 10px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(37, 37, 31, 0.16);
}

.room-detail-price span {
    margin-right: auto;
    color: var(--charcoal);
    font-size: 15px;
}

.room-detail-price strong {
    color: var(--charcoal);
    font-family: var(--font-heading);
    font-size: clamp(52px, 7vw, 78px);
    font-weight: 400;
    line-height: 0.78;
}

.room-detail-price small {
    color: var(--charcoal);
    font-size: 16px;
}

.room-detail-about-copy p {
    margin: 0;
    color: rgba(37, 37, 31, 0.78);
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.72;
}

.room-detail-book {
    justify-self: start;
    color: var(--charcoal);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--gold);
}

.room-detail-book::before {
    content: "\2192";
    margin-right: 6px;
    color: var(--gold);
}

.room-detail-amenities-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 38px;
}

.room-detail-amenities-grid span {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 62px;
    color: var(--charcoal);
    border-bottom: 1px solid rgba(37, 37, 31, 0.16);
    font-size: clamp(15px, 1.3vw, 18px);
}

.room-detail-amenities-grid i {
    width: 20px;
    color: rgba(37, 37, 31, 0.55);
}

.room-detail-similar {
    max-width: 1480px;
    margin: clamp(72px, 10vw, 124px) auto 0;
}

.room-detail-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(28px, 4vw, 46px);
}

.room-detail-section-heading .accommodation-label {
    margin: 0 0 8px;
}

.room-detail-similar-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 54px);
}

.room-detail-similar-card figure {
    aspect-ratio: 16 / 10;
    margin: 0 0 22px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 20px 48px rgba(43, 35, 21, 0.1);
}

.room-detail-similar-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease, filter 0.35s ease;
}

.room-detail-similar-card:hover img {
    transform: scale(1.02);
    filter: brightness(1.03);
}

.room-detail-similar-card h3 {
    margin: 0;
    color: var(--green);
    font-family: var(--font-heading);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 400;
    line-height: 1;
}

.room-detail-similar-card p {
    margin: 10px 0 16px;
    color: rgba(37, 37, 31, 0.66);
    font-size: 14px;
    font-weight: 700;
}

.room-detail-similar-card a {
    color: var(--green);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--gold);
}

.package-inclusive-section {
    position: relative;
    z-index: 3;
    background: #E9DFC8;
    overflow: hidden;
    padding: 0;
    isolation: isolate;
}

.package-inclusive-stage {
    min-height: 100vh;
    max-width: 1540px;
    margin: 0 auto;
    padding: clamp(64px, 7vw, 100px) clamp(20px, 5vw, 80px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.package-inclusive-section {
    background: #FFFFFF !important;
    padding: clamp(50px, 6vw, 80px) clamp(20px, 5vw, 60px) !important;
}

.package-inclusive-stage {
    max-width: 1240px;
    margin: 0 auto;
}

.package-inclusive-header {
    text-align: center;
    margin-bottom: clamp(28px, 4vw, 46px);
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

.package-inclusive-header h2 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(34px, 4.8vw, 52px) !important;
    font-weight: 500 !important;
    color: #146052 !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.15 !important;
}

.package-inclusive-header .section-sub {
    font-family: 'Manrope', sans-serif !important;
    font-size: 16.5px !important;
    color: #555555 !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

.package-inclusive-stack {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(24px, 3.5vw, 40px) !important;
}

.package-inclusive-card {
    position: relative !important;
    inset: auto !important;
    top: 0 !important;
    left: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(24px, 4vw, 50px) !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 360px !important;
    max-height: 480px !important;
    overflow: hidden !important;
    padding: clamp(22px, 3vw, 36px) !important;
    border-radius: 24px !important;
    background: #FAF8F5 !important;
    border: 1px solid rgba(200, 180, 138, 0.28) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    transform: none !important;
    opacity: 1 !important;
}


.package-inclusive-card .card-image-wrapper {
    position: relative !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    height: clamp(240px, 30vw, 360px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

.package-inclusive-card:nth-child(even) .card-image-wrapper {
    order: 2 !important;
}

.package-inclusive-card:nth-child(even) .card-content {
    order: 1 !important;
}

.package-inclusive-card .card-image-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.45s ease !important;
}

.package-inclusive-card .card-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 20px !important;
    padding: 10px 0 !important;
}

.package-inclusive-card .card-content h3 {
    margin: 0 0 10px 0 !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(26px, 3.2vw, 36px) !important;
    font-weight: 600 !important;
    color: #146052 !important;
    line-height: 1.15 !important;
}

.package-inclusive-card .card-content p {
    margin: 0 0 16px 0 !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 15.5px !important;
    line-height: 1.7 !important;
    color: #555555 !important;
}

.package-inclusive-card .card-content ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.package-inclusive-card .card-content li {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    line-height: 1.35 !important;
    border-bottom: 1px solid rgba(20, 96, 82, 0.1) !important;
    padding-bottom: 8px !important;
}

.package-inclusive-card .card-content i {
    color: #146052 !important;
    font-size: 12px !important;
}

.package-inclusive-card:hover .card-image-wrapper img {
    transform: scale(1.04) !important;
}


/* Responsive Overrides */
@media (max-width: 980px) {
    .package-inclusive-stack {
        height: auto;
        overflow: visible;
        display: grid;
        gap: 26px;
    }

    .package-inclusive-card {
        position: relative;
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .package-inclusive-card:nth-child(even) .card-image-wrapper,
    .package-inclusive-card:nth-child(even) .card-content {
        order: initial;
    }

    .package-inclusive-card .card-image-wrapper {
        aspect-ratio: 16 / 11;
    }
}

@media (max-width: 768px) {
    .package-inclusive-section {
        padding: 0;
    }

    .package-inclusive-card {
        padding: 18px;
        border-radius: 24px;
    }

    .package-inclusive-card .card-image-wrapper {
        border-radius: 18px;
    }

    .package-inclusive-card .card-content h3 {
        font-size: clamp(36px, 11vw, 54px);
    }

    .package-inclusive-card .card-content ul {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 480px) {}

.packages-page {
    position: relative;
    z-index: 1;
    background: #ffffff;
    padding: clamp(84px, 10vw, 138px) clamp(20px, 5vw, 72px);
}

.package-collection-heading {
    max-width: 1180px;
    margin: 0 auto clamp(44px, 6vw, 74px);
    text-align: center;
}

.package-collection-heading .accommodation-label {
    margin-bottom: 16px;
}

.package-collection-heading h2 {
    margin: 0;
    color: var(--green);
    font-family: var(--font-heading);
    font-size: clamp(48px, 7vw, 86px);
    font-weight: 400;
    line-height: 0.98;
}

.package-offer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(46px, 6vw, 82px) clamp(28px, 5vw, 58px);
    max-width: 1440px;
    margin: 0 auto;
}

.package-offer-card figure {
    aspect-ratio: 16 / 10;
    margin: 0 0 28px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(255, 252, 244, 0.5);
    box-shadow: 0 22px 52px rgba(43, 35, 21, 0.1);
}

.package-offer-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease, filter 0.35s ease;
}

.package-offer-card:hover img {
    transform: scale(1.02);
    filter: brightness(1.03);
}

.package-offer-body {
    display: grid;
    gap: 16px;
}

.package-offer-body>span {
    color: var(--gold);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.package-offer-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.package-offer-title h2 {
    margin: 0;
    color: var(--green);
    font-family: var(--font-heading);
    font-size: clamp(34px, 4vw, 50px);
    font-weight: 400;
    line-height: 1.02;
}

.package-offer-title strong {
    color: var(--gold);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.package-offer-card ul {
    display: grid;
    gap: 8px;
    color: var(--green);
    font-size: 16px;
    line-height: 1.55;
}

.package-offer-card li::marker {
    color: var(--gold);
}

.package-reservations-note {
    max-width: 980px;
    margin: clamp(64px, 8vw, 104px) auto 0;
    padding: clamp(24px, 3vw, 34px);
    border-top: 1px solid rgba(11, 58, 38, 0.18);
    border-bottom: 1px solid rgba(11, 58, 38, 0.18);
    text-align: center;
}

.package-reservations-note p {
    margin: 0;
    color: rgba(37, 37, 31, 0.78);
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.55;
}

.package-reservations-note a {
    color: var(--green);
    font-weight: 900;
    border-bottom: 1px solid var(--gold);
}

.package-faq {
    max-width: 1080px;
    margin: clamp(72px, 9vw, 118px) auto 0;
}

ul {
    padding-left: 20px;
    margin: 0;
    color: var(--gray);
}

.package-card {
    display: flex;
    flex-direction: column;
}

.package-card span {
    color: var(--gold);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 13px;
}

.masonry-gallery {
    columns: 3 260px;
    column-gap: 18px;
}

.gallery-item {
    width: 100%;
    display: block;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: zoom-in;
    background: transparent;
}

.gallery-item img {
    width: 100%;
    transition: transform .4s ease;
}

.gallery-item:hover img {
    transform: scale(1.04);
}

.gallery-page-master-container,
.gallery-page-master-container>section,
.gallery-page-hero,
.gallery-journal-section {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Gallery Video Hero */
.gallery-page-hero {
    position: relative !important;
    min-height: 75vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    overflow: hidden !important;
}

.gallery-hero-video-wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
}

.gallery-hero-video-wrap video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.gallery-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(11, 13, 11, 0.65) 0%, rgba(11, 58, 38, 0.45) 100%) !important;
    z-index: 1 !important;
}

.gallery-hero-content {
    position: relative !important;
    z-index: 2 !important;
    text-align: center !important;
    max-width: 860px !important;
    padding: 0 20px !important;
}

.gallery-hero-content p.eyebrow {
    color: #D1B274 !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
}

.gallery-hero-content h1 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(40px, 5.5vw, 68px) !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
    line-height: 1.1 !important;
    margin: 0 0 16px 0 !important;
}

.gallery-hero-content p.hero-subtitle {
    font-family: 'Manrope', sans-serif !important;
    font-size: clamp(15px, 1.35vw, 19px) !important;
    line-height: 1.7 !important;
    color: rgba(255, 250, 240, 0.9) !important;
    max-width: 720px !important;
    margin: 0 auto !important;
}

.gallery-journal-section {
    background: #FAF8F5 !important;
    padding: clamp(70px, 8vw, 120px) clamp(20px, 5vw, 72px) !important;
    overflow: hidden !important;
}

.gallery-journal-header {
    max-width: 920px !important;
    margin: 0 auto clamp(36px, 5vw, 56px) auto !important;
    text-align: center !important;
}

.gallery-filter-bar {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
    margin-bottom: clamp(36px, 5vw, 56px) !important;
}

.gallery-filter-btn {
    font-family: 'Manrope', sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #146052 !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(20, 96, 82, 0.2) !important;
    padding: 10px 24px !important;
    border-radius: 30px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.gallery-filter-btn:hover,
.gallery-filter-btn.active {
    background: #146052 !important;
    color: #FFFFFF !important;
    border-color: #146052 !important;
    box-shadow: 0 8px 24px rgba(20, 96, 82, 0.25) !important;
}

.gallery-card-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(22px, 3vw, 36px) !important;
    max-width: 1540px !important;
    margin: 0 auto !important;
}

.gallery-draw-card {
    position: relative !important;
    min-height: clamp(280px, 28vw, 430px) !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: #FAF8F5 !important;
    box-shadow: 0 20px 54px rgba(11, 58, 38, 0.08) !important;
    cursor: zoom-in !important;
    will-change: transform, opacity !important;
    text-align: left !important;
}

.gallery-draw-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transition: transform 0.65s ease, filter 0.65s ease !important;
}

.gallery-draw-card:hover img {
    transform: scale(1.04) !important;
    filter: brightness(1.05) !important;
}


.gallery-card-info {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    padding: 24px 20px 18px 20px !important;
    background: linear-gradient(180deg, transparent 0%, rgba(8, 35, 27, 0.88) 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    z-index: 2 !important;
}

.gallery-card-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(20px, 1.8vw, 25px) !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    line-height: 1.2 !important;
}

.gallery-card-sub {
    font-family: 'Manrope', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #D1B274 !important;
}

/* Pagination Bar */
.gallery-pagination-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: clamp(40px, 5vw, 60px) !important;
}

.gallery-page-btn {
    min-width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(20, 96, 82, 0.2) !important;
    color: #146052 !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.gallery-page-btn:hover,
.gallery-page-btn.active {
    background: #146052 !important;
    color: #FFFFFF !important;
    border-color: #146052 !important;
    box-shadow: 0 6px 20px rgba(20, 96, 82, 0.25) !important;
}

.gallery-page-btn:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
}

/* Fullscreen Lightbox Viewer */
.fullscreen-lightbox {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    background: rgba(8, 20, 16, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 20px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.35s ease, visibility 0.35s ease !important;
}

.fullscreen-lightbox.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.lightbox-dialog {
    position: relative !important;
    max-width: 90vw !important;
    max-height: 82vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.lightbox-main-img {
    max-width: 100% !important;
    max-height: 75vh !important;
    object-fit: contain !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5) !important;
}

.lightbox-caption-bar {
    margin-top: 16px !important;
    text-align: center !important;
    color: #FFFFFF !important;
}

.lightbox-caption-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 26px !important;
    font-weight: 600 !important;
}

.lightbox-caption-sub {
    font-family: 'Manrope', sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #D1B274 !important;
    margin-top: 4px !important;
}

.lightbox-close-btn {
    position: absolute !important;
    top: 24px !important;
    right: 28px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    font-size: 20px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.lightbox-close-btn:hover {
    background: #C45B34 !important;
    border-color: #C45B34 !important;
}

.lightbox-nav-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    font-size: 22px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.lightbox-nav-btn:hover {
    background: #146052 !important;
    border-color: #146052 !important;
}

.lightbox-nav-prev {
    left: 30px !important;
}

.lightbox-nav-next {
    right: 30px !important;
}

.lightbox-counter-badge {
    position: absolute !important;
    top: 30px !important;
    left: 34px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    color: #D1B274 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    padding: 8px 18px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Ayana Journal End Banner */
.ayana-journal-end-banner {
    position: relative !important;
    min-height: clamp(420px, 55vh, 600px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, rgba(8, 32, 25, 0.68) 0%, rgba(8, 32, 25, 0.85) 100%), url('../images/Chittar Backwaters.webp') center/cover !important;
    padding: clamp(60px, 8vw, 100px) clamp(20px, 5vw, 60px) !important;
    text-align: center !important;
}

.journal-end-content {
    max-width: 780px !important;
}

.journal-end-heading {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(34px, 4.5vw, 56px) !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
    line-height: 1.25 !important;
    margin: 14px 0 28px 0 !important;
}

.journal-end-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #C45B34 !important;
    color: #FFFFFF !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 16px 36px !important;
    border-radius: 35px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 10px 30px rgba(196, 91, 52, 0.35) !important;
}

.journal-end-btn:hover {
    background: #146052 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 35px rgba(20, 96, 82, 0.4) !important;
    color: #FFFFFF !important;
}

@media (max-width: 900px) {
    .lightbox-nav-prev {
        left: 10px !important;
    }

    .lightbox-nav-next {
        right: 10px !important;
    }

    .lightbox-close-btn {
        top: 15px !important;
        right: 15px !important;
    }

    .lightbox-counter-badge {
        top: 15px !important;
        left: 15px !important;
    }
}


.lightbox[hidden] {
    display: none;
}

.lightbox img {
    max-height: 86vh;
    border-radius: var(--radius);
}

.lightbox button {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: var(--radius);
    background: var(--white);
}

.contact-panel,
.lux-form,
.summary-card {
    padding: clamp(24px, 4vw, 42px);
}

.contact-panel a {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    color: var(--green);
    font-weight: 800;
}

.contact-panel iframe {
    width: 100%;
    height: 280px;
    margin-top: 22px;
    border: 0;
    border-radius: var(--radius);
}

.lux-form {
    display: grid;
    gap: 16px;
}

.contact-page-master-container,
.contact-page-master-container>section,
.contact-page-hero,
.booking-page-hero,
.booking-page-shell {
    opacity: 1 !important;
    visibility: visible !important;
}

.booking-page-hero {
    min-height: 52vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: linear-gradient(180deg, rgba(11, 13, 11, 0.55), rgba(11, 58, 38, 0.72)), var(--hero-image) center/cover !important;
    padding: clamp(100px, 11vw, 150px) clamp(20px, 5vw, 72px) clamp(60px, 7vw, 90px) !important;
}


/* Contact Hero */
.contact-page-hero {
    min-height: 72vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(180deg, rgba(11, 13, 11, 0.55), rgba(11, 58, 38, 0.72)), var(--hero-image) center/cover !important;
    padding: clamp(110px, 13vw, 170px) clamp(20px, 5vw, 72px) clamp(75px, 9vw, 110px);
}

.contact-hero-content {
    max-width: 880px;
    margin: 0 auto;
}

.contact-hero-content p.eyebrow {
    color: var(--antique-gold, #D1B274) !important;
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    margin-bottom: 14px !important;
}

.contact-hero-content h1 {
    font-family: var(--font-heading, 'Cormorant Garamond', serif) !important;
    font-size: clamp(42px, 5.5vw, 68px) !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
    line-height: 1.08 !important;
    margin: 0 0 18px 0 !important;
}

.contact-hero-content p.hero-subtitle {
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-size: clamp(15px, 1.4vw, 19px) !important;
    line-height: 1.75 !important;
    color: rgba(255, 250, 240, 0.9) !important;
    max-width: 760px !important;
    margin: 0 auto 34px auto !important;
}

.contact-hero-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.contact-hero-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 32px !important;
    border-radius: 999px !important;
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.contact-hero-btn.primary {
    background: var(--antique-gold, #D1B274) !important;
    color: var(--forest-green, #146052) !important;
    box-shadow: 0 10px 30px rgba(209, 178, 116, 0.3) !important;
}

.contact-hero-btn.primary:hover {
    background: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

.contact-hero-btn.secondary {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(8px) !important;
}

.contact-hero-btn.secondary:hover {
    background: #FFFFFF !important;
    color: var(--forest-green, #146052) !important;
    transform: translateY(-2px) !important;
}

/* Contact Info Strip (3 columns) */
.contact-info-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    background: #FAF7F2 !important;
    border-top: 1px solid rgba(20, 96, 82, 0.14) !important;
    border-bottom: 1px solid rgba(20, 96, 82, 0.14) !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
}

.contact-info-strip article {
    min-height: 260px !important;
    padding: clamp(36px, 4vw, 56px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    border-right: 1px solid rgba(20, 96, 82, 0.14) !important;
}

.contact-info-strip article:last-child {
    border-right: 0 !important;
}

.strip-label {
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 2.5px !important;
    color: var(--antique-gold, #D1B274) !important;
    text-transform: uppercase !important;
}

.contact-info-strip h2 {
    margin: 8px 0 12px 0 !important;
    color: var(--forest-green, #146052) !important;
    font-family: var(--font-heading, 'Cormorant Garamond', serif) !important;
    font-size: clamp(28px, 2.4vw, 38px) !important;
    font-weight: 500 !important;
}

.contact-info-strip p {
    margin: 0 0 14px 0 !important;
    color: rgba(43, 43, 43, 0.76) !important;
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}

.contact-strip-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 22px !important;
    border-radius: 30px !important;
    background: var(--forest-green, #146052) !important;
    color: #FFFFFF !important;
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    width: max-content !important;
    transition: all 0.25s ease !important;
}

.contact-strip-link:hover {
    background: var(--antique-gold, #D1B274) !important;
    color: var(--forest-green, #146052) !important;
    transform: translateY(-2px) !important;
}

/* How Can We Help Section */
.how-can-we-help-section {
    background: #FAF8F5 !important;
    padding: clamp(70px, 8vw, 110px) clamp(20px, 5vw, 72px) !important;
    text-align: center !important;
}

.how-can-we-help-heading {
    max-width: 800px !important;
    margin: 0 auto clamp(36px, 5vw, 56px) auto !important;
}

.how-can-we-help-heading p.eyebrow {
    color: var(--antique-gold, #D1B274) !important;
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
}

.how-can-we-help-heading h2 {
    font-family: var(--font-heading, 'Cormorant Garamond', serif) !important;
    font-size: clamp(38px, 4.8vw, 60px) !important;
    color: var(--forest-green, #146052) !important;
    font-weight: 400 !important;
    margin: 0 0 14px 0 !important;
}

.how-can-we-help-heading p.sub {
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-size: 16px !important;
    color: rgba(43, 43, 43, 0.74) !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

.how-can-we-help-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    max-width: 1080px !important;
    margin: 0 auto !important;
}

.help-shortcut-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 22px 28px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(20, 96, 82, 0.12) !important;
    border-radius: 16px !important;
    text-decoration: none !important;
    color: var(--forest-green, #146052) !important;
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 6px 20px rgba(20, 96, 82, 0.04) !important;
}

.help-shortcut-card i {
    color: var(--antique-gold, #D1B274) !important;
    transition: transform 0.25s ease !important;
}

.help-shortcut-card:hover {
    background: var(--forest-green, #146052) !important;
    color: #FFFFFF !important;
    border-color: var(--forest-green, #146052) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 32px rgba(20, 96, 82, 0.18) !important;
}

.help-shortcut-card:hover i {
    color: #FFFFFF !important;
    transform: translateX(4px) !important;
}

/* Dedicated Reservation Banner */
.contact-reservation-cta-banner {
    background: linear-gradient(135deg, #146052 0%, #0B3A26 100%) !important;
    padding: clamp(65px, 7.5vw, 95px) clamp(20px, 5vw, 72px) !important;
    color: #FFFFFF !important;
    text-align: center !important;
}

.reservation-cta-content {
    max-width: 840px !important;
    margin: 0 auto !important;
}

.reservation-cta-content p.eyebrow {
    color: var(--antique-gold, #D1B274) !important;
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
}

.reservation-cta-content h2 {
    font-family: var(--font-heading, 'Cormorant Garamond', serif) !important;
    font-size: clamp(38px, 4.8vw, 60px) !important;
    color: #FFFFFF !important;
    font-weight: 400 !important;
    margin: 0 0 16px 0 !important;
}

.reservation-cta-content p.desc {
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-size: 16px !important;
    color: rgba(255, 250, 240, 0.88) !important;
    margin: 0 0 32px 0 !important;
    line-height: 1.75 !important;
}

.reservation-cta-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.reservation-cta-actions .button.primary {
    background: var(--antique-gold, #D1B274) !important;
    color: var(--forest-green, #146052) !important;
    padding: 14px 34px !important;
    border-radius: 999px !important;
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.reservation-cta-actions .button.primary:hover {
    background: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

.reservation-cta-actions .button.secondary {
    background: transparent !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    padding: 14px 32px !important;
    border-radius: 999px !important;
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.reservation-cta-actions .button.secondary:hover {
    background: #FFFFFF !important;
    color: var(--forest-green, #146052) !important;
    transform: translateY(-2px) !important;
}

/* 3 Primary Action Cards Section (Warm Editorial Beige #E9DFC8) */
.contact-primary-actions-section {
    background: #E9DFC8 !important;
    padding: clamp(75px, 8.5vw, 115px) clamp(20px, 5vw, 72px) !important;
}

.primary-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    max-width: 1240px !important;
    margin: 0 auto 42px auto !important;
}

.primary-action-card {
    background: #FAF7F2 !important;
    border: 1px solid rgba(20, 96, 82, 0.12) !important;
    border-radius: 24px !important;
    padding: clamp(32px, 4vw, 48px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 260px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 10px 30px rgba(11, 58, 38, 0.04) !important;
}

.primary-action-card h3 {
    font-family: var(--font-heading, 'Cormorant Garamond', serif) !important;
    font-size: clamp(28px, 2.5vw, 38px) !important;
    color: var(--forest-green, #146052) !important;
    font-weight: 500 !important;
    margin: 0 0 12px 0 !important;
}

.primary-action-card p {
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-size: 15px !important;
    color: rgba(43, 43, 43, 0.76) !important;
    line-height: 1.65 !important;
    margin: 0 0 24px 0 !important;
}

.primary-card-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--forest-green, #146052) !important;
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: transform 0.25s ease !important;
}

.primary-card-btn:hover {
    transform: translateX(4px) !important;
    color: var(--antique-gold, #D1B274) !important;
}

.primary-action-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 50px rgba(20, 96, 82, 0.1) !important;
}

.contact-sub-links-strip {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 28px !important;
    flex-wrap: wrap !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding-top: 10px !important;
}

.contact-sub-link {
    color: var(--forest-green, #146052) !important;
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: color 0.2s ease !important;
}

.contact-sub-link:hover {
    color: var(--antique-gold, #D1B274) !important;
}

/* Map + Enquiry Form (55% / 45%) */
.contact-map-form-section {
    display: grid !important;
    grid-template-columns: 55% 45% !important;
    gap: clamp(24px, 4vw, 46px) !important;
    background: #FFFFFF !important;
    padding: clamp(75px, 8.5vw, 125px) clamp(20px, 5vw, 72px) !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
}

.contact-map-card {
    overflow: hidden !important;
    min-height: 540px !important;
    border-radius: 24px !important;
    background: #FAF7F2 !important;
    box-shadow: 0 20px 60px rgba(11, 58, 38, 0.08) !important;
}

.contact-map-card iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 540px !important;
    border: 0 !important;
}

.contact-lux-form {
    padding: clamp(28px, 3.5vw, 48px) !important;
    border-radius: 24px !important;
    background: #FAF8F5 !important;
    border: 1px solid rgba(20, 96, 82, 0.12) !important;
    box-shadow: 0 20px 60px rgba(11, 58, 38, 0.06) !important;
}

.contact-lux-form h2 {
    margin: 0 0 8px 0 !important;
    color: var(--forest-green, #146052) !important;
    font-family: var(--font-heading, 'Cormorant Garamond', serif) !important;
    font-size: clamp(34px, 3.8vw, 50px) !important;
    font-weight: 500 !important;
}

.contact-lux-form p.form-sub {
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-size: 14px !important;
    color: rgba(43, 43, 43, 0.72) !important;
    margin: 0 0 24px 0 !important;
}

.form-grid-2col {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.contact-lux-form label {
    display: grid !important;
    gap: 6px !important;
    color: var(--forest-green, #146052) !important;
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
}

.contact-lux-form input,
.contact-lux-form select,
.contact-lux-form textarea {
    width: 100% !important;
    border: 1px solid rgba(20, 96, 82, 0.18) !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    color: #25251F !important;
    padding: 12px 14px !important;
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-size: 14px !important;
    outline: 0 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.contact-lux-form input:focus,
.contact-lux-form select:focus,
.contact-lux-form textarea:focus {
    border-color: var(--forest-green, #146052) !important;
    box-shadow: 0 0 0 3px rgba(20, 96, 82, 0.1) !important;
}

.contact-lux-form button[type="submit"] {
    width: 100% !important;
    padding: 14px !important;
    margin-top: 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--forest-green, #146052) !important;
    color: #FFFFFF !important;
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.contact-lux-form button[type="submit"]:hover {
    background: var(--antique-gold, #D1B274) !important;
    color: var(--forest-green, #146052) !important;
    transform: translateY(-2px) !important;
}

/* FAQ Accordion Section */
.contact-faq-section {
    background: #FAF8F5 !important;
    padding: clamp(75px, 8.5vw, 115px) clamp(20px, 5vw, 72px) !important;
}

.contact-faq-heading {
    max-width: 800px !important;
    margin: 0 auto clamp(36px, 5vw, 56px) auto !important;
    text-align: center !important;
}

.contact-faq-heading p.eyebrow {
    color: var(--antique-gold, #D1B274) !important;
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
}

.contact-faq-heading h2 {
    font-family: var(--font-heading, 'Cormorant Garamond', serif) !important;
    font-size: clamp(38px, 4.8vw, 60px) !important;
    color: var(--forest-green, #146052) !important;
    font-weight: 400 !important;
    margin: 0 !important;
}

.contact-faq-container {
    max-width: 920px !important;
    margin: 0 auto !important;
    display: grid !important;
    gap: 16px !important;
}

.contact-faq-item {
    background: #FFFFFF !important;
    border: 1px solid rgba(20, 96, 82, 0.12) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: border-color 0.25s ease !important;
}

.contact-faq-item.active {
    border-color: var(--forest-green, #146052) !important;
}

.contact-faq-question {
    width: 100% !important;
    padding: 20px 24px !important;
    background: transparent !important;
    border: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--forest-green, #146052) !important;
    cursor: pointer !important;
}

.contact-faq-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: rgba(20, 96, 82, 0.08) !important;
    color: var(--forest-green, #146052) !important;
    display: inline-grid !important;
    place-items: center !important;
    font-size: 12px !important;
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease !important;
}

.contact-faq-item.active .contact-faq-icon {
    transform: rotate(180deg) !important;
    background: var(--forest-green, #146052) !important;
    color: #FFFFFF !important;
}

.contact-faq-answer {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.35s ease, padding 0.35s ease !important;
    padding: 0 24px !important;
}

.contact-faq-item.active .contact-faq-answer {
    max-height: 300px !important;
    padding: 0 24px 20px 24px !important;
}

.contact-faq-answer p {
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: rgba(43, 43, 43, 0.78) !important;
    margin: 0 !important;
}

/* Directions CTA Banner */
.contact-directions-cta-banner {
    background: var(--forest-green, #146052) !important;
    padding: clamp(65px, 7.5vw, 95px) clamp(20px, 5vw, 72px) !important;
    color: #FFFFFF !important;
    text-align: center !important;
}

/* Social Section */
.contact-social-section {
    background: #FAF7F2 !important;
    padding: clamp(70px, 8vw, 110px) clamp(20px, 5vw, 72px) !important;
    text-align: center !important;
}

.contact-social-section p.eyebrow {
    color: var(--antique-gold, #D1B274) !important;
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
}

.contact-social-section h2 {
    font-family: var(--font-heading, 'Cormorant Garamond', serif) !important;
    font-size: clamp(38px, 4.8vw, 60px) !important;
    color: var(--forest-green, #146052) !important;
    font-weight: 400 !important;
    margin: 0 0 14px 0 !important;
}

.contact-social-section p.social-sub {
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
    font-size: 16px !important;
    color: rgba(43, 43, 43, 0.74) !important;
    max-width: 640px !important;
    margin: 0 auto 32px auto !important;
    line-height: 1.7 !important;
}

.contact-social-links {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
}

.contact-social-links a {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: var(--forest-green, #146052) !important;
    color: #FFFFFF !important;
    display: inline-grid !important;
    place-items: center !important;
    font-size: 18px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 18px rgba(20, 96, 82, 0.15) !important;
}

.contact-social-links a:hover {
    background: var(--antique-gold, #D1B274) !important;
    color: var(--forest-green, #146052) !important;
    transform: translateY(-3px) !important;
}

/* Responsive Overrides */
@media (max-width: 980px) {

    .contact-info-strip,
    .how-can-we-help-grid,
    .primary-cards-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    .contact-info-strip article {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(20, 96, 82, 0.14) !important;
        min-height: auto !important;
    }

    .contact-map-form-section {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}



.contact-address-feature {
    display: grid;
    justify-items: center;
    gap: 22px;
    padding: clamp(86px, 11vw, 132px) clamp(20px, 5vw, 72px);
    background: var(--forest-green);
    color: #fffaf0;
    text-align: center;
}

.contact-address-feature>p:first-child {
    margin: 0;
    color: var(--antique-gold);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

.contact-address-feature h2 {
    max-width: 960px;
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(44px, 6.5vw, 88px);
    font-weight: 400;
    line-height: 1.06;
}

.contact-address-feature>p:not(:first-child) {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 250, 240, 0.76);
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.8;
}

.contact-address-feature a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    margin-top: 8px;
    padding: 14px 28px;
    border-radius: 999px;
    background: var(--antique-gold);
    color: var(--forest-green);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.contact-address-feature a:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 18px 44px rgba(209, 178, 116, 0.25);
}

.contact-reservations-section {
    background: #E9DFC8;
    padding: clamp(82px, 10vw, 140px) clamp(20px, 5vw, 72px);
}

.contact-reservations-heading {
    max-width: 900px;
    margin: 0 auto clamp(46px, 6vw, 76px);
    text-align: center;
}

.contact-reservations-heading h2 {
    margin: 0;
    color: var(--green);
    font-family: var(--font-heading);
    font-size: clamp(44px, 6vw, 78px);
    font-weight: 400;
    line-height: 1.02;
}

.contact-reservations-heading p {
    margin: 22px 0 0;
    color: rgba(37, 37, 31, 0.76);
    font-size: clamp(17px, 1.5vw, 21px);
}

.contact-reservations-heading a {
    color: var(--green);
    font-weight: 800;
}

.contact-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 34px);
    max-width: 1260px;
    margin: 0 auto;
}

.contact-service-card {
    min-height: 280px;
    padding: clamp(30px, 4vw, 54px);
    border: 1px solid rgba(11, 58, 38, 0.1);
    border-radius: 30px;
    background: rgba(247, 244, 239, 0.88);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.contact-service-card h3 {
    margin: 0;
    color: var(--green);
    font-family: var(--font-heading);
    font-size: clamp(30px, 3vw, 44px);
    font-weight: 400;
    line-height: 1.04;
}

.contact-service-card p {
    margin: 18px 0 0;
    color: rgba(37, 37, 31, 0.76);
    line-height: 1.75;
}

.contact-service-card a {
    display: inline-flex;
    margin-top: 28px;
    color: var(--green);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 1px solid currentColor;
}

.contact-service-card:hover {
    transform: translateY(-7px);
    border-color: rgba(11, 58, 38, 0.22);
    box-shadow: 0 28px 70px rgba(11, 58, 38, 0.11);
}

.contact-map-form-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 46px);
    background: #ffffff;
    padding: clamp(82px, 10vw, 140px) clamp(20px, 5vw, 72px);
}

.contact-map-card,
.contact-lux-form {
    overflow: hidden;
    min-height: 680px;
    border-radius: 30px;
    background: #F7F4EF;
    box-shadow: 0 28px 80px rgba(11, 58, 38, 0.08);
}

.contact-map-card iframe {
    width: 100%;
    height: 100%;
    min-height: 680px;
    border: 0;
}

.contact-lux-form {
    padding: clamp(30px, 4vw, 56px);
}

.contact-lux-form h2 {
    margin: 0 0 10px;
    color: var(--green);
    font-family: var(--font-heading);
    font-size: clamp(38px, 4vw, 58px);
    font-weight: 400;
}

.contact-lux-form label {
    display: grid;
    gap: 8px;
    color: var(--green);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.contact-lux-form input,
.contact-lux-form textarea {
    width: 100%;
    border: 1px solid rgba(11, 58, 38, 0.14);
    border-radius: 16px;
    background: #fff;
    color: var(--charcoal);
    padding: 15px 16px;
    outline: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-lux-form input:focus,
.contact-lux-form textarea:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(11, 58, 38, 0.08);
}

.contact-lux-form .button.primary {
    border: 0;
    border-radius: 999px;
    background: var(--green);
    color: #fffaf0;
    cursor: pointer;
}

.contact-journey-section {
    background: #ffffff;
    padding: clamp(82px, 10vw, 140px) clamp(20px, 5vw, 72px);
}

.contact-journey-heading {
    max-width: 900px;
    margin: 0 auto clamp(44px, 6vw, 72px);
    text-align: center;
}

.contact-journey-heading p {
    margin: 0 0 16px;
    color: var(--antique-gold);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

.contact-journey-heading h2 {
    margin: 0;
    color: var(--green);
    font-family: var(--font-heading);
    font-size: clamp(44px, 6vw, 78px);
    font-weight: 400;
    line-height: 1.02;
}

.contact-journey-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 34px);
    max-width: 1260px;
    margin: 0 auto;
}

.contact-journey-card {
    padding: clamp(28px, 4vw, 50px);
    border: 1px solid rgba(11, 58, 38, 0.1);
    border-radius: 30px;
    background: #F7F4EF;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.contact-journey-card:hover {
    transform: translateY(-6px);
    border-color: rgba(11, 58, 38, 0.2);
    box-shadow: 0 28px 70px rgba(11, 58, 38, 0.1);
}

.contact-journey-wide {
    grid-column: span 2;
}

.contact-journey-card span {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color: var(--green);
    font-family: var(--font-heading);
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 400;
    line-height: 1.04;
}

.contact-journey-card span i {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(11, 58, 38, 0.18);
    border-radius: 50%;
    color: var(--antique-gold);
    font-size: 17px;
    will-change: transform;
}

.journey-route-line {
    position: relative;
    display: block;
    width: min(180px, 46%);
    height: 1px;
    margin: -6px 0 24px 54px;
    overflow: hidden;
    background: rgba(11, 58, 38, 0.12);
    transform-origin: left center;
}

.journey-route-line span {
    position: absolute;
    inset: 0;
    display: block;
    background: linear-gradient(90deg, var(--antique-gold), rgba(11, 58, 38, 0.72));
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

.contact-journey-card:hover span i {
    color: var(--green);
    border-color: rgba(11, 58, 38, 0.32);
}

.contact-journey-card p,
.contact-journey-card li {
    color: rgba(37, 37, 31, 0.76);
    font-size: 16px;
    line-height: 1.78;
}

.contact-journey-card p {
    margin: 0 0 16px;
}

.contact-journey-card p:last-child {
    margin-bottom: 0;
}

.contact-journey-card strong {
    color: var(--green);
    font-weight: 800;
}

.contact-journey-card ul {
    display: grid;
    gap: 10px;
    margin: 18px 0;
    padding-left: 20px;
}

.contact-social-section {
    display: grid;
    justify-items: center;
    gap: 18px;
    background: #F7F4EF;
    padding: clamp(70px, 8vw, 110px) clamp(20px, 5vw, 72px);
    text-align: center;
}

.contact-social-section h2 {
    margin: 0;
    color: var(--green);
    font-family: var(--font-heading);
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 400;
}

.contact-social-section p {
    margin: 0;
    color: rgba(37, 37, 31, 0.72);
}

.contact-social-section div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 8px;
}

.contact-social-section a {
    width: 58px;
    height: 58px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(11, 58, 38, 0.22);
    border-radius: 50%;
    color: var(--green);
    font-size: 22px;
    transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

.contact-social-section a:hover {
    transform: translateY(-4px);
    background: var(--green);
    color: #fffaf0;
    box-shadow: 0 16px 36px rgba(11, 58, 38, 0.16);
}

.contact-support-note {
    background: #ffffff;
    padding: 28px 20px 46px;
    text-align: center;
}

.contact-support-note p {
    margin: 0;
    color: rgba(37, 37, 31, 0.58);
    font-size: 14px;
}

.contact-support-note a {
    color: var(--green);
    font-weight: 800;
}

@media (max-width: 1050px) {

    .contact-card-grid,
    .contact-journey-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-map-form-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .contact-info-strip {
        grid-template-columns: 1fr;
    }

    .contact-info-strip article {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid rgba(11, 58, 38, 0.14);
    }

    .contact-info-strip article:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 640px) {
    .contact-card-grid {
        grid-template-columns: 1fr;
    }

    .contact-journey-grid {
        grid-template-columns: 1fr;
    }

    .contact-journey-wide {
        grid-column: auto;
    }

    .contact-address-feature,
    .contact-reservations-section,
    .contact-map-form-section,
    .contact-journey-section,
    .contact-social-section {
        padding-left: 18px;
        padding-right: 18px;
    }

    .contact-map-card,
    .contact-map-card iframe,
    .contact-lux-form {
        min-height: auto;
    }

    .contact-map-card iframe {
        height: 420px;
    }
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.booking-layout {
    align-items: start;
}

.summary-card {
    position: sticky;
    top: 110px;
}

.summary-card ul {
    margin: 20px 0;
}

.notice {
    padding: 13px 15px;
    border-radius: var(--radius);
    font-weight: 800;
}

.notice.success {
    color: #12352a;
    background: #ddf4e8;
}

.notice.warning {
    color: #6b4a10;
    background: #fff0cb;
}

.site-footer {
    padding: 62px clamp(18px, 5vw, 72px) 24px;
    color: var(--white);
    background: var(--forest-green);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 34px;
}

.site-footer p,
.site-footer a {
    color: rgba(255, 255, 255);
}

.site-footer h3 {
    font-size: 25px;
    color: var(--gold-soft);
}

.site-footer a {
    display: block;
    margin: 8px 0;
}

.footer-brand {
    color: var(--white);
    margin-bottom: 16px;
}

.socials {
    display: flex;
    gap: 12px;
}

.socials a,
.floating-actions a,
.icon-button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    background: var(--gold);
    color: var(--black);
}

.newsletter {
    display: grid;
    grid-template-columns: 1fr 44px;
    gap: 8px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-top: 42px;
    padding-top: 22px;
    border-top: none !important;
    color: rgba(255, 255, 255, .62);
}


.floating-actions {
    position: fixed;
    z-index: 40;
    right: 18px;
    bottom: 18px;
    display: grid;
    gap: 10px;
}

.floating-actions a:first-child {
    background: #25d366;
    color: var(--white);
}

.floating-actions .floating-chat-now {
    position: relative;
    background: var(--green);
    color: var(--white);
    animation: chatFloatPulse 2.4s ease-in-out infinite;
    box-shadow: 0 10px 28px rgba(18, 53, 42, 0.24);
}

.floating-actions .floating-chat-now::after {
    content: "Chat now";
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    background: var(--green);
    color: var(--white);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

.floating-actions .floating-chat-now:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

@keyframes chatFloatPulse {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-4px) scale(1.04);
    }
}

.admin-body {
    background: #f6f4ed;
}

.admin-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 250px 1fr;
}

.admin-sidebar {
    padding: 28px;
    background: var(--black);
    color: var(--white);
}

.admin-sidebar nav {
    display: grid;
    gap: 12px;
    margin-top: 28px;
}

.admin-sidebar a {
    color: rgba(255, 255, 255, .78);
    font-weight: 800;
}

.admin-main {
    padding: 34px;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 24px 0;
}

.admin-card,
.admin-table {
    background: var(--white);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .08);
}

.admin-card strong {
    display: block;
    color: var(--green);
    font-size: 34px;
}

.admin-table table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 12px;
    border-bottom: 1px solid var(--stone);
    text-align: left;
}

@media (max-width: 980px) {
    .nav-toggle {
        display: grid;
        place-items: center;
    }

    .main-nav {
        position: fixed;
        inset: 74px 14px auto;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 18px;
        border-radius: var(--radius);
        background: rgba(11, 13, 11, .96);
    }

    .main-nav.open {
        display: flex;
    }

    .promo-strip,
    .story-grid,
    .contact-grid,
    .booking-layout,
    .feature-split,
    .dining-hero {
        grid-template-columns: 1fr;
    }

    .about-story-composition {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 42px 28px;
    }

    .about-story-center {
        grid-column: span 2;
        max-width: 620px;
        margin: 0 auto;
    }

    .about-story-left,
    .about-story-right {
        padding-top: 0;
    }

    .about-values-layout {
        grid-template-columns: 1fr;
        max-width: 680px;
        margin: 0 auto;
    }

    .about-values-image {
        order: -1;
        aspect-ratio: 4 / 4.6;
    }

    .about-know-layout {
        grid-template-columns: 1fr 1fr;
    }

    .about-know-image {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .about-know-inspiration {
        grid-column: 1 / -1;
        padding-top: 20px;
    }

    .destination-journal-section {
        min-height: auto;
    }

    .destination-journal-stage {
        position: relative;
        min-height: auto;
        grid-template-columns: 1fr;
        padding: 84px 24px;
    }

    .destination-center {
        order: 1;
    }

    .destination-column-left,
    .destination-column-right {
        order: 3;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0;
    }

    .destination-column {
        display: none;
        height: auto;
    }

    .destination-mobile-swiper {
        display: block;
        order: 2;
        width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .destination-mobile-swiper::-webkit-scrollbar {
        display: none;
    }

    .destination-mobile-swiper .swiper-wrapper {
        display: flex;
        gap: 18px;
        align-items: stretch;
    }

    .destination-mobile-swiper .destination-card {
        display: flex;
        flex-direction: column;
        flex: 0 0 86%;
        height: auto;
        aspect-ratio: auto;
        overflow: visible;
        background: transparent;
        box-shadow: none;
        scroll-snap-align: start;
    }

    .destination-mobile-swiper .destination-card::after {
        display: none;
    }

    .destination-mobile-swiper .destination-card figcaption {
        position: static;
        order: 1;
        margin: 0 0 14px;
        color: var(--green);
        font-size: clamp(28px, 7vw, 42px);
        line-height: 1;
        text-shadow: none;
    }

    .destination-mobile-swiper .destination-card img {
        order: 2;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 11;
        border-radius: 8px;
        object-fit: cover;
        box-shadow: 0 18px 46px rgba(43, 43, 43, 0.10);
    }

    .gsap-active .destination-label,
    .gsap-active .destination-center h2,
    .gsap-active .destination-center p:not(.destination-label),
    .gsap-active .destination-center a,
    .gsap-active .destination-mobile-swiper,
    .gsap-active .destination-mobile-swiper .destination-card {
        opacity: 1;
        transform: none;
    }

    .dining-hero figure {
        justify-self: stretch;
        max-width: none;
        aspect-ratio: 16 / 9;
    }

    .booking-strip {
        grid-template-columns: 1fr 1fr;
        left: 18px;
        right: 18px;
        bottom: 24px;
    }

    .booking-strip button {
        grid-column: 1 / -1;
    }

    .section-heading,
    .intro-band {
        align-items: start;
        flex-direction: column;
    }

    .facility-grid,
    .room-grid,
    .package-grid,
    .dining-grid,
    .values-grid,
    .timeline-list,
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .admin-shell {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 640px) {
    .site-header {
        padding-inline: 16px;
    }

    .brand img {
        width: 48px;
        height: 48px;
    }

    .brand strong {
        font-size: 28px;
    }

    .hero-slide {
        padding: 116px 18px 330px;
    }

    .booking-strip {
        grid-template-columns: 1fr;
        left: 14px;
        right: 14px;
        width: auto;
        bottom: 16px;
        padding: 12px;
    }

    .booking-strip button {
        grid-column: auto;
    }

    .stats,
    .facility-grid,
    .room-grid,
    .package-grid,
    .dining-grid,
    .values-grid,
    .timeline-list,
    .footer-grid,
    .form-row,
    .admin-grid {
        grid-template-columns: 1fr;
    }

    .about-page-hero {
        min-height: 56vh;
        padding-bottom: 42px;
    }

    .about-page-hero h1 {
        font-size: clamp(26px, 9vw, 44px);
        line-height: 1.2;
    }

    .about-story-editorial {
        padding: 72px 18px;
    }

    .about-story-intro {
        margin-bottom: 52px;
    }

    .about-story-intro h2 {
        font-size: clamp(36px, 11vw, 52px);
    }

    .about-story-composition {
        grid-template-columns: 1fr;
        gap: 46px;
    }

    .about-story-center {
        grid-column: auto;
        max-width: none;
    }

    .about-story-left,
    .about-story-right {
        padding-top: 0;
    }

    .about-story-left .about-story-image,
    .about-story-center .about-story-image,
    .about-story-right .about-story-image {
        aspect-ratio: 16 / 11;
    }

    .about-values-section,
    .about-know-section {
        padding: 68px 18px;
    }

    .about-values-section h2 {
        margin-bottom: 44px;
        font-size: clamp(38px, 11vw, 54px);
    }

    .about-value-item h3 {
        font-size: clamp(30px, 9vw, 42px);
    }

    .about-know-heading {
        margin-bottom: 28px;
    }

    .about-know-heading span {
        font-size: clamp(44px, 13vw, 64px);
    }

    .about-know-layout {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .about-know-image {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: 4 / 5;
    }

    .about-know-inspiration {
        grid-column: auto;
        padding-top: 0;
    }

    .about-know-layout h2 {
        font-size: clamp(30px, 9vw, 42px);
    }

    .about-know-history p,
    .about-know-copy h3,
    .about-know-copy p {
        font-size: 16px;
        line-height: 1.65;
    }

    .destination-journal-stage {
        padding: 72px 18px;
        gap: 34px;
    }

    .destination-center h2 {
        font-size: clamp(46px, 14vw, 68px);
    }

    .about-final-cta-section {
        min-height: auto;
        overflow: hidden;
    }

    .about-final-cta-stage {
        min-height: auto;
        padding: 76px 18px;
        gap: 42px;
        display: grid;
        place-items: stretch;
    }

    .about-final-collage {
        display: contents;
    }

    .about-final-image {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        aspect-ratio: 16 / 11;
        transform: none;
        border-radius: 8px;
    }

    .about-final-image-one {
        order: 1;
    }

    .about-final-image-two,
    .about-final-image-three {
        display: none;
    }

    .about-final-image-four {
        order: 3;
    }

    .about-final-content {
        order: 2;
        max-width: 100%;
        align-self: center;
        padding: 6px 0;
    }

    .about-final-content h2 {
        font-size: clamp(42px, 12vw, 64px);
    }

    .gsap-active .about-final-image,
    .gsap-active .about-final-content>* {
        opacity: 1;
        transform: none;
    }


    .promo-strip {
        text-align: left;
    }

    .countdown {
        flex-wrap: wrap;
    }

    .footer-bottom {
        flex-direction: column;
    }

    .room-title {
        display: grid;
    }
}

/* Custom Video Hero & Layout Styles */
.hero-video-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.hero-video-slides {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-video-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
    z-index: 0;
}

.hero-video-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.hero-video-container video,
.hero-video-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.soneva-video-overlay,
.hero-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 13, 11, 0.42) 0%, rgba(11, 13, 11, 0.2) 60%, rgba(11, 13, 11, 0.55) 100%);
    z-index: 2;
    pointer-events: none;
}

/* Video Slider Arrow Buttons (Desktop/PC) */
.hero-video-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.hero-video-arrow:hover {
    background: #146052;
    border-color: #146052;
    color: #ffffff;
    transform: translateY(-50%) scale(1.12);
}

.hero-video-prev {
    left: 32px;
}

.hero-video-next {
    right: 32px;
}

/* Video Slider Pagination Dots (Mobile & Desktop) */
.hero-video-dots {
    position: absolute;
    bottom: clamp(20px, 5vh, 40px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
}

.hero-video-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.3s ease;
}

.hero-video-dot.active {
    width: 32px;
    border-radius: 12px;
    background: var(--gold-color, #c5a059);
    border-color: var(--gold-color, #c5a059);
}

@media (max-width: 768px) {
    .hero-video-arrow {
        display: none;
    }
}

.hero-bottom-left {
    position: absolute;
    bottom: clamp(40px, 8vh, 80px);
    left: clamp(24px, 6vw, 100px);
    z-index: 2;
    max-width: 500px;
}

.hero-tagline {
    font-family: var(--font-heading);
    font-size: clamp(26px, 3.5vw, 44px);
    color: var(--ivory);
    font-weight: 500;
    letter-spacing: 1.5px;
    line-height: 1.2;
    margin: 0;
    opacity: 0;
    transform: translateY(20px);
}

.hero-bottom-right {
    position: absolute;
    bottom: clamp(40px, 8vh, 80px);
    right: clamp(24px, 6vw, 100px);
    z-index: 2;
}

.hero-book-btn-wrapper {
    opacity: 0;
    transform: translateY(20px);
    animation: subtleFloat 4s ease-in-out infinite alternate;
    animation-delay: 1.5s;
}

.hero-book-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gold);
    color: var(--white);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 14px 28px;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(200, 163, 95, 0.25);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    animation: gentlePulse 2.8s infinite;
}

.hero-book-btn:hover {
    transform: scale(1.06);
    background: var(--white);
    color: var(--black);
    box-shadow: 0 15px 40px rgba(200, 163, 95, 0.45);
}

.hero-scroll-down {
    position: absolute;
    bottom: clamp(20px, 3vh, 32px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: var(--white);
    font-size: 20px;
    opacity: 0;
    transition: opacity 0.3s ease, color 0.3s ease;
    animation: scrollDownFloat 2s infinite ease-in-out;
}

.hero-scroll-down:hover {
    color: var(--gold-soft);
}

@keyframes gentlePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(200, 163, 95, 0.45);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(200, 163, 95, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(200, 163, 95, 0);
    }
}

@keyframes subtleFloat {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-8px);
    }
}

@keyframes scrollDownFloat {

    0%,
    100% {
        transform: translate(-50%, 0);
        opacity: 0.5;
    }

    50% {
        transform: translate(-50%, 8px);
        opacity: 1;
    }
}

.booking-section {
    padding: clamp(10px, 8vw, 50px) clamp(18px, 5vw, 72px);
    background: var(--ivory);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 5;
}

.booking-tagline {
    max-width: 900px;
    margin-bottom: 48px;
    text-align: center;
}

.booking-tagline-text {
    font-size: clamp(22px, 3.5vw, 38px);
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.35;
    color: var(--charcoal);
    letter-spacing: 0.5px;
}

.booking-tagline-text .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(18px);
}

.booking-section .booking-strip {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0 auto;
    width: 100%;
    max-width: 1100px;
    background: var(--white);
    border: 1px solid rgba(200, 163, 95, 0.12);
    box-shadow: 0 30px 70px rgba(11, 13, 11, 0.07);
    padding: 24px 32px;
    border-radius: 12px;
    opacity: 0;
    transform: translateY(30px);
}

/* About Resort Premium Composition */
.about-resort-section {
    background: var(--warm-white);
    padding: clamp(80px, 10vw, 140px) clamp(18px, 5vw, 72px);
    border-top: 1px solid rgba(200, 180, 138, 0.2);
}

.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(48px, 8vw, 96px);
    align-items: center;
}

.about-left {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.about-label {
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--terracotta);
    font-weight: 700;
}

.about-heading {
    font-size: clamp(34px, 4.5vw, 56px);
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.15;
    color: var(--charcoal);
}

.about-text {
    font-size: 16px;
    line-height: 1.85;
    color: var(--gray);
    max-width: 540px;
    margin: 0 0 10px 0;
}

.about-cta-row {
    display: flex;
    align-items: center;
    gap: 36px;
}

.about-cta-row .button.dark-button {
    background: var(--forest-green);
    color: var(--warm-white);
    padding: 13px 26px;
    font-weight: 700;
    border-radius: var(--radius);
    transition: background 0.3s ease, transform 0.3s ease;
}

.about-cta-row .button.dark-button:hover {
    background: var(--sage-green);
    color: var(--warm-white);
    transform: translateY(-2px);
}

.about-contact {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 17px;
    font-weight: 700;
    color: var(--charcoal);
}

.about-contact i {
    color: var(--antique-gold);
    font-size: 18px;
}

.about-right {
    position: relative;
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.about-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 540px;
    height: 580px;
}

/* Layered images styling with clip-path reveal */
.about-image-top-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 62%;
    height: 90%;
    z-index: 2;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    will-change: transform, opacity, clip-path;
}

.about-image-top-container img {
    width: 100%;
    height: 112%;
    object-fit: cover;
    transform: translateY(-6%);
    will-change: transform;
}

.about-image-bottom-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 58%;
    height: 64%;
    z-index: 3;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
    will-change: transform, opacity, clip-path;
}

.about-image-bottom-container img {
    width: 100%;
    height: 112%;
    object-fit: cover;
    transform: translateY(-6%);
    will-change: transform;
}

.started-in-badge {
    position: absolute;
    top: 10%;
    left: 4%;
    z-index: 4;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

.started-label {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gray);
    font-weight: 700;
    margin-bottom: 2px;
}

.started-year {
    font-size: clamp(56px, 5.5vw, 84px);
    font-family: var(--font-body);
    font-weight: 800;
    line-height: 0.95;
    color: var(--charcoal);
}

/* Alternating Section Background Utilities */
.bg-warm-white {
    background-color: var(--warm-white) !important;
}

.bg-warm-sand {
    background-color: var(--warm-sand) !important;
}

.bg-clay-beige {
    background-color: var(--clay-beige) !important;
}

/* Redesigned Accommodation Showcase Section */
.accommodations-redesign-section {
    background-color: var(--warm-white);
    padding: clamp(80px, 9vw, 130px) clamp(18px, 5vw, 72px);
    border-top: 1px solid rgba(200, 180, 138, 0.2);
    position: relative;
    z-index: 3;
}

.accommodations-redesign-section .section-heading {
    margin-bottom: 54px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.accommodations-redesign-section .section-heading a {
    color: var(--forest-green);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--antique-gold);
    transition: all 0.3s ease;
    padding-bottom: 4px;
}

.accommodations-redesign-section .section-heading a:hover {
    color: var(--terracotta);
    border-color: var(--terracotta);
}

.acc-showcase-grid {
    display: grid;
    grid-template-columns: 1fr 1.65fr 1.05fr;
    gap: clamp(32px, 4.5vw, 72px);
    align-items: stretch;
}

/* Left - Room Category List Navigation */
.acc-nav-wrapper {
    display: flex;
    flex-direction: column;
}

.acc-nav {
    position: relative;
    display: flex;
    flex-direction: column;
    border-top: none;
    background: transparent;
}

.acc-nav-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    background: var(--bamboo-gold);
    border-right: none;
    border-radius: 8px;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
}

.acc-nav-item {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border: none;
    border-bottom: none;
    border-radius: var(--radius-sm, 10px);
    transition: all 0.3s ease;
    cursor: pointer;
    background: var(--off-white, #F8F6F1) !important;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.acc-nav-item.active {
    background: var(--sand, #e6cf87) !important;
}

.acc-nav-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.acc-nav-item-left {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.acc-nav-num {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color, #565656);
    font-family: var(--font-body);
    transition: color 0.3s ease;
}

.acc-nav-name {
    font-family: var(--font-heading);
    font-size: clamp(18px, 1.8vw, 21px);
    font-weight: 500;
    color: var(--text-color, #565656);
    transition: all 0.3s ease;
}

.acc-nav-arrow {
    font-size: 14px;
    color: var(--text-color, #565656);
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

/* Active Navigation State */
.acc-nav-item.active .acc-nav-num {
    color: var(--olive, #004b17) !important;
}

.acc-nav-item.active .acc-nav-name {
    color: var(--olive, #004b17) !important;
    font-weight: 600;
    transform: none;
}

.acc-nav-item.active .acc-nav-arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--olive, #004b17) !important;
}

/* Navigation Hover Effects */
.acc-nav-item:hover:not(.active) {
    background: var(--sand, #e6cf87) !important;
}

.acc-nav-item:hover:not(.active) .acc-nav-name,
.acc-nav-item:hover:not(.active) .acc-nav-num {
    transform: translateX(4px);
    color: var(--olive, #004b17) !important;
}

.acc-nav-item:hover:not(.active) .acc-nav-arrow {
    opacity: 0.7;
    transform: translateX(2px);
    color: var(--olive, #004b17) !important;
}

/* Center - Accommodation Image Slider */
.acc-slider-wrapper {
    position: relative;
}

.acc-slider-container {
    position: relative;
    width: 100%;
}

.acc-slides-track {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3.8;
    border-radius: var(--radius);
    overflow: hidden;
    background-color: var(--stone);
}

.acc-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
}

.acc-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.acc-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Slider Controls */
.acc-slider-controls {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 16px;
}

.acc-dots {
    display: flex;
    gap: 8px;
}

.acc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(247, 244, 239, 0.4);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.acc-dot.active {
    background-color: var(--warm-white);
    transform: scale(1.25);
}

/* Price & Booking Card Overlay - Flush Bottom, Two-Part Split */
.acc-price-card {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0 !important;

    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    min-width: 280px;
}

.acc-price-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
    padding: 14px 22px;
    flex: 1;
}

.acc-price-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gray);
    font-family: var(--font-body);
    margin-bottom: 3px;
    font-weight: 600;
}

.acc-price-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--charcoal);
    font-family: var(--font-body);
}

.acc-book-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--olive, #004b17) !important;
    color: var(--warm-white) !important;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    padding: 14px 22px;
    border-radius: 0 !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: none;
    white-space: nowrap;
}

.acc-book-btn:hover {
    background: var(--terracotta, #C45B34) !important;
    transform: none;
    box-shadow: none;
}

.acc-book-btn .acc-book-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .4);
    font-size: 11px;
    transition: all 0.3s ease;
    color: #ffffff;
}

.acc-book-btn:hover .acc-book-arrow {
    border-color: rgba(255, 255, 255, .8);
    transform: translateX(3px);
}

/* Right - Room Details Panel */
.acc-details-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    justify-content: center;
}

.acc-details-label {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--terracotta);
    font-weight: 700;
}

.acc-details-title {
    font-family: var(--font-heading);
    font-size: clamp(32px, 3vw, 44px);
    font-weight: 500;
    line-height: 1.15;
    color: var(--charcoal);
}

.acc-details-desc {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.85;
    color: var(--gray);
    margin: 0;
}

/* Amenities - Chip Grid Layout */
.acc-amenities-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    border-top: 1px solid rgba(20, 96, 82, 0.12);
    padding-top: 18px;
}

.acc-details-panel .acc-amenities-row {
    opacity: 1;
    transform: none;
}

.acc-amenity-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #F8F6F1;
    border: 1px solid rgba(20, 96, 82, 0.18);
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #146052;
    transition: all 0.3s ease;
}

.acc-amenity-chip i {
    font-size: 11px;
    color: #C45B34;
}

.acc-amenity-chip:hover {
    background: #146052;
    color: #FFFFFF;
    border-color: #146052;
}

.acc-amenity-chip:hover i {
    color: #E6CF87;
}

.acc-amenity-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--charcoal);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    flex: 1;
    text-align: center;
    padding: 0 12px;
}

.acc-amenity-item i {
    color: var(--antique-gold);
    font-size: 20px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--antique-gold);
    border-radius: 50%;
    flex-shrink: 0;
}

.acc-amenity-item span {
    line-height: 1.4;
}

.acc-amenity-divider {
    width: 1px;
    align-self: stretch;
    background-color: rgba(200, 180, 138, 0.35);
    flex-shrink: 0;
}


/* Responsive Showcase Styles */
@media (max-width: 1100px) {
    .acc-showcase-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .acc-nav-bg {
        border-right: none;
        border-radius: 8px;
    }

    .acc-nav-item.active .acc-nav-name {
        transform: none;
    }

    .acc-nav-item:hover:not(.active) .acc-nav-name {
        transform: translateX(8px);
    }

    .acc-slider-container {
        min-height: 400px;
    }

    .acc-price-card {
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .acc-amenities-row {
        flex-wrap: wrap;
        gap: 16px;
    }

    .acc-amenity-divider {
        display: none;
    }

    .acc-amenity-item {
        flex: 0 0 auto;
        padding: 0 8px;
    }
}

@media (max-width: 980px) {
    .booking-section {
        padding: 60px 24px;
    }

    .booking-section .booking-strip {
        left: auto;
        right: auto;
        bottom: auto;
        padding: 20px;
        margin-top: 0;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .about-left {
        max-width: 650px;
        margin: 0 auto;
        text-align: center;
        align-items: center;
    }

    .about-text {
        max-width: 100%;
    }

    .about-right {
        justify-content: center;
    }

    .about-image-wrapper {
        height: 480px;
        max-width: 440px;
    }

    .started-in-badge {
        left: 2%;
    }

    .hero-bottom-left {
        left: 30px;
        bottom: 50px;
        max-width: 320px;
    }

    .hero-bottom-right {
        right: 30px;
        bottom: 50px;
    }
}

@media (max-width: 640px) {
    .accommodations-redesign-section {
        padding: 60px 16px;
    }

    .accommodations-redesign-section .section-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .acc-nav-item {
        padding: 16px 14px;
    }

    .acc-slider-container {
        min-height: 300px;
    }

    .acc-price-card {
        position: relative;
        bottom: auto;
        right: auto;
        margin-top: 0;
        justify-content: stretch;
        max-width: 100%;
        box-shadow: 0 8px 30px rgba(43, 43, 43, 0.08);
        border-radius: 0 !important;

        min-width: auto;
    }

    .acc-price-area {
        padding: 12px 16px;
    }

    .acc-book-btn {
        padding: 12px 16px;
        font-size: 10px;
    }

    .acc-slider-controls {
        bottom: 16px;
        left: 16px;
    }

    .acc-amenity-item {
        padding: 0 6px;
    }

    .acc-amenity-item i {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .acc-amenity-item span {
        font-size: 9px;
    }

    .booking-section {
        padding: 50px 16px;
    }

    .booking-section .booking-strip {
        padding: 16px;
    }

    .hero-bottom-left {
        position: relative;
        left: auto;
        bottom: auto;
        margin-top: auto;
        padding: 120px 20px 20px;
        text-align: center;
        max-width: 100%;
        width: 100%;
        grid-row: 1;
    }

    .hero-bottom-right {
        position: relative;
        right: auto;
        bottom: auto;
        padding: 10px 20px 80px;
        text-align: center;
        width: 100%;
        grid-row: 2;
    }

    .hero {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
    }

    .hero-scroll-down {
        bottom: 20px;
    }

    .about-image-wrapper {
        height: 380px;
        max-width: 340px;
    }

    .about-cta-row {
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }

    .about-cta-row .button.dark-button {
        width: 100%;
    }

    .started-year {
        font-size: 52px;
    }
}

/* ========================================
   Editorial Facilities Gallery Section
   ======================================== */
.facilities-editorial-section {
    background-color: var(--warm-white);
    padding: clamp(80px, 10vw, 140px) clamp(18px, 5vw, 72px);
    position: relative;
    overflow: hidden;
}

.facilities-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(56px, 7vw, 86px);
}

.facilities-label {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--terracotta);
    margin-bottom: 16px;
}

.facilities-heading {
    font-family: var(--font-heading);
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 500;
    line-height: 1.1;
    color: var(--charcoal);
    margin: 0 0 18px;
}

.facilities-subheading {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: 1.8;
    color: #5d5345;
    margin: 0;
}

/* Gallery Grid - 3 Column Staggered Editorial */
.facilities-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 36px);
    max-width: 1280px;
    margin: 0 auto;
}

.facilities-col {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 36px);
}

/* Center column offset for staggered editorial feel */
.facilities-col-center {
    padding-top: clamp(40px, 5vw, 72px);
}

/* Facility Item */
.facility-editorial-item {
    position: relative;
}

.facility-img-wrap {
    position: relative;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 4 / 5;
}

.facility-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.facility-img-wrap:hover img {
    transform: scale(1.03);
}

/* Hover Overlay */
.facility-hover-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 28px;
    text-align: center;
    background: linear-gradient(160deg,
            rgba(3, 55, 27, 0.82) 0%,
            rgba(200, 180, 138, 0.72) 100%);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
    border-radius: 10px;
}

.facility-img-wrap:hover .facility-hover-overlay {
    opacity: 1;
}

.facility-hover-overlay i {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.9);
    transform: translateY(8px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) 0.08s;
}

.facility-img-wrap:hover .facility-hover-overlay i {
    transform: translateY(0);
    opacity: 1;
}

.facility-hover-overlay p {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    max-width: 240px;
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) 0.16s;
}

.facility-img-wrap:hover .facility-hover-overlay p {
    transform: translateY(0);
    opacity: 1;
}

/* Facility Title */
.facility-editorial-title {
    font-family: var(--font-heading);
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 500;
    color: var(--charcoal);
    margin: 14px 0 0;
    text-align: center;
    line-height: 1.3;
}

/* Responsive - Tablet */
@media (max-width: 980px) {
    .facilities-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .facilities-col-center {
        padding-top: 0;
    }

    .facility-img-wrap {
        aspect-ratio: 4 / 4.5;
    }
}

/* Responsive - Mobile */
@media (max-width: 640px) {
    .facilities-editorial-section {
        padding: 60px 16px;
    }

    .facilities-gallery-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        max-width: 480px;
    }

    .facilities-col-center {
        padding-top: 0;
    }

    .facility-img-wrap {
        aspect-ratio: 4 / 3.5;
    }

    .facilities-heading {
        font-size: clamp(30px, 7vw, 42px);
    }

    /* Tap-reveal on mobile: overlay visible on focus-within / active */
    .facility-hover-overlay {
        transition: opacity 0.3s ease;
    }

    .facility-img-wrap:active .facility-hover-overlay,
    .facility-editorial-item:focus-within .facility-hover-overlay {
        opacity: 1;
    }

    .facility-img-wrap:active .facility-hover-overlay i,
    .facility-editorial-item:focus-within .facility-hover-overlay i,
    .facility-img-wrap:active .facility-hover-overlay p,
    .facility-editorial-item:focus-within .facility-hover-overlay p {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 980px) {
    .accommodation-page {
        padding-inline: 22px;
    }

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

    .accommodation-room-grid {
        gap: 42px 24px;
    }

    .accommodation-room-card .room-title {
        flex-direction: column;
        gap: 6px;
    }



    .package-offer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 42px 24px;
    }

    .package-offer-title {
        flex-direction: column;
        gap: 6px;
    }
}

@media (max-width: 640px) {
    .accommodation-page {
        padding: 72px 18px;
    }

    .accommodation-intro {
        text-align: left;
    }

    .accommodation-intro h2 {
        font-size: clamp(42px, 13vw, 58px);
    }

    .accommodation-intro>p:last-child {
        line-height: 1.7;
    }

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

    .accommodation-filter {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 6px;
    }

    .accommodation-listing-panel {
        width: calc(100% + 36px);
        margin-inline: -18px;
        padding: 44px 18px;
    }

    .accommodation-filter button {
        flex: 0 0 auto;
    }

    .accommodation-room-grid {
        grid-template-columns: 1fr;
        gap: 46px;
    }

    .accommodation-room-card .room-image {
        aspect-ratio: 4 / 3;
        margin-bottom: 22px;
    }

    .room-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .accommodation-reservations-note {
        text-align: left;
    }

    .accommodation-faq-heading {
        text-align: left;
    }

    .accommodation-faq-item summary {
        padding: 18px;
        font-size: 24px;
    }

    .accommodation-faq-item p {
        padding: 0 18px 20px;
    }

    .package-inclusive-stage {
        min-height: auto;
        padding: 72px 18px;
    }

    .package-inclusive-header {
        padding-bottom: 26px;
    }

    .package-inclusive-header h2 {
        font-size: clamp(48px, 15vw, 74px);
        line-height: 0.96;
    }



    .packages-page {
        padding: 72px 18px;
    }

    .package-collection-heading {
        text-align: left;
    }

    .package-offer-grid {
        grid-template-columns: 1fr;
        gap: 46px;
    }

    .package-offer-card figure {
        aspect-ratio: 4 / 3;
        margin-bottom: 22px;
    }

    .package-reservations-note {
        text-align: left;
    }

    .room-detail-page {
        padding: 96px 18px 72px;
    }

    .room-detail-facts {
        gap: 14px 22px;
    }

    .room-detail-image-deck {
        margin-top: 42px;
        padding: 0 44px;
    }

    .room-detail-deck-stack {
        height: clamp(300px, 88vw, 460px);
        width: min(100%, 560px);
    }

    .room-detail-deck-card {
        border-radius: 14px;
    }

    .room-detail-deck-controls {
        justify-content: center;
        width: min(100%, 560px);
        margin-top: 26px;
    }

    .room-detail-deck-prev,
    .room-detail-deck-next {
        width: 40px;
        height: 40px;
    }

    .room-detail-about,
    .room-detail-amenities {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .room-detail-price {
        display: grid;
        align-items: start;
    }

    .room-detail-amenities-grid,
    .room-detail-similar-grid {
        grid-template-columns: 1fr;
    }

    .room-detail-section-heading {
        display: grid;
    }
}

/* Prevent GSAP flash of unstyled content (FOUC) / Blinking */
.gsap-active .hero-content>*,
.gsap-active main>section:not(.hero):not(.page-hero):not(.booking-section):not(.about-resort-section):not(.accommodations-redesign-section):not(.accommodation-page):not(.package-inclusive-section):not(.packages-page):not(.facilities-editorial-section):not(.facility-story-section):not(.wellness-retreats-section):not(.facility-events-section):not(.contact-info-strip):not(.contact-address-feature):not(.contact-reservations-section):not(.contact-map-form-section):not(.contact-journey-section):not(.contact-social-section):not(.contact-support-note):not(.gallery-journal-section):not(.about-story-editorial):not(.about-values-section):not(.about-know-section):not(.destination-journal-section):not(.about-final-cta-section),
.gsap-active .story-grid>div>*,
.gsap-active .image-card,
.gsap-active .room-card,
.gsap-active .package-card,
.gsap-active .facility-card,
.gsap-active .testimonial,
.gsap-active .stats>div,
.gsap-active .values-grid article,
.gsap-active .timeline-list div,
.gsap-active .gallery-item,
.gsap-active .lux-form,
.gsap-active .contact-panel,
.gsap-active .summary-card,
.gsap-active .feature-split>div>*,
.gsap-active .promo-strip>*,
.gsap-active .accommodations-redesign-section .section-heading>*,
.gsap-active .acc-nav-item,
.gsap-active .acc-slider-container,
.gsap-active .acc-price-card,
.gsap-active .acc-details-label,
.gsap-active .acc-details-title,
.gsap-active .acc-details-desc,
.gsap-active .about-image-bottom-container,
.gsap-active .about-image-top-container,
.gsap-active .started-in-badge,
.gsap-active .facilities-header>*,
.gsap-active .facilities-col,
.gsap-active .gallery-label,
.gsap-active .gallery-heading,
.gsap-active .gallery-subheading,
.gsap-active .gallery-slider-wrapper,
.gsap-active .story-label,
.gsap-active .story-heading,
.gsap-active .story-subheading,
.gsap-active .story-center-circle,
.gsap-active .story-block,
.gsap-active .about-story-label,
.gsap-active .about-story-intro h2,
.gsap-active .about-story-intro p,
.gsap-active .about-story-item,
.gsap-active .about-story-copy>*,
.gsap-active .about-values-section h2,
.gsap-active .about-value-item,
.gsap-active .about-values-image,
.gsap-active .about-know-heading,
.gsap-active .about-know-history figure,
.gsap-active .about-know-history p,
.gsap-active .about-know-image,
.gsap-active .about-know-inspiration,
.gsap-active .destination-label,
.gsap-active .destination-center h2,
.gsap-active .destination-center p:not(.destination-label),
.gsap-active .destination-center a,
.gsap-active .destination-column,
.gsap-active .about-final-image,
.gsap-active .about-final-content>*,
.gsap-active .accommodation-label,
.gsap-active .accommodation-intro h2,
.gsap-active .accommodation-intro>p:last-child,
.gsap-active .accommodation-highlight,
.gsap-active .accommodation-filter button,
.gsap-active .accommodation-reservations-note,
.gsap-active .accommodation-faq-heading>*,
.gsap-active .accommodation-faq-item,
.gsap-active .package-collection-heading>*,
.gsap-active .package-offer-card,
.gsap-active .package-reservations-note {
    opacity: 0;
}

/* ==========================================================================
   Gallery Experience Section (Premium Editorial Slider)
   ========================================================================== */
.gallery-experience-section {
    background-color: var(--warm-sand);
    padding: clamp(90px, 11vw, 140px) 0;
    overflow: hidden;
    position: relative;
}

.gallery-header {
    text-align: center;
    margin-bottom: clamp(48px, 6vw, 76px);
    padding: 0 24px;
}

.gallery-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 16px;
    line-height: 1;
    will-change: transform, opacity;
}

.gallery-heading {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    font-weight: 500;
    color: var(--charcoal);
    line-height: 1.15;
    margin: 0 0 18px 0;
    letter-spacing: -0.01em;
    will-change: transform, opacity;
}

.gallery-subheading {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.8vw, 16px);
    color: #5d5345;
    font-weight: 400;
    margin: 0 auto;
    max-width: 620px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    will-change: transform, opacity;
}

.gallery-slider-wrapper {
    position: relative;
    width: 100%;
    will-change: transform, opacity;
}

.gallery-swiper {
    width: 100%;
    overflow: visible !important;
}

.gallery-swiper .swiper-slide {
    width: 65%;
    transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1), filter 0.9s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 0.55;
    transform: scale(0.92);
    filter: blur(1.5px) grayscale(20%);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
}

.gallery-swiper .swiper-slide-active {
    opacity: 1;
    transform: scale(1.02);
    filter: none;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
    z-index: 2;
}

.slide-img-container {
    width: 100%;
    height: clamp(450px, 60vh, 650px);
    overflow: hidden;
    position: relative;
}

.slide-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Slow, elegant breathing active zoom */
@keyframes galleryBreathe {
    0% {
        transform: scale(1.01);
    }

    100% {
        transform: scale(1.06);
    }
}

.gallery-swiper .swiper-slide-active img {
    animation: galleryBreathe 9s ease-in-out infinite alternate;
}

/* Minimal Luxury Circle Navigation Buttons */
.gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--forest-green);
    color: var(--white);
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 10px 24px rgba(3, 55, 27, 0.25);
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease, opacity 0.3s ease;
}

.gallery-nav-btn:hover {
    transform: translateY(-50%) scale(1.08);
    background-color: var(--terracotta);
}

.gallery-prev {
    left: calc(17.5% + 24px);
}

.gallery-next {
    right: calc(17.5% + 24px);
}

.gallery-nav-btn i {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.gallery-prev:hover i {
    transform: translateX(-2px);
}

.gallery-next:hover i {
    transform: translateX(2px);
}

/* Responsive Customizations */
@media (max-width: 980px) {
    .gallery-swiper .swiper-slide {
        width: 80%;
    }

    .gallery-prev {
        left: calc(10% + 12px);
    }

    .gallery-next {
        right: calc(10% + 12px);
    }

    .slide-img-container {
        height: clamp(380px, 48vh, 520px);
    }
}

@media (max-width: 768px) {
    .gallery-swiper .swiper-slide {
        width: 84%;
    }

    .gallery-prev {
        left: calc(8% + 8px);
    }

    .gallery-next {
        right: calc(8% + 8px);
    }
}

@media (max-width: 640px) {
    .gallery-swiper .swiper-slide {
        width: 88%;
    }

    .gallery-nav-btn {
        display: none;
        /* Rely on touch gestures on small screens */
    }

    .gallery-experience-section {
        padding: clamp(54px, 8vw, 80px) 0;
    }

    .gallery-header {
        margin-bottom: 32px;
    }

    .slide-img-container {
        height: 320px;
    }
}

/* ==========================================================================
   Editorial Storytelling Section (Asymmetrical Mood Collage)
   ========================================================================== */
.editorial-storytelling-section {
    background: linear-gradient(180deg, rgba(233, 223, 200, 0.15) 0%, rgba(221, 183, 158, 0.2) 100%), var(--clay-beige);
    padding: clamp(90px, 11vw, 150px) 0;
    overflow: hidden;
    position: relative;
}

.story-header {
    text-align: center;
    margin-bottom: clamp(60px, 8vw, 90px);
    padding: 0 24px;
}

.story-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--terracotta);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 16px;
    line-height: 1;
    will-change: transform, opacity;
}

.story-heading {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    font-weight: 500;
    color: var(--charcoal);
    line-height: 1.15;
    margin: 0 0 18px 0;
    letter-spacing: -0.01em;
    will-change: transform, opacity;
}

.story-subheading {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.8vw, 16px);
    color: #5d5345;
    font-weight: 400;
    margin: 0 auto;
    max-width: 620px;
    line-height: 1.65;
    letter-spacing: 0.01em;
    will-change: transform, opacity;
}

.story-composition-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 850px;
    padding: 0 24px;
}

/* Connector Ring & Center Emblem */
.story-connector-group {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    z-index: 2;
    pointer-events: none;
    will-change: transform, opacity;
}

.story-center-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed rgba(3, 55, 27, 0.18);
    will-change: transform;
}

@keyframes storyRotateRing {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.story-center-ring {
    animation: storyRotateRing 45s linear infinite;
}

.story-center-emblem {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--white);
    border: 1px solid rgba(3, 55, 27, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(3, 55, 27, 0.08);
}

.story-center-emblem svg {
    width: 64px;
    height: 64px;
}

/* Floating Story Image Blocks */
.story-block {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 3;
    will-change: transform, opacity;
}

.story-img-wrapper {
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(43, 43, 43, 0.06);
    background-color: rgba(255, 255, 255, 0.1);
    position: relative;
}

.story-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease;
    cursor: pointer;
}

.story-img-wrapper img:hover {
    transform: scale(1.04);
    filter: brightness(1.04);
}

/* Premium Sliding Hover Card */
.story-hover-card {
    position: absolute;
    inset: auto 0 0 0;
    background: rgba(43, 43, 43, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: clamp(14px, 2.2vw, 20px);
    transform: translateY(101%);
    transition: transform 0.48s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.story-img-wrapper:hover .story-hover-card {
    transform: translateY(0);
}

.story-hover-desc {
    font-family: var(--font-body);
    font-size: clamp(11px, 1.4vw, 12px);
    line-height: 1.5;
    color: var(--white);
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.story-img-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--forest-green);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding-left: 2px;
}

/* Asymmetrical Layout Positioning Coordinates */
.story-block-top-left {
    top: 50px;
    left: 6%;
    width: 35%;
}

.story-block-top-left .story-img-wrapper {
    aspect-ratio: 1 / 1;
}

.story-block-top-right {
    top: 150px;
    right: 20%;
    width: 26%;
}

.story-block-top-right .story-img-wrapper {
    aspect-ratio: 4 / 3;
}

.story-block-bottom-left {
    bottom: 50px;
    left: 20%;
    width: 26%;
}

.story-block-bottom-left .story-img-wrapper {
    aspect-ratio: 4 / 3;
}

.story-block-bottom-right {
    bottom: -50px;
    right: 6%;
    width: 35%;
}

.story-block-bottom-right .story-img-wrapper {
    aspect-ratio: 1 / 1;
}

/* Responsive Customizations */
@media (max-width: 980px) {
    .story-composition-container {
        min-height: 720px;
    }

    .story-connector-group {
        width: 300px;
        height: 300px;
    }

    .story-center-emblem {
        width: 70px;
        height: 70px;
    }

    .story-center-emblem svg {
        width: 54px;
        height: 54px;
    }

    .story-block-top-left {
        left: 2%;
        width: 32%;
    }

    .story-block-top-right {
        right: 2%;
        width: 29%;
    }

    .story-block-bottom-left {
        left: 4%;
        width: 31%;
        bottom: 20px;
    }

    .story-block-bottom-right {
        right: 4%;
        width: 33%;
        bottom: 0;
    }
}

@media (max-width: 768px) {
    .story-composition-container {
        min-height: 640px;
    }

    .story-connector-group {
        display: none;
        /* Hide circular connector on smaller layouts */
    }

    .story-block-top-left {
        left: 2%;
        width: 44%;
    }

    .story-block-top-right {
        right: 2%;
        width: 44%;
        top: 40px;
    }

    .story-block-bottom-left {
        left: 2%;
        width: 44%;
        bottom: 10px;
    }

    .story-block-bottom-right {
        right: 2%;
        width: 44%;
        bottom: 0;
    }
}

@media (max-width: 640px) {
    .editorial-storytelling-section {
        padding: clamp(60px, 9vw, 90px) 0;
    }

    .story-header {
        margin-bottom: 40px;
    }

    .story-composition-container {
        display: flex;
        flex-direction: column;
        gap: 36px;
        min-height: auto;
        padding: 0 18px;
    }

    .story-block {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }
}

.story-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease;
    cursor: pointer;
}

.story-img-wrapper img:hover {
    transform: scale(1.04);
    filter: brightness(1.04);
}

/* Premium Sliding Hover Card */
.story-hover-card {
    position: absolute;
    inset: auto 0 0 0;
    background: rgba(43, 43, 43, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: clamp(14px, 2.2vw, 20px);
    transform: translateY(101%);
    transition: transform 0.48s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.story-img-wrapper:hover .story-hover-card {
    transform: translateY(0);
}

.story-hover-desc {
    font-family: var(--font-body);
    font-size: clamp(11px, 1.4vw, 12px);
    line-height: 1.5;
    color: var(--white);
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.story-img-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--forest-green);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding-left: 2px;
}

/* Asymmetrical Layout Positioning Coordinates */
.story-block-top-left {
    top: 50px;
    left: 6%;
    width: 35%;
}

.story-block-top-left .story-img-wrapper {
    aspect-ratio: 1 / 1;
}

.story-block-top-right {
    top: 150px;
    right: 20%;
    width: 26%;
}

.story-block-top-right .story-img-wrapper {
    aspect-ratio: 4 / 3;
}

.story-block-bottom-left {
    bottom: 50px;
    left: 20%;
    width: 26%;
}

.story-block-bottom-left .story-img-wrapper {
    aspect-ratio: 4 / 3;
}

.story-block-bottom-right {
    bottom: -50px;
    right: 6%;
    width: 35%;
}

.story-block-bottom-right .story-img-wrapper {
    aspect-ratio: 1 / 1;
}

/* Responsive Customizations */
@media (max-width: 980px) {
    .story-composition-container {
        min-height: 720px;
    }

    .story-connector-group {
        width: 300px;
        height: 300px;
    }

    .story-center-emblem {
        width: 70px;
        height: 70px;
    }

    .story-center-emblem svg {
        width: 54px;
        height: 54px;
    }

    .story-block-top-left {
        left: 2%;
        width: 32%;
    }

    .story-block-top-right {
        right: 2%;
        width: 29%;
    }

    .story-block-bottom-left {
        left: 4%;
        width: 31%;
        bottom: 20px;
    }

    .story-block-bottom-right {
        right: 4%;
        width: 33%;
        bottom: 0;
    }
}

@media (max-width: 768px) {
    .story-composition-container {
        min-height: 640px;
    }

    .story-connector-group {
        display: none;
        /* Hide circular connector on smaller layouts */
    }

    .story-block-top-left {
        left: 2%;
        width: 44%;
    }

    .story-block-top-right {
        right: 2%;
        width: 44%;
        top: 40px;
    }

    .story-block-bottom-left {
        left: 2%;
        width: 44%;
        bottom: 10px;
    }

    .story-block-bottom-right {
        right: 2%;
        width: 44%;
        bottom: 0;
    }
}

@media (max-width: 640px) {
    .editorial-storytelling-section {
        padding: clamp(60px, 9vw, 90px) 0;
    }

    .story-header {
        margin-bottom: 40px;
    }

    .story-composition-container {
        display: flex;
        flex-direction: column;
        gap: 36px;
        min-height: auto;
        padding: 0 18px;
    }

    .story-block {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        transform: none !important;
    }

    .story-img-wrapper {
        aspect-ratio: 16 / 10 !important;
    }
}

/* Top Navbar Profile Dropdown styling */
.nav-profile-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 4px;
    z-index: 100;
}

.nav-profile-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: var(--radius);
    color: var(--white) !important;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.3s ease;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}

.nav-profile-trigger:hover {
    background: rgba(255, 255, 255, 0.16);
    color: var(--gold-soft) !important;
    border-color: rgba(200, 163, 95, 0.3);
}

.nav-profile-trigger i {
    font-size: 20px;
    color: #fff;
}

.nav-profile-menu {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    background: linear-gradient(165deg, rgba(20, 96, 82, 0.98) 0%, rgba(9, 42, 36, 0.99) 100%);
    border: 1px solid rgba(230, 207, 135, 0.35);
    border-radius: 12px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4), 0 0 25px rgba(230, 207, 135, 0.12);
    min-width: 220px;
    z-index: 9999;
    padding: 8px 0;
    flex-direction: column;
    overflow: hidden;
}

@keyframes navFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-profile-dropdown:hover .nav-profile-menu,
.nav-profile-dropdown.show .nav-profile-menu {
    display: block;
    flex-direction: column;
    animation: navFadeIn 0.25s ease;
}

.nav-profile-menu a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    color: #FFFFFF !important;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s ease;
    opacity: 1 !important;
    white-space: nowrap;
    border-radius: 0;
    background: transparent;
    border: none;
    transform: none;
}

.nav-profile-menu a:hover {
    background: rgba(230, 207, 135, 0.15) !important;
    color: #E6CF87 !important;
}

.site-header,
.main-nav {
    overflow: visible !important;
}

.nav-profile-menu a i {
    font-size: 15px;
    width: 18px;
    text-align: center;
    color: #E6CF87 !important;
}


/* Mobile: Profile dropdown in mobile nav */
@media (max-width: 900px) {
    .nav-profile-dropdown {
        width: 100%;
        margin-left: 0;
        margin-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 8px;
    }

    .nav-profile-trigger {
        width: 100%;
        justify-content: center;
    }

    .nav-profile-menu {
        position: relative;
        top: 8px;
        right: auto;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: none;
    }

    .nav-profile-menu a {
        color: rgba(255, 255, 255, 0.85) !important;
        padding: 10px 16px;
    }

    .nav-profile-menu a:hover {
        background: rgba(200, 163, 95, 0.15) !important;
        color: var(--gold-soft) !important;
    }

    .nav-profile-menu a i {
        color: var(--gold-soft);
    }
}

/* ==================================
   AYANA LAKE RESORT FOOTER SYSTEM
   ================================== */
.site-footer {
    background: var(--footer-bg, var(--olive)) !important;
    color: var(--footer-text, rgba(255, 255, 255, 0.82)) !important;
    padding: clamp(40px, 5vw, 60px) clamp(18px, 5vw, 72px) 18px !important;

    font-family: var(--font-body) !important;
    position: relative;
    z-index: 10;
}

.site-footer a {
    color: var(--footer-text, rgba(255, 255, 255, 0.82));
    transition: color 0.3s ease;
}

.site-footer a:hover {
    color: var(--terracotta) !important;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(32px, 4vw, 56px);
    margin-bottom: 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-brand {
    display: inline-block;
    margin-bottom: 16px;
    text-decoration: none;
}

.footer-brand span {
    display: block;
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 600;
    color: var(--footer-heading, var(--sand)) !important;
    line-height: 1.1;
}

.footer-brand small {
    display: block;
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7) !important;
}

.site-footer h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 500;
    color: var(--footer-heading, var(--sand)) !important;
    margin: 0 0 20px 0;
}

.site-footer p {
    color: var(--footer-text, rgba(255, 255, 255, 0.82)) !important;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 16px 0;
}

.site-footer div>a:not(.brand) {
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
    text-decoration: none;
}

.site-footer .socials {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
}

.site-footer .socials a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: var(--sand) !important;
    font-size: 16px;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.site-footer .socials a i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site-footer .socials a:hover {
    background: var(--terracotta) !important;
    color: var(--white) !important;
    transform: translateY(-3px);
}


.site-footer .newsletter {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.site-footer .newsletter input {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
    padding: 10px 14px;
    border-radius: var(--radius-sm, 10px);
    font-size: 14px;
    outline: none;
    flex: 1;
}

.site-footer .newsletter input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.site-footer .newsletter input:focus {
    border-color: var(--sand);
    background: rgba(255, 255, 255, 0.18);
}

.site-footer .newsletter .icon-button {
    background: var(--sand);
    color: var(--olive);
    border: none;
    border-radius: var(--radius-sm, 10px);
    width: 42px;
    height: 42px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.3s ease;
}

.site-footer .newsletter .icon-button:hover {
    background: var(--terracotta);
    color: var(--white);
}

.footer-legal-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px !important;
    margin-bottom: 4px !important;
    padding: 4px 0 !important;
    border-top: none !important;
    border-bottom: none !important;
    font-size: 13px;
}

.footer-legal-links a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-legal-links a:hover {
    color: #E6CF87;
}

.footer-legal-links .legal-divider {
    color: rgba(255, 255, 255, 0.35);
    font-size: 10px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13.5px;
    padding-top: 4px !important;
    margin-top: 0 !important;
    border-top: none !important;
    border-bottom: none !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.footer-credit,
.footer-credit * {
    white-space: nowrap !important;
    display: inline-block !important;
}

.footer-bottom a {
    color: var(--sand, #E6CF87) !important;
    text-decoration: none;
}

.footer-bottom a:hover {
    color: var(--terracotta, #C45B34) !important;
}



/* ==================================
   FLOATING ACTION BUTTONS
   ================================== */
.floating-actions {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}

.floating-actions a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50% !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important;
    text-decoration: none !important;
    border: none !important;
}

.floating-actions a:hover {
    transform: translateY(-4px) scale(1.06) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32) !important;
}

/* WhatsApp Button */
.floating-actions a[href*="wa.me"] {
    background: #25D366 !important;
    color: #FFFFFF !important;
}

.floating-actions a[href*="wa.me"] i {
    font-size: 26px !important;
    color: #FFFFFF !important;
}

/* Floating Chat Now Button */
.floating-actions a.floating-chat-now {
    background: var(--terracotta, #C45B34) !important;
    color: #FFFFFF !important;
}

.floating-actions a.floating-chat-now i {
    font-size: 22px !important;
    color: #FFFFFF !important;
}

/* Phone Call Button */
.floating-actions a[href^="tel:"] {
    background: var(--olive, #5C6542) !important;
    color: #FFFFFF !important;
}

.floating-actions a[href^="tel:"] i {
    font-size: 20px !important;
    color: #FFFFFF !important;
}

/* ==================================
   BUTTON DESIGN SYSTEM
   ================================== */
.button,
button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: var(--radius, 18px);
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: var(--btn-primary, var(--olive));
    color: var(--btn-primary-text, var(--white));
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.button:hover,
button:hover,
.btn:hover {
    background: var(--btn-primary-hover, var(--terracotta));
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Primary Button Modifier */
.button.primary,
.button-primary,
button[type="submit"] {
    background: var(--btn-primary, var(--olive)) !important;
    color: var(--btn-primary-text, var(--white)) !important;
    border: none !important;
}

.button.primary:hover,
.button-primary:hover,
button[type="submit"]:hover {
    background: var(--btn-primary-hover, var(--terracotta)) !important;
    color: var(--white) !important;
}

/* Secondary / Outline Button */
.button.secondary,
.button.outline,
.button.ghost {
    background: var(--btn-secondary-bg, transparent) !important;
    border: 1.5px solid var(--btn-secondary-border, var(--olive)) !important;
    color: var(--btn-secondary-text, var(--olive)) !important;
    box-shadow: none !important;
}

.button.secondary:hover,
.button.outline:hover,
.button.ghost:hover {
    background: var(--olive) !important;
    color: var(--white) !important;
}

/* Dark Button */
.button.dark-button,
.dark-button {
    background: var(--olive) !important;
    color: var(--white) !important;
    border: none !important;
}

.button.dark-button:hover,
.dark-button:hover {
    background: var(--terracotta) !important;
    color: var(--white) !important;
}

/* Hero Book Button */
.hero-book-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    background: var(--terracotta) !important;
    color: var(--white) !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}

.hero-book-btn:hover {
    background: var(--olive) !important;
    color: var(--white) !important;
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3) !important;
}

/* Acc Showcase Book Button */
.acc-book-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--olive) !important;
    color: var(--white) !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}


.acc-book-btn:hover {
    background: var(--terracotta) !important;
    color: var(--white) !important;
}

/* ===================================================
   AYANA LUXURY FLOATING & STICKY HEADER SYSTEM
   =================================================== */
.luxury-floating-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    height: 90px;
    padding: 18px clamp(18px, 5vw, 64px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent !important;
    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.luxury-floating-header.scrolled {
    height: 72px;
    padding-block: 10px;
    background: #FFFFFF !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(20, 96, 82, 0.12);
}


/* Header Left: Hamburger & Phone Call */
.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 2;
}

.header-call-link {
    color: #FFFFFF;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.header-call-link:hover {
    color: #E6CF87;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.luxury-floating-header.scrolled .header-call-link {
    color: #146052;
}

.luxury-floating-header.scrolled .header-call-link:hover {
    color: #C45B34;
}

/* Phone Icon 12-Second Pulse Animation */
@keyframes phonePulse {

    0%,
    88%,
    100% {
        transform: scale(1);
    }

    92% {
        transform: scale(1.25) rotate(-12deg);
        color: #E6CF87;
    }

    95% {
        transform: scale(1.25) rotate(12deg);
        color: #E6CF87;
    }

    98% {
        transform: scale(1.1);
    }
}

.phone-pulse-icon {
    font-size: 15px;
    animation: phonePulse 12s infinite ease-in-out;
}

/* Hamburger ☰ to × Morphing Toggle */
.luxury-nav-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer;
    padding: 4px 8px 4px 0 !important;
    border-radius: 0 !important;
    transition: all 0.3s ease;
    z-index: 1200;
}

.hamburger-box {
    width: 22px;
    height: 18px;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
    box-sizing: border-box;
}

.hamburger-line {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: #FFFFFF;
    border-radius: 2px;
    flex-shrink: 0;
    margin: 0 !important;
    position: static !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, background-color 0.3s ease;
    transform-origin: center;
}

.nav-toggle-label {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FFFFFF;
    transition: color 0.3s ease;
    line-height: 1;
}

/* Scrolled State */
.luxury-floating-header.scrolled .hamburger-line {
    background: #146052;
}

.luxury-floating-header.scrolled .nav-toggle-label {
    color: #146052;
}

/* Hover Colors: Change text & line colors smoothly */
.luxury-nav-toggle:hover .hamburger-line {
    background: #E6CF87;
}

.luxury-nav-toggle:hover .nav-toggle-label {
    color: #E6CF87;
}

.luxury-floating-header.scrolled .luxury-nav-toggle:hover .hamburger-line {
    background: #C45B34;
}

.luxury-floating-header.scrolled .luxury-nav-toggle:hover .nav-toggle-label {
    color: #C45B34;
}

/* Open Morphing State */
.luxury-nav-toggle.open .line-1 {
    transform: translateY(8px) rotate(45deg) !important;
    background: #E6CF87 !important;
}

.luxury-nav-toggle.open .line-2 {
    opacity: 0 !important;
    transform: translateX(-10px) !important;
}

.luxury-nav-toggle.open .line-3 {
    transform: translateY(-8px) rotate(-45deg) !important;
    background: #E6CF87 !important;
}

.luxury-nav-toggle.open .nav-toggle-label {
    color: #E6CF87 !important;
}



/* Header Center: Centered Logo ONLY */
.header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.luxury-floating-header.scrolled .brand img {
    width: 42px;
    height: 42px;
}

.luxury-floating-header.scrolled .brand strong {
    color: #146052;
    font-size: 26px;
}

/* Header Right: Glassmorphism Book Now & Profile */
.header-right {
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 2;
}

.glass-book-btn {
    position: relative;
    background: rgba(230, 207, 135, 0.18);
    border: 1px solid rgba(230, 207, 135, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #FFFFFF;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    overflow: hidden;
    transition: all 0.35s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.glass-book-btn .shimmer-effect {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(60deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
    transform: rotate(30deg);
    animation: btnShimmer 4s infinite ease-in-out;
}

@keyframes btnShimmer {

    0%,
    70% {
        transform: translateX(-150%) rotate(30deg);
    }

    100% {
        transform: translateX(150%) rotate(30deg);
    }
}

.glass-book-btn:hover {
    background: linear-gradient(135deg, #E6CF87, #D9BC68) !important;
    color: #146052 !important;
    border-color: #E6CF87 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(230, 207, 135, 0.3);
}

.luxury-floating-header.scrolled .glass-book-btn {
    background: #146052 !important;
    color: #FFFFFF !important;
    border-color: #146052 !important;
}

.luxury-floating-header.scrolled .glass-book-btn:hover {
    background: #C45B34 !important;
    border-color: #C45B34 !important;
    color: #FFFFFF !important;
}

/* Glass & Gold Profile Trigger */
.nav-profile-trigger {
    background: rgba(230, 207, 135, 0.15) !important;
    border: 1px solid rgba(230, 207, 135, 0.4) !important;
    border-radius: 999px !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 12px !important;
    color: #E6CF87 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
}

.nav-profile-trigger i {
    font-size: 18px !important;
    color: #E6CF87 !important;
}

.luxury-floating-header.scrolled .nav-profile-trigger {
    background: rgba(20, 96, 82, 0.08) !important;
    border: 1px solid rgba(20, 96, 82, 0.25) !important;
    color: #146052 !important;
}

.luxury-floating-header.scrolled .nav-profile-trigger i {
    color: #146052 !important;
}

.nav-profile-trigger:hover {
    background: #E6CF87 !important;
    color: #146052 !important;
    border-color: #E6CF87 !important;
    box-shadow: 0 4px 15px rgba(230, 207, 135, 0.3);
    transform: translateY(-1px);
}

.nav-profile-trigger:hover i {
    color: #146052 !important;
    transform: rotate(15deg);
    transition: transform 0.3s ease;
}


/* ===================================================
   SIDEBAR OVERLAY & LUXURY OFF-CANVAS SIDEBAR
   =================================================== */
.sidebar-backdrop-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.sidebar-backdrop-overlay.open {
    opacity: 1;
    visibility: visible;
}

.luxury-sidebar-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(420px, 88vw);
    z-index: 1100;
    background: linear-gradient(165deg, rgba(15, 66, 57, 0.94) 0%, rgba(9, 42, 36, 0.97) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid rgba(230, 207, 135, 0.28);
    transform: translateX(-100%);
    opacity: 0;
    filter: blur(8px);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease, filter 0.5s ease;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 24px 28px 32px;
    box-shadow: 15px 0 50px rgba(0, 0, 0, 0.35);
}

.luxury-sidebar-panel::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.luxury-sidebar-panel.open {
    transform: translateX(0);
    opacity: 1;
    filter: blur(0);
}


/* Decorative Bamboo Silhouettes */
.bamboo-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    pointer-events: none;
}

.bamboo-left {
    left: 0;
}

.bamboo-right {
    right: 0;
}

/* Corner Leaves */
.corner-leaf {
    position: absolute;
    width: 100px;
    height: 100px;
    pointer-events: none;
    filter: blur(1px);
}

.leaf-top-left {
    top: 0;
    left: 0;
}

.leaf-bottom-right {
    bottom: 0;
    right: 0;
}

/* Water Ripple Bottom Wave */
.sidebar-water-ripple {
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    width: 100% !important;
    height: 75px !important;
    pointer-events: none !important;
    z-index: 2 !important;
    overflow: hidden !important;
}

.sidebar-water-ripple svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    animation: waveSway 6s infinite ease-in-out !important;
    transform-origin: bottom center !important;
}

@keyframes waveSway {

    0%,
    100% {
        transform: scaleY(1) translateY(0);
    }

    50% {
        transform: scaleY(1.1) translateY(-2px);
    }
}


/* Drifting Leaf Animation */
.drifting-leaves-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

@keyframes leafDrift {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 0.25;
    }

    100% {
        transform: translateY(700px) rotate(360deg);
        opacity: 0;
    }
}

.drifting-leaf {
    position: absolute;
    top: 0;
    font-size: 16px;
    pointer-events: none;
    animation: leafDrift 8s linear forwards;
}

/* Sidebar Inner Content Layout */
.sidebar-inner-content {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
}

.sidebar-brand-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    width: 100%;
}

.sidebar-logo-only {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.sidebar-logo-only img {
    height: 36px;
    width: auto;
}

.sidebar-profile-box {
    display: flex;
    align-items: center;
}

.sidebar-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(230, 207, 135, 0.15);
    border: 1px solid rgba(230, 207, 135, 0.3);
    color: #E6CF87;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.sidebar-profile-link:hover {
    background: #E6CF87;
    color: #092A24;
}

.sidebar-profile-link i {
    font-size: 15px;
}

.sidebar-close-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    padding: 0;
}

.sidebar-close-btn:hover {
    background: #C45B34;
    border-color: #C45B34;
    color: #FFFFFF;
    transform: scale(1.05);
}


.sidebar-brand-box .brand small {
    color: #E6CF87;
}

.sidebar-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(230, 207, 135, 0.3), transparent);
    margin: 8px 0;
}

/* Sidebar Menu List & Item Animations */
.sidebar-menu-list {
    list-style: none;
    padding: 0;
    margin: 8px 0;
}

.sidebar-menu-item {
    position: relative;
    margin-bottom: 2px;
    opacity: 0;
    transform: translateX(-20px);
}

.luxury-sidebar-panel.open .sidebar-menu-item {
    animation: menuItemSlide 0.4s ease forwards;
}

.luxury-sidebar-panel.open .sidebar-menu-item:nth-child(1) {
    animation-delay: 0.05s;
}

.luxury-sidebar-panel.open .sidebar-menu-item:nth-child(2) {
    animation-delay: 0.09s;
}

.luxury-sidebar-panel.open .sidebar-menu-item:nth-child(3) {
    animation-delay: 0.13s;
}

.luxury-sidebar-panel.open .sidebar-menu-item:nth-child(4) {
    animation-delay: 0.17s;
}

.luxury-sidebar-panel.open .sidebar-menu-item:nth-child(5) {
    animation-delay: 0.21s;
}

.luxury-sidebar-panel.open .sidebar-menu-item:nth-child(6) {
    animation-delay: 0.25s;
}

.luxury-sidebar-panel.open .sidebar-menu-item:nth-child(7) {
    animation-delay: 0.29s;
}

.luxury-sidebar-panel.open .sidebar-menu-item:nth-child(8) {
    animation-delay: 0.33s;
}

.luxury-sidebar-panel.open .sidebar-menu-item:nth-child(9) {
    animation-delay: 0.37s;
}

.luxury-sidebar-panel.open .sidebar-menu-item:nth-child(10) {
    animation-delay: 0.41s;
}

.luxury-sidebar-panel.open .sidebar-menu-item:nth-child(11) {
    animation-delay: 0.45s;
}

.luxury-sidebar-panel.open .sidebar-menu-item:nth-child(12) {
    animation-delay: 0.49s;
}

@keyframes menuItemSlide {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.sidebar-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    color: #F8F6F1;
    font-family: 'Canto Roman', 'Cormorant Garamond', serif;
    font-size: 19px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    border-radius: 8px;
}


.hover-leaf {
    opacity: 0;
    transform: translateX(-12px);
    font-size: 15px;
    transition: all 0.3s ease;
    margin-right: 4px;
}

.sidebar-menu-link:hover .hover-leaf {
    opacity: 1;
    transform: translateX(0);
}

.sidebar-menu-link:hover .menu-text {
    transform: translateX(8px);
    letter-spacing: 0.05em;
    color: #E6CF87;
}

.sidebar-menu-item.active .sidebar-menu-link .menu-text {
    color: #E6CF87;
    font-weight: 700;
}

/* Active Gradient Line */
.sidebar-menu-item.active .sidebar-menu-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 12px;
    right: 12px;
    height: 2px;
    background: linear-gradient(90deg, #79AAA6, #E6CF87, #C45B34);
    border-radius: 2px;
    animation: lineGrow 0.4s ease forwards;
}

@keyframes lineGrow {
    from {
        transform: scaleX(0);
        transform-origin: left;
    }

    to {
        transform: scaleX(1);
        transform-origin: left;
    }
}

/* Submenu Accordion */
.dropdown-arrow {
    font-size: 12px;
    color: #E6CF87;
    transition: transform 0.3s ease;
}

.dropdown-toggle-link.expanded .dropdown-arrow {
    transform: rotate(180deg);
}

.sidebar-submenu {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-8px);
    transition: max-height 0.4s ease, opacity 0.35s ease, transform 0.35s ease;
    list-style: none;
    padding-left: 36px;
    margin: 0;
}

.sidebar-submenu.open {
    max-height: 260px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 6px;
    margin-bottom: 6px;
}

.sidebar-submenu li a {
    font-size: 15px;
    color: rgba(248, 246, 241, 0.82);
    font-family: 'Manrope', sans-serif;
    padding: 6px 0;
    display: block;
    text-decoration: none;
    transition: all 0.3s ease;
}

.sidebar-submenu li a:hover {
    color: #E6CF87;
    padding-left: 6px;
}

/* Sidebar Action Buttons */
.sidebar-action-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 16px 0;
}

.sidebar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sidebar-btn-call {
    background: rgba(230, 207, 135, 0.15);
    color: #E6CF87;
    border: 1px solid rgba(230, 207, 135, 0.3);
}

.sidebar-btn-wa {
    background: rgba(37, 211, 102, 0.2);
    color: #25D366;
    border: 1px solid rgba(37, 211, 102, 0.35);
}

.sidebar-btn-book {
    background: #E6CF87;
    color: #0F4239;
    font-weight: 800;
}

.sidebar-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* Sidebar Social Icons */
.sidebar-socials {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
}

.sidebar-socials a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(248, 246, 241, 0.1);
    color: #E6CF87;
    border: 1px solid rgba(230, 207, 135, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.sidebar-socials a:hover {
    background: #E6CF87;
    color: #0F4239;
    transform: translateY(-3px);
}

/* ===================================================
   SONEVA-STYLE LUXURY HERO SECTION & BOOKING WIDGET
   =================================================== */
.soneva-hero-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000000;
    padding: 120px 20px 50px;
}

.soneva-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.52) 100%);
    z-index: 2;
    pointer-events: none;
}

.soneva-hero-content {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.soneva-hero-content > * {
    pointer-events: auto;
}
    text-align: center;
}

.soneva-hero-header {
    margin-bottom: 0;
}

.soneva-welcome-tag {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(32px, 5.5vw, 60px);
    font-weight: 500;
    color: #FFFFFF;
    margin-bottom: 0px;
    line-height: 1.1;
}

.soneva-hero-title {
    display: none;
}

.soneva-hero-subtitle {
    font-family: 'Inter', 'Manrope', sans-serif;
    font-size: clamp(13px, 1.8vw, 18px);
    font-weight: 300;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 4px;
    margin-bottom: 24px;
    max-width: 780px;
    line-height: 1.3;
}


/* Soneva Glass Booking Widget */
.soneva-booking-wrapper {
    width: 100%;
    max-width: 820px;
    background: rgba(18, 18, 18, 0.25) !important;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 6px;
    padding: 6px 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    margin-bottom: 48px;
}

.soneva-booking-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 48px;
}

.soneva-field-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2px 10px;
    text-align: left;
}

.soneva-field-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 400;
    text-transform: capitalize;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.02em;
    margin-bottom: 1px;
    line-height: 1.2;
}

.soneva-date-input,
.soneva-select-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.2;
    padding: 0;
    margin: 0;
}

.soneva-date-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
    margin-left: 4px;
}

.soneva-select-input option {
    background: #0F4239;
    color: #FFFFFF;
}

.soneva-divider {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.2);
}

.soneva-search-btn {
    width: 160px;
    height: 44px;
    background: #146052;
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 4px 14px rgba(20, 96, 82, 0.4);
}

.soneva-search-btn:hover {
    background: #0F4239;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(15, 66, 57, 0.6);
}



/* Scroll Indicator - Anchored at the absolute bottom of Hero Section */
.soneva-scroll-indicator {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #FFFFFF;
    opacity: 0.65;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    text-decoration: none;
    transition: opacity 0.3s ease;
    animation: sonevaScrollSway 2s infinite ease-in-out;
}

.soneva-scroll-indicator:hover {
    opacity: 1;
}

@keyframes sonevaScrollSway {

    0%,
    100% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, 8px);
    }
}



/* Page Load Animation Keyframes */
[data-hero-animate="heading"] {
    animation: sonevaHeroFadeIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

[data-hero-animate="subtitle"] {
    animation: sonevaHeroFadeIn 0.9s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

[data-hero-animate="widget"] {
    animation: sonevaHeroFadeIn 0.9s 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

@keyframes sonevaHeroFadeIn {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Layout */
@media (max-width: 860px) {
    .soneva-booking-form {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        min-height: auto;
    }

    .soneva-divider {
        width: 100%;
        height: 1px;
    }

    .soneva-search-btn {
        width: 100%;
        height: 52px;
    }
}

/* View All Stays Button with Arrow Animation */
.btn-view-all-stays {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: var(--olive, #146052);
    color: #FFFFFF !important;
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(20, 96, 82, 0.2);
}

.btn-view-all-stays .arrow-icon {
    font-size: 13px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-view-all-stays:hover {
    background: var(--terracotta, #C45B34);
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(196, 91, 52, 0.3);
}

.btn-view-all-stays:hover .arrow-icon {
    transform: translateX(6px);
}

/* ===================================================
   AYANA GRAND OPENING OFFER MODAL POPUP
   =================================================== */
.opening-offer-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.opening-offer-modal.show {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}


.offer-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.68);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.offer-modal-dialog {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 540px;
    max-height: 88vh;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: linear-gradient(180deg, rgba(20, 96, 82, 0.94) 0%, rgba(9, 42, 36, 0.97) 100%),
        url('../images/front_view.webp') center/cover no-repeat;
    border: 1px solid rgba(230, 207, 135, 0.3);
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(230, 207, 135, 0.15);
    padding: 34px 28px 26px;
    text-align: center;
    color: #FFFFFF;
    transform: translateY(30px) scale(0.95);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.offer-modal-dialog::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.opening-offer-modal.show .offer-modal-dialog {
    transform: translateY(0) scale(1);
}


/* Close Button */
.offer-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #E6CF87;
    font-size: 20px;
    line-height: 1;
    width: 36px !important;
    height: 36px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 15;
}

.offer-modal-close:hover {
    background: #C45B34;
    color: #FFFFFF;
    border-color: #C45B34;
    transform: rotate(90deg);
}

.offer-brand-tag {
    font-family: 'Cormorant Garamond', serif;
    font-size: 13px;
    letter-spacing: 3px;
    color: #E6CF87;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.offer-luxury-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
}

.offer-luxury-badge .badge-line {
    height: 1px;
    flex: 1;
    max-width: 50px;
    background: rgba(230, 207, 135, 0.4);
}

.offer-luxury-badge .badge-text {
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #E6CF87;
    text-transform: uppercase;
}

.offer-discount-banner {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(230, 207, 135, 0.3);
    border-radius: 8px;
    padding: 6px 18px;
    margin-bottom: 14px;
}

.disc-upto {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.85);
}

.disc-percent {
    font-family: 'Cormorant Garamond', serif;
    font-size: 38px;
    font-weight: 700;
    color: #E6CF87;
    line-height: 1;
}

.disc-off {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #E6CF87;
}

.offer-modal-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(24px, 3.8vw, 30px);
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 3px;
    letter-spacing: 0.5px;
}

.offer-modal-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #E6CF87;
    margin-bottom: 10px;
}

.offer-rates-highlight {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: #FFFFFF;
    background: rgba(230, 207, 135, 0.12);
    border: 1px dashed rgba(230, 207, 135, 0.4);
    border-radius: 6px;
    padding: 7px 16px;
    margin-bottom: 14px;
}

.offer-rates-highlight strong {
    color: #E6CF87;
    font-weight: 700;
}

.offer-rates-highlight .rate-dot {
    color: #E6CF87;
    font-size: 10px;
}


.offer-modal-desc {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 14px;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

/* Countdown */
.offer-countdown-box {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 8px 16px;
    margin-bottom: 16px;
    display: inline-block;
}

.offer-countdown-box .cd-label {
    display: block;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 3px;
}

.cd-timer-digits {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.cd-timer-digits .cd-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cd-timer-digits .cd-item b {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    color: #E6CF87;
    line-height: 1;
}

.cd-timer-digits .cd-item small {
    font-size: 8.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.cd-timer-digits .cd-sep {
    font-size: 16px;
    color: #E6CF87;
    margin-top: -6px;
}

/* Benefits Grid */
.offer-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 10px;
    text-align: left;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 18px;
}

.benefit-item {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    gap: 6px;
}

.benefit-item i {
    color: #E6CF87;
    font-size: 11px;
    flex-shrink: 0;
}

.benefit-item.full-width {
    grid-column: 1 / -1;
}

.benefit-item small {
    opacity: 0.65;
    font-size: 9.5px;
    margin-left: 2px;
}

/* CTAs */
.offer-cta-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.offer-btn-primary {
    width: 100%;
    max-width: 260px;
    height: 46px;
    background: #E6CF87;
    color: #146052;
    border: none;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(230, 207, 135, 0.3);
    transition: all 0.3s ease;
}

.offer-btn-primary:hover {
    background: #C45B34;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(196, 91, 52, 0.4);
}

.offer-btn-secondary {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 4px 12px;
}

.offer-btn-secondary:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .offer-modal-dialog {
        padding: 26px 18px 20px;
    }

    .offer-benefits-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================================
   PC SPLIT 2-COLUMN POPUP & ROOM SHOWCASE GALLERY
   =================================================== */
@media (min-width: 992px) {
    .offer-modal-dialog {
        max-width: 1020px !important;
        padding: 38px 34px 32px;
        text-align: left;
    }

    .offer-modal-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 36px;
        align-items: start;
    }

    .offer-brand-tag,
    .offer-luxury-badge,
    .offer-discount-banner,
    .offer-rates-highlight {
        justify-content: flex-start;
    }

    .offer-luxury-badge .badge-line {
        max-width: 40px;
    }

    .offer-cta-group {
        align-items: flex-start;
    }

    .offer-btn-primary {
        max-width: 100%;
    }
}

.offer-modal-gallery {
    border-left: 1px solid rgba(230, 207, 135, 0.2);
    padding-left: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 991px) {
    .offer-modal-gallery {
        border-left: none;
        border-top: 1px solid rgba(230, 207, 135, 0.2);
        padding-left: 0;
        padding-top: 24px;
        margin-top: 24px;
    }
}

.offer-gallery-header {
    margin-bottom: 6px;
}

.offer-gallery-header .gallery-tag {
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #E6CF87;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

.offer-gallery-header .gallery-heading {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.2;
}

.offer-rooms-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.offer-room-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 10px;
    transition: all 0.3s ease;
}

.offer-room-card:hover {
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(230, 207, 135, 0.4);
    transform: translateX(4px);
}

.offer-room-img-wrap {
    position: relative;
    width: 105px;
    height: 78px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
}

.offer-room-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.offer-room-card:hover .offer-room-img-wrap img {
    transform: scale(1.08);
}

.offer-room-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(20, 96, 82, 0.88);
    color: #E6CF87;
    font-size: 8.5px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 5px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.offer-room-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.offer-room-details .room-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.2;
    margin-bottom: 2px;
}

.offer-room-details .room-desc {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.3;
    margin-bottom: 6px;
}

.room-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.room-price-row .price-strike {
    font-size: 11px;
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.45);
}

.room-price-row .price-val {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #E6CF87;
}

.room-price-row .price-val small {
    font-size: 10px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
}

/* Hide Mobile Search Icon on PC (Desktop) */
.mobile-bottom-nav,
.btn-icon-mobile {
    display: none !important;
}

/* ===================================================
   ULTRA-PREMIUM MOBILE-ONLY DESIGN SYSTEM (max-width: 768px)
   CRITICAL: PC (DESKTOP) CSS IS 100% UNTOUCHED
   =================================================== */
@media (max-width: 768px) {



    /* 1. Mobile Header (Height 72px, Clean Layout & Scroll Transformation) */
    .site-header.luxury-floating-header {
        height: 72px !important;
        padding: 0 16px !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: transparent !important;
        box-shadow: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        border-radius: 0 !important;
    }

    .site-header.luxury-floating-header.scrolled {
        background: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
        border-bottom: 1px solid rgba(20, 96, 82, 0.1) !important;
    }

    .header-left {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .header-left .header-call-link {
        display: none !important;
    }

    .header-center {
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        margin-left: 8px !important;
    }

    .header-center .brand img {
        height: 32px !important;
        width: auto !important;
        transition: all 0.3s ease !important;
    }

    .site-header.scrolled .header-center .brand img {
        height: 26px !important;
    }

    .header-center .brand span strong {
        font-size: 16px !important;
        line-height: 1 !important;
    }

    .header-center .brand span small {
        font-size: 8px !important;
        letter-spacing: 0.18em !important;
        display: block !important;
    }

    .header-right {
        display: none !important;
    }


    .mobile-location-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        background: rgba(230, 207, 135, 0.2) !important;
        border: 1px solid rgba(230, 207, 135, 0.4) !important;
        color: #E6CF87 !important;
        font-size: 16px !important;
        cursor: pointer !important;
    }

    .site-header.scrolled .mobile-location-btn {
        background: rgba(20, 96, 82, 0.1) !important;
        border-color: rgba(20, 96, 82, 0.25) !important;
        color: #146052 !important;
    }

    .floating-actions {
        display: none !important;
    }

    /* 2. Sticky Bottom Navigation Bar */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 56px !important;
        background: #FFFFFF !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12) !important;
        z-index: 10000 !important;
        border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    }

    .mobile-bottom-nav .nav-action-btn {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        transition: all 0.2s ease !important;
    }

    .mobile-bottom-nav .nav-btn-call {
        background: #146052 !important;
        color: #FFFFFF !important;
    }

    .mobile-bottom-nav .nav-btn-whatsapp {
        background: #25D366 !important;
        color: #FFFFFF !important;
    }

    .mobile-bottom-nav .nav-btn-book {
        background: #D6B35A !important;
        color: #092A24 !important;
    }

    .mobile-bottom-nav .nav-action-btn i {
        font-size: 16px !important;
    }

    body {
        padding-bottom: 56px !important;
    }

    /* 3. Location Bottom Sheet Modal */
    .location-bottom-sheet-overlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(8px) !important;
        z-index: 12000 !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease !important;
    }

    .location-bottom-sheet-overlay.open {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .location-bottom-sheet {
        width: 100% !important;
        max-width: 500px !important;
        background: #FFFFFF !important;
        border-radius: 24px 24px 0 0 !important;
        padding: 24px 20px 32px !important;
        position: relative !important;
        transform: translateY(100%) !important;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2) !important;
    }

    .location-bottom-sheet-overlay.open .location-bottom-sheet {
        transform: translateY(0) !important;
    }

    .sheet-drag-handle {
        width: 40px !important;
        height: 5px !important;
        background: #E0E0E0 !important;
        border-radius: 3px !important;
        margin: 0 auto 18px !important;
    }

    .sheet-close-btn {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        background: #F5F5F5 !important;
        border: none !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        font-size: 20px !important;
        cursor: pointer !important;
        color: #666 !important;
    }

    .sheet-header-icon {
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        background: rgba(20, 96, 82, 0.1) !important;
        color: #146052 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 22px !important;
        margin-bottom: 12px !important;
    }

    .sheet-content h3 {
        font-family: 'Cormorant Garamond', serif !important;
        font-size: 22px !important;
        color: #146052 !important;
        margin-bottom: 6px !important;
    }

    .sheet-address {
        font-size: 13px !important;
        color: #555 !important;
        line-height: 1.4 !important;
        margin-bottom: 16px !important;
    }

    .sheet-distances {
        background: #F9F8F3 !important;
        border-radius: 12px !important;
        padding: 12px 14px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }

    .distance-item {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        font-size: 13px !important;
        color: #333 !important;
    }

    .distance-item i {
        color: #146052 !important;
        width: 16px !important;
        text-align: center !important;
    }

    .sheet-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .sheet-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 13px 18px !important;
        border-radius: 12px !important;
        text-decoration: none !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    .sheet-btn-primary {
        background: #146052 !important;
        color: #FFFFFF !important;
    }

    .sheet-btn-secondary {
        background: #F5EFE4 !important;
        color: #146052 !important;
        border: 1px solid rgba(20, 96, 82, 0.2) !important;
    }

    /* 4. Full-Screen Mobile Menu Overlay */
    .luxury-sidebar-panel {
        width: 100% !important;
        max-width: 100% !important;
        background: rgba(9, 42, 36, 0.97) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
    }

    /* 5. Hero Section (Increased height on Mobile & Transparent Single-Line Search Bar) */
    .hero.soneva-hero-section {
        min-height: 92vh !important;
        height: 92vh !important;
        padding-top: 90px !important;
    }

    .soneva-hero-content {
        padding-top: 30px !important;
    }

    .soneva-welcome-tag {
        font-size: 32px !important;
        line-height: 1.15 !important;
    }

    .soneva-hero-subtitle {
        font-size: 15px !important;
        max-width: 90% !important;
        margin-bottom: 24px !important;
    }

    /* Hide checkout date & guest select on mobile */
    .soneva-field-checkout,
    .soneva-field-guests,
    .soneva-divider {
        display: none !important;
    }

    .soneva-booking-wrapper {
        width: 100% !important;
        max-width: 360px !important;
        margin: 0 auto !important;
    }

    /* Single transparent bar with white border matching user reference */
    .soneva-booking-form {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 6px 6px 6px 16px !important;
        border-radius: 12px !important;
        background: rgba(0, 0, 0, 0.25) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.35) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
        gap: 12px !important;
    }

    .soneva-field-checkin {
        width: auto !important;
        flex: 1 !important;
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    .soneva-field-checkin .soneva-field-label {
        color: rgba(255, 255, 255, 0.75) !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        letter-spacing: 0.05em !important;
        margin-bottom: 2px !important;
        display: block !important;
        text-transform: uppercase !important;
    }

    .soneva-field-checkin .soneva-date-input {
        color: #FFFFFF !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        width: 100% !important;
        font-family: 'Inter', sans-serif !important;
    }

    .soneva-field-checkin .soneva-date-input::-webkit-calendar-picker-indicator {
        filter: invert(1) !important;
        opacity: 0.8 !important;
    }

    .btn-text-desktop {
        display: none !important;
    }

    .btn-icon-mobile {
        display: inline-block !important;
        font-size: 16px !important;
    }

    .soneva-search-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        background: #F8F6F1 !important;
        color: #146052 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        flex-shrink: 0 !important;
    }


    /* 6. Mobile Section Padding & Spacing (50px-60px) */
    .about-resort-section,
    .editorial-storytelling-section,
    .accommodations-redesign-section,
    .gallery-experience-section,
    .facilities-editorial-section,
    .section {
        padding: 52px 16px !important;
    }

    /* 7. Typography Adjustments on Mobile */
    h2,
    .about-heading,
    .story-heading,
    .gallery-heading {
        font-size: 28px !important;
        line-height: 1.25 !important;
    }

    .eyebrow,
    .about-label,
    .story-label {
        font-size: 12px !important;
        letter-spacing: 0.15em !important;
    }

    .about-text,
    .story-subheading,
    .gallery-subheading {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    /* 8. About Section Mobile (Remove White Card & Showcase Overlapping Photos Only) */
    .about-grid {
        display: flex !important;
        flex-direction: column-reverse !important;
        gap: 24px !important;
    }

    .about-right {
        justify-content: center !important;
        width: 100% !important;
    }

    .started-in-badge {
        display: none !important;
    }

    .about-image-wrapper {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 320px !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    .about-image-top-container {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 68% !important;
        height: 85% !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16) !important;
        z-index: 1 !important;
    }

    .about-image-bottom-container {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 62% !important;
        height: 70% !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22) !important;
        z-index: 2 !important;
    }

    .about-image-top-container img,
    .about-image-bottom-container img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 16px !important;
        transform: none !important;
    }


    /* 9. Facilities Section Mobile (Horizontal Touch-Swipe Slider - Single Card Per View) */
    .facilities-gallery-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 16px !important;
        padding: 0 16px 20px !important;
        margin: 0 -16px !important;
        width: calc(100% + 32px) !important;
    }

    .facilities-gallery-grid::-webkit-scrollbar {
        display: none !important;
    }

    .facilities-col,
    .facilities-col-motion {
        display: contents !important;
    }

    .facility-editorial-item {
        flex: 0 0 84% !important;
        width: 84% !important;
        max-width: 84% !important;
        scroll-snap-align: center !important;
        margin-bottom: 0 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
        background: #FFFFFF !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .facility-img-wrap {
        width: 100% !important;
        height: 240px !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .facility-img-wrap img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 16px 16px 0 0 !important;
        aspect-ratio: auto !important;
    }

    .facility-editorial-title {
        font-family: 'Cormorant Garamond', serif !important;
        font-size: 19px !important;
        font-weight: 600 !important;
        color: #146052 !important;
        padding: 14px 16px !important;
        text-align: center !important;
        margin: 0 !important;
        background: #FFFFFF !important;
    }


    /* 10. Room Showcase on Mobile */
    .acc-showcase-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .acc-nav-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .acc-nav {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
    }

    .acc-nav-item {
        padding: 10px 16px !important;
        white-space: nowrap !important;
        border-radius: 20px !important;
    }

    .acc-slider-container {
        border-radius: 16px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    }

    /* 11. Mobile Image Radius & Zoom Touch Effect */
    img {
        border-radius: 16px !important;
        transition: transform 0.3s ease !important;
    }

    img:active {
        transform: scale(1.02) !important;
    }

    /* 12. Compact Footer on Mobile */
    .site-footer {
        padding: 40px 20px 80px !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .footer-legal-links {
        flex-wrap: wrap !important;
        gap: 8px !important;
        font-size: 12px !important;
    }
}

/* About Page Hero Subtitle & Center Alignment Styling */
.about-page-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.about-hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    max-width: 1300px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.about-hero-content .eyebrow,
.about-hero-content h1 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.page-hero p.about-hero-subtitle,
.about-hero-subtitle {
    font-size: clamp(15px, 1.8vw, 18px) !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    max-width: 1300px !important;
    width: 100% !important;
    margin: 14px auto 0 !important;
    font-weight: 400 !important;
    font-family: 'Manrope', 'Inter', sans-serif !important;
    text-align: center !important;
}




/* ===================================================
   BOUTIQUE LUXURY EDITORIAL STORY LAYOUT (Aman / Six Senses Style)
   =================================================== */
.about-story-editorial {
    padding: clamp(60px, 7vw, 100px) clamp(20px, 5vw, 80px);
    background: #F8F6F1;
}

.accommodation-story-editorial .about-story-editorial-container {
    margin-bottom: 0 !important;
}

.about-story-editorial-container {
    max-width: 1100px;
    margin: 0 auto 60px;
}


.editorial-story-header {
    text-align: center;
    margin-bottom: 24px;
}

.editorial-story-header .about-story-label {
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #C45B34;
    font-weight: 700;
    display: block;
    margin-bottom: 12px;
}

.editorial-story-header .editorial-story-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(34px, 4.5vw, 54px);
    font-weight: 500;
    line-height: 1.15;
    color: #146052;
    margin: 0;
}

.editorial-divider-line {
    width: 100%;
    height: 1px;
    background: rgba(20, 96, 82, 0.18);
    margin: 32px 0;
}

.editorial-asymmetric-columns {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: clamp(32px, 6vw, 72px);
    align-items: start;
}

.editorial-lead-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(22px, 2.3vw, 28px);
    font-weight: 400;
    line-height: 1.5;
    color: #1A2B27;
    margin: 0;
}

.editorial-secondary-text {
    font-family: 'Manrope', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.85;
    color: #555555;
    margin: 0 0 16px 0;
}

.editorial-secondary-text:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .editorial-asymmetric-columns {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .editorial-lead-text {
        font-size: 20px !important;
    }

    .editorial-divider-line {
        margin: 24px 0 !important;
    }
}

/* ===================================================
   AYANA BRAND PHILOSOPHY (OUR PHILOSOPHY) SECTION
   =================================================== */
.ayana-philosophy-section {
    padding: clamp(60px, 8vw, 110px) clamp(20px, 5vw, 80px);
    background: #FAF8F5;
}

.philosophy-container {
    max-width: 1300px !important;
    margin: 0 auto;
}

.philosophy-header {
    text-align: center;
    margin-bottom: 40px;
}

.philosophy-label {
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #C45B34;
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
}

.philosophy-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(34px, 4.5vw, 54px);
    font-weight: 500;
    line-height: 1.15;
    color: #146052;
    margin: 0 0 16px 0;
}

.philosophy-gold-divider {
    width: 60px;
    height: 2px;
    background: #D6B35A;
    margin: 0 auto;
    border-radius: 2px;
}

.philosophy-hero-image-wrap {
    width: 100%;
    height: clamp(320px, 44vw, 580px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    margin-bottom: 48px;
}

.philosophy-hero-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.philosophy-hero-image-wrap:hover img {
    transform: scale(1.03);
}

.philosophy-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 32px);
    align-items: stretch;
}

.philosophy-card {
    background: #FFFFFF;
    border-radius: 18px;
    padding: 32px 28px;
    border: 1px solid rgba(200, 180, 138, 0.22);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s ease;
}

.philosophy-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 56px rgba(20, 96, 82, 0.14);
    border-color: rgba(20, 96, 82, 0.35);
}

.philosophy-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.philosophy-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(20, 96, 82, 0.08);
    color: #146052;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease;
}

.philosophy-card:hover .philosophy-card-icon {
    transform: scale(1.14) rotate(8deg);
    background: #146052;
    color: #FFFFFF;
}

.philosophy-card-tag {
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #C45B34;
    font-weight: 700;
}

.philosophy-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 600;
    color: #146052;
    margin: 0 0 12px 0;
    line-height: 1.25;
}

.philosophy-card-text {
    font-family: 'Manrope', 'Inter', sans-serif;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.75;
    color: #555555;
    margin: 0;
}


@media (max-width: 900px) {
    .philosophy-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .philosophy-card {
        padding: 24px 20px !important;
    }
}

/* ===================================================
   WHY CHOOSE AYANA EXPERIENCE SECTION STYLES
   =================================================== */
.why-choose-ayana-section {
    padding: clamp(70px, 9vw, 110px) 0 clamp(60px, 8vw, 100px);
    background: #FFFFFF !important;
}

.why-ayana-container {
    max-width: 1300px !important;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 80px);
}




.why-ayana-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 52px;
}

.why-ayana-label {
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #C45B34;
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
}

.why-ayana-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(34px, 4.5vw, 54px);
    font-weight: 500;
    line-height: 1.15;
    color: #146052;
    margin: 0 0 16px 0;
}

.why-ayana-intro {
    font-family: 'Manrope', 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #555555;
    margin: 0;
}

/* 4 Large Feature Blocks (2x2 Grid) */
.why-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(24px, 4vw, 40px);
    margin-bottom: 72px;
}

.why-feature-block {
    background: #FAF8F5;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(200, 180, 138, 0.25);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    display: flex;
    flex-direction: column;
}

.why-feature-block:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(20, 96, 82, 0.12);
    border-color: rgba(20, 96, 82, 0.3);
}

.why-feature-img-wrap {
    width: 100%;
    height: 260px;
    overflow: hidden;
    position: relative;
}

.why-feature-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.why-feature-block:hover .why-feature-img-wrap img {
    transform: scale(1.05);
}

.why-feature-content {
    padding: 28px 30px 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.why-feature-tag {
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #C45B34;
    font-weight: 700;
    margin-bottom: 8px;
    display: block;
}

.why-feature-content h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    font-weight: 600;
    color: #146052;
    margin: 0 0 12px 0;
    line-height: 1.25;
}

.why-feature-content p {
    font-family: 'Manrope', 'Inter', sans-serif;
    font-size: 14.5px;
    line-height: 1.75;
    color: #555555;
    margin: 0;
}

/* 8 Premium Highlights Grid */
.premium-features-header {
    text-align: center;
    margin-bottom: 36px;
}

.premium-features-header h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-weight: 500;
    color: #146052;
    margin: 0 0 12px 0;
}

.why-ayana-gold-line {
    width: 50px;
    height: 2px;
    background: #D6B35A;
    margin: 0 auto;
    border-radius: 2px;
}

.premium-highlights-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 64px;
}

.highlight-card {
    background: #FAF8F5;
    border-radius: 16px;
    padding: 22px 18px;
    border: 1px solid rgba(200, 180, 138, 0.22);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.highlight-card:hover {
    transform: translateY(-6px);
    border-color: rgba(20, 96, 82, 0.35);
    box-shadow: 0 16px 40px rgba(20, 96, 82, 0.12);
}

.highlight-card i {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: rgba(20, 96, 82, 0.08);
    color: #146052;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease;
}

.highlight-card:hover i {
    transform: scale(1.14) rotate(8deg);
    background: #146052;
    color: #FFFFFF;
}


.highlight-card h4 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 600;
    color: #146052;
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.highlight-card p {
    font-family: 'Manrope', 'Inter', sans-serif;
    font-size: 12.5px;
    line-height: 1.5;
    color: #666666;
    margin: 0;
}

/* Statistics Highlights Bar */
.why-stats-bar {
    background: #146052;
    border-radius: 20px;
    padding: 32px 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #FFFFFF;
    margin-bottom: 56px;
    box-shadow: 0 16px 44px rgba(20, 96, 82, 0.25);
}

.stat-item {
    text-align: center;
}

.stat-item strong {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(32px, 3.5vw, 44px);
    font-weight: 600;
    color: #E6CF87;
    display: block;
    line-height: 1;
    margin-bottom: 6px;
}

.stat-item span {
    font-family: 'Manrope', 'Inter', sans-serif;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

.stat-divider {
    width: 1px;
    height: 44px;
    background: rgba(255, 255, 255, 0.2);
}

/* Guest Promise Statement Card */
.guest-promise-card {
    text-align: center;
    background: #FAF8F5 !important;
    border-radius: 20px;
    padding: 44px 36px;
    border: 1px solid rgba(214, 179, 90, 0.3);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.05);
    margin-bottom: 0 !important;
}




.promise-eyebrow {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #C45B34;
    font-weight: 700;
    display: block;
    margin-bottom: 14px;
}

.guest-promise-card blockquote {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(22px, 2.5vw, 30px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.45;
    color: #146052;
    max-width: 900px;
    margin: 0 auto;
}

/* CTA Hero Banner */
.why-cta-banner {
    background-size: cover;
    background-position: center;
    padding: clamp(80px, 10vw, 130px) 20px;
    text-align: center;
    color: #FFFFFF;
    position: relative;
}

.why-cta-content {
    max-width: 760px;
    margin: 0 auto;
}

.why-cta-content h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 500;
    color: #FFFFFF;
    margin: 0 0 16px 0;
    line-height: 1.15;
}

.why-cta-content p {
    font-family: 'Manrope', 'Inter', sans-serif;
    font-size: clamp(16px, 2vw, 20px);
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 32px 0;
}

.why-cta-btn {
    background: #D6B35A !important;
    color: #092A24 !important;
    padding: 16px 36px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    border-radius: 30px !important;
    transition: all 0.3s ease !important;
}

.why-cta-btn:hover {
    background: #FFFFFF !important;
    color: #146052 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

/* Mobile Responsive */
@media (max-width: 990px) {
    .why-features-grid {
        grid-template-columns: 1fr !important;
    }

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

    .why-stats-bar {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 30px 20px !important;
    }

    .stat-divider {
        width: 60px !important;
        height: 1px !important;
    }
}

@media (max-width: 600px) {
    .premium-highlights-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===================================================
   NEARBY ATTRACTIONS / DESTINATION JOURNAL STYLING
   =================================================== */
.destination-journal-section {
    background: #FAF8F5 !important;
}

.destination-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    max-width: 540px !important;
    margin: 0 auto !important;
}

.destination-center .destination-label {
    font-size: 12px !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    color: #C45B34 !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    display: block !important;
}

.destination-center h2 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(30px, 3.8vw, 44px) !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    color: #146052 !important;
    margin: 0 0 14px 0 !important;
    text-align: center !important;
}

.destination-center p:not(.destination-label) {
    font-family: 'Manrope', 'Inter', sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    color: #555555 !important;
    max-width: 460px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* ===================================================
   ABOUT FINAL CTA SECTION STYLING
   =================================================== */
.about-final-cta-section {
    background: #FFFFFF !important;
    padding: clamp(70px, 8vw, 110px) 20px !important;
}

.about-final-cta-stage {
    max-width: 900px !important;
    margin: 0 auto !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.about-final-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    max-width: 780px !important;
    margin: 0 auto !important;
}

.about-final-content h2 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(32px, 4vw, 48px) !important;
    font-weight: 500 !important;
    line-height: 1.18 !important;
    color: #146052 !important;
    margin: 0 0 16px 0 !important;
    text-align: center !important;
}

.about-final-content p {
    font-family: 'Manrope', 'Inter', sans-serif !important;
    font-size: clamp(14.5px, 1.8vw, 16.5px) !important;
    line-height: 1.75 !important;
    color: #555555 !important;
    max-width: 520px !important;
    margin: 0 auto 28px !important;
    text-align: center !important;
}

.about-final-content a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #146052 !important;
    color: #FFFFFF !important;
    padding: 15px 34px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 20px rgba(20, 96, 82, 0.18) !important;
}

.about-final-content a:hover {
    background: #C45B34 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 26px rgba(196, 91, 52, 0.25) !important;
}

/* Our Values Heading Style (matching Inspired by Nature) */
.about-values-section h2,
.about-values-heading {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(34px, 4.5vw, 54px) !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    color: #146052 !important;
    text-align: center !important;
    margin-bottom: 36px !important;
}

/* ===================================================
   LUXURY CURSIVE QUOTE SECTION ABOVE FOOTER
   =================================================== */
.about-luxury-quote-section {
    padding: clamp(60px, 7vw, 90px) 20px !important;
    background: #FAF8F5 !important;
    text-align: center !important;
    border-top: 1px solid rgba(20, 96, 82, 0.12) !important;
}

.about-luxury-quote-container {
    max-width: 900px !important;
    margin: 0 auto !important;
}

.about-cursive-quote {
    font-family: 'Great Vibes', 'Alex Brush', 'Cormorant Garamond', cursive, serif !important;
    font-size: clamp(32px, 4.2vw, 50px) !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: #146052 !important;
    margin: 0 0 16px 0 !important;
    letter-spacing: 0.5px !important;
}

/* ===================================================
   DESKTOP VS MOBILE DISPLAY HELPERS
   =================================================== */
@media (min-width: 769px) {

    .mobile-only-text,
    .mobile-only-swiper {
        display: none !important;
    }
}

/* ===================================================
   MOBILE ONLY DESIGN REFINEMENTS (MAX-WIDTH: 768PX)
   =================================================== */
@media (max-width: 768px) {

    /* 1. Desktop text hide / Mobile text show */
    .desktop-only-text,
    .desktop-only-grid {
        display: none !important;
    }

    .why-choose-ayana-section {
        overflow-x: hidden !important;
    }

    .mobile-only-swiper {
        display: block !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 54px !important;
        padding-bottom: 32px !important;
    }


    .why-features-pagination {
        bottom: 0 !important;
        text-align: center !important;
    }

    .why-features-pagination .swiper-pagination-bullet {
        background: #146052 !important;
        opacity: 0.3 !important;
        transition: all 0.3s ease !important;
    }

    .why-features-pagination .swiper-pagination-bullet-active {
        background: #C45B34 !important;
        opacity: 1 !important;
        width: 22px !important;
        border-radius: 6px !important;
    }


    .mobile-only-text {
        display: block !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
        color: rgba(255, 255, 255, 0.92) !important;
        margin-top: 10px !important;
    }

    /* 1. Mobile Hero Section */
    .about-page-hero h1 {
        font-size: clamp(32px, 8.5vw, 42px) !important;
        line-height: 1.18 !important;
    }

    .about-hero-content {
        padding: 0 16px !important;
    }

    /* 2. Section White Space Rhythm (60px padding) */
    .about-story-editorial,
    .about-values-section,
    .ayana-philosophy-section,
    .why-choose-ayana-section,
    .destination-journal-section,
    .about-final-cta-section,
    .about-luxury-quote-section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* 3. Mobile Story Cards & Images */
    .about-story-image img {
        height: 200px !important;
        object-fit: cover !important;
        border-radius: 20px !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
    }

    .about-story-copy p {
        font-size: 16px !important;
        line-height: 1.65 !important;
    }

    /* 4. Philosophy Section (Mobile Overlap Cards) */
    .philosophy-hero-image-wrap {
        height: 280px !important;
        border-radius: 20px !important;
        margin-bottom: 0 !important;
    }

    .philosophy-cards-grid {
        transform: translateY(-40px) !important;
        gap: 20px !important;
        padding-bottom: 0 !important;
    }

    .philosophy-card {
        padding: 24px !important;
        border-radius: 18px !important;
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08) !important;
    }

    /* 5. Mobile Cards Styling (Luxury Breathing Space) */
    .why-feature-block,
    .highlight-card,
    .guest-promise-card {
        padding: 24px !important;
        border-radius: 18px !important;
        box-shadow: 0 10px 32px rgba(0, 0, 0, 0.06) !important;
    }

    /* 6. Why Choose Ayana Mobile Stack */
    .why-feature-img-wrap {
        height: 200px !important;
    }

    .why-feature-content h3 {
        font-size: 22px !important;
    }

    .why-feature-content p {
        font-size: 16px !important;
        line-height: 1.65 !important;
    }

    /* 7. Attractions Mobile Swiper Cards */
    .destination-mobile-swiper .destination-card {
        border-radius: 18px !important;
        overflow: hidden !important;
        background: #FFFFFF !important;
        padding: 12px !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06) !important;
    }

    .destination-mobile-swiper .destination-card img {
        height: 180px !important;
        border-radius: 14px !important;
        object-fit: cover !important;
    }

    .destination-mobile-swiper .destination-card figcaption {
        padding-top: 10px !important;
    }

    .destination-mobile-swiper .dest-name {
        font-family: 'Cormorant Garamond', serif !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        color: #146052 !important;
        display: block !important;
        margin-bottom: 4px !important;
    }

    .destination-mobile-swiper .dest-meta {
        font-family: 'Manrope', sans-serif !important;
        font-size: 13px !important;
        color: #C45B34 !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    /* 8. Mobile Typography Hierarchy */
    h2,
    .editorial-story-title,
    .philosophy-title,
    .why-ayana-title,
    .about-final-content h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    h3,
    .philosophy-card-title,
    .why-feature-content h3 {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }

    p,
    .editorial-secondary-text,
    .philosophy-card-text,
    .why-feature-content p,
    .why-ayana-intro {
        font-size: 16px !important;
        line-height: 1.65 !important;
    }

    /* 9. Mobile Touch Feedback Animation */
    .philosophy-card:active,
    .why-feature-block:active,
    .highlight-card:active,
    .destination-card:active {
        transform: scale(1.02) !important;
        transition: transform 0.2s ease !important;
    }
}

/* ===================================================
   ROOM DETAILS REDESIGN STYLING (Boutique Luxury Editorial)
   =================================================== */

.room-details-master-container {
    width: 100% !important;
    overflow: hidden !important;
}

/* Background Alternating Utility Classes */
.bg-soft-cream {
    background: #F8F6F1 !important;
}

.bg-pure-white {
    background: #FFFFFF !important;
}

.bg-olive-tint {
    background: #FAF8F5 !important;
}

/* Section Whitespace Rhythm (70px padding between sections) */
.room-sec-overview,
.room-sec-amenities,
.room-sec-experience,
.room-sec-highlights,
.room-sec-policies,
.room-sec-reviews,
.room-sec-similar {
    padding: clamp(50px, 6vw, 70px) clamp(20px, 5vw, 60px) !important;
    border-bottom: 1px solid rgba(200, 180, 138, 0.15) !important;
}

.room-details-inner {
    max-width: 1240px !important;
    margin: 0 auto !important;
}

.narrow-container {
    max-width: 900px !important;
    margin: 0 auto !important;
}

.text-center {
    text-align: center !important;
}

.mb-40 {
    margin-bottom: 40px !important;
}

/* Hero Section */
.room-details-hero-section {
    background: #F8F6F1 !important;
    padding: clamp(30px, 4vw, 50px) clamp(20px, 5vw, 60px) clamp(20px, 3vw, 40px) !important;
}

.room-nav-back-bar {
    margin-bottom: 24px !important;
}

.room-detail-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #146052 !important;
    text-decoration: none !important;
    background: #FFFFFF !important;
    padding: 8px 18px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(200, 180, 138, 0.3) !important;
    transition: all 0.3s ease !important;
}

.room-detail-back:hover {
    background: #146052 !important;
    color: #FFFFFF !important;
    transform: translateX(-3px) !important;
}

.room-hero-heading-box {
    text-align: center !important;
    margin-bottom: 32px !important;
}

.room-rating-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #FFFFFF !important;
    padding: 6px 16px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(214, 179, 90, 0.35) !important;
    margin-bottom: 14px !important;
}

.room-rating-pill .stars {
    color: #D6B35A !important;
    font-size: 13px !important;
}

.room-rating-pill .rating-val {
    font-family: 'Manrope', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #146052 !important;
}

.room-hero-heading-box h1 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(38px, 5.5vw, 58px) !important;
    /* 58px Hero Typography */
    font-weight: 500 !important;
    color: #146052 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.1 !important;
}

.room-hero-tagline {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(20px, 2.5vw, 26px) !important;
    /* 26px Subheading Typography */
    color: #C45B34 !important;
    font-style: italic !important;
    margin: 0 0 20px 0 !important;
}

.room-hero-specs-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px 20px !important;
}

.room-hero-specs-strip span {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #FFFFFF !important;
    padding: 8px 18px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(200, 180, 138, 0.25) !important;
}

.room-hero-specs-strip span i {
    color: #146052 !important;
}

/* Gallery Showcase with Auto-Sliding Swiper */
.room-gallery-section {
    margin-top: 24px !important;
}

.room-hero-gallery-swiper {
    width: 100% !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    margin-bottom: 14px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08) !important;
    position: relative !important;
}

.room-hero-gallery-swiper .main-image-wrap {
    width: 100% !important;
    height: clamp(320px, 42vw, 520px) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.room-hero-gallery-swiper .main-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.room-gallery-pagination {
    bottom: 16px !important;
    z-index: 10 !important;
}

.room-gallery-pagination .swiper-pagination-bullet {
    background: #FFFFFF !important;
    opacity: 0.5 !important;
    width: 8px !important;
    height: 8px !important;
    transition: all 0.3s ease !important;
}

.room-gallery-pagination .swiper-pagination-bullet-active {
    background: #D6B35A !important;
    opacity: 1 !important;
    width: 22px !important;
    border-radius: 6px !important;
}

.gallery-badge {
    position: absolute !important;
    bottom: 16px !important;
    right: 16px !important;
    background: rgba(20, 96, 82, 0.88) !important;
    backdrop-filter: blur(6px) !important;
    color: #FFFFFF !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    z-index: 5 !important;
}

.room-gallery-thumbnails {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 12px !important;
}


.thumb-btn {
    border: 2px solid transparent !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    height: clamp(65px, 8vw, 90px) !important;
    transition: border-color 0.3s ease, transform 0.3s ease !important;
}

.thumb-btn img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.thumb-btn:hover,
.thumb-btn.active {
    border-color: #C45B34 !important;
    transform: translateY(-2px) !important;
}

/* SECTION 1: ABOUT THIS ROOM (Flat Integrated Text) + FLOATING BOOKING CARD */
.room-content-layout-grid {
    display: grid !important;
    grid-template-columns: 1fr 350px !important;
    gap: clamp(30px, 4vw, 50px) !important;
    align-items: start !important;
}

@media (max-width: 960px) {
    .room-content-layout-grid {
        grid-template-columns: 1fr !important;
    }
}

.editorial-sublabel {
    font-size: 11px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: #C45B34 !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 10px !important;
}

.editorial-sec-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(30px, 4vw, 38px) !important;
    /* 38px Section Typography */
    font-weight: 500 !important;
    color: #146052 !important;
    margin: 0 0 20px 0 !important;
    line-height: 1.15 !important;
}

.room-left-flat-content {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

.flat-copy-text p {
    font-family: 'Manrope', sans-serif !important;
    font-size: 16px !important;
    /* 16px Body Typography */
    line-height: 1.75 !important;
    color: #444444 !important;
    margin: 0 0 16px 0 !important;
}

.flat-feature-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 24px !important;
}

.flat-feature-pills span {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #146052 !important;
    background: #FFFFFF !important;
    padding: 8px 16px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(200, 180, 138, 0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Floating Booking Card (Medium Shadow) */
.floating-booking-card {
    position: sticky !important;
    top: 100px !important;
    background: #FFFFFF !important;
    border-radius: 20px !important;
    padding: 28px 24px !important;
    border: 1px solid rgba(214, 179, 90, 0.35) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.08) !important;
    /* Medium Shadow */
}

.avail-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #2E7D32 !important;
    background: rgba(46, 125, 50, 0.08) !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    margin-bottom: 14px !important;
}

.avail-badge i {
    font-size: 8px !important;
}

.booking-price-header {
    margin-bottom: 10px !important;
}

.strike-price {
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important;
    color: #888888 !important;
    text-decoration: line-through !important;
    display: block !important;
    margin-bottom: 2px !important;
}

.main-price-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
}

.main-price-row .amount {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    color: #146052 !important;
    line-height: 1 !important;
}

.main-price-row .per-night {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13.5px !important;
    color: #666666 !important;
}

.booking-card-subtext {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #555555 !important;
    margin: 0 0 18px 0 !important;
}

.booking-card-perks {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(20, 96, 82, 0.1) !important;
}

.booking-card-perks div {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.booking-card-perks div i {
    color: #146052 !important;
    font-size: 12px !important;
}

.room-reserve-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    background: #146052 !important;
    color: #FFFFFF !important;
    padding: 14px 22px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
    box-shadow: 0 8px 22px rgba(20, 96, 82, 0.22) !important;
    margin-bottom: 16px !important;
}

.room-reserve-btn .btn-text {
    transition: transform 0.3s ease !important;
}

.room-reserve-btn .btn-home-icon {
    font-size: 15px !important;
    opacity: 0 !important;
    transform: translateX(-10px) scale(0.6) !important;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease !important;
    color: #D6B35A !important;
}

.room-reserve-btn:hover {
    background: #C45B34 !important;
    box-shadow: 0 12px 30px rgba(196, 91, 52, 0.32) !important;
    transform: translateY(-2px) !important;
}

.room-reserve-btn:hover .btn-text {
    transform: translateX(-4px) !important;
}

.room-reserve-btn:hover .btn-home-icon {
    opacity: 1 !important;
    transform: translateX(0) scale(1) !important;
}

.contact-support-mini {
    text-align: center !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 12.5px !important;
    color: #666666 !important;
}

.contact-support-mini a {
    display: block !important;
    margin-top: 4px !important;
    color: #146052 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* SECTION 2: AMENITIES (Minimal 2-Column List with Simple Dividers) */
.minimal-amenities-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 30px !important;
    margin-top: 30px !important;
}

@media (max-width: 650px) {
    .minimal-amenities-2col {
        grid-template-columns: 1fr !important;
    }
}

.amenity-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid rgba(20, 96, 82, 0.12) !important;
    /* Simple Divider */
}

.amenity-item .item-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    color: #146052 !important;
}

.amenity-item .item-left i {
    color: #C45B34 !important;
    font-size: 16px !important;
    width: 24px !important;
}

.amenity-item .item-note {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    color: #777777 !important;
}

/* SECTION 3: GUEST EXPERIENCE (Unified Merged Premium Card) */
.unified-guest-exp-card {
    background: #FFFFFF !important;
    border-radius: 20px !important;
    padding: 36px 40px !important;
    border: 1px solid rgba(200, 180, 138, 0.28) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03) !important;
    display: grid !important;
    grid-template-columns: 1fr 1px 1fr !important;
    gap: 40px !important;
    align-items: center !important;
}

@media (max-width: 768px) {
    .unified-guest-exp-card {
        grid-template-columns: 1fr !important;
        padding: 26px 20px !important;
        gap: 24px !important;
    }

    .exp-divider {
        display: none !important;
    }
}

.exp-divider {
    background: rgba(20, 96, 82, 0.12) !important;
    height: 100% !important;
    width: 1px !important;
}

.exp-col h3 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 24px !important;
    /* 22px-24px Card Heading */
    font-weight: 600 !important;
    color: #146052 !important;
    margin: 0 0 18px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.exp-col h3 i {
    color: #C45B34 !important;
}

.exp-checklist {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.exp-checklist li {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.exp-checklist li i {
    color: #146052 !important;
    font-size: 14px !important;
}

/* SECTION 4: RESORT HIGHLIGHTS (Colored Chips / Pills Only) */
.highlights-lead {
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important;
    color: #666666 !important;
    margin: 0 0 24px 0 !important;
}

.resort-chips-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
}

.resort-chip {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #146052 !important;
    background: #FFFFFF !important;
    padding: 10px 22px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(200, 180, 138, 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: transform 0.3s ease, border-color 0.3s ease !important;
}

.resort-chip i {
    color: #C45B34 !important;
}

.resort-chip:hover {
    transform: translateY(-2px) !important;
    border-color: #146052 !important;
}

/* SECTION 5: POLICIES (Minimal Horizontal Timeline / Divider List) */
.minimal-policies-row {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 16px !important;
    margin-top: 30px !important;
}

@media (max-width: 768px) {
    .minimal-policies-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.policy-item {
    border-top: 2px solid #146052 !important;
    padding-top: 14px !important;
    text-align: center !important;
}

.p-label {
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #C45B34 !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 6px !important;
}

.p-val {
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #146052 !important;
}

/* SECTION 6: GUEST REVIEWS (Light Minimal Background, Small Shadow) */
.reviews-editorial-header {
    margin-bottom: 30px !important;
}

.big-rating-score {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 52px !important;
    font-weight: 700 !important;
    color: #146052 !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
}

.reviews-editorial-header .stars {
    color: #D6B35A !important;
    font-size: 16px !important;
    margin-bottom: 6px !important;
}

.rev-summary-text {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13.5px !important;
    color: #666666 !important;
    margin: 0 !important;
}

.minimal-reviews-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
}

@media (max-width: 768px) {
    .minimal-reviews-list {
        grid-template-columns: 1fr !important;
    }
}

.review-minimal-item {
    background: #FFFFFF !important;
    border-radius: 16px !important;
    padding: 24px !important;
    border: 1px solid rgba(200, 180, 138, 0.22) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03) !important;
    /* Small Shadow */
}

.review-minimal-item .stars {
    color: #D6B35A !important;
    font-size: 13px !important;
    margin-bottom: 10px !important;
}

.review-minimal-item blockquote {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 19px !important;
    font-style: italic !important;
    color: #333333 !important;
    line-height: 1.5 !important;
    margin: 0 0 12px 0 !important;
}

.review-minimal-item cite {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    color: #C45B34 !important;
    display: block !important;
}

/* SECTION 7: SIMILAR ROOMS (Taller Images + Most Popular Badge) */
.similar-rooms-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}

@media (max-width: 860px) {
    .similar-rooms-grid {
        grid-template-columns: 1fr !important;
    }
}

.similar-card {
    background: #FFFFFF !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    border: 1px solid rgba(200, 180, 138, 0.25) !important;
    box-shadow: none !important;
    /* No Shadow */
    transition: transform 0.35s ease, border-color 0.35s ease !important;
}

.similar-card:hover {
    transform: translateY(-6px) !important;
    border-color: #146052 !important;
}

.similar-img-wrap {
    width: 100% !important;
    height: 220px !important;
    /* Taller Images (220px) */
    margin: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

.similar-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
}

.similar-card:hover .similar-img-wrap img {
    transform: scale(1.06) !important;
}

.most-popular-badge {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    background: #C45B34 !important;
    color: #FFFFFF !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

.similar-body {
    padding: 20px !important;
}

.similar-body h3 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #146052 !important;
    margin: 0 0 4px 0 !important;
}

.sim-meta {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    color: #666666 !important;
    margin: 0 0 14px 0 !important;
}

.sim-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(20, 96, 82, 0.1) !important;
}

.sim-footer strong {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 20px !important;
    color: #146052 !important;
}

.sim-footer strong span {
    font-family: 'Manrope', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #777777 !important;
}

.sim-link {
    font-family: 'Manrope', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #C45B34 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* SECTION 8: FULL-WIDTH ENDING CTA BANNER */
.room-sec-cta {
    background: linear-gradient(135deg, #146052 0%, #1A2B27 100%) !important;
    padding: clamp(60px, 8vw, 85px) 20px !important;
    /* Generous 80px Spacing */
    text-align: center !important;
    color: #FFFFFF !important;
}

.cta-banner-content h2 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(34px, 5vw, 52px) !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
    margin: 0 0 12px 0 !important;
}

.cta-banner-content p {
    font-family: 'Manrope', sans-serif !important;
    font-size: 16.5px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    margin: 0 0 28px 0 !important;
}

.cta-reserve-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #C45B34 !important;
    color: #FFFFFF !important;
    padding: 16px 40px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 24px rgba(196, 91, 52, 0.35) !important;
}

.cta-reserve-btn:hover {
    background: #D6B35A !important;
    color: #1A2B27 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(214, 179, 90, 0.4) !important;
}

/* ===================================================
   CURATED PACKAGES REDESIGN STYLING (Editorial Luxury)
   =================================================== */
.packages-page-master-container {
    background: #F8F6F1 !important;
    padding-bottom: clamp(60px, 8vw, 100px) !important;
}

.packages-hero-editorial {
    background: #F8F6F1 !important;
    padding: clamp(40px, 6vw, 70px) clamp(20px, 5vw, 60px) clamp(20px, 3vw, 40px) !important;
}

.packages-hero-inner {
    max-width: 960px !important;
    margin: 0 auto !important;
}

.packages-hero-editorial h1 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(36px, 5vw, 56px) !important;
    font-weight: 500 !important;
    color: #146052 !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.12 !important;
}

.packages-hero-lead {
    font-family: 'Manrope', sans-serif !important;
    font-size: 16.5px !important;
    color: #555555 !important;
    line-height: 1.7 !important;
    margin: 0 auto !important;
}

/* Package Listing Grid */
.packages-listing-section {
    padding: 0 clamp(20px, 5vw, 80px) clamp(50px, 6vw, 70px) !important;
}

.packages-inner-wrapper {
    max-width: 1240px !important;
    margin: 0 auto !important;
}

.packages-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(24px, 4vw, 40px) !important;
}

@media (max-width: 900px) {
    .packages-grid {
        grid-template-columns: 1fr !important;
    }

    .package-card {
        min-height: auto !important;
    }

    .package-image-deck {
        height: 280px !important;
    }
}


.package-card {
    background: #FFFFFF !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    border: 1px solid rgba(200, 180, 138, 0.28) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 680px !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.package-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 24px 54px rgba(20, 96, 82, 0.12) !important;
}

.package-card div.package-image-deck,
.package-card div.package-card-swiper,
.package-card div.swiper-wrapper,
.package-card div.swiper-slide,
.package-card div.swiper-slide-active {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.package-image-deck {
    width: 100% !important;
    height: clamp(320px, 28vw, 380px) !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.package-card-swiper {
    width: 100% !important;
    height: 100% !important;
}

.package-card-swiper .swiper-slide {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.package-card-swiper .swiper-slide img,
.package-card-swiper .swiper-slide-active img {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0 !important;
}


.package-card-pagination {
    bottom: 12px !important;
    z-index: 10 !important;
}

.package-card-pagination .swiper-pagination-bullet {
    background: #FFFFFF !important;
    opacity: 0.5 !important;
    width: 8px !important;
    height: 8px !important;
    transition: all 0.3s ease !important;
}

.package-card-pagination .swiper-pagination-bullet-active {
    background: #D6B35A !important;
    opacity: 1 !important;
    width: 20px !important;
    border-radius: 6px !important;
}

.package-duration-badge {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    background: #C45B34 !important;
    color: #FFFFFF !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    z-index: 10 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.package-body {
    padding: 28px 26px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.package-header-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
}

.package-header-wrap .package-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(24px, 2.5vw, 30px) !important;
    font-weight: 600 !important;
    color: #146052 !important;
    margin: 0 !important;
}

.package-stars {
    display: flex !important;
    gap: 4px !important;
    color: #D6B35A !important;
    font-size: 14px !important;
}

.package-price-box {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.package-price-original {
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important;
    color: #888888 !important;
    text-decoration: line-through !important;
}

.package-price-offer {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #146052 !important;
}

.package-price-unit {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    color: #666666 !important;
}

.package-short-desc {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: #555555 !important;
    margin: 0 0 20px 0 !important;
}

.package-inclusions-container {
    background: #FAF8F5 !important;
    padding: 16px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(200, 180, 138, 0.22) !important;
    margin-bottom: 24px !important;
}

.inclusions-label {
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #C45B34 !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 10px !important;
}

.package-inclusions-2col {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px 12px !important;
}

.package-inclusions-2col li {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.package-inclusions-2col li i {
    color: #146052 !important;
    font-size: 11px !important;
}

/* Actions Bar & Animated Book Now Button */
.package-actions-bar {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: auto !important;
}

.package-learn-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #146052 !important;
    text-decoration: none !important;
    padding: 12px 18px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(20, 96, 82, 0.22) !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
}

.package-learn-btn:hover {
    background: rgba(20, 96, 82, 0.08) !important;
    border-color: #146052 !important;
    color: #146052 !important;
    transform: translateX(-2px) !important;
}

.package-book-btn {
    flex-grow: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #146052 !important;
    color: #FFFFFF !important;
    padding: 13px 22px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
    box-shadow: 0 6px 18px rgba(20, 96, 82, 0.2) !important;
}

.package-book-btn .btn-text {
    transition: transform 0.3s ease !important;
}

.package-book-btn .btn-home-icon {
    font-size: 14px !important;
    opacity: 0 !important;
    transform: translateX(-10px) scale(0.6) !important;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease !important;
    color: #D6B35A !important;
}

.package-book-btn:hover {
    background: #C45B34 !important;
    box-shadow: 0 10px 26px rgba(196, 91, 52, 0.3) !important;
    transform: translateY(-2px) !important;
}

.package-book-btn:hover .btn-text {
    transform: translateX(-3px) !important;
}

.package-book-btn:hover .btn-home-icon {
    opacity: 1 !important;
    transform: translateX(0) scale(1) !important;
}

.package-reservations-note {
    max-width: 1080px !important;
    margin: clamp(40px, 5vw, 64px) auto 0 !important;
    padding: clamp(24px, 3vw, 36px) !important;
    background: #FAF8F5 !important;
    border-radius: 18px !important;
    border: 1px solid rgba(200, 180, 138, 0.3) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    text-align: center !important;
}

.package-reservations-note p {
    margin: 0 !important;
    color: #1A2B27 !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(20px, 2.2vw, 26px) !important;
    line-height: 1.5 !important;
}

.package-reservations-note a {
    color: #146052 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-decoration-color: #D6B35A !important;
    text-underline-offset: 4px !important;
}

/* ===================================================
   STORYTELLING EDITORIAL PACKAGES REDESIGN STYLING
   =================================================== */

.packages-hero-banner .about-hero-content {
    max-width: 960px !important;
    width: 100% !important;
}

/* Hero Quick Highlights */
.hero-quick-highlights {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px 24px !important;
    margin-top: 22px !important;
}

.hero-quick-highlights span {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(8px) !important;
    padding: 8px 18px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.hero-quick-highlights span i {
    color: #D6B35A !important;
}

/* Featured Hero Package */
.hero-package-section {
    padding: clamp(50px, 6vw, 80px) clamp(20px, 5vw, 60px) !important;
    background: #F8F6F1 !important;
}

.hero-package-card {
    display: grid !important;
    grid-template-columns: 1.1fr 1fr !important;
    gap: clamp(28px, 4vw, 50px) !important;
    background: #FFFFFF !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    border: 1px solid rgba(200, 180, 138, 0.3) !important;
    box-shadow: 0 16px 48px rgba(20, 96, 82, 0.08) !important;
    max-height: 560px !important;
}

@media (max-width: 900px) {
    .hero-package-card {
        grid-template-columns: 1fr !important;
        max-height: none !important;
    }
}

.hero-package-image-wrap {
    width: 100% !important;
    height: 100% !important;
    min-height: 380px !important;
    max-height: 560px !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
}

.hero-package-swiper {
    width: 100% !important;
    height: 100% !important;
    min-height: 380px !important;
    max-height: 560px !important;
    overflow: hidden !important;
}

.hero-package-swiper .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}


.hero-package-badge {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    background: #C45B34 !important;
    color: #FFFFFF !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    border-radius: 30px !important;
    z-index: 10 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
}

.hero-package-content {
    padding: clamp(28px, 4vw, 44px) clamp(24px, 3.5vw, 36px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.hero-package-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(32px, 4vw, 44px) !important;
    font-weight: 600 !important;
    color: #146052 !important;
    margin: 6px 0 14px 0 !important;
}

.hero-package-story {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(18px, 2vw, 22px) !important;
    font-style: italic !important;
    color: #333333 !important;
    line-height: 1.6 !important;
    margin: 0 0 20px 0 !important;
    border-left: 3px solid #C45B34 !important;
    padding-left: 16px !important;
}

.hero-package-meta-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 18px !important;
    margin-bottom: 22px !important;
}

.hero-package-meta-strip span {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #146052 !important;
    background: #FAF8F5 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(20, 96, 82, 0.12) !important;
}

.hero-package-highlights-box {
    background: #FAF8F5 !important;
    padding: 18px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(200, 180, 138, 0.25) !important;
    margin-bottom: 26px !important;
}

.hero-package-highlights-box .box-label {
    font-size: 11px !important;
    letter-spacing: 2px !important;
    color: #C45B34 !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 10px !important;
}

.hero-highlights-grid {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px 14px !important;
}

.hero-highlights-grid li {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.hero-highlights-grid li i {
    color: #146052 !important;
}

.hero-package-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.hero-package-price s {
    font-size: 14px !important;
    color: #888888 !important;
    display: block !important;
}

.hero-package-price strong {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 34px !important;
    color: #146052 !important;
}

.hero-package-price span {
    font-size: 13px !important;
    color: #666666 !important;
}

.hero-book-btn {
    padding: 14px 28px !important;
}

.hero-package-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.hero-details-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #FAF8F5 !important;
    color: #146052 !important;
    padding: 13px 22px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border-radius: 30px !important;
    border: 1px solid rgba(20, 96, 82, 0.25) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.hero-details-btn:hover {
    background: #146052 !important;
    color: #FFFFFF !important;
}


/* Card Story Copy & Tags */
.package-perfect-tag {
    font-family: 'Manrope', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #C45B34 !important;
    letter-spacing: 0.5px !important;
    display: block !important;
    margin-bottom: 4px !important;
}

.package-story-text {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: #444444 !important;
    margin: 0 0 16px 0 !important;
}

.package-meta-row {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.package-meta-row span {
    font-family: 'Manrope', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #146052 !important;
    background: #FAF8F5 !important;
    padding: 4px 10px !important;
    border-radius: 14px !important;
}

/* Scoped Packages Section Rhythm Classes */
.packages-page-master-container .bg-pure-white {
    background: #FFFFFF !important;
    padding: clamp(50px, 6vw, 80px) clamp(20px, 5vw, 60px) !important;
}

.packages-page-master-container .bg-soft-cream {
    background: #F8F6F1 !important;
    padding: clamp(50px, 6vw, 80px) clamp(20px, 5vw, 60px) !important;
}

.packages-page-master-container .bg-olive-tint {
    background: #FAF8F5 !important;
    padding: clamp(50px, 6vw, 80px) clamp(20px, 5vw, 60px) !important;
}


/* Sample Stay Journey Timeline */
.stay-journey-section {
    border-top: 1px solid rgba(200, 180, 138, 0.2) !important;
}

.section-title-wrap h2 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(32px, 4.5vw, 48px) !important;
    color: #146052 !important;
    margin: 4px 0 10px 0 !important;
}

.stay-timeline-container {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 20px !important;
    margin-top: clamp(32px, 4vw, 50px) !important;
    position: relative !important;
}

@media (max-width: 900px) {
    .stay-timeline-container {
        grid-template-columns: 1fr !important;
    }
}

.timeline-step {
    background: #FAF8F5 !important;
    padding: 24px 20px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(200, 180, 138, 0.25) !important;
    position: relative !important;
}

.step-num {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #C45B34 !important;
    display: block !important;
    margin-bottom: 8px !important;
}

.timeline-step h4 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #146052 !important;
    margin: 0 0 8px 0 !important;
}

.timeline-step p {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #555555 !important;
    margin: 0 !important;
}

/* Package Comparison Matrix Table */
.comparison-table-wrapper {
    overflow-x: auto !important;
    margin-top: 36px !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
}

.comparison-table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: #FFFFFF !important;
    font-family: 'Manrope', sans-serif !important;
    text-align: left !important;
}

.comparison-table th {
    background: #146052 !important;
    color: #FFFFFF !important;
    padding: 16px 20px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

.comparison-table td {
    padding: 18px 20px !important;
    border-bottom: 1px solid rgba(200, 180, 138, 0.2) !important;
    font-size: 14px !important;
    color: #333333 !important;
}

.comparison-table .check-yes {
    color: #146052 !important;
    margin-right: 6px !important;
}

.table-book-link {
    background: #C45B34 !important;
    color: #FFFFFF !important;
    padding: 8px 18px !important;
    border-radius: 20px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: background 0.3s ease !important;
}

.table-book-link:hover {
    background: #146052 !important;
}

/* Testimonials Grid */
.testimonials-rating-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #FAF8F5 !important;
    padding: 8px 20px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(200, 180, 138, 0.3) !important;
    margin-bottom: 14px !important;
}

.testimonials-rating-badge .stars {
    color: #D6B35A !important;
}

.testimonials-rating-badge .rating-text {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #146052 !important;
}

.testimonials-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px !important;
    margin-top: 36px !important;
    text-align: left !important;
}

@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr !important;
    }
}

.testimonial-card {
    background: #FAF8F5 !important;
    padding: 28px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(200, 180, 138, 0.25) !important;
}

.testimonial-card p {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 20px !important;
    font-style: italic !important;
    color: #1A2B27 !important;
    line-height: 1.6 !important;
    margin: 0 0 14px 0 !important;
}

.testimonial-card cite {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #C45B34 !important;
    font-style: normal !important;
}

/* Reduced Height Overlay Banner */
.packages-quote-overlay-banner {
    position: relative !important;
    height: clamp(260px, 32vw, 360px) !important;
    /* Reduced height by 50% */
    background-size: cover !important;
    background-position: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.quote-overlay-dark {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(20, 43, 39, 0.68) !important;
}

.quote-content-box {
    position: relative !important;
    z-index: 5 !important;
    max-width: 800px !important;
    padding: 20px !important;
}

.quote-content-box blockquote {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(24px, 3.5vw, 38px) !important;
    font-style: italic !important;
    color: #FFFFFF !important;
    line-height: 1.4 !important;
    margin: 0 0 12px 0 !important;
}

.quote-author {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    letter-spacing: 2px !important;
    color: #D6B35A !important;
    display: block !important;
    margin-bottom: 20px !important;
}

.quote-cta-btn {
    display: inline-block !important;
    background: #C45B34 !important;
    color: #FFFFFF !important;
    padding: 12px 28px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    transition: background 0.3s ease !important;
}

.quote-cta-btn:hover {
    background: #D6B35A !important;
    color: #1A2B27 !important;
}

/* FAQ Icon styling */
.faq-icon {
    color: #146052 !important;
    margin-right: 8px !important;
}

/* Ending CTA Banner */
.packages-final-cta-banner {
    background: linear-gradient(135deg, #146052 0%, #1A2B27 100%) !important;
    padding: clamp(60px, 8vw, 85px) 20px !important;
}

.final-cta-inner h2 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(36px, 5vw, 54px) !important;
    color: #FFFFFF !important;
    margin: 0 0 12px 0 !important;
}

.final-cta-inner p {
    font-family: 'Manrope', sans-serif !important;
    font-size: 16.5px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 0 28px 0 !important;
}

.final-reserve-btn {
    display: inline-block !important;
    background: #C45B34 !important;
    color: #FFFFFF !important;
    padding: 16px 40px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(196, 91, 52, 0.35) !important;
    transition: all 0.3s ease !important;
}

.final-reserve-btn:hover {
    background: #D6B35A !important;
    color: #1A2B27 !important;
    transform: translateY(-2px) !important;
}


.package-faq-section {
    max-width: 1080px !important;
    margin: clamp(48px, 6vw, 80px) auto 0 !important;
    padding: clamp(40px, 5vw, 60px) clamp(20px, 4vw, 40px) !important;
    background: #F8F6F1 !important;
    border-radius: 20px !important;
    border: 1px solid rgba(200, 180, 138, 0.25) !important;
}

/* ===================================================
   EVENTS & CELEBRATIONS PAGE STYLING
   =================================================== */

.events-hero-banner .about-hero-content {
    max-width: 960px !important;
    margin: 0 auto !important;
}

.events-starting-price-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(214, 179, 90, 0.22) !important;
    backdrop-filter: blur(8px) !important;
    color: #FFFFFF !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important;
    padding: 8px 22px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(214, 179, 90, 0.45) !important;
    margin: 16px 0 20px 0 !important;
}

.events-starting-price-pill i {
    color: #D6B35A !important;
}

.events-starting-price-pill strong {
    color: #D6B35A !important;
    font-weight: 700 !important;
}

.events-hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    margin-top: 26px !important;
}

.events-plan-btn {
    background: #C45B34 !important;
    color: #FFFFFF !important;
    padding: 14px 32px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(196, 91, 52, 0.35) !important;
    transition: all 0.3s ease !important;
}

.events-plan-btn:hover {
    background: #D6B35A !important;
    color: #1A2B27 !important;
    transform: translateY(-2px) !important;
}

.events-contact-btn {
    background: rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(8px) !important;
    color: #FFFFFF !important;
    padding: 14px 28px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 30px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.events-contact-btn:hover {
    background: #FFFFFF !important;
    color: #146052 !important;
}

.events-master-container {
    background: #F8F6F1 !important;
}

.events-inner-container {
    max-width: 1240px !important;
    margin: 0 auto !important;
}

/* Editorial Intro Section */
.events-intro-section {
    padding: clamp(50px, 6vw, 80px) clamp(20px, 5vw, 60px) !important;
}

.events-editorial-grid {
    display: grid !important;
    grid-template-columns: 1.2fr 1fr !important;
    gap: clamp(32px, 5vw, 60px) !important;
    align-items: center !important;
}

@media (max-width: 900px) {
    .events-editorial-grid {
        grid-template-columns: 1fr !important;
    }
}

.editorial-left-copy h2 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(32px, 4.5vw, 48px) !important;
    font-weight: 500 !important;
    color: #146052 !important;
    margin: 4px 0 16px 0 !important;
}

.intro-lead {
    font-family: 'Manrope', sans-serif !important;
    font-size: 16.5px !important;
    line-height: 1.7 !important;
    color: #333333 !important;
    font-weight: 600 !important;
    margin-bottom: 14px !important;
}

.intro-body {
    font-family: 'Manrope', sans-serif !important;
    font-size: 15.5px !important;
    line-height: 1.7 !important;
    color: #555555 !important;
}

.editorial-right-highlights {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.highlight-mini-card {
    background: #FFFFFF !important;
    padding: 20px 24px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(200, 180, 138, 0.28) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
}

.highlight-mini-card i {
    font-size: 22px !important;
    color: #C45B34 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.highlight-mini-card h4 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #146052 !important;
    margin: 0 0 6px 0 !important;
}

.highlight-mini-card p {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #555555 !important;
    margin: 0 !important;
}

/* Events We Host Alternating Cards */
.events-host-section {
    padding: clamp(50px, 6vw, 85px) clamp(20px, 5vw, 60px) !important;
}

.events-alternating-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(32px, 5vw, 56px) !important;
    margin-top: clamp(36px, 4vw, 50px) !important;
}

.event-story-card {
    display: grid !important;
    grid-template-columns: 1fr 1.1fr !important;
    gap: clamp(28px, 4vw, 50px) !important;
    align-items: center !important;
    background: #FAF8F5 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    border: 1px solid rgba(200, 180, 138, 0.28) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.05) !important;
    padding: clamp(24px, 3.5vw, 36px) !important;
}

.event-story-card.reverse-card {
    grid-template-columns: 1.1fr 1fr !important;
}

.event-story-card.reverse-card .event-image-wrap {
    order: 2 !important;
}

.event-story-card.reverse-card .event-content-wrap {
    order: 1 !important;
}

@media (max-width: 900px) {

    .event-story-card,
    .event-story-card.reverse-card {
        grid-template-columns: 1fr !important;
    }

    .event-story-card.reverse-card .event-image-wrap,
    .event-story-card.reverse-card .event-content-wrap {
        order: initial !important;
    }
}

.event-image-wrap {
    position: relative !important;
    width: 100% !important;
    height: clamp(280px, 32vw, 420px) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    margin: 0 !important;
}

.event-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.45s ease !important;
}

.event-story-card:hover .event-image-wrap img {
    transform: scale(1.04) !important;
}

.event-badge {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    background: #C45B34 !important;
    color: #FFFFFF !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
}

.event-icon-label {
    font-family: 'Manrope', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #C45B34 !important;
    letter-spacing: 1px !important;
    display: block !important;
    margin-bottom: 6px !important;
}

.event-content-wrap h3 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(28px, 3.5vw, 40px) !important;
    font-weight: 600 !important;
    color: #146052 !important;
    margin: 0 0 12px 0 !important;
}

.event-desc-text {
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #555555 !important;
    margin: 0 0 20px 0 !important;
}

.event-includes-box {
    background: #FFFFFF !important;
    padding: 16px 20px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(200, 180, 138, 0.22) !important;
    margin-bottom: 22px !important;
}

.event-includes-box .box-tag {
    font-size: 11px !important;
    letter-spacing: 2px !important;
    color: #C45B34 !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 10px !important;
}

.event-includes-grid {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px 14px !important;
}

.event-includes-grid li {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.event-includes-grid li i {
    color: #146052 !important;
    font-size: 11px !important;
}

.event-card-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #146052 !important;
    color: #FFFFFF !important;
    padding: 12px 24px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    transition: background 0.3s ease !important;
}

.event-card-btn:hover {
    background: #C45B34 !important;
    color: #FFFFFF !important;
}

/* Why Choose Ayana for Events Grid */
.why-choose-events-section {
    padding: clamp(50px, 6vw, 80px) clamp(20px, 5vw, 60px) !important;
}

.why-events-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: clamp(20px, 3vw, 32px) !important;
    margin-top: clamp(32px, 4vw, 48px) !important;
}

@media (max-width: 900px) {
    .why-events-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .why-events-grid {
        grid-template-columns: 1fr !important;
    }
}

.why-event-card {
    background: #FFFFFF !important;
    padding: 28px 24px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(200, 180, 138, 0.25) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.3s ease !important;
}

.why-event-card:hover {
    transform: translateY(-5px) !important;
}

.why-event-card i {
    font-size: 26px !important;
    color: #146052 !important;
    margin-bottom: 12px !important;
    display: block !important;
}

.why-event-card h4 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #146052 !important;
    margin: 0 0 8px 0 !important;
}

.why-event-card p {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #555555 !important;
    margin: 0 !important;
}

/* Event Services Chips */
.event-services-section {
    padding: clamp(50px, 6vw, 80px) clamp(20px, 5vw, 60px) !important;
}

.event-services-chips-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px 18px !important;
    margin-top: clamp(28px, 4vw, 44px) !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.service-chip {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #146052 !important;
    background: #FAF8F5 !important;
    padding: 10px 22px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(20, 96, 82, 0.16) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.service-chip i {
    color: #C45B34 !important;
}

/* Event Gallery Showcase */
.event-gallery-section {
    padding: clamp(50px, 6vw, 80px) clamp(20px, 5vw, 60px) !important;
}

.event-gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    margin-top: clamp(32px, 4vw, 48px) !important;
}

@media (max-width: 900px) {
    .event-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.gallery-item {
    position: relative !important;
    height: 240px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    margin: 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

.gallery-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease !important;
}

.gallery-item:hover img {
    transform: scale(1.06) !important;
}

.gallery-item figcaption {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 12px 16px !important;
    background: linear-gradient(0deg, rgba(20, 43, 39, 0.85) 0%, transparent 100%) !important;
    color: #FFFFFF !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* Events Testimonials & FAQ */
.events-testimonials-section,
.events-faq-section {
    padding: clamp(50px, 6vw, 80px) clamp(20px, 5vw, 60px) !important;
}

/* Interactive Event Enquiry Form */
.event-enquiry-section {
    padding: clamp(50px, 6vw, 85px) clamp(20px, 5vw, 60px) !important;
}

.enquiry-card-wrapper {
    max-width: 920px !important;
    margin: 0 auto !important;
    background: #FAF8F5 !important;
    padding: clamp(32px, 5vw, 54px) clamp(24px, 4vw, 48px) !important;
    border-radius: 28px !important;
    border: 1px solid rgba(200, 180, 138, 0.3) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.05) !important;
}

.enquiry-header h2 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(32px, 4vw, 44px) !important;
    color: #146052 !important;
    margin: 4px 0 8px 0 !important;
}

.enquiry-header p {
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important;
    color: #555555 !important;
    margin-bottom: 28px !important;
}

.form-grid-2col {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px 24px !important;
}

@media (max-width: 768px) {
    .form-grid-2col {
        grid-template-columns: 1fr !important;
    }
}

.form-group.full-width {
    grid-column: 1 / -1 !important;
}

.form-group label {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #333333 !important;
    display: block !important;
    margin-bottom: 6px !important;
}

.form-group label .req {
    color: #C45B34 !important;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(200, 180, 138, 0.35) !important;
    background: #FFFFFF !important;
    color: #333333 !important;
    outline: none !important;
    transition: border-color 0.3s ease !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #146052 !important;
    box-shadow: 0 0 0 3px rgba(20, 96, 82, 0.1) !important;
}

.submit-event-btn {
    background: #C45B34 !important;
    color: #FFFFFF !important;
    padding: 14px 38px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 30px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 24px rgba(196, 91, 52, 0.3) !important;
}

.submit-event-btn:hover {
    background: #146052 !important;
    transform: translateY(-2px) !important;
}

.or-call-text {
    display: block !important;
    margin-top: 14px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    color: #666666 !important;
}

.or-call-text a {
    color: #146052 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

.enquiry-success-alert {
    background: rgba(20, 96, 82, 0.08) !important;
    border: 1px solid #146052 !important;
    border-radius: 18px !important;
    padding: 30px !important;
    text-align: center !important;
}

.enquiry-success-alert i {
    font-size: 38px !important;
    color: #146052 !important;
    margin-bottom: 12px !important;
}

.enquiry-success-alert h3 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 28px !important;
    color: #146052 !important;
    margin: 0 0 8px 0 !important;
}

.enquiry-success-alert p {
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important;
    color: #333333 !important;
    margin: 0 !important;
}

/* Ending Events Final CTA Banner */
.events-final-cta-banner {
    background: linear-gradient(135deg, #146052 0%, #1A2B27 100%) !important;
    padding: clamp(60px, 8vw, 85px) 20px !important;
}

.events-final-cta-banner h2 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(36px, 5vw, 54px) !important;
    color: #FFFFFF !important;
    margin: 0 0 12px 0 !important;
}

.events-final-cta-banner p {
    font-family: 'Manrope', sans-serif !important;
    font-size: 16.5px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    max-width: 800px !important;
    margin: 0 auto 28px auto !important;
}

.cta-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
}

.final-plan-btn {
    background: #C45B34 !important;
    color: #FFFFFF !important;
    padding: 15px 36px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(196, 91, 52, 0.35) !important;
    transition: all 0.3s ease !important;
}

.final-plan-btn:hover {
    background: #D6B35A !important;
    color: #1A2B27 !important;
    transform: translateY(-2px) !important;
}

.final-call-btn {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #FFFFFF !important;
    padding: 15px 30px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 30px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.final-call-btn:hover {
    background: #FFFFFF !important;
    color: #146052 !important;
}

/* ===================================================
   PINNED CINEMATIC SIGNATURE MOMENTS (APPLE / AMAN STYLE)
   =================================================== */
.signature-moments-pinned-section {
    background: #FAF8F5 !important;
    position: relative !important;
    width: 100% !important;
    height: 380vh !important;
}

.signature-moments-sticky-container {
    max-width: 1280px !important;
    margin: 0 auto !important;
    height: 100vh !important;
    position: sticky !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: clamp(30px, 5vw, 60px) !important;
    padding: 0 clamp(20px, 5vw, 60px) !important;
    z-index: 10 !important;
}

.signature-left-panel {
    width: 38% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.signature-heading {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(34px, 4.5vw, 50px) !important;
    font-weight: 500 !important;
    color: #146052 !important;
    margin: 6px 0 12px 0 !important;
    line-height: 1.12 !important;
}

.signature-lead {
    font-family: 'Manrope', sans-serif !important;
    font-size: 15.5px !important;
    line-height: 1.65 !important;
    color: #555555 !important;
    margin-bottom: 24px !important;
}

.signature-scroll-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    color: #C45B34 !important;
    background: rgba(196, 91, 52, 0.08) !important;
    border: 1px solid rgba(196, 91, 52, 0.2) !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    margin-bottom: 20px !important;
    transition: opacity 0.4s ease, transform 0.4s ease !important;
    width: fit-content !important;
}

.signature-scroll-pill.hidden {
    opacity: 0 !important;
    transform: translateY(-8px) !important;
    pointer-events: none !important;
}

.signature-scroll-pill .pill-arrow {
    font-size: 13px !important;
    animation: bounceDown 1.8s infinite !important;
}

@keyframes bounceDown {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(4px);
    }
}

.signature-progress-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(200, 180, 138, 0.3) !important;
}

.signature-counter {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #C45B34 !important;
}

.signature-dots-strip {
    display: flex !important;
    gap: 8px !important;
}

.signature-dots-strip .dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(20, 96, 82, 0.25) !important;
    transition: all 0.3s ease !important;
}

.signature-dots-strip .dot.active {
    width: 24px !important;
    border-radius: 6px !important;
    background: #C45B34 !important;
}

/* Editorial Composition (No card box) */
.signature-editorial-content {
    transition: opacity 0.4s ease, transform 0.4s ease !important;
}

.editorial-step-tag {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #D6B35A !important;
    display: block !important;
    margin-bottom: 4px !important;
}

.signature-active-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(28px, 3.2vw, 38px) !important;
    font-weight: 600 !important;
    color: #146052 !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.15 !important;
}

.signature-active-subtitle {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(18px, 2vw, 22px) !important;
    font-style: italic !important;
    color: #C45B34 !important;
    margin: 0 0 14px 0 !important;
}

.signature-active-desc {
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #444444 !important;
    margin: 0 0 20px 0 !important;
    max-width: 440px !important;
}

.signature-active-features {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
}

.sig-feature-chip {
    font-family: 'Manrope', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: rgba(20, 96, 82, 0.07) !important;
    color: #146052 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(20, 96, 82, 0.15) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.sig-feature-chip i {
    color: #C45B34 !important;
    font-size: 11px !important;
}

/* Right Panel Showcase (60% Width) */
.signature-right-panel {
    width: 62% !important;
    height: clamp(420px, 65vh, 580px) !important;
    position: relative !important;
}

.signature-showcase-viewport {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 24px 60px rgba(20, 96, 82, 0.14) !important;
    border: 1px solid rgba(200, 180, 138, 0.3) !important;
}

/* Scale & Fade Transitions: opacity: 0, scale: 1.04 -> opacity: 1, scale: 1 */
.signature-slide-layer {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0 !important;
    transform: scale(1.04) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.signature-slide-layer.active {
    opacity: 1 !important;
    transform: scale(1) !important;
    z-index: 5 !important;
    pointer-events: auto !important;
}

.signature-image-wrap {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    margin: 0 !important;
}

.signature-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Editorial Bridge Banner After Pinned Section */
.signature-moments-bridge-banner {
    padding: clamp(60px, 8vw, 100px) clamp(20px, 5vw, 60px) !important;
    background: #F8F6F1 !important;
    border-top: 1px solid rgba(200, 180, 138, 0.25) !important;
    border-bottom: 1px solid rgba(200, 180, 138, 0.25) !important;
}

.bridge-banner-container {
    max-width: 860px !important;
    margin: 0 auto !important;
}

.signature-bridge-quote {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(26px, 3.5vw, 38px) !important;
    font-weight: 500 !important;
    font-style: italic !important;
    line-height: 1.35 !important;
    color: #146052 !important;
    margin: 16px 0 24px 0 !important;
    border: none !important;
    padding: 0 !important;
}

.quote-decorative-line {
    width: 60px !important;
    height: 2px !important;
    background: #D6B35A !important;
    margin: 0 auto !important;
}


/* Ensure facilities page sections remain fully visible */
.facilities-page-master-container,
.facilities-page-master-container>section,
.signature-moments-pinned-section,
.signature-moments-sticky-container {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Mobile Responsive Scroll-Driven Sticky Pinned Experience (Max-Width: 768px) */
@media (max-width: 991px) {
    .signature-moments-pinned-section {
        height: 350vh !important;
        position: relative !important;
        background: #FAF7F2 !important;
    }

    .signature-moments-sticky-container {
        position: sticky !important;
        top: 60px !important;
        height: calc(100vh - 70px) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 10px 14px 16px !important;
        z-index: 10 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Top Fixed Image Container */
    .signature-right-panel {
        order: 1 !important;
        width: 100% !important;
        height: 40vh !important;
        min-height: 220px !important;
        max-height: 300px !important;
        flex-shrink: 0 !important;
        position: relative !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        box-shadow: 0 10px 30px rgba(11, 58, 38, 0.12) !important;
        border: 1px solid rgba(11, 58, 38, 0.08) !important;
    }

    .signature-showcase-viewport {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        box-shadow: none !important;
        border: none !important;
    }

    .signature-slide-layer {
        position: absolute !important;
        inset: 0 !important;
        opacity: 0 !important;
        transform: scale(1.04) !important;
        z-index: 1 !important;
        pointer-events: none !important;
        transition: opacity 0.5s ease, transform 0.5s ease !important;
    }

    .signature-slide-layer.active {
        opacity: 1 !important;
        transform: scale(1) !important;
        z-index: 5 !important;
        pointer-events: auto !important;
    }

    .signature-image-wrap {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        margin: 0 !important;
    }

    .signature-image-wrap img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 20px !important;
    }

    /* Bottom Pinned Content Card */
    .signature-left-panel {
        order: 2 !important;
        width: 100% !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        background: #FFFFFF !important;
        border-radius: 20px !important;
        padding: 16px 18px !important;
        box-shadow: 0 10px 30px rgba(11, 58, 38, 0.08) !important;
        border: 1px solid rgba(11, 58, 38, 0.08) !important;
        overflow: hidden !important;
    }

    .signature-left-panel .signature-heading,
    .signature-left-panel .signature-lead,
    .signature-left-panel .signature-scroll-pill {
        display: none !important;
    }

    .signature-left-panel .editorial-sublabel {
        display: block !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        color: #D4AF37 !important;
        letter-spacing: 1px !important;
        margin-bottom: 2px !important;
        text-transform: uppercase !important;
    }

    .signature-progress-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 6px !important;
        padding-bottom: 6px !important;
        border-bottom: 1px solid #FAF7F2 !important;
    }

    .signature-counter {
        font-size: 20px !important;
        font-weight: 800 !important;
        color: #D4AF37 !important;
    }

    .signature-dots-strip {
        display: flex !important;
        gap: 6px !important;
    }

    .signature-dots-strip .dot {
        width: 6px !important;
        height: 6px !important;
        border-radius: 50% !important;
        background: rgba(11, 58, 38, 0.2) !important;
        transition: all 0.3s ease !important;
    }

    .signature-dots-strip .dot.active {
        width: 20px !important;
        border-radius: 4px !important;
        background: #D4AF37 !important;
    }

    .editorial-step-tag {
        font-family: var(--font-heading, serif) !important;
        font-size: 22px !important;
        font-weight: 800 !important;
        color: #D4AF37 !important;
        margin-bottom: 2px !important;
        display: inline-block !important;
    }

    .signature-active-title {
        font-family: var(--font-heading, serif) !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        color: #0B3A26 !important;
        margin: 0 0 2px 0 !important;
    }

    .signature-active-subtitle {
        font-size: 12.5px !important;
        font-style: italic !important;
        color: #777777 !important;
        margin: 0 0 6px 0 !important;
    }

    .signature-active-desc {
        font-size: 13px !important;
        line-height: 1.45 !important;
        color: #555555 !important;
        margin: 0 0 10px 0 !important;
    }

    .signature-active-features {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .sig-feature-chip {
        font-size: 11px !important;
        font-weight: 600 !important;
        background: #FAF7F2 !important;
        color: #0B3A26 !important;
        padding: 4px 10px !important;
        border-radius: 10px !important;
        border: 1px solid rgba(11, 58, 38, 0.1) !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    /* Mobile Events Horizontal Carousel */
    .mobile-events-carousel-wrap {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding: 24px 16px !important;
        background: #FFFFFF !important;
    }

    .mobile-events-swiper {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-bottom: 36px !important;
        overflow: hidden !important;
    }

    .mobile-events-swiper .swiper-wrapper {
        box-sizing: border-box !important;
    }

    .mobile-events-swiper .swiper-slide,
    .mobile-event-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        background: #FFFFFF !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        box-shadow: 0 10px 30px rgba(11, 58, 38, 0.08) !important;
        border: 1px solid rgba(11, 58, 38, 0.08) !important;
    }

    .mobile-event-img-wrap {
        position: relative !important;
        height: 230px !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .mobile-event-img-wrap img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 20px 20px 0 0 !important;
    }

    .mobile-event-num {
        position: absolute !important;
        top: 14px !important;
        left: 14px !important;
        background: rgba(11, 58, 38, 0.92) !important;
        color: #D4AF37 !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        padding: 4px 12px !important;
        border-radius: 20px !important;
        backdrop-filter: blur(4px) !important;
    }

    .mobile-event-body {
        padding: 20px 18px !important;
    }

    .mobile-event-body h3 {
        font-family: var(--font-heading, serif) !important;
        color: #0B3A26 !important;
        font-size: 22px !important;
        margin: 0 0 8px 0 !important;
    }

    .mobile-event-body p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: #555555 !important;
        margin: 0 0 16px 0 !important;
    }

    .mobile-event-cta {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        background: #0B3A26 !important;
        color: #FFFFFF !important;
        font-weight: 700 !important;
        font-size: 13.5px !important;
        padding: 10px 18px !important;
        border-radius: 12px !important;
        text-decoration: none !important;
        transition: background 0.2s !important;
    }

    .mobile-events-pagination .swiper-pagination-bullet {
        background: #0B3A26 !important;
        opacity: 0.3 !important;
        width: 8px !important;
        height: 8px !important;
        transition: all 0.3s ease !important;
    }

    .mobile-events-pagination .swiper-pagination-bullet-active {
        opacity: 1 !important;
        background: #D4AF37 !important;
        width: 24px !important;
        border-radius: 4px !important;
    }

    /* Mobile Why Choose Ayana 2-Column Card Grid */
    .why-choose-events-section {
        padding: 36px 16px !important;
        background: #FAF7F2 !important;
    }

    .why-events-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .why-event-card {
        background: #FFFFFF !important;
        border-radius: 16px !important;
        padding: 16px 14px !important;
        border: 1px solid rgba(11, 58, 38, 0.08) !important;
        box-shadow: 0 4px 16px rgba(11, 58, 38, 0.04) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        text-align: left !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .why-event-card i {
        font-size: 22px !important;
        color: #D4AF37 !important;
        margin-bottom: 10px !important;
        display: inline-block !important;
    }

    .why-event-card h4 {
        font-family: var(--font-heading, serif) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #0B3A26 !important;
        line-height: 1.25 !important;
        margin: 0 0 6px 0 !important;
    }

    .why-event-card p {
        font-size: 12px !important;
        line-height: 1.45 !important;
        color: #666666 !important;
        margin: 0 !important;
    }

    /* Mobile Categorized Event Services Light Editorial Tiles */
    .mobile-services-categorized-deck {
        text-align: left !important;
        margin-top: 24px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .mobile-service-category-group {
        margin-bottom: 24px !important;
    }

    .mobile-service-category-title {
        font-family: var(--font-heading, serif) !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        color: #0B3A26 !important;
        margin: 0 0 12px 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        border-bottom: 1px solid #FAF7F2 !important;
        padding-bottom: 6px !important;
    }

    .mobile-service-category-title i {
        color: #D4AF37 !important;
        font-size: 13px !important;
    }

    .mobile-services-grid-2col {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .mobile-service-tile {
        background: #FAF7F2 !important;
        border-radius: 14px !important;
        padding: 14px 12px !important;
        border: 1px solid rgba(212, 175, 55, 0.2) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .service-tile-icon {
        color: #D4AF37 !important;
        font-size: 14px !important;
        margin-bottom: 6px !important;
        display: block !important;
    }

    .mobile-service-tile h5 {
        font-family: var(--font-heading, serif) !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #0B3A26 !important;
        line-height: 1.25 !important;
        margin: 0 0 4px 0 !important;
    }

    .mobile-service-tile p {
        font-size: 11.5px !important;
        line-height: 1.4 !important;
        color: #666666 !important;
        margin: 0 !important;
    }

    /* Mobile Host Testimonials Single Card Swiper */
    .mobile-host-testimonials-swiper {
        padding-bottom: 36px !important;
        overflow: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .mobile-host-testimonials-pagination .swiper-pagination-bullet {
        background: #0B3A26 !important;
        opacity: 0.3 !important;
        width: 8px !important;
        height: 8px !important;
        transition: all 0.3s ease !important;
    }

    .mobile-host-testimonials-pagination .swiper-pagination-bullet-active {
        opacity: 1 !important;
        background: #D4AF37 !important;
        width: 24px !important;
        border-radius: 4px !important;
    }

    /* Mobile Events Compact FAQ Accordion */
    .events-compact-faq-list {
        background: #FFFFFF !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        border: 1px solid rgba(11, 58, 38, 0.08) !important;
        box-shadow: 0 6px 20px rgba(11, 58, 38, 0.04) !important;
    }

    .events-compact-faq-list .package-faq-item {
        border-bottom: 1px solid #FAF7F2 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .events-compact-faq-list .package-faq-item:last-child {
        border-bottom: none !important;
    }

    .events-compact-faq-list .package-faq-item summary {
        min-height: 52px !important;
        padding: 14px 16px !important;
        font-size: 14.5px !important;
        font-weight: 600 !important;
        color: #0B3A26 !important;
    }

    /* Mobile Form Subsections & Secondary Call Link */
    .form-subsection {
        background: #FAF7F2 !important;
        border-radius: 16px !important;
        padding: 18px 16px !important;
        margin-bottom: 18px !important;
        border: 1px solid rgba(11, 58, 38, 0.06) !important;
    }

    .form-subsection-title {
        font-family: var(--font-heading, serif) !important;
        font-size: 13.5px !important;
        font-weight: 800 !important;
        color: #D4AF37 !important;
        letter-spacing: 0.8px !important;
        margin: 0 0 14px 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        text-transform: uppercase !important;
    }

    .secondary-phone-call-wrap {
        margin-top: 14px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .secondary-phone-label {
        font-size: 12px !important;
        color: #777777 !important;
    }

    .secondary-call-link {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: #0B3A26 !important;
        text-decoration: underline !important;
        transition: color 0.2s !important;
    }

    .secondary-call-link:hover {
        color: #D4AF37 !important;
    }

    /* Hide Final CTA Banner on Mobile */
    .events-final-cta-banner {
        display: none !important;
    }

    /* Mobile Dining 3-Item Editorial Story Deck */
    .mobile-dining-story-deck {
        padding: 28px 18px !important;
        background: #FAF7F2 !important;
        border-radius: 20px !important;
        margin: 20px 16px !important;
        border: 1px solid rgba(11, 58, 38, 0.08) !important;
        box-shadow: 0 6px 20px rgba(11, 58, 38, 0.04) !important;
    }

    .mobile-story-item {
        padding: 10px 0 !important;
    }

    .mobile-story-num {
        font-family: var(--font-heading, serif) !important;
        font-size: 22px !important;
        font-weight: 800 !important;
        color: #D4AF37 !important;
        display: block !important;
        margin-bottom: 4px !important;
    }

    .mobile-story-item h3 {
        font-family: var(--font-heading, serif) !important;
        font-size: 16.5px !important;
        font-weight: 700 !important;
        color: #0B3A26 !important;
        letter-spacing: 1px !important;
        margin: 0 0 6px 0 !important;
        text-transform: uppercase !important;
    }

    .mobile-story-item p {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        color: #555555 !important;
        margin: 0 !important;
    }

    .mobile-story-divider {
        height: 1px !important;
        background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.4), transparent) !important;
        margin: 16px auto !important;
        width: 60% !important;
    }

    /* Mobile Dining Ways Auto-Sliding Swiper */
    .mobile-dining-ways-swiper {
        padding-bottom: 36px !important;
        overflow: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .mobile-dining-way-slide {
        background: #FFFFFF !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        box-shadow: 0 10px 30px rgba(11, 58, 38, 0.08) !important;
        border: 1px solid rgba(11, 58, 38, 0.08) !important;
    }

    .mobile-way-img-wrap {
        position: relative !important;
        height: 220px !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .mobile-way-img-wrap img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 20px 20px 0 0 !important;
    }

    .mobile-way-tag {
        position: absolute !important;
        top: 14px !important;
        left: 14px !important;
        background: rgba(11, 58, 38, 0.9) !important;
        color: #D4AF37 !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
        padding: 4px 12px !important;
        border-radius: 20px !important;
        backdrop-filter: blur(4px) !important;
    }

    .mobile-way-body {
        padding: 20px 18px !important;
        text-align: left !important;
    }

    .mobile-way-body h3 {
        font-family: var(--font-heading, serif) !important;
        color: #0B3A26 !important;
        font-size: 22px !important;
        margin: 0 0 8px 0 !important;
    }

    .mobile-way-body p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: #555555 !important;
        margin: 0 0 16px 0 !important;
    }

    .mobile-way-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        background: #0B3A26 !important;
        color: #FFFFFF !important;
        font-weight: 700 !important;
        font-size: 13.5px !important;
        padding: 10px 18px !important;
        border-radius: 12px !important;
        text-decoration: none !important;
        transition: background 0.2s !important;
    }

    .mobile-dining-ways-pagination .swiper-pagination-bullet {
        background: #0B3A26 !important;
        opacity: 0.3 !important;
        width: 8px !important;
        height: 8px !important;
        transition: all 0.3s ease !important;
    }

    .mobile-dining-ways-pagination .swiper-pagination-bullet-active {
        opacity: 1 !important;
        background: #D4AF37 !important;
        width: 24px !important;
        border-radius: 4px !important;
    }

    /* Mobile Gallery Journal Section & Sticky Filter Bar */
    .gallery-journal-section {
        padding: 0 !important;
        margin: 0 !important;
    }

    .gallery-page-hero {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .gallery-filter-bar {
        position: sticky !important;
        top: 56px !important;
        z-index: 95 !important;
        background: #FFFFFF !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px 16px !important;
        gap: 8px !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(11, 58, 38, 0.1) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
        scrollbar-width: none !important;
        align-items: center !important;
    }

    .gallery-filter-bar::-webkit-scrollbar {
        display: none !important;
    }

    .gallery-filter-btn {
        flex: 0 0 auto !important;
        height: 36px !important;
        padding: 0 16px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(11, 58, 38, 0.12) !important;
        background: #FAF7F2 !important;
        color: #0B3A26 !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }

    .gallery-filter-btn.active {
        background: #0B3A26 !important;
        color: #D4AF37 !important;
        border-color: #0B3A26 !important;
        box-shadow: 0 4px 12px rgba(11, 58, 38, 0.2) !important;
    }

    /* Mobile 2 Cards Per Row Gallery Grid */
    .gallery-card-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 18px 12px 24px 12px !important;
        margin-top: 14px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .gallery-draw-card {
        width: 100% !important;
        height: 170px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        position: relative !important;
        box-shadow: 0 6px 18px rgba(11, 58, 38, 0.08) !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    .gallery-draw-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 16px !important;
        display: block !important;
    }

    .gallery-card-info {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(11, 58, 38, 0.92) 100%) !important;
        padding: 12px 10px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        text-align: left !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }

    .gallery-card-title {
        font-family: var(--font-heading, serif) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #FFFFFF !important;
        line-height: 1.25 !important;
        margin-bottom: 2px !important;
        display: block !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
    }

    .gallery-card-sub {
        font-size: 10.5px !important;
        font-weight: 700 !important;
        color: #D4AF37 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        display: block !important;
    }

    /* Hide Lightbox Navigation Arrows on Mobile (Swipe Gestures Enabled) */
    .lightbox-nav-btn {
        display: none !important;
    }

    /* Mobile Contact Compact FAQ Accordion */
    .contact-compact-faq-list {
        background: #FFFFFF !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        border: 1px solid rgba(11, 58, 38, 0.08) !important;
        box-shadow: 0 6px 20px rgba(11, 58, 38, 0.04) !important;
        max-width: 900px !important;
        margin: 0 auto !important;
    }

    .contact-compact-faq-list .package-faq-item {
        border-bottom: 1px solid #FAF7F2 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .contact-compact-faq-list .package-faq-item:last-child {
        border-bottom: none !important;
    }

    .contact-compact-faq-list .package-faq-item summary {
        min-height: 52px !important;
        padding: 14px 18px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #0B3A26 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        cursor: pointer !important;
    }

    .contact-compact-faq-list .package-faq-item summary::-webkit-details-marker {
        display: none !important;
    }

    .contact-compact-faq-list .package-faq-item summary::after {
        content: '+' !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        color: #D4AF37 !important;
        margin-left: 12px !important;
        transition: transform 0.2s ease !important;
    }

    .contact-compact-faq-list .package-faq-item[open] summary::after {
        content: '−' !important;
        transform: rotate(180deg) !important;
    }

    .contact-compact-faq-list .package-faq-item p {
        padding: 0 18px 16px !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: #555555 !important;
        margin: 0 !important;
    }

    /* Mobile Step-by-Step Accordion Booking Flow */
    .booking-progress-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px 14px !important;
        gap: 6px !important;
        margin: 12px auto 16px auto !important;
        scrollbar-width: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .booking-progress-bar::-webkit-scrollbar {
        display: none !important;
    }

    .progress-step {
        flex: 0 0 auto !important;
        font-size: 11px !important;
        padding: 6px 12px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(11, 58, 38, 0.12) !important;
        background: #FAF7F2 !important;
        color: #6a655c !important;
        cursor: pointer !important;
    }

    .progress-step.active {
        background: #0B3A26 !important;
        color: #D4AF37 !important;
        border-color: #0B3A26 !important;
    }

    .progress-step.completed {
        background: rgba(11, 58, 38, 0.08) !important;
        color: #0B3A26 !important;
        border-color: rgba(11, 58, 38, 0.2) !important;
    }

    .progress-step span.num {
        width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
        margin-right: 4px !important;
    }

    .progress-step.active span.num {
        background: #D4AF37 !important;
        color: #0B3A26 !important;
    }

    .progress-divider {
        display: none !important;
    }

    /* Mobile Step Accordion Card Visibility Overrides */
    .booking-section.m-step-hidden,
    .mobile-completed-step-box.m-step-hidden {
        display: none !important;
    }

    .mobile-completed-step-box:not(.m-step-hidden) {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: #FFFFFF !important;
        border: 1px solid rgba(11, 58, 38, 0.14) !important;
        border-radius: 16px !important;
        padding: 14px 16px !important;
        margin-bottom: 14px !important;
        box-shadow: 0 4px 14px rgba(11, 58, 38, 0.04) !important;
    }

    .booking-section:not(.m-step-hidden) {
        display: block !important;
    }

    .m-summary-left {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .m-check-icon {
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        background: #0B3A26 !important;
        color: #D4AF37 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
        flex-shrink: 0 !important;
    }

    .m-summary-left strong {
        font-family: var(--font-body, 'Manrope', sans-serif) !important;
        font-size: 11px !important;
        letter-spacing: 0.5px !important;
        color: #0B3A26 !important;
        display: block !important;
        text-transform: uppercase !important;
    }

    .m-summary-left p {
        font-family: var(--font-body, 'Manrope', sans-serif) !important;
        font-size: 13px !important;
        color: #444444 !important;
        margin: 2px 0 0 0 !important;
        font-weight: 600 !important;
    }

    .m-edit-btn {
        background: rgba(11, 58, 38, 0.08) !important;
        color: #0B3A26 !important;
        border: 1px solid rgba(11, 58, 38, 0.18) !important;
        border-radius: 14px !important;
        padding: 6px 12px !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
        cursor: pointer !important;
    }

    /* Mobile Step Navigation Buttons */
    .mobile-step-continue-btn {
        display: block !important;
        width: 100% !important;
        height: 48px !important;
        border-radius: 14px !important;
        background: #0B3A26 !important;
        color: #FFFFFF !important;
        font-family: var(--font-body, 'Manrope', sans-serif) !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        border: none !important;
        margin-top: 20px !important;
        cursor: not-allowed !important;
        box-shadow: none !important;
        transition: all 0.3s ease !important;
        opacity: 0.35 !important;
        pointer-events: none !important;
    }

    .mobile-step-continue-btn.m-btn-active {
        opacity: 1 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        box-shadow: 0 6px 18px rgba(11, 58, 38, 0.2) !important;
    }

    .mobile-step-back-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        background: transparent !important;
        border: none !important;
        color: #0B3A26 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        padding: 0 !important;
        margin-bottom: 14px !important;
        cursor: pointer !important;
        text-decoration: underline !important;
    }

    /* Bottom Sticky Summary Bar & Drawer */
    .mobile-sticky-booking-bar {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 990 !important;
        background: #0B3A26 !important;
        color: #FFFFFF !important;
        padding: 10px 16px !important;
        border-top: 1px solid rgba(212, 175, 55, 0.3) !important;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25) !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .mobile-price-info {
        display: flex !important;
        flex-direction: column !important;
        cursor: pointer !important;
    }

    .mobile-price-info span {
        font-size: 10.5px !important;
        color: rgba(255, 255, 255, 0.8) !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .mobile-price-info strong {
        font-size: 18px !important;
        color: #D4AF37 !important;
        font-weight: 800 !important;
    }

    .mobile-bottom-summary-drawer {
        display: none;
        position: fixed !important;
        bottom: 60px !important;
        left: 0 !important;
        right: 0 !important;
        background: #FFFFFF !important;
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
        z-index: 989 !important;
        box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.3) !important;
        border: 1px solid rgba(11, 58, 38, 0.15) !important;
        padding: 20px !important;
        max-height: 75vh !important;
        overflow-y: auto !important;
    }

    .mobile-bottom-summary-drawer.active {
        display: block !important;
        animation: slideUpDrawer 0.3s ease-out !important;
    }

    @keyframes slideUpDrawer {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    .drawer-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-bottom: 1px solid rgba(11, 58, 38, 0.1) !important;
        padding-bottom: 12px !important;
        margin-bottom: 14px !important;
    }

    .drawer-header h4 {
        margin: 0 !important;
        font-family: var(--font-heading, serif) !important;
        font-size: 20px !important;
        color: #0B3A26 !important;
    }

    .drawer-header button {
        background: transparent !important;
        border: none !important;
        font-size: 20px !important;
        color: #666666 !important;
        cursor: pointer !important;
    }

    .drawer-body p {
        display: flex !important;
        justify-content: space-between !important;
        font-size: 13.5px !important;
        margin: 0 0 10px 0 !important;
        color: #555555 !important;
    }

    .drawer-body p strong {
        color: #0B3A26 !important;
    }

    .drawer-total {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-top: 2px dashed rgba(11, 58, 38, 0.15) !important;
        padding-top: 14px !important;
        margin-top: 14px !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        color: #0B3A26 !important;
    }

    .drawer-total strong {
        font-size: 20px !important;
        color: #D4AF37 !important;
    }
}

/* ==========================================================================
   PACKAGES MOBILE REDESIGN STYLES (Max-Width: 768px)
   ========================================================================== */

/* Visibility Utility Classes */
.mobile-only-section,
.mobile-only-block,
.mobile-only-flex {
    display: none !important;
}

@media (max-width: 991px) {

    .desktop-only-section,
    .desktop-only-block,
    .desktop-only-flex,
    .desktop-only-grid {
        display: none !important;
    }

    .mobile-only-section,
    .mobile-only-block {
        display: block !important;
    }

    .mobile-only-flex {
        display: flex !important;
    }

    /* 0. Featured Hero Package Section Mobile Styles */
    .hero-package-section {
        padding: 24px 16px !important;
    }

    .hero-package-card {
        display: flex !important;
        flex-direction: column !important;
        background: #FFFFFF !important;
        border-radius: 20px !important;
        box-shadow: 0 12px 36px rgba(11, 58, 38, 0.08) !important;
        overflow: hidden !important;
        border: 1px solid rgba(11, 58, 38, 0.08) !important;
    }

    .hero-package-image-wrap {
        width: 100% !important;
        height: 240px !important;
        margin: 0 !important;
        position: relative !important;
    }

    .hero-package-swiper,
    .hero-package-swiper .swiper-slide,
    .hero-package-swiper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 20px 20px 0 0 !important;
    }

    .hero-package-badge {
        position: absolute !important;
        top: 12px !important;
        left: 12px !important;
        z-index: 10 !important;
        background: rgba(11, 58, 38, 0.92) !important;
        color: #D4AF37 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        padding: 5px 12px !important;
        border-radius: 20px !important;
        backdrop-filter: blur(4px) !important;
    }

    .hero-package-content {
        padding: 20px 18px !important;
    }

    .hero-package-title {
        font-family: var(--font-heading, serif) !important;
        font-size: 24px !important;
        color: #0B3A26 !important;
        margin: 4px 0 10px 0 !important;
        line-height: 1.25 !important;
    }

    .hero-package-story {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        color: #555555 !important;
        margin-bottom: 14px !important;
        font-style: italic !important;
    }

    .hero-package-meta-strip {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px 12px !important;
        margin-bottom: 16px !important;
        padding: 10px 14px !important;
        background: #FAF7F2 !important;
        border-radius: 12px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #0B3A26 !important;
    }

    .hero-package-highlights-box {
        margin-bottom: 16px !important;
        padding: 14px !important;
        background: #F9F8F5 !important;
        border-radius: 14px !important;
        border: 1px solid rgba(11, 58, 38, 0.06) !important;
    }

    .hero-package-highlights-box .box-label {
        display: block !important;
        font-size: 10.5px !important;
        font-weight: 800 !important;
        letter-spacing: 1px !important;
        color: #777777 !important;
        margin-bottom: 8px !important;
    }

    .hero-highlights-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        color: #0B3A26 !important;
    }

    .hero-highlights-grid li i {
        color: #D4AF37 !important;
        margin-right: 4px !important;
    }

    .hero-package-footer {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        padding-top: 14px !important;
        border-top: 1px solid #EAE6DF !important;
    }

    .hero-package-price {
        display: flex !important;
        align-items: baseline !important;
        gap: 8px !important;
    }

    .hero-package-price s {
        color: #999999 !important;
        font-size: 14px !important;
    }

    .hero-package-price strong {
        color: #0B3A26 !important;
        font-size: 26px !important;
        font-weight: 800 !important;
    }

    .hero-package-price span {
        color: #777777 !important;
        font-size: 13px !important;
    }

    .hero-package-actions {
        display: flex !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .hero-details-btn {
        flex: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
        background: #FAF7F2 !important;
        color: #0B3A26 !important;
        border: 1px solid rgba(11, 58, 38, 0.2) !important;
        font-weight: 700 !important;
        font-size: 13.5px !important;
        text-decoration: none !important;
    }

    .package-book-btn.hero-book-btn {
        flex: 1.5 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
        background: #0B3A26 !important;
        color: #FFFFFF !important;
        font-weight: 700 !important;
        font-size: 13.5px !important;
        text-decoration: none !important;
        box-shadow: 0 4px 14px rgba(11, 58, 38, 0.25) !important;
    }

    /* 0.5. All Packages Grid Mobile Styles */
    .packages-listing-section {
        padding: 32px 16px !important;
    }

    .packages-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }

    .package-card {
        background: #FFFFFF !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 30px rgba(11, 58, 38, 0.08) !important;
        border: 1px solid rgba(11, 58, 38, 0.08) !important;
        overflow: hidden !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    .package-image-deck {
        position: relative !important;
        height: 220px !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .package-card-swiper,
    .package-card-swiper .swiper-slide,
    .package-card-swiper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 20px 20px 0 0 !important;
    }

    .package-duration-badge {
        position: absolute !important;
        top: 12px !important;
        left: 12px !important;
        z-index: 10 !important;
        background: rgba(11, 58, 38, 0.92) !important;
        color: #D4AF37 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        padding: 4px 12px !important;
        border-radius: 20px !important;
        backdrop-filter: blur(4px) !important;
    }

    .package-body {
        padding: 18px 16px !important;
    }

    .package-perfect-tag {
        color: #D4AF37 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.8px !important;
        text-transform: uppercase !important;
        margin-bottom: 4px !important;
        display: block !important;
    }

    .package-header-wrap {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 8px !important;
    }

    .package-title {
        font-family: var(--font-heading, serif) !important;
        font-size: 22px !important;
        color: #0B3A26 !important;
        margin: 0 !important;
        font-weight: 700 !important;
    }

    .package-stars {
        color: #D4AF37 !important;
        font-size: 12px !important;
        display: flex !important;
        gap: 2px !important;
    }

    .package-story-text {
        font-size: 13px !important;
        line-height: 1.5 !important;
        color: #555555 !important;
        margin-bottom: 12px !important;
    }

    .package-meta-row {
        display: flex !important;
        gap: 12px !important;
        margin-bottom: 14px !important;
        padding: 8px 12px !important;
        background: #FAF7F2 !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #0B3A26 !important;
    }

    .package-inclusions-container {
        background: #F9F8F5 !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
        margin-bottom: 14px !important;
        border: 1px solid rgba(11, 58, 38, 0.05) !important;
    }

    .inclusions-label {
        font-size: 10px !important;
        font-weight: 800 !important;
        color: #777777 !important;
        letter-spacing: 1px !important;
        display: block !important;
        margin-bottom: 6px !important;
    }

    .package-inclusions-2col {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #0B3A26 !important;
    }

    .package-inclusions-2col li i {
        color: #D4AF37 !important;
        margin-right: 4px !important;
    }

    .package-price-box {
        display: flex !important;
        align-items: baseline !important;
        gap: 6px !important;
        margin-bottom: 14px !important;
    }

    .package-price-original {
        color: #999999 !important;
        text-decoration: line-through !important;
        font-size: 13.5px !important;
    }

    .package-price-offer {
        color: #0B3A26 !important;
        font-size: 24px !important;
        font-weight: 800 !important;
    }

    .package-price-unit {
        color: #777777 !important;
        font-size: 12.5px !important;
    }

    .package-actions-bar {
        display: flex !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .package-learn-btn {
        flex: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 11px 12px !important;
        border-radius: 12px !important;
        background: #FAF7F2 !important;
        color: #0B3A26 !important;
        border: 1px solid rgba(11, 58, 38, 0.2) !important;
        font-weight: 700 !important;
        font-size: 13px !important;
        text-decoration: none !important;
    }

    .package-book-btn {
        flex: 1.4 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 11px 12px !important;
        border-radius: 12px !important;
        background: #0B3A26 !important;
        color: #FFFFFF !important;
        font-weight: 700 !important;
        font-size: 13px !important;
        text-decoration: none !important;
        box-shadow: 0 4px 12px rgba(11, 58, 38, 0.2) !important;
    }

    /* 1. Enjoy the Ayana Experience Mobile Carousel */
    .mobile-ayana-experience-section {
        padding: 48px 16px;
        background: #F4F1EA;
    }

    .mobile-experience-swiper {
        padding-bottom: 36px !important;
        overflow: hidden;
    }

    .mobile-experience-card {
        background: #FFFFFF;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(11, 58, 38, 0.08);
        border: 1px solid rgba(11, 58, 38, 0.08);
    }

    .mobile-experience-img-wrap {
        position: relative;
        height: 240px;
        margin: 0;
        overflow: hidden;
    }

    .mobile-experience-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px 20px 0 0 !important;
    }

    .mobile-exp-chip {
        position: absolute;
        top: 14px;
        left: 14px;
        background: rgba(11, 58, 38, 0.9);
        color: #D4AF37;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 4px 12px;
        border-radius: 20px;
        backdrop-filter: blur(4px);
    }

    .mobile-experience-body {
        padding: 20px 18px;
    }

    .mobile-experience-body h3 {
        font-family: var(--font-heading, serif);
        color: #0B3A26;
        font-size: 22px;
        margin: 0 0 8px 0;
    }

    .mobile-experience-body p {
        font-size: 14px;
        line-height: 1.6;
        color: #555555;
        margin: 0 0 14px 0;
    }

    .mobile-exp-features {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .mobile-exp-features li {
        font-size: 12.5px;
        color: #0B3A26;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mobile-exp-features li i {
        color: #D4AF37;
        font-size: 11px;
    }

    .mobile-experience-pagination .swiper-pagination-bullet {
        background: #0B3A26;
        opacity: 0.3;
        width: 8px;
        height: 8px;
        transition: all 0.3s ease;
    }

    .mobile-experience-pagination .swiper-pagination-bullet-active {
        opacity: 1;
        background: #D4AF37;
        width: 24px;
        border-radius: 4px;
    }

    /* 2. Sample Package Experience Mobile Timeline */
    .mobile-luxury-timeline {
        padding: 10px 4px;
    }

    .mobile-timeline-item {
        display: flex;
        align-items: center;
        gap: 16px;
        background: #FFFFFF;
        padding: 16px 18px;
        border-radius: 16px;
        border: 1px solid rgba(11, 58, 38, 0.08);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
    }

    .mobile-timeline-num {
        font-family: var(--font-heading, serif);
        font-size: 24px;
        font-weight: 700;
        color: #D4AF37;
        background: #FAF7F2;
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border: 1px solid rgba(212, 175, 55, 0.3);
    }

    .mobile-timeline-content h4 {
        font-family: var(--font-heading, serif);
        font-size: 17px;
        color: #0B3A26;
        margin: 0 0 2px 0;
        letter-spacing: 0.5px;
    }

    .mobile-timeline-content p {
        font-size: 13px;
        color: #666666;
        margin: 0;
        line-height: 1.4;
    }

    .mobile-timeline-arrow {
        text-align: center;
        color: #D4AF37;
        font-size: 14px;
        padding: 8px 0;
        opacity: 0.8;
    }

    /* 3. Package Comparison Deck */
    .mobile-swipe-indicator {
        text-align: center;
        font-size: 12.5px;
        font-weight: 700;
        color: #0B3A26;
        margin-bottom: 16px;
        background: rgba(212, 175, 55, 0.15);
        padding: 6px 16px;
        border-radius: 20px;
        display: inline-block;
    }

    .mobile-package-comparison-deck {
        text-align: center;
    }

    .mobile-comparison-swiper {
        padding-bottom: 36px !important;
    }

    .mobile-comp-card {
        background: #FFFFFF;
        border-radius: 20px;
        padding: 22px 20px;
        border: 1px solid rgba(11, 58, 38, 0.12);
        box-shadow: 0 10px 30px rgba(11, 58, 38, 0.06);
        text-align: left;
    }

    .mobile-comp-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }

    .mobile-comp-header h3 {
        font-family: var(--font-heading, serif);
        font-size: 20px;
        color: #0B3A26;
        margin: 0;
    }

    .mobile-comp-price {
        font-size: 18px;
        font-weight: 800;
        color: #D4AF37;
    }

    .mobile-comp-divider {
        height: 1px;
        background: #EAE6DF;
        margin-bottom: 14px;
    }

    .mobile-comp-features {
        list-style: none;
        padding: 0;
        margin: 0 0 18px 0;
    }

    .mobile-comp-features li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px dashed #F0ECE4;
        font-size: 14px;
        color: #444;
    }

    .mobile-comp-features li:last-child {
        border-bottom: none;
    }

    .mobile-comp-features li i.check-yes {
        color: #0B3A26;
        background: #FAF7F2;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
    }

    .mobile-comp-btn {
        display: block;
        width: 100%;
        text-align: center;
        background: #0B3A26;
        color: #FFFFFF;
        font-weight: 700;
        padding: 12px 18px;
        border-radius: 12px;
        text-decoration: none;
        font-size: 14px;
        transition: background 0.2s;
    }

    .mobile-comp-btn:hover {
        background: #146052;
    }

    .mobile-comparison-pagination .swiper-pagination-bullet {
        background: #0B3A26;
    }

    .mobile-comparison-pagination .swiper-pagination-bullet-active {
        background: #D4AF37;
    }

    /* 4. Testimonials Mobile Single Card */
    .mobile-testimonials-swiper {
        padding-bottom: 32px !important;
    }

    .mobile-testimonial-card {
        background: #FAF7F2;
        border-radius: 20px;
        padding: 24px 20px;
        border: 1px solid rgba(212, 175, 55, 0.25);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    }

    .mobile-testimonial-card .stars {
        color: #D4AF37;
        font-size: 16px;
        margin-bottom: 12px;
    }

    .mobile-testimonial-card p {
        font-family: var(--font-heading, serif);
        font-size: 18px;
        font-style: italic;
        color: #0B3A26;
        line-height: 1.5;
        margin: 0 0 12px 0;
    }

    .mobile-testimonial-card cite {
        font-size: 13.5px;
        font-weight: 700;
        color: #777777;
        font-style: normal;
    }

    .mobile-testimonials-pagination .swiper-pagination-bullet {
        background: #0B3A26;
    }

    .mobile-testimonials-pagination .swiper-pagination-bullet-active {
        background: #D4AF37;
    }

    /* 5. Mobile FAQ Height & Tap Target Optimization (54px - 60px) */
    .package-faq-item summary {
        min-height: 56px !important;
        padding: 16px 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #0B3A26 !important;
        cursor: pointer !important;
    }

    .package-faq-item summary::-webkit-details-marker {
        display: none;
    }

    .package-faq-item summary::after {
        content: '+';
        font-size: 20px;
        font-weight: 700;
        color: #D4AF37;
        margin-left: 12px;
        transition: transform 0.2s ease;
    }

    .package-faq-item[open] summary::after {
        content: '−';
        transform: rotate(180deg);
    }

    .package-faq-item p {
        padding: 0 20px 16px !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: #555555 !important;
    }
}

/* ===================================================
   COMPACT PAGE HERO STYLES (PERFECT CENTER ALIGNMENT)
   =================================================== */
.page-hero {
    position: relative;
    width: 100%;
    min-height: 52vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 130px 20px 60px;
    color: #FFFFFF;
    overflow: hidden;
}

.page-hero.compact {
    min-height: 48vh;
    padding: 140px 20px 60px;
}

.page-hero .hero-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(11, 58, 38, 0.75) 100%);
    z-index: 1;
}

.page-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center !important;
}

.page-hero .eyebrow {
    display: inline-block;
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #D4AF37;
    margin: 0 auto 12px auto;
    text-align: center !important;
}

.page-hero h1 {
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(34px, 5vw, 54px);
    font-weight: 700;
    line-height: 1.15;
    color: #FFFFFF;
    margin: 0 auto 16px auto;
    text-align: center !important;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.page-hero .hero-subtitle {
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-size: clamp(15px, 2vw, 18px);
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    max-width: 740px;
    margin: 0 auto;
    text-align: center !important;
}