:root {
    --hh-gold: #f3ab20;
    --hh-gold-deep: #c8932b;
    --hh-bg: #231f20;
    --hh-text: #eaeaea;
    --hh-line: #3a2f15;
    --hh-muted: rgba(255, 255, 255, 0.68);
}

.hh-body {
    min-height: 100vh;
    margin: 0;
    background: #000;
    color: var(--hh-text);
    font-family: "Poppins", sans-serif;
}

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

.hh-body.hh-preloading {
    overflow: hidden;
}

.hh-body.hh-preloading .hh-hero,
.hh-body.hh-preloading .hh-discover,
.hh-body.hh-preloading .hh-properties,
.hh-body.hh-preloading .hh-footer {
    opacity: 0;
}



/* Preloader Section */
.hh-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: black;
    transition: opacity 0.45s ease;
}

.hh-preloader-hidden {
    opacity: 0;
    pointer-events: none;
}

.hh-preloader .hh-preloader-ring {
    width: 124px;
    height: 124px;
    padding: 18px;
    border: 2px solid var(--hh-gold);
    border-radius: 999px;
    background: radial-gradient(circle at 50% 50%, rgba(233, 185, 73, 0.14), transparent 70%);
    animation: hhPulseRing 1.6s ease-out infinite;
}

.hh-preloader .hh-preloader-icon {
    width: 84px;
    height: 84px;
    object-fit: contain;
    transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.hh-preloader-fade .hh-preloader-ring {
    animation: none;
    border-color: rgba(233, 185, 73, 0.45);
}

.hh-preloader .hh-preloader-icon-moving {
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.hh-body.hh-preloading .hh-header .hh-logo-icon {
    opacity: 0;
}

/* Header Section */
.hh-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 12;
    background: rgba(7, 7, 8, 0.86);
    backdrop-filter: blur(2px);
}

.hh-header .hh-nav-row {
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.hh-header .hh-brand-group {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: -67px;
}

.hh-header .hh-logo-ring {
    width: 120px;
    height: 120px;
    border-radius: 999px;
    padding: 22px;
    border: 2px solid var(--hh-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 11, 0.9);
    flex-shrink: 0;
}

.hh-header .hh-logo-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.86);
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center;
    animation: hhLogoIconZoom 2.2s ease-in-out infinite;
}

.hh-body.hh-logo-ready .hh-header .hh-logo-icon {
    opacity: 1;
    transform: scale(1);
}

.hh-header .hh-brand-title {
    margin: 0;
    color: #ffd27c;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
}

.hh-header .hh-brand-subtitle {
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.hh-header .hh-brand-title .hh-char,
.hh-header .hh-brand-subtitle .hh-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(12px);
    animation: hhCharFadeUp 0.55s ease forwards;
}

@keyframes hhCharFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header Navigation Menu Styling */
.hh-nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.hh-nav-item {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 0.25s ease, transform 0.25s ease;
}

.hh-nav-item:hover {
    color: var(--hh-gold);
}

/* Mobile Hamburger Menu Toggle Elements */
.hh-menu-toggle-chk {
    display: none;
}

.hh-menu-toggle-btn {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    cursor: pointer;
    z-index: 15;
}

.hh-burger-line {
    width: 100%;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, background-color 0.3s ease;
}

.hh-header .hh-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--hh-gold) 14%, var(--hh-gold) 86%, transparent);
}



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

    50% {
        transform: scale(1.12);
    }

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

@media (max-width: 1200px) {
    .hh-header .hh-brand-title {
        font-size: clamp(1.7rem, 2.6vw, 2.4rem);
    }

    .hh-header .hh-brand-subtitle {
        font-size: 13px;
    }
}

@media (max-width: 992px) {
    .hh-header {
        position: relative;
    }

    .hh-menu-toggle-btn {
        display: flex;
        margin-right: 15px;
    }

    .hh-nav-links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(10, 10, 11, 0.98);
        backdrop-filter: blur(10px);
        border-bottom: 2px solid var(--hh-gold);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
        opacity: 0;
        pointer-events: none;
        z-index: 10;
        padding: 0 24px;
    }

    .hh-nav-item {
        width: 100%;
        padding: 16px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        font-size: 16px;
    }

    .hh-nav-item:last-child {
        border-bottom: none;
    }

    .hh-menu-toggle-chk:checked~.hh-nav-links {
        max-height: 400px;
        opacity: 1;
        pointer-events: auto;
        padding-top: 12px;
        padding-bottom: 20px;
    }

    /* Burger Menu Transformations */
    .hh-menu-toggle-chk:checked~.hh-menu-toggle-btn .hh-burger-line:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
        background-color: var(--hh-gold);
    }

    .hh-menu-toggle-chk:checked~.hh-menu-toggle-btn .hh-burger-line:nth-child(2) {
        opacity: 0;
    }

    .hh-menu-toggle-chk:checked~.hh-menu-toggle-btn .hh-burger-line:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
        background-color: var(--hh-gold);
    }
}

@media (max-width: 768px) {
    .hh-header .hh-nav-row {
        padding: 20px 15px;
    }

    .hh-header .hh-logo-ring {
        width: 75px;
        height: 75px;
        padding: 15px;
    }

    .hh-header .hh-brand-group {
        margin-bottom: -60px;
        gap: 5px;
    }

    .hh-header .hh-brand-title {
        font-size: 20px;
    }

    .hh-header .hh-brand-subtitle {
        font-size: 11px;
    }
}

/* Global Button System */
.hh-btn,
a.hh-btn,
button.hh-btn,
input.hh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: linear-gradient(180deg, #f4c95e, #d29b2d);
    color: #1a1300;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.hh-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.28);
}

.hh-btn:focus-visible {
    outline: 2px solid #ffd27c;
    outline-offset: 2px;
}

.hh-btn:active {
    transform: translateY(0);
}

.hh-btn:disabled,
.hh-btn[aria-disabled="true"] {
    opacity: 0.62;
    pointer-events: none;
}

.hh-btn-primary {
    background: linear-gradient(180deg, #f4c95e, #d29b2d);
    color: #1a1300;
}

.hh-btn-light {
    background: #ffffff;
    color: #111111;
}

.hh-btn-outline {
    background: transparent;
    color: var(--hh-gold);
    border-color: rgba(243, 171, 32, 0.75);
}

.hh-btn-small {
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 7px;
}

.hh-btn-block {
    width: 100%;
}

/* Hero Section */
.hh-hero {
    position: relative;
}

.hh-hero .hh-hero-background {
    position: absolute;
    inset: 0;
}

.hh-hero .hh-hero-background::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 5, 6, 0.68) 0%, rgba(5, 5, 6, 0.719) 40%, rgb(0, 0, 0) 100%);
}

.hh-hero .hh-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hh-hero .hh-hero-content {
    position: relative;
    padding-top: 350px;
    padding-bottom: 46px;
}

.hh-hero .hh-hero-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding: 20px;
    background: linear-gradient(3deg, #000, #00000000, #00000000);
    border-radius: 15px;
}

.hh-hero .hh-hero-title {
    margin: 0;
    color: #f2b658;
    font-size: 24px;
    font-weight: 500;
}

.hh-hero .hh-hero-location {
    margin-top: 4px;
    color: #fff;
    font-size: 18px;
    font-weight: 300;
}

.hh-hero .hh-thumb-list {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hh-hero .hh-thumb-item {
    width: 215px;
    height: 120px;
    border: 4px solid var(--hh-gold);
    border-radius: 16px;
    overflow: hidden;
    background: #111;
}

.hh-hero .hh-thumb-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hh-hero .hh-booking-card {
    margin-top: 18px;
    padding: 34px;
    border-radius: 14px;
    background: rgba(8, 8, 9, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 26px 40px rgba(0, 0, 0, 0.45);
}

.hh-hero .hh-booking-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 48px;
}

.hh-hero .hh-form-group {
    width: 100%;
}

.hh-hero .hh-guest-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.hh-hero .hh-label {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    letter-spacing: 0.01em;
    color: #e6a93e;
    font-weight: 500;
}

.hh-hero .hh-input {
    width: 100%;
    padding: 12px 14px;
    color: #fff;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0;
    outline: none;
    font-size: 16px;
    font-weight: 300;
    color-scheme: light;
}

.hh-hero .hh-input:focus {
    border-bottom-color: var(--hh-gold);
    box-shadow: none;
}

.hh-hero .hh-input-center {
    text-align: center;
}

.hh-hero .hh-date-field {
    position: relative;
    min-height: 42px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-right: 4px;
}

.hh-hero .hh-date-display {
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.2;
}

.hh-hero .hh-date-trigger {
    border: 0;
    background: transparent;
    color: #fff;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
}

.hh-hero .hh-date-trigger svg {
    width: 18px;
    height: 18px;
}

.hh-hero .hh-date-field:focus-within {
    border-bottom-color: var(--hh-gold);
}

.hh-hero .hh-native-date {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

.hh-hero select.hh-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #111 50%), linear-gradient(135deg, #111 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 1px), calc(100% - 12px) calc(50% - 1px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

.hh-hero .hh-input[type="date"] {
    appearance: auto;
    -webkit-appearance: auto;
}

.hh-hero .hh-input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.9;
}

.hh-hero select.hh-input option {
    color: #111;
    background: #fff;
}

.hh-hero .hh-booking-actions {
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.hh-hero .hh-booking-actions .hh-btn {
    min-width: 180px;
}

@media (max-width: 1200px) {
    .hh-hero .hh-hero-content {
        padding-top: 220px;
    }

    .hh-hero .hh-thumb-item {
        width: 180px;
        height: 104px;
    }

    .hh-hero .hh-input {
        font-size: 15px;
    }

    .hh-hero .hh-date-display {
        font-size: 15px;
    }
}

@media (max-width: 992px) {
    .hh-hero .hh-hero-content {
        padding-top: 42px;
    }

    .hh-hero .hh-hero-top-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .hh-hero .hh-booking-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hh-hero .hh-thumb-desktop-only {
        display: none;
    }

    .hh-hero .hh-thumb-item {
        width: auto;
        height: auto;
        aspect-ratio: 5 / 3;
        border-radius: 8px;
        border: solid 2px var(--hh-gold);
    }

    .hh-hero .hh-thumb-list {
        gap: 8px;
    }

    .hh-hero .hh-hero-title {
        font-size: 1.7rem;
    }

    .hh-hero .hh-hero-location {
        font-size: 1.2rem;
    }

    .hh-hero .hh-booking-card {
        padding: 20px;
    }

    .hh-hero .hh-guest-group {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
    }

    .hh-hero .hh-input {
        font-size: 13px;
        padding: 5px 0px;
        text-align: left;
    }

    .hh-hero .hh-date-display {
        font-size: 13px;
    }
}

/* Discover Section */
.hh-discover {
    position: relative;
    padding: 96px 0;
    overflow: hidden;
    height: 90vh;
    background: #000;
}

.hh-discover .hh-discover-video-wrap {
    position: absolute;
    inset: 0;
}

.hh-discover .hh-discover-video-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgb(0, 0, 0) 0%,
            rgba(0, 0, 0, 0.62) 38%,
            rgba(0, 0, 0, 0.35) 100%);
}

.hh-discover .hh-discover-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hh-discover .hh-discover-inner {
    position: relative;
    z-index: 1;
    max-width: 900px;
    text-align: center;
}

.hh-discover .hh-section-label {
    color: var(--hh-gold);
    letter-spacing: 1.5px;
    font-size: 18px;
}

.hh-discover .hh-discover-title {
    margin-top: 16px;
    font-size: clamp(2rem, 4vw, 3.3rem);
    color: #fff;
    font-weight: 500;
}

.hh-discover .hh-discover-description {
    margin-top: 24px;
    color: var(--hh-gold);
    line-height: 1.8;
}

/* Properties Section */
.hh-properties {
    padding-bottom: 40px;
    margin-top: -120px;
    position: relative;
}

.hh-properties .hh-properties-header {
    margin-bottom: 40px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.hh-properties .hh-section-label {
    color: var(--hh-gold);
    letter-spacing: 1.5px;
    font-size: 18px;
}

.hh-properties .hh-section-label-small {
    font-size: 12px;
}

.hh-properties .hh-properties-title {
    margin-top: 8px;
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    font-weight: 600;
}

.hh-properties .hh-view-all {
    font-size: 14px;
    color: var(--hh-gold);
}

.hh-properties-swiper {
    width: 100%;
    position: relative;
    padding-bottom: 50px !important;
    overflow: hidden;
}

.hh-properties-swiper .hh-property-card {
    border: 5px solid var(--hh-gold);
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, #15130c, #0d0c08);
    height: auto;
    box-sizing: border-box;
}

.hh-properties-swiper .hh-property-card:hover {
    border-color: var(--hh-gold);
}

.hh-properties-swiper .hh-property-image {
    width: 100%;
    aspect-ratio: 5/3.5;
    object-fit: cover;
}

.hh-properties-swiper .hh-property-content {
    padding: 20px;
}

.hh-properties-swiper .hh-property-name {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--hh-gold);
}

.hh-properties-swiper .hh-property-location {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.hh-properties-swiper .hh-property-footer {
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.hh-properties-swiper .hh-price {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

.hh-properties-swiper .hh-btn {
    text-decoration: none;
}

/* Custom Swiper Controls for Properties Slider */
.hh-properties-swiper .swiper-button-next,
.hh-properties-swiper .swiper-button-prev {
    color: var(--hh-gold);
    transition: color 0.3s;
}

.hh-properties-swiper .swiper-button-next:hover,
.hh-properties-swiper .swiper-button-prev:hover {
    color: #fff;
}

.hh-properties-swiper .swiper-button-next::after,
.hh-properties-swiper .swiper-button-prev::after {
    font-size: 24px;
}

.hh-properties-swiper .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.4);
    opacity: 0.5;
    transition: background 0.3s, transform 0.3s;
}

.hh-properties-swiper .swiper-pagination-bullet-active {
    background: var(--hh-gold);
    opacity: 1;
    transform: scale(1.2);
}

@media (max-width: 992px) {
    .hh-properties .hh-view-all {
        display: none;
    }
}

@media (max-width: 768px) {

    .hh-properties .hh-property-content {
        gap: 10px !important;
    }
}

/* Properties Listing Page Styles */
.hh-properties-page {
    margin-top: 0 !important;
    padding: 64px 0 !important;
}

.hh-properties-page-header {
    margin-bottom: 40px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.hh-properties-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.hh-properties-page .hh-property-card {
    border: 5px solid var(--hh-gold);
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, #15130c, #0d0c08);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease, border-color 0.3s ease;
    box-sizing: border-box;
}

.hh-properties-page .hh-property-card:hover {
    transform: translateY(-4px);
    border-color: rgba(243, 171, 32, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.hh-properties-page .hh-property-image {
    width: 100%;
    aspect-ratio: 5/3.5;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.hh-properties-page .hh-property-card:hover .hh-property-image {
    transform: scale(1.04);
}

.hh-properties-page .hh-property-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 12px;
}

.hh-properties-page .hh-property-name {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    color: var(--hh-gold);
}

.hh-properties-page .hh-property-location {
    margin: 0;
    font-size: 13.5px;
    color: var(--hh-muted);
}

.hh-properties-page .hh-property-description {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--hh-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hh-properties-page .hh-property-meta {
    margin: 0;
    font-size: 12.5px;
    color: var(--hh-gold);
    opacity: 0.85;
    border-top: 1px solid rgba(243, 171, 32, 0.08);
    border-bottom: 1px solid rgba(243, 171, 32, 0.08);
    padding: 8px 0;
}

.hh-properties-page .hh-property-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.hh-properties-page .hh-price {
    color: #fff;
    font-size: 14.5px;
    font-weight: 500;
}

/* Listings Page Media Queries */
@media (max-width: 992px) {
    .hh-properties-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 576px) {
    .hh-properties-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hh-properties-page {
        padding: 40px 0 !important;
    }

    .hh-properties-page .hh-property-content {
        padding: 16px;
    }
}

/* Footer Section */
.hh-footer {
    border-top: 1px solid #1a1a1a;
    background-color: #231f1e;
}

.hh-footer .hh-footer-row {
    padding: 40px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.hh-footer .hh-footer-brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hh-footer .hh-footer-brand img {
    max-width: 120px;
}

.hh-footer .hh-logo-ring {
    width: 42px;
    height: 42px;
    padding: 6px;
    border-radius: 999px;
    border: 1px solid var(--hh-gold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hh-footer .hh-footer-brand-name {
    color: var(--hh-gold);
    font-size: 1.6rem;
}

.hh-footer .hh-copyright {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

.hh-footer .hh-footer-links {
    display: flex;
    gap: 20px;
}

.hh-footer .hh-footer-links a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.hh-footer .hh-footer-links a:hover,
.hh-properties .hh-view-all:hover {
    color: var(--hh-gold);
}

@media (max-width: 768px) {
    .hh-footer .hh-footer-row {
        flex-direction: column;
        text-align: center;
    }
}

/* Animations */
@keyframes hhPulseRing {
    0% {
        box-shadow: 0 0 0 0 rgba(233, 185, 73, 0.5);
    }

    70% {
        box-shadow: 0 0 0 18px rgba(233, 185, 73, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(233, 185, 73, 0);
    }
}

@keyframes hhFadeUp {
    from {
        opacity: 0;
        transform: translate3d(0, 24px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes hhFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.hh-reveal {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    will-change: opacity, transform;
}

.hh-reveal.is-visible {
    animation: hhFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--hh-reveal-delay, 0ms);
}

.hh-reveal-soft {
    opacity: 0;
}

.hh-reveal-soft.is-visible {
    animation: hhFadeIn 0.95s ease both;
    animation-delay: var(--hh-reveal-delay, 0ms);
}

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

    .hh-reveal,
    .hh-reveal-soft {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* Listing + Details Pages */
.hh-page-hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
}

.hh-page-hero .hh-page-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.hh-page-hero .hh-page-hero-content {
    position: relative;
    z-index: 1;
    padding-top: 180px;
    padding-bottom: 56px;
}

.hh-page-title {
    margin: 8px 0 0;
    font-size: clamp(2rem, 3.8vw, 3.2rem);
    color: #fff;
    font-weight: 600;
}

.hh-page-subtitle {
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.8);
    max-width: 780px;
    line-height: 1.6;
}


.hh-properties-page {
    margin-top: 0;
    padding: 70px 0;
}

.hh-properties-page .hh-properties-page-header {
    margin-bottom: 32px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.hh-properties-page .hh-property-description {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.6;
}

.hh-properties-page .hh-property-meta {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.64);
    font-size: 13px;
}

.hh-properties-page .hh-btn {
    text-decoration: none;
}


/* Blogs */
.hh-blog-listing {
    padding: 70px 0;
}

.hh-blog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.hh-blog-card {
    background: linear-gradient(180deg, #14130f, #0b0a08);
    border: 1px solid rgba(243, 171, 32, 0.35);
    border-radius: 14px;
    overflow: hidden;
}

.hh-blog-image {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.hh-blog-content {
    padding: 20px;
}

.hh-blog-meta {
    margin: 0;
    color: var(--hh-gold);
    font-size: 12px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.hh-blog-title {
    margin: 10px 0 0;
    color: #fff;
    font-size: 22px;
    line-height: 1.4;
}

.hh-blog-excerpt {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.7;
    font-size: 14px;
}

.hh-blog-footer {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hh-blog-author {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.68);
}

.hh-blog-footer .hh-btn {
    text-decoration: none;
}

.hh-blog-detail {
    padding: 70px 0;
}

.hh-blog-detail-wrap {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 28px;
    align-items: flex-start;
}

.hh-blog-article {
    border: 1px solid rgba(243, 171, 32, 0.3);
    border-radius: 14px;
    padding: 26px;
    background: linear-gradient(180deg, #14130f, #0b0a08);
}

.hh-blog-article p {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.9;
}

.hh-blog-sidebar {
    border: 1px solid rgba(243, 171, 32, 0.3);
    border-radius: 14px;
    padding: 22px;
    background: #0e0d09;
}

.hh-blog-sidebar h4 {
    margin: 0;
    color: var(--hh-gold);
    font-size: 21px;
    font-weight: 500;
}

.hh-blog-sidebar ul {
    list-style: none;
    margin: 16px 0;
    padding: 0;
}

.hh-blog-sidebar li {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hh-blog-sidebar li:last-child {
    border-bottom: 0;
}

.hh-blog-sidebar a {
    color: #fff;
    text-decoration: none;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.hh-blog-sidebar a:hover {
    color: var(--hh-gold);
}

.hh-blog-sidebar span {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.62);
}

/* Contact */
.hh-contact-section {
    padding: 70px 0;
}

.hh-contact-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 26px;
}

.hh-contact-card,
.hh-contact-form-wrap {
    background: linear-gradient(180deg, #14130f, #0b0a08);
    border: 1px solid rgba(243, 171, 32, 0.3);
    border-radius: 14px;
    padding: 26px;
}

.hh-contact-card p {
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.8;
}

.hh-contact-list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.hh-contact-list li {
    margin-bottom: 11px;
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.7;
}

.hh-contact-form-wrap h4 {
    margin: 0 0 16px;
    color: var(--hh-gold);
    font-size: 24px;
    font-weight: 500;
}

.hh-contact-form {
    display: grid;
    gap: 12px;
}

.hh-contact-form input,
.hh-contact-form textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    outline: none;
}

.hh-contact-form input:focus,
.hh-contact-form textarea:focus {
    border-color: var(--hh-gold);
}

.hh-contact-form textarea {
    resize: vertical;
    min-height: 130px;
}

.hh-contact-form .hh-btn {
    justify-content: center;
    cursor: pointer;
}

.hh-form-alert {
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 0 12px;
    font-size: 14px;
}

.hh-form-success {
    background: rgba(36, 190, 102, 0.18);
    border: 1px solid rgba(36, 190, 102, 0.48);
    color: #aef6ca;
}

.hh-form-error {
    background: rgba(220, 70, 70, 0.16);
    border: 1px solid rgba(220, 70, 70, 0.48);
    color: #ffc7c7;
}

@media (max-width: 992px) {
    .hh-blog-grid {
        grid-template-columns: 1fr;
    }

    .hh-blog-detail-wrap,
    .hh-contact-grid {
        grid-template-columns: 1fr;
    }

    .hh-blog-sidebar {
        padding: 18px;
    }
}

@media (max-width: 768px) {

    .hh-blog-listing,
    .hh-blog-detail,
    .hh-contact-section {
        padding: 42px 0;
    }

    .hh-page-title {
        font-size: 18px;
        line-height: 1.28;
    }

    .hh-page-hero {
        min-height: 200px;
    }

    .hh-page-hero .hh-page-hero-content {
        padding-top: 70px;
        padding-bottom: 20px;
    }

    .hh-page-subtitle {
        font-size: 14px;
        line-height: 1.55;
        margin-top: 10px;
    }

    .hh-blog-grid {
        gap: 16px;
    }

    .hh-blog-image {
        height: 210px;
    }

    .hh-blog-content {
        padding: 16px;
    }

    .hh-blog-title {
        font-size: 18px;
    }

    .hh-blog-excerpt {
        font-size: 13px;
    }

    .hh-blog-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .hh-blog-footer .hh-btn {
        width: 100%;
    }

    .hh-blog-article {
        padding: 18px;
    }

    .hh-blog-article p {
        font-size: 14px;
        line-height: 1.8;
    }

    .hh-blog-sidebar h4 {
        font-size: 19px;
    }

    .hh-contact-card,
    .hh-contact-form-wrap {
        padding: 18px;
    }
}

@media (max-width: 480px) {
    .hh-blog-image {
        height: 180px;
    }

    .hh-blog-title {
        font-size: 17px;
    }

    .hh-blog-meta,
    .hh-blog-author {
        font-size: 12px;
    }

    .hh-blog-sidebar li {
        padding: 10px 0;
    }

    .hh-contact-form input,
    .hh-contact-form textarea {
        font-size: 13px;
        padding: 10px 12px;
    }
}



/* PROPERTY DETAILS */

.hh-property-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hh-detail-section {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding-bottom: 30px;
}

.hh-highlights-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.hh-highlight-item {
    background: #101010;
    border: 1px solid rgba(243, 171, 32, .15);
    border-radius: 12px;
    padding: 18px;
    text-align: center;
}

.hh-highlight-item i {
    color: var(--hh-gold);
    font-size: 20px;
    margin-bottom: 10px;
    display: block;
}

.hh-highlight-item span {
    color: #fff;
    font-size: 14px;
}

.hh-gallery-item {
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
}

.hh-gallery-item img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: .4s;
}

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

.hh-room-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.hh-room-card {
    background: #111;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
}

.hh-room-card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.hh-room-content {
    padding: 18px;
}

.hh-room-content h5 {
    color: #fff;
    margin-bottom: 10px;
}

.hh-room-content p {
    color: rgba(255, 255, 255, .65);
    margin-bottom: 10px;
}

.hh-room-content span {
    color: var(--hh-gold);
    font-weight: 600;
}

.hh-detail-amenities {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.hh-amenity-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #111;
    padding: 14px;
    border-radius: 10px;
}

.hh-amenity-item i {
    color: var(--hh-gold);
}

.hh-review-list {
    display: grid;
    gap: 16px;
}

.hh-review-card {
    background: #111;
    border-radius: 12px;
    padding: 20px;
}

.hh-review-card h6 {
    color: #fff;
    margin-bottom: 10px;
}

.hh-review-card p {
    color: rgba(255, 255, 255, .7);
    line-height: 1.7;
}

.hh-faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.hh-faq-item button {
    width: 100%;
    background: none;
    border: none;
    color: #fff;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.hh-faq-answer {
    display: none;
    color: rgba(255, 255, 255, .75);
    padding-bottom: 20px;
}

.hh-faq-item.active .hh-faq-answer {
    display: block;
}

@media(max-width:992px) {

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

}

@media(max-width:768px) {

    .hh-highlights-grid,
    .hh-room-grid,
    .hh-detail-amenities {
        grid-template-columns: 1fr;
    }

    .hh-gallery-item img {
        height: 160px;
    }

}


:root {
    --lux-gold: #f3ab20;
    --lux-gold-dark: #c8932b;
    --lux-charcoal: #151515;
    --lux-bg: #070707;
    --lux-card-bg: rgba(10, 10, 10, 0.4);
    --lux-card-bg-solid: #0d0d0d;
    --lux-border: #1a1a1a;
    --lux-border-hover: rgba(197, 168, 128, 0.3);
    --lux-stone-50: #fafaf9;
    --lux-stone-200: #e7e5e4;
    --lux-stone-300: #d6d3d1;
    --lux-stone-400: #a8a29e;
    --lux-stone-500: #78716c;
    --lux-stone-600: #57534e;
    --lux-stone-800: #292524;
    --lux-stone-900: #1c1917;
    --lux-shadow-glow: rgba(197, 168, 128, 0.25);
}

/* Animations */
.hh-fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    animation: hhFadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes hhFadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================================
   Main Spacing and Background
   ========================================================================== */

/* --- Base Styles --- */
.hh-lux-main {
    background-color: var(--lux-bg);
    color: var(--lux-stone-200);
    min-height: 100vh;
    padding-top: 144px;
    padding-bottom: 80px;
}

.hh-lux-max-width {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* --- Responsive Styles --- */
@media (max-width: 768px) {
    .hh-lux-main {
        padding-top: 50px;
    }
}

@media (min-width: 768px) {
    .hh-lux-max-width {
        padding-left: 32px;
        padding-right: 32px;
    }
}


/* ==========================================================================
   Navigation & Breadcrumbs Section
   ========================================================================== */

/* --- Base Styles --- */
.hh-lux-nav {
    margin-bottom: 24px;
}

.hh-lux-nav .hh-lux-nav-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--lux-stone-900);
    padding-bottom: 16px;
    gap: 16px;
}

.hh-lux-nav .hh-lux-nav-row .hh-lux-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 300;
    color: var(--lux-stone-400);
}

.hh-lux-nav .hh-lux-nav-row .hh-lux-breadcrumbs li {
    display: inline-flex;
    align-items: center;
}

.hh-lux-nav .hh-lux-nav-row .hh-lux-breadcrumbs li a {
    color: var(--lux-stone-400);
    text-decoration: none;
    transition: color 0.2s;
}

.hh-lux-nav .hh-lux-nav-row .hh-lux-breadcrumbs li a:hover {
    color: var(--lux-gold);
}

.hh-lux-nav .hh-lux-nav-row .hh-lux-breadcrumbs li .divider {
    color: var(--lux-stone-600);
    user-select: none;
}

.hh-lux-nav .hh-lux-nav-row .hh-lux-breadcrumbs li .current {
    color: var(--lux-gold);
    font-weight: 400;
}

.hh-lux-nav .hh-lux-nav-row .hh-lux-quicklinks {
    display: none;
    align-items: center;
    gap: 24px;
}

.hh-lux-nav .hh-lux-nav-row .hh-lux-quicklinks a {
    color: var(--lux-stone-400);
    text-decoration: none;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 500;
    transition: color 0.2s;
}

.hh-lux-nav .hh-lux-nav-row .hh-lux-quicklinks a:hover {
    color: var(--lux-gold);
}

/* --- Responsive Styles --- */
@media (min-width: 640px) {
    .hh-lux-nav .hh-lux-nav-row .hh-lux-quicklinks {
        display: flex;
    }
}

@media (max-width: 768px) {
    .hh-lux-nav .hh-lux-nav-row .hh-lux-breadcrumbs li {
        font-size: 12px;
    }
}


/* ==========================================================================
   Elegant Asymmetrical Media Gallery Grid
   ========================================================================== */

/* --- Base Styles --- */
.hh-lux-gallery {
    margin-bottom: 48px;
}

.hh-lux-gallery .hh-lux-gallery-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.hh-lux-gallery .hh-lux-gallery-grid .hh-lux-primary-img {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background-color: var(--lux-stone-900);
    cursor: pointer;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    aspect-ratio: 4/3;
}

.hh-lux-gallery .hh-lux-gallery-grid .hh-lux-primary-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.hh-lux-gallery .hh-lux-gallery-grid .hh-lux-primary-img:hover img {
    transform: scale(1.03);
}

.hh-lux-gallery .hh-lux-gallery-grid .hh-lux-primary-img .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
    pointer-events: none;
}

.hh-lux-gallery .hh-lux-gallery-grid .hh-lux-primary-img .content {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    z-index: 2;
}

.hh-lux-gallery .hh-lux-gallery-grid .hh-lux-primary-img .content .hh-lux-badge {
    display: inline-block;
    background-color: var(--lux-gold);
    color: #000;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

.hh-lux-gallery .hh-lux-gallery-grid .hh-lux-primary-img .content .hh-lux-primary-title {
    font-size: 20px;
    color: #fff;
    margin-bottom: 4px;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hh-lux-gallery .hh-lux-gallery-grid .hh-lux-primary-img .content .hh-lux-primary-tagline {
    font-size: 12px;
    font-weight: 300;
    color: var(--lux-stone-300);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.hh-lux-gallery .hh-lux-gallery-grid .hh-lux-side-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.hh-lux-gallery .hh-lux-gallery-grid .hh-lux-side-col .hh-lux-secondary-img {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    background-color: var(--lux-stone-900);
    cursor: pointer;
    aspect-ratio: 1/1;
}

.hh-lux-gallery .hh-lux-gallery-grid .hh-lux-side-col .hh-lux-secondary-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.hh-lux-gallery .hh-lux-gallery-grid .hh-lux-side-col .hh-lux-secondary-img:hover img {
    transform: scale(1.05);
}

.hh-lux-gallery .hh-lux-gallery-grid .hh-lux-side-col .hh-lux-secondary-img .img-mask {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s;
}

.hh-lux-gallery .hh-lux-gallery-grid .hh-lux-side-col .hh-lux-secondary-img:hover .img-mask {
    background-color: transparent;
}

/* --- Responsive Styles --- */
@media (min-width: 768px) {
    .hh-lux-gallery .hh-lux-gallery-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        aspect-ratio: 2.2;
        overflow: hidden;
    }

    @supports (aspect-ratio: 1) {
        .hh-lux-gallery .hh-lux-gallery-grid {
            aspect-ratio: 2.2;
        }
    }

    .hh-lux-gallery .hh-lux-gallery-grid .hh-lux-primary-img {
        grid-column: span 2;
        height: 100%;
        aspect-ratio: auto;
    }

    .hh-lux-gallery .hh-lux-gallery-grid .hh-lux-primary-img .content .hh-lux-primary-title {
        font-size: 28px;
    }

    .hh-lux-gallery .hh-lux-gallery-grid .hh-lux-primary-img .content .hh-lux-primary-tagline {
        font-size: 14px;
    }

    .hh-lux-gallery .hh-lux-gallery-grid .hh-lux-side-col {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
        grid-column: span 1;
        height: 100%;
    }

    .hh-lux-gallery .hh-lux-gallery-grid .hh-lux-side-col .hh-lux-secondary-img {
        height: 100%;
        aspect-ratio: auto;
    }
}

@media (min-width: 1024px) {
    @supports (aspect-ratio: 1) {
        .hh-lux-gallery .hh-lux-gallery-grid {
            aspect-ratio: 2.4;
        }
    }
}


/* ==========================================================================
   Two-Column Responsive Grid Layout
   ========================================================================== */

/* --- Base Styles --- */
.hh-lux-two-col-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}

.hh-lux-two-col-grid .hh-lux-left-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- Responsive Styles --- */
@media (min-width: 1024px) {
    .hh-lux-two-col-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 48px;
    }

    .hh-lux-two-col-grid .hh-lux-left-col {
        grid-column: span 8;
    }
}

@media (min-width: 1200px) {
    .hh-lux-two-col-grid {
        gap: 56px;
    }
}


/* ==========================================================================
   Main Left Column Info (Header Info, Location, and Narrative)
   ========================================================================== */

/* --- Base Styles --- */
.hh-lux-left-col .hh-lux-header-info {
    border-bottom: 1px solid var(--lux-stone-900);
    padding-bottom: 32px;
}

.hh-lux-left-col .hh-lux-header-info .hh-lux-meta-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.hh-lux-left-col .hh-lux-header-info .hh-lux-meta-badges .hh-lux-star-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    background-color: rgba(197, 168, 128, 0.1);
    border: 1px solid rgba(197, 168, 128, 0.2);
    color: var(--lux-gold);
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hh-lux-left-col .hh-lux-header-info .hh-lux-meta-badges .hh-lux-star-badge .stars {
    color: #f59e0b;
    margin-right: 4px;
}

.hh-lux-left-col .hh-lux-header-info .hh-lux-meta-badges .hh-lux-meta-badge-text {
    color: var(--lux-stone-500);
    font-size: 14px;
    font-weight: 300;
}

.hh-lux-left-col .hh-lux-header-info .hh-lux-meta-badges .hh-lux-meta-badge-tag {
    color: var(--lux-stone-400);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
}

.hh-lux-left-col .hh-lux-header-info .hh-lux-title {
    font-size: 30px;
    line-height: 1.25;
    color: #fff;
    margin-top: 0;
    margin-bottom: 16px;
    font-weight: 500;
}

.hh-lux-left-col .hh-lux-header-info .hh-lux-location {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--lux-stone-300);
    font-size: 14px;
    font-weight: 300;
}

.hh-lux-left-col .hh-lux-header-info .hh-lux-location svg {
    width: 20px;
    height: 20px;
    color: var(--lux-gold);
    flex-shrink: 0;
    margin-top: 2px;
}

.hh-lux-left-col .hh-lux-header-info .hh-lux-location .hh-lux-location-link {
    display: block;
    font-size: 11px;
    color: var(--lux-gold);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 4px;
    transition: text-decoration 0.2s;
}

.hh-lux-left-col .hh-lux-header-info .hh-lux-location .hh-lux-location-link:hover {
    text-decoration: underline;
}

/* Rich-Text Narrative */
.hh-lux-left-col .hh-lux-section-title {
    font-size: 16px;
    color: var(--lux-gold);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    border-left: 2px solid var(--lux-gold);
    padding-left: 12px;
    margin-top: 0;
    margin-bottom: 24px;
}

.hh-lux-left-col .hh-lux-narrative {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hh-lux-left-col .hh-lux-narrative p {
    color: var(--lux-stone-300);
    font-weight: 300;
    line-height: 1.8;
    font-size: 15px;
    margin: 0;
}

.hh-lux-left-col .hh-lux-narrative p.subtext {
    color: var(--lux-stone-400);
    font-size: 14px;
}

/* --- Responsive Styles --- */
@media (min-width: 768px) {


    .hh-lux-left-col .hh-lux-header-info .hh-lux-location {
        font-size: 16px;
    }

    .hh-lux-left-col .hh-lux-section-title {
        font-size: 18px;
    }

    .hh-lux-left-col .hh-lux-narrative p {
        font-size: 17px;
    }
}


/* ==========================================================================
   Curated Amenities Section
   ========================================================================== */

/* --- Base Styles --- */
.hh-lux-amenities-section {
    border-top: 1px solid var(--lux-stone-900);
    padding-top: 32px;
}

.hh-lux-amenities-section .hh-lux-section-subtitle {
    font-size: 12px;
    color: var(--lux-stone-400);
    font-weight: 300;
    margin-top: -16px;
    margin-bottom: 24px;
}

.hh-lux-amenities-section .hh-lux-amenities-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.hh-lux-amenities-section .hh-lux-amenities-grid .hh-lux-amenity-card {
    border: 1px solid var(--lux-stone-900);
    border-radius: 16px;
    padding: 10px;
    background-color: rgba(10, 10, 10, 0.4);
    transition: border-color 0.3s, background-color 0.3s;
}

.hh-lux-amenities-section .hh-lux-amenities-grid .hh-lux-amenity-card:hover {
    border-color: var(--lux-border-hover);
    background-color: rgba(20, 20, 20, 0.4);
}

.hh-lux-amenities-section .hh-lux-amenities-grid .hh-lux-amenity-card .hh-lux-amenity-icon-wrap {
    background-color: rgba(41, 37, 36, 0.5);
    padding: 10px;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 12px;
    transition: background-color 0.3s;
}

.hh-lux-amenities-section .hh-lux-amenities-grid .hh-lux-amenity-card .hh-lux-amenity-icon-wrap .hh-lux-amenity-icon {
    width: 24px;
    height: 24px;
    color: var(--lux-gold);
    display: block;
    transition: color 0.3s;
}

.hh-lux-amenities-section .hh-lux-amenities-grid .hh-lux-amenity-card:hover .hh-lux-amenity-icon-wrap {
    background-color: rgba(197, 168, 128, 0.1);
}

.hh-lux-amenities-section .hh-lux-amenities-grid .hh-lux-amenity-card:hover .hh-lux-amenity-icon-wrap .hh-lux-amenity-icon {
    color: #fff;
}

.hh-lux-amenities-section .hh-lux-amenities-grid .hh-lux-amenity-card .hh-lux-amenity-title {
    color: var(--lux-stone-200);
    font-weight: 500;
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 4px;
    transition: color 0.2s;
}

.hh-lux-amenities-section .hh-lux-amenities-grid .hh-lux-amenity-card:hover .hh-lux-amenity-title {
    color: var(--lux-gold);
}

.hh-lux-amenities-section .hh-lux-amenities-grid .hh-lux-amenity-card .hh-lux-amenity-desc {
    color: var(--lux-stone-500);
    font-size: 12px;
    font-weight: 300;
    line-height: 1.5;
    margin: 0;
}

/* --- Responsive Styles --- */
@media (min-width: 480px) {
    .hh-lux-amenities-section .hh-lux-amenities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .hh-lux-amenities-section .hh-lux-amenities-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ==========================================================================
   Right Column & Sticky Booking Widget
   ========================================================================== */

/* --- Base Styles --- */
.hh-lux-right-col {
    width: 100%;
}

.hh-lux-right-col .hh-lux-booking-widget {
    background-color: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--lux-stone-900);
    border-radius: 24px;
    padding: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
}

.hh-lux-right-col .hh-lux-booking-widget::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 128px;
    height: 128px;
    background-color: rgba(197, 168, 128, 0.04);
    border-radius: 9999px;
    filter: blur(40px);
    pointer-events: none;
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-widget-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid var(--lux-stone-900);
    padding-bottom: 24px;
    margin-bottom: 24px;
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-widget-header .hh-lux-rate-label {
    display: block;
    font-size: 10px;
    color: var(--lux-stone-500);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 4px;
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-widget-header .hh-lux-rate-val {
    font-size: 28px;
    color: var(--lux-gold);
    font-weight: 600;
    letter-spacing: -0.02em;
    transition: color 0.3s;
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-widget-header .hh-lux-rate-unit {
    color: var(--lux-stone-400);
    font-size: 12px;
    font-weight: 300;
    margin-left: 4px;
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-widget-header .hh-lux-rating-block {
    text-align: right;
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-widget-header .hh-lux-rating-block .hh-lux-widget-rating-badge {
    display: inline-block;
    background-color: rgba(197, 168, 128, 0.1);
    border: 1px solid rgba(197, 168, 128, 0.2);
    color: var(--lux-gold);
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-widget-header .hh-lux-rating-block .hh-lux-widget-reviews-count {
    display: block;
    font-size: 10px;
    color: var(--lux-stone-500);
    margin-top: 6px;
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-booking-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-booking-form .hh-lux-date-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-booking-form .hh-lux-date-row .hh-lux-date-field {
    position: relative;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--lux-stone-900);
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s;
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-booking-form .hh-lux-date-row .hh-lux-date-field:hover {
    border-color: rgba(197, 168, 128, 0.3);
    background-color: rgba(0, 0, 0, 0.6);
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-booking-form .hh-lux-date-row .hh-lux-date-field .hh-lux-field-label {
    display: block;
    font-size: 9px;
    color: var(--lux-gold);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    margin-bottom: 6px;
    transition: color 0.3s;
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-booking-form .hh-lux-date-row .hh-lux-date-field:hover .hh-lux-field-label {
    color: #fff;
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-booking-form .hh-lux-date-row .hh-lux-date-field .hh-lux-field-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-booking-form .hh-lux-date-row .hh-lux-date-field .hh-lux-field-value span {
    font-size: 12px;
    font-weight: 300;
    color: var(--lux-stone-200);
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-booking-form .hh-lux-date-row .hh-lux-date-field .hh-lux-field-value svg {
    width: 16px;
    height: 16px;
    color: var(--lux-stone-500);
    flex-shrink: 0;
    transition: color 0.3s;
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-booking-form .hh-lux-date-row .hh-lux-date-field:hover svg {
    color: var(--lux-gold);
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-booking-form .hh-lux-date-row .hh-lux-date-field input[type="date"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    cursor: pointer;
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-booking-form .hh-lux-select-field {
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--lux-stone-900);
    border-radius: 12px;
    padding: 12px;
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-booking-form .hh-lux-select-field select {
    width: 100%;
    background: transparent;
    color: var(--lux-stone-200);
    font-size: 12px;
    font-weight: 300;
    border: 0;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-booking-form .hh-lux-cta-btn {
    width: 100%;
    padding-top: 16px;
    padding-bottom: 16px;
    margin-top: 8px;
    background: linear-gradient(to right, var(--lux-gold), var(--lux-gold-dark));
    color: #000;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-booking-form .hh-lux-cta-btn:hover {
    background: linear-gradient(to right, var(--lux-gold-dark), var(--lux-gold));
    box-shadow: 0 0 20px var(--lux-shadow-glow);
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-booking-form .hh-lux-cta-btn:active {
    transform: scale(0.98);
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-widget-fineprint {
    margin-top: 20px;
    border-top: 1px solid rgba(28, 25, 23, 0.6);
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 10px;
    color: var(--lux-stone-500);
    font-weight: 300;
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-widget-fineprint .hh-lux-fineprint-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hh-lux-right-col .hh-lux-booking-widget .hh-lux-widget-fineprint .hh-lux-fineprint-item svg {
    width: 14px;
    height: 14px;
    color: var(--lux-gold);
    flex-shrink: 0;
}

/* --- Responsive Styles --- */
@media (min-width: 768px) {
    .hh-lux-right-col .hh-lux-booking-widget {
        padding: 20px;
    }

    .hh-lux-right-col .hh-lux-booking-widget .hh-lux-widget-header .hh-lux-rate-val {
        font-size: 32px;
    }

    .hh-lux-right-col .hh-lux-booking-widget .hh-lux-booking-form .hh-lux-date-row .hh-lux-date-field .hh-lux-field-value span {
        font-size: 14px;
    }

    .hh-lux-right-col .hh-lux-booking-widget .hh-lux-booking-form .hh-lux-select-field select {
        font-size: 14px;
    }
}

@media (min-width: 1024px) {
    .hh-lux-right-col {
        grid-column: span 4;
        position: sticky;
        top: 110px;
        z-index: 10;
    }
}


/* ==========================================================================
   Room Options Section & Card Grid
   ========================================================================= */

/* --- Base Styles --- */
.hh-lux-section-wrap {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    margin-top: 20px;
    border-top: 1px solid var(--lux-stone-900);
    padding-top: 20px;
}

.hh-lux-section-wrap .hh-lux-section-header {
    margin-bottom: 48px;
    text-align: center;
}

.hh-lux-section-wrap .hh-lux-section-header .section-tag {
    font-size: 12px;
    color: var(--lux-gold);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.hh-lux-section-wrap .hh-lux-section-header .section-title {
    font-size: 30px;
    color: #fff;
    margin-top: 0;
    margin-bottom: 12px;
    font-weight: 500;
}

.hh-lux-section-wrap .hh-lux-section-header .section-desc {
    font-size: 14px;
    color: var(--lux-stone-400);
    font-weight: 300;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}

.hh-lux-section-wrap .hh-lux-rooms-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

.hh-lux-section-wrap .hh-lux-rooms-grid .hh-lux-room-card {
    background-color: var(--lux-card-bg);
    border: 1px solid var(--lux-stone-900);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s, background-color 0.3s;
}

.hh-lux-section-wrap .hh-lux-rooms-grid .hh-lux-room-card:hover {
    border-color: var(--lux-border-hover);
    background-color: rgba(20, 20, 20, 0.3);
}

.hh-lux-section-wrap .hh-lux-rooms-grid .hh-lux-room-card .img-container {
    aspect-ratio: 4/3;
    overflow: hidden;
    background-color: var(--lux-stone-900);
    position: relative;
}

.hh-lux-section-wrap .hh-lux-rooms-grid .hh-lux-room-card .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.hh-lux-section-wrap .hh-lux-rooms-grid .hh-lux-room-card:hover .img-container img {
    transform: scale(1.05);
}

.hh-lux-section-wrap .hh-lux-rooms-grid .hh-lux-room-card .img-container .size-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--lux-stone-800);
    color: var(--lux-stone-200);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 9999px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.hh-lux-section-wrap .hh-lux-rooms-grid .hh-lux-room-card .hh-lux-room-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.hh-lux-section-wrap .hh-lux-rooms-grid .hh-lux-room-card .hh-lux-room-body .hh-lux-room-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hh-lux-section-wrap .hh-lux-rooms-grid .hh-lux-room-card .hh-lux-room-body .hh-lux-room-info .hh-lux-room-title {
    font-size: 20px;
    color: #fff;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 0;
    transition: color 0.2s;
}

.hh-lux-section-wrap .hh-lux-rooms-grid .hh-lux-room-card:hover .hh-lux-room-body .hh-lux-room-info .hh-lux-room-title {
    color: var(--lux-gold);
}

.hh-lux-section-wrap .hh-lux-rooms-grid .hh-lux-room-card .hh-lux-room-body .hh-lux-room-info .hh-lux-room-desc {
    color: var(--lux-stone-400);
    font-size: 12px;
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
    min-height: 48px;
}

.hh-lux-section-wrap .hh-lux-rooms-grid .hh-lux-room-card .hh-lux-room-body .hh-lux-room-info .hh-lux-room-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hh-lux-section-wrap .hh-lux-rooms-grid .hh-lux-room-card .hh-lux-room-body .hh-lux-room-info .hh-lux-room-highlights span {
    font-size: 10px;
    border: 1px solid var(--lux-stone-800);
    color: var(--lux-stone-400);
    padding: 4px 10px;
    border-radius: 9999px;
    font-weight: 300;
    transition: border-color 0.2s, color 0.2s;
}

.hh-lux-section-wrap .hh-lux-rooms-grid .hh-lux-room-card:hover .hh-lux-room-body .hh-lux-room-info .hh-lux-room-highlights span {
    border-color: rgba(197, 168, 128, 0.15);
    color: var(--lux-stone-300);
}

.hh-lux-section-wrap .hh-lux-rooms-grid .hh-lux-room-card .hh-lux-room-body .hh-lux-room-info .hh-lux-room-specs {
    border-top: 1px solid rgba(28, 25, 23, 0.6);
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 12px;
    color: var(--lux-stone-500);
    font-weight: 300;
}

.hh-lux-section-wrap .hh-lux-rooms-grid .hh-lux-room-card .hh-lux-room-body .hh-lux-room-info .hh-lux-room-specs .hh-lux-spec-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hh-lux-section-wrap .hh-lux-rooms-grid .hh-lux-room-card .hh-lux-room-body .hh-lux-room-info .hh-lux-room-specs .hh-lux-spec-item svg {
    width: 16px;
    height: 16px;
    color: rgba(197, 168, 128, 0.7);
    flex-shrink: 0;
}

.hh-lux-section-wrap .hh-lux-rooms-grid .hh-lux-room-card .hh-lux-room-body .hh-lux-room-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    border-top: 1px solid var(--lux-stone-900);
    padding-top: 20px;
}

.hh-lux-section-wrap .hh-lux-rooms-grid .hh-lux-room-card .hh-lux-room-body .hh-lux-room-footer .hh-lux-room-price-lbl {
    font-size: 9px;
    color: var(--lux-stone-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 2px;
}

.hh-lux-section-wrap .hh-lux-rooms-grid .hh-lux-room-card .hh-lux-room-body .hh-lux-room-footer .hh-lux-room-price-val {
    font-size: 18px;
    color: var(--lux-gold);
    font-weight: 600;
}

.hh-lux-section-wrap .hh-lux-rooms-grid .hh-lux-room-card .hh-lux-room-body .hh-lux-room-footer .hh-lux-room-select-btn {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid rgba(197, 168, 128, 0.4);
    color: var(--lux-gold);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.hh-lux-section-wrap .hh-lux-rooms-grid .hh-lux-room-card .hh-lux-room-body .hh-lux-room-footer .hh-lux-room-select-btn:hover {
    background-color: var(--lux-gold);
    color: #000;
}

/* --- Responsive Styles --- */
@media (min-width: 768px) {
    .hh-lux-section-wrap {
        padding-left: 32px;
        padding-right: 32px;
    }

    .hh-lux-section-wrap .hh-lux-section-header {
        text-align: left;
    }

    .hh-lux-section-wrap .hh-lux-section-header .section-title {
        font-size: 36px;
    }

    .hh-lux-section-wrap .hh-lux-section-header .section-desc {
        margin-left: 0;
    }

    .hh-lux-section-wrap .hh-lux-rooms-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hh-lux-section-wrap .hh-lux-rooms-grid .hh-lux-room-card .hh-lux-room-body {
        padding: 15px;
        gap: 10px;
    }

    .hh-lux-section-wrap .hh-lux-rooms-grid .hh-lux-room-card .hh-lux-room-body .hh-lux-room-footer .hh-lux-room-price-val {
        font-size: 20px;
    }
}

@media (min-width: 1024px) {
    .hh-lux-section-wrap .hh-lux-rooms-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ==========================================================================
   Testimonial Reviews Section
   ========================================================================== */

/* --- Base Styles --- */
.hh-lux-reviews-swiper {
    width: 100%;
    position: relative;
    padding-bottom: 50px !important;
    overflow: hidden;
}

.hh-lux-reviews-swiper .hh-lux-review-card {
    background-color: var(--lux-card-bg);
    border: 1px solid var(--lux-stone-900);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: border-color 0.3s;
    height: auto;
    box-sizing: border-box;
}

.hh-lux-reviews-swiper .hh-lux-review-card:hover {
    border-color: rgba(197, 168, 128, 0.2);
}

.hh-lux-reviews-swiper .hh-lux-review-card .hh-lux-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hh-lux-reviews-swiper .hh-lux-review-card .hh-lux-review-header .hh-lux-review-author-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hh-lux-reviews-swiper .hh-lux-review-card .hh-lux-review-header .hh-lux-review-author-wrap .hh-lux-review-avatar {
    width: 40px;
    height: 40px;
    background-color: rgba(197, 168, 128, 0.1);
    border: 1px solid rgba(197, 168, 128, 0.2);
    color: var(--lux-gold);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

.hh-lux-reviews-swiper .hh-lux-review-card .hh-lux-review-header .hh-lux-review-author-wrap .hh-lux-review-author-name {
    color: var(--lux-stone-200);
    font-weight: 500;
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 0;
}

.hh-lux-reviews-swiper .hh-lux-review-card .hh-lux-review-header .hh-lux-review-author-wrap .hh-lux-review-author-date {
    display: block;
    font-size: 10px;
    color: var(--lux-stone-500);
    font-weight: 300;
    margin-top: 4px;
}

.hh-lux-reviews-swiper .hh-lux-review-card .hh-lux-review-header .hh-lux-review-rating {
    color: #f59e0b;
    font-size: 12px;
    font-weight: 600;
}

.hh-lux-reviews-swiper .hh-lux-review-card .hh-lux-review-text {
    color: var(--lux-stone-300);
    font-weight: 300;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* Custom Swiper Controls */
.hh-lux-reviews-swiper .swiper-button-next,
.hh-lux-reviews-swiper .swiper-button-prev {
    color: var(--lux-gold);
    transition: color 0.3s;
}

.hh-lux-reviews-swiper .swiper-button-next:hover,
.hh-lux-reviews-swiper .swiper-button-prev:hover {
    color: #fff;
}

.hh-lux-reviews-swiper .swiper-button-next::after,
.hh-lux-reviews-swiper .swiper-button-prev::after {
    font-size: 24px;
}

.hh-lux-reviews-swiper .swiper-pagination-bullet {
    background: var(--lux-stone-600);
    opacity: 0.5;
    transition: background 0.3s, transform 0.3s;
}

.hh-lux-reviews-swiper .swiper-pagination-bullet-active {
    background: var(--lux-gold);
    opacity: 1;
    transform: scale(1.2);
}

/* --- Responsive Styles --- */
@media (min-width: 768px) {
    .hh-lux-reviews-swiper .hh-lux-review-card {
        padding: 32px;
    }
}


/* ==========================================================================
   Accordion FAQs Section
   ========================================================================== */

/* --- Base Styles --- */
.hh-lux-faq-section {
    max-width: 896px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    margin-top: 30px;
    border-top: 1px solid var(--lux-stone-900);
    padding-top: 30px;
}

.hh-lux-faq-section .hh-lux-section-header {
    margin-bottom: 40px;
    text-align: center;
}

.hh-lux-faq-section .hh-lux-faq-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hh-lux-faq-section .hh-lux-faq-grid .hh-lux-faq-item {
    border: 1px solid var(--lux-stone-900);
    border-radius: 16px;
    background-color: var(--lux-card-bg);
    overflow: hidden;
    transition: border-color 0.3s;
}

.hh-lux-faq-section .hh-lux-faq-grid .hh-lux-faq-item:hover {
    border-color: rgba(197, 168, 128, 0.15);
}

.hh-lux-faq-section .hh-lux-faq-grid .hh-lux-faq-item .hh-lux-faq-btn {
    width: 100%;
    padding: 20px;
    background: transparent;
    border: 0;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--lux-stone-200);
    cursor: pointer;
    outline: none;
    transition: color 0.2s;
}

.hh-lux-faq-section .hh-lux-faq-grid .hh-lux-faq-item .hh-lux-faq-btn:hover {
    color: var(--lux-gold);
}

.hh-lux-faq-section .hh-lux-faq-grid .hh-lux-faq-item .hh-lux-faq-btn span {
    font-weight: 500;
    font-size: 14px;
}

.hh-lux-faq-section .hh-lux-faq-grid .hh-lux-faq-item .hh-lux-faq-btn .hh-lux-faq-icon {
    width: 16px;
    height: 16px;
    color: var(--lux-stone-500);
    transition: transform 0.3s, color 0.3s;
}

.hh-lux-faq-section .hh-lux-faq-grid .hh-lux-faq-item .hh-lux-faq-btn:hover .hh-lux-faq-icon {
    color: var(--lux-gold);
}

.hh-lux-faq-section .hh-lux-faq-grid .hh-lux-faq-item .hh-lux-faq-answer-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}

.hh-lux-faq-section .hh-lux-faq-grid .hh-lux-faq-item .hh-lux-faq-answer-wrap .hh-lux-faq-answer {
    padding: 20px;
    padding-top: 0;
    color: var(--lux-stone-400);
    font-weight: 300;
    font-size: 14px;
    line-height: 1.6;
    border-top: 1px solid rgba(28, 25, 23, 0.4);
}

/* Active faq-open States */
.hh-lux-faq-section .hh-lux-faq-grid .hh-lux-faq-item.faq-open {
    border-color: var(--lux-border-hover);
}

.hh-lux-faq-section .hh-lux-faq-grid .hh-lux-faq-item.faq-open .hh-lux-faq-btn .hh-lux-faq-icon {
    transform: rotate(180deg);
    color: var(--lux-gold);
}

/* --- Responsive Styles --- */
@media (min-width: 768px) {
    .hh-lux-faq-section .hh-lux-faq-grid .hh-lux-faq-item .hh-lux-faq-btn span {
        font-size: 16px;
    }
}


/* ==========================================================================
   Lightbox Modal Gallery Overlay
   ========================================================================== */

/* --- Base Styles --- */
#lightboxModal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.95);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#lightboxModal:not(.hidden) {
    display: flex;
}

#lightboxModal.opacity-0 {
    opacity: 0;
    pointer-events: none;
}

#lightboxModal:not(.opacity-0) {
    opacity: 1;
    pointer-events: auto;
}

#lightboxModal.hidden {
    display: none !important;
}

#lightboxModal #closeLightbox {
    position: absolute;
    top: 24px;
    right: 24px;
    color: var(--lux-stone-400);
    background-color: rgba(0, 0, 0, 0.3);
    border: 0;
    border-radius: 9999px;
    padding: 8px;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#lightboxModal #closeLightbox svg {
    width: 32px;
    height: 32px;
    display: block;
}

#lightboxModal #closeLightbox:hover {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
}

#lightboxModal #prevLightbox,
#lightboxModal #nextLightbox {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lux-stone-400);
    background-color: rgba(0, 0, 0, 0.3);
    border: 0;
    border-radius: 9999px;
    padding: 8px;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#lightboxModal #prevLightbox svg,
#lightboxModal #nextLightbox svg {
    width: 40px;
    height: 40px;
    display: block;
}

#lightboxModal #prevLightbox:hover,
#lightboxModal #nextLightbox:hover {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
}

#lightboxModal #prevLightbox {
    left: 16px;
}

#lightboxModal #nextLightbox {
    right: 16px;
}

#lightboxModal .img-viewer-wrap {
    width: 100%;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

#lightboxModal .img-viewer-wrap #lightboxActiveImage {
    max-width: 100%;
    max-height: 72vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
    transition: transform 0.3s;
}

#lightboxModal .lightbox-footer {
    width: 100%;
    max-width: 42rem;
    text-align: center;
    padding-bottom: 16px;
}

#lightboxModal .lightbox-footer .lightbox-counter {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--lux-gold);
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 4px;
}

#lightboxModal .lightbox-footer .lightbox-caption {
    font-size: 13px;
    font-weight: 300;
    color: var(--lux-stone-300);
    margin-top: 0;
    margin-bottom: 16px;
}

#lightboxModal .lightbox-footer .lightbox-thumb-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    overflow-x: auto;
    padding-top: 8px;
    padding-bottom: 8px;
}

#lightboxModal .lightbox-footer .lightbox-thumb-row .lightbox-thumb {
    border: 2px solid var(--lux-stone-800);
    border-radius: 8px;
    overflow: hidden;
    width: 64px;
    height: 48px;
    flex-shrink: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.2s;
}

#lightboxModal .lightbox-footer .lightbox-thumb-row .lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#lightboxModal .lightbox-footer .lightbox-thumb-row .lightbox-thumb:hover {
    border-color: rgba(197, 168, 128, 0.5);
}

#lightboxModal .lightbox-footer .lightbox-thumb-row .lightbox-thumb.border-luxury-gold {
    border-color: var(--lux-gold) !important;
}

/* --- Responsive Styles --- */
@media (min-width: 768px) {

    #lightboxModal #prevLightbox svg,
    #lightboxModal #nextLightbox svg {
        width: 48px;
        height: 48px;
    }

    #lightboxModal #prevLightbox {
        left: 32px;
    }

    #lightboxModal #nextLightbox {
        right: 32px;
    }
}


/* ==========================================================================
   Blog Hero Banner
   ========================================================================== */

/* --- Base Styles --- */
.hh-lux-blog-hero-banner {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background-color: var(--lux-stone-900);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    aspect-ratio: 21/9;
}

.hh-lux-blog-hero-banner .hh-lux-blog-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hh-lux-blog-hero-banner .hh-lux-blog-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
}

.hh-lux-blog-hero-banner .hh-lux-blog-hero-overlay .hh-lux-blog-hero-category {
    display: inline-block;
    background-color: var(--lux-gold);
    color: #000;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
    align-self: flex-start;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

.hh-lux-blog-hero-banner .hh-lux-blog-hero-overlay .hh-lux-blog-hero-title {
    font-size: 24px;
    color: #fff;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 8px;
    line-height: 1.3;
}

.hh-lux-blog-hero-banner .hh-lux-blog-hero-overlay .hh-lux-blog-hero-meta {
    font-size: 12px;
    font-weight: 300;
    color: var(--lux-stone-300);
    display: flex;
    align-items: center;
    gap: 8px;
}

.hh-lux-blog-hero-banner .hh-lux-blog-hero-overlay .hh-lux-blog-hero-meta .dot {
    color: var(--lux-stone-600);
}

/* --- Responsive Styles --- */
@media (min-width: 768px) {
    .hh-lux-blog-hero-banner {
        aspect-ratio: 3/1;
    }

    .hh-lux-blog-hero-banner .hh-lux-blog-hero-overlay {
        padding: 40px;
    }

    .hh-lux-blog-hero-banner .hh-lux-blog-hero-overlay .hh-lux-blog-hero-title {
        font-size: 48px;
    }
}


/* ==========================================================================
   Blog Article Content & Grid
   ========================================================================== */

/* --- Base Styles --- */
.hh-lux-blog-grid-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}

.hh-lux-blog-grid-wrap .hh-lux-blog-article-body {
    background-color: var(--lux-card-bg);
    border: 1px solid var(--lux-stone-900);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.hh-lux-blog-grid-wrap .hh-lux-blog-article-body .hh-lux-blog-featured-img-wrap {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    aspect-ratio: 16/10;
    background-color: var(--lux-stone-900);
}

.hh-lux-blog-grid-wrap .hh-lux-blog-article-body .hh-lux-blog-featured-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.hh-lux-blog-grid-wrap .hh-lux-blog-article-body .hh-lux-blog-featured-img-wrap:hover img {
    transform: scale(1.02);
}

.hh-lux-blog-grid-wrap .hh-lux-blog-article-body .hh-lux-blog-meta-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--lux-stone-500);
    font-weight: 300;
    border-bottom: 1px solid var(--lux-stone-900);
    padding-bottom: 16px;
}

.hh-lux-blog-grid-wrap .hh-lux-blog-article-body .hh-lux-blog-meta-footer strong {
    font-weight: 400;
}

.hh-lux-blog-grid-wrap .hh-lux-blog-article-body .hh-lux-blog-paragraphs {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hh-lux-blog-grid-wrap .hh-lux-blog-article-body .hh-lux-blog-paragraphs p {
    color: var(--lux-stone-300);
    font-weight: 300;
    line-height: 1.8;
    font-size: 15px;
    margin: 0;
}

/* --- Responsive Styles --- */
@media (min-width: 768px) {
    .hh-lux-blog-grid-wrap .hh-lux-blog-article-body {
        padding: 32px;
    }

    .hh-lux-blog-grid-wrap .hh-lux-blog-article-body .hh-lux-blog-featured-img-wrap {
        aspect-ratio: 16/9;
    }

    .hh-lux-blog-grid-wrap .hh-lux-blog-article-body .hh-lux-blog-paragraphs p {
        font-size: 17px;
    }
}

@media (min-width: 1024px) {
    .hh-lux-blog-grid-wrap {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 48px;
    }

    .hh-lux-blog-grid-wrap .hh-lux-blog-article-body {
        grid-column: span 8;
    }
}


/* ==========================================================================
   Blog Sidebar Options
   ========================================================================== */

/* --- Base Styles --- */
.hh-lux-blog-sidebar {
    background-color: var(--lux-card-bg);
    border: 1px solid var(--lux-stone-900);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.hh-lux-blog-sidebar .hh-lux-section-title {
    font-size: 16px;
    color: var(--lux-gold);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    border-left: 2px solid var(--lux-gold);
    padding-left: 12px;
    margin-top: 0;
    margin-bottom: 24px;
}

.hh-lux-blog-sidebar .hh-lux-blog-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hh-lux-blog-sidebar .hh-lux-blog-sidebar-list .hh-lux-sidebar-blog-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border-bottom: 1px solid var(--lux-stone-900);
    padding-bottom: 16px;
}

.hh-lux-blog-sidebar .hh-lux-blog-sidebar-list .hh-lux-sidebar-blog-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.hh-lux-blog-sidebar .hh-lux-blog-sidebar-list .hh-lux-sidebar-blog-item .hh-lux-sidebar-blog-thumb {
    width: 64px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--lux-stone-900);
    flex-shrink: 0;
    position: relative;
}

.hh-lux-blog-sidebar .hh-lux-blog-sidebar-list .hh-lux-sidebar-blog-item .hh-lux-sidebar-blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.hh-lux-blog-sidebar .hh-lux-blog-sidebar-list .hh-lux-sidebar-blog-item:hover .hh-lux-sidebar-blog-thumb img {
    transform: scale(1.05);
}

.hh-lux-blog-sidebar .hh-lux-blog-sidebar-list .hh-lux-sidebar-blog-item .hh-lux-sidebar-blog-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hh-lux-blog-sidebar .hh-lux-blog-sidebar-list .hh-lux-sidebar-blog-item .hh-lux-sidebar-blog-info .hh-lux-sidebar-blog-link {
    color: var(--lux-stone-300);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    transition: color 0.2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hh-lux-blog-sidebar .hh-lux-blog-sidebar-list .hh-lux-sidebar-blog-item .hh-lux-sidebar-blog-info .hh-lux-sidebar-blog-link:hover {
    color: var(--lux-gold);
}

.hh-lux-blog-sidebar .hh-lux-blog-sidebar-list .hh-lux-sidebar-blog-item .hh-lux-sidebar-blog-info .hh-lux-sidebar-blog-date {
    font-size: 10px;
    color: var(--lux-stone-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 300;
}

.hh-lux-blog-sidebar .hh-lux-blog-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--lux-gold);
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color 0.2s;
}

.hh-lux-blog-sidebar .hh-lux-blog-back-btn:hover {
    color: #fff;
}

.hh-lux-blog-sidebar .hh-lux-blog-back-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.hh-lux-blog-sidebar .hh-lux-blog-back-btn:hover svg {
    transform: translateX(-4px);
}

/* --- Responsive Styles --- */
@media (min-width: 768px) {
    .hh-lux-blog-sidebar {
        padding: 32px;
    }
}

@media (min-width: 1024px) {
    .hh-lux-blog-sidebar {
        grid-column: span 4;
    }
}


/* ==========================================================================
   Luxury Scoped Utilities
   ========================================================================== */

.hh-lux-gold-text {
    color: var(--lux-gold) !important;
}

/* ==========================================================================
   About Us Page Styling
   ========================================================================== */

.hh-about-story-section {
    padding: 96px 0;
    background: #000;
}

.hh-about-story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.hh-about-story-img-wrap {
    border: 5px solid var(--hh-gold);
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4 / 4;
    background: #111;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.hh-about-story-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.hh-about-story-img-wrap:hover .hh-about-story-img {
    transform: scale(1.05);
}

.hh-about-story-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hh-about-story-content .hh-section-label {
    margin-bottom: 12px;
}

.hh-about-story-title {
    font-size: 35px;
    color: var(--hh-gold-deep);
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 24px;
}

.hh-about-story-text {
    font-size: 15px;
    line-height: 1.8;
    color: var(--hh-muted);
    margin-bottom: 20px;
}

.hh-about-story-text.hh-highlight {
    font-size: 16px;
    color: #fff;
    font-weight: 500;
}

@media (max-width:768px) {
    .hh-about-story-title {
        font-size: 30px;
    }
}

/* ==========================
   About Hero Video Section
========================== */

.hh-about-hero-video {
    position: relative;
    min-height: 65vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-top: 100px;
}

.hh-about-hero-video .container {
    position: relative;
    width: 100%;
    height: 100%;
}

.hh-about-hero-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hh-about-hero-video-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.45),
            rgba(0, 0, 0, 0.65));
    z-index: 2;
}

.hh-about-hero-video-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
}

.hh-about-hero-content {
    position: relative;
    z-index: 3;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    border-radius: 20px;
}

.hh-about-hero-title {
    margin: 0 auto;
    color: var(--hh-gold);
    font-size: 40px;
    line-height: 1.1;
    font-weight: 600;
}

/* ==========================
   Responsive
========================== */

@media (max-width: 991px) {

    .hh-about-hero-video,
    .hh-about-hero-content {
        min-height: 40vh;
        border-radius: 0px;
    }

    .hh-about-hero-video-el {
        border-radius: 0px;
    }

    .hh-about-hero-title {
        font-size: 25px;
    }
}

@media (max-width: 767px) {

    .hh-about-hero-video,
    .hh-about-hero-content {
        min-height: 25vh;
        margin-top: 50px;
    }

    .hh-about-hero-video-el {
        border-radius: 0px;
    }

    .hh-about-hero-title {
        font-size: 20px;
        line-height: 1.2;
    }
}

/* Creative Mission & Vision Section */
.hh-about-creative-mv {
    padding: 30px 0;
    background: linear-gradient(180deg, #000 0%, #0d0c08 50%, #000 100%);
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(243, 171, 32, 0.08);
    border-bottom: 1px solid rgba(243, 171, 32, 0.08);
}

.hh-about-mv-grid-creative {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.hh-about-mv-block-wrap {
    position: relative;
    border-radius: 20px;
    padding: 2px;
    background: rgba(243, 171, 32, 0.08);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hh-about-mv-block-wrap:hover {
    transform: translateY(-6px);
}

.hh-about-mv-glow-bg {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: radial-gradient(circle at 50% 10%, rgba(243, 171, 32, 0.15), transparent 70%);
    opacity: 0.5;
    transition: opacity 0.4s;
    pointer-events: none;
}

.hh-about-mv-block-wrap:hover .hh-about-mv-glow-bg {
    opacity: 1;
}

.hh-about-mv-card-creative {
    background: linear-gradient(180deg, rgba(21, 19, 12, 0.95), rgba(13, 12, 8, 0.98));
    border: 1px solid rgba(243, 171, 32, 0.12);
    border-radius: 18px;
    padding: 48px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.hh-about-mv-block-wrap.hh-mission-wrap {
    background: linear-gradient(135deg, rgba(243, 171, 32, 0.35) 0%, transparent 100%);
    box-shadow: 0 10px 30px rgba(243, 171, 32, 0.04);
}

.hh-about-mv-block-wrap.hh-mission-wrap .hh-about-mv-card-creative {
    border-color: rgba(243, 171, 32, 0.25);
}

.hh-about-mv-header-creative {
    margin-bottom: 24px;
}

.hh-about-mv-badge-creative {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #1a1300;
    background: linear-gradient(180deg, #f4c95e, #d29b2d);
    padding: 4px 14px;
    border-radius: 99px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.hh-about-mv-title-creative {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.hh-about-mv-text-creative {
    font-size: 15px;
    line-height: 1.85;
    color: var(--hh-muted);
    margin: 0 0 32px;
}

.hh-about-mv-footer-creative {
    display: flex;
    align-items: center;
    gap: 16px;
    border-top: 1px solid rgba(243, 171, 32, 0.08);
    padding-top: 24px;
    margin-top: auto;
}

.hh-about-mv-stat {
    font-size: 32px;
    font-weight: 700;
    color: var(--hh-gold);
    line-height: 1;
}

.hh-about-mv-stat-label {
    font-size: 11px;
    color: var(--hh-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Stewardship Sacred Pledge Banner */
.hh-about-mv-stewardship-banner {
    position: relative;
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(21, 19, 12, 0.9) 0%, rgba(13, 12, 8, 0.95) 100%);
    border: 1px solid rgba(243, 171, 32, 0.18);
    padding: 32px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.hh-stewardship-glow {
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    height: 100%;
    background: radial-gradient(circle at 10% 50%, rgba(243, 171, 32, 0.08), transparent 70%);
    pointer-events: none;
}

.hh-stewardship-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 28px;
}

.hh-stewardship-icon {
    width: 56px;
    height: 56px;
    color: var(--hh-gold);
    flex-shrink: 0;
    background: rgba(243, 171, 32, 0.06);
    padding: 12px;
    border-radius: 50%;
    border: 1px solid rgba(243, 171, 32, 0.15);
}

.hh-stewardship-text-wrap {
    flex-grow: 1;
}

.hh-stewardship-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 6px;
}

.hh-stewardship-desc {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--hh-gold);
    opacity: 0.95;
    margin: 0;
    font-style: italic;
}

/* Core Values Section */
.hh-about-values-section {
    padding: 30px 0;
    background: #000;
}

.hh-about-values-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 20px;
}

.hh-about-values-header .hh-section-label {
    margin-bottom: 12px;
}

.hh-about-values-header .hh-properties-title {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    color: #fff;
    margin: 0;
}

.hh-about-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.hh-about-value-card {
    background: linear-gradient(180deg, #12100a 0%, #080705 100%);
    border: 1px solid rgba(243, 171, 32, 0.08);
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.hh-about-value-card:hover {
    transform: translateY(-4px);
    border-color: rgba(243, 171, 32, 0.3);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

.hh-about-value-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(243, 171, 32, 0.08);
    display: grid;
    place-items: center;
    color: var(--hh-gold);
    margin-bottom: 8px;
    border: 1px solid rgba(243, 171, 32, 0.15);
    transition: background 0.3s, transform 0.3s;
}

.hh-about-value-card:hover .hh-about-value-icon-wrap {
    background: var(--hh-gold);
    color: #1a1300;
    transform: scale(1.05);
}

.hh-about-value-icon {
    width: 28px;
    height: 28px;
}

.hh-about-value-title {
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.hh-about-value-desc {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--hh-muted);
    margin: 0;
}

/* CTA Gateway Section */
.hh-about-cta-section {
    position: relative;
    padding: 120px 0;
    text-align: center;
    overflow: hidden;
}

.hh-about-cta-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.hh-about-cta-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.92) 100%);
}

.hh-about-cta-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.hh-about-cta-subtitle {
    color: var(--hh-gold);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.hh-about-cta-title {
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    color: #fff;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

.hh-about-cta-desc {
    color: var(--hh-muted);
    font-size: 16px;
    line-height: 1.7;
    max-width: 600px;
    margin: 0 0 12px;
}

/* Responsive Overrides */
@media (max-width: 992px) {
    .hh-about-story-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hh-about-value-card {
        padding: 12px;
    }

    .hh-about-story-img-wrap {
        max-width: 500px;
        margin: 0 auto;
        aspect-ratio: 5/3;
    }

    .hh-about-mv-grid-creative {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .hh-about-values-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 576px) {
    .hh-about-values-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .hh-about-mv-card-creative {
        padding: 32px 24px;
    }

    .hh-about-story-section,
    .hh-about-creative-mv,
    .hh-about-values-section {
        padding: 30px 0;
    }
}

/* ==========================================================================
   Homepage Testimonials Section Styling
   ========================================================================== */

.hh-testimonials-section {
    padding: 40px 0;
    background: #000;
}

.hh-testimonials-swiper {
    position: relative;
    padding-bottom: 50px !important;
    overflow: hidden;
}

.hh-testimonial-card {
    background: linear-gradient(180deg, #15130c 0%, #0d0c08 100%);
    border: 1px solid rgba(243, 171, 32, 0.12);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 420px;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s ease;
    box-sizing: border-box;
}

.hh-testimonial-card:hover {
    transform: translateY(-4px);
    border-color: rgba(243, 171, 32, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.hh-testimonial-quote-title {
    font-size: clamp(15px, 2.5vw, 17.5px);
    font-weight: 600;
    color: var(--hh-gold);
    line-height: 1.45;
    margin-bottom: 16px;
}

.hh-testimonial-quote-body {
    font-size: 14px;
    line-height: 1.8;
    color: var(--hh-muted);
    margin-bottom: 24px;
}

.hh-testimonial-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    border-top: 1px solid rgba(243, 171, 32, 0.08);
    padding-top: 20px;
    margin-top: auto;
}

.hh-testimonial-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid var(--hh-gold);
    object-fit: cover;
    flex-shrink: 0;
}

.hh-testimonial-meta {
    flex-grow: 1;
}

.hh-testimonial-name {
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
}

.hh-testimonial-designation {
    font-size: 11px;
    color: var(--hh-gold);
    opacity: 0.85;
    margin-top: 2px;
}

.hh-testimonial-logo {
    max-height: 24px;
    max-width: 100px;
    object-fit: contain;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.hh-testimonial-card:hover .hh-testimonial-logo {
    opacity: 1;
}

/* Pagination Styling */
.hh-testimonials-pagination {
    bottom: 0 !important;
}

.hh-testimonials-pagination .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.3) !important;
    opacity: 1;
    width: 10px;
    height: 10px;
    transition: background 0.3s, transform 0.3s;
}

.hh-testimonials-pagination .swiper-pagination-bullet-active {
    background: var(--hh-gold) !important;
    transform: scale(1.2);
}

.hh-section-header-center {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 56px;
}

@media (max-width:768px) {
    .hh-testimonial-card {
        padding: 18px;
    }
}