/* ============================================================================
   HOTEL HILTON INN — PREMIUM DESIGN LAYER
   Loads after style.css and custom.css. Restyles the existing markup into a
   5-star luxury aesthetic (palette, type, spacing, cards, motion) without
   touching any PHP/backend logic, forms, routes or JS functionality.
   ============================================================================ */

:root {
    /* Palette */
    --hh-ivory:        #FBF8F2;
    --hh-ivory-deep:   #F3EAD6;
    --hh-paper:        #FFFFFF;
    --hh-gold:         #AE8A4E;
    --hh-gold-light:   #D8BE8B;
    --hh-gold-soft:    #EFE3C8;
    --hh-charcoal:     #15120D;
    --hh-charcoal-2:   #1E1912;
    --hh-ink:          #241F17;
    --hh-stone:        #6E6455;
    --hh-stone-light:  #948A78;
    --hh-line:         #E5DAC1;
    --hh-line-dark:    rgba(255,255,255,0.12);

    /* Type */
    --hh-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --hh-sans:  'Jost', 'Hind', Arial, sans-serif;

    /* Motion */
    --hh-ease: cubic-bezier(.22,.61,.36,1);
}

/* ----------------------------------------------------------------------
   0. Base / typography
   ---------------------------------------------------------------------- */
#page-wrap { background-color: var(--hh-ivory); }

/* Preloader: the hotel crest, centered on the same point the theme's
   gold ripple ring already expands from, with a slow breathing pulse
   so the screen doesn't feel static while the page loads. */
#preloader { background-color: var(--hh-ivory) !important; }
#preloader .preloader-logo {
    position: absolute; top: 50%; left: 50%; z-index: 1;
    width: 200px; height: auto; transform: translate(-50%, -50%);
    animation: hh-preloader-pulse 1.8s ease-in-out infinite;
}
@media (max-width: 767px) {
    #preloader .preloader-logo { width: 150px; }
}
#preloader .preloader-dot { border-color: var(--hh-gold) !important; }
@keyframes hh-preloader-pulse {
    0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.94); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    #preloader .preloader-logo { animation: none; opacity: 1; }
}
body { font-family: var(--hh-sans); color: var(--hh-ink); -webkit-font-smoothing: antialiased; }
p { font-family: var(--hh-sans); color: var(--hh-stone); line-height: 1.85em; letter-spacing: .01em; }
p { text-align: justify; }
.text-center p, p.text-center, .sub-banner p, .faq-heading p, .guestbook-item p { text-align: center; }

h1, h2, h3, h4, h5, h6,
.heading { font-family: var(--hh-serif); color: var(--hh-ink); font-weight: 600; letter-spacing: .01em; }

.heading { font-size: 40px; text-transform: none !important; position: relative; }
.heading.white { color: #fff; }
.heading.text-center { text-align: center; }

.sub-heading {
    font-family: var(--hh-sans); color: var(--hh-stone-light); font-size: 13px;
    letter-spacing: .22em; text-transform: uppercase; margin-bottom: 14px !important; display: block;
}

/* The thin gold rule under section headings */
.box-border {
    background: linear-gradient(90deg, var(--hh-gold), var(--hh-gold-light)) !important;
    height: 2px !important; width: 64px !important; margin: 18px auto 0;
}
.section-home-about .box-border,
.section-team .box-border { margin-left: 0; margin-right: auto; }

/* A reusable eyebrow label (small tracked caps) for section intros */
.hh-eyebrow {
    display: inline-block; font-family: var(--hh-sans); font-size: 12px; font-weight: 500;
    letter-spacing: .3em; text-transform: uppercase; color: var(--hh-gold); margin-bottom: 14px;
}
.hh-eyebrow::before { content: ''; display: inline-block; width: 22px; height: 1px; background: var(--hh-gold); margin-right: 10px; vertical-align: middle; }

::selection { background: var(--hh-gold); color: #fff; }

/* ----------------------------------------------------------------------
   1. Header / Navigation
   ---------------------------------------------------------------------- */
.header_top { background: var(--hh-charcoal) !important; border-bottom: 1px solid rgba(255,255,255,.06); }
.header_top .header_left span { font-family: var(--hh-sans); font-size: 12px; letter-spacing: .02em; color: rgba(255,255,255,.78); }
.header_top .header_left span i { color: var(--hh-gold); }
.header_top .login-register a { font-family: var(--hh-sans); letter-spacing: .08em; font-size: 11px; color: rgba(255,255,255,.85) !important; transition: color .25s var(--hh-ease); }
.header_top .login-register a:hover { color: var(--hh-gold) !important; background: none !important; }
.header_top .login-register a i { color: var(--hh-gold); margin-right: 6px; }

.header_content {
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 1px 0 rgba(20,15,8,.05), 0 18px 40px -24px rgba(20,15,8,.28);
}
.header_menu .menu > li { margin: 0 20px; background: none !important; }
.header_menu .menu > li > a,
.header_menu .menu > li.current-menu-item > a {
    font-family: var(--hh-sans); font-weight: 500; font-size: 13px; letter-spacing: .12em;
    color: var(--hh-ink) !important; text-transform: uppercase; padding: 0 4px !important;
    background: none !important; box-shadow: none !important;
    position: relative; display: inline-block; transition: color .3s var(--hh-ease);
}
.header_menu .menu > li > a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px;
    background: linear-gradient(90deg, var(--hh-gold), var(--hh-gold-light));
    transform: scaleX(0); transform-origin: center;
    transition: transform .4s var(--hh-ease);
}
.header_menu .menu > li:hover > a,
.header_menu .menu > li.current-menu-item > a { color: var(--hh-gold) !important; }
.header_menu .menu > li:hover > a::after,
.header_menu .menu > li.current-menu-item > a::after { transform: scaleX(1); }

/* ----------------------------------------------------------------------
   2. Hero / banner slider
   ---------------------------------------------------------------------- */
.slider-caption-sub {
    font-family: var(--hh-sans) !important; font-weight: 500 !important; letter-spacing: .12em !important;
    font-size: 14px !important; color: #FBF6EA !important; white-space: nowrap;
    text-shadow: 0 2px 4px rgba(0,0,0,.6), 0 8px 20px rgba(0,0,0,.5) !important;
}
.slider-caption {
    font-family: var(--hh-serif) !important; font-weight: 600 !important; letter-spacing: .01em !important;
    text-transform: none !important;
}
.awe-btn-slider {
    border-radius: 2px; letter-spacing: .22em !important; font-size: 12px !important;
    padding: 16px 40px !important; border-width: 1px !important;
    backdrop-filter: blur(2px);
}

/* ----------------------------------------------------------------------
   3. Buttons
   ---------------------------------------------------------------------- */
.awe-btn {
    font-family: var(--hh-sans); letter-spacing: .18em; font-weight: 500; font-size: 11px;
    border-radius: 1px; transition: all .35s var(--hh-ease) !important;
}
.awe-btn-default {
    border: 1px solid var(--hh-ink) !important; color: var(--hh-ink); background: transparent;
    position: relative; overflow: hidden; z-index: 1;
}
.awe-btn-default::before {
    content: ''; position: absolute; inset: 0; background: var(--hh-ink);
    transform: scaleX(0); transform-origin: left; transition: transform .4s var(--hh-ease); z-index: -1;
}
.awe-btn-default:hover { color: #fff !important; }
.awe-btn-default:hover::before { transform: scaleX(1); }

.awe-btn-13 {
    border: 1px solid var(--hh-gold) !important; background: var(--hh-gold) !important; color: #fff !important;
    box-shadow: 0 10px 24px -10px rgba(174,138,78,.6);
}
.awe-btn-13:hover { background: var(--hh-ink) !important; border-color: var(--hh-ink) !important; box-shadow: 0 10px 24px -10px rgba(20,15,8,.5); }

.awe-btn-12 { border: 1px solid rgba(255,255,255,.7) !important; }
.awe-btn-12:hover { background: var(--hh-gold) !important; border-color: var(--hh-gold) !important; color: #fff !important; }

/* ----------------------------------------------------------------------
   4. Facility strip - floating card (self-contained, no legacy
   .check-availability/:before styles from style.css - those belonged to
   the old booking widget and fought with this one on background/overlap).
   ---------------------------------------------------------------------- */
.section-facility-strip { position: relative; z-index: 30; }
.facility-bar {
    background: var(--hh-charcoal-2);
    max-width: 1200px; margin: -70px auto 0;
    padding: 34px 40px;
    border-radius: 4px;
    box-shadow: 0 30px 60px -20px rgba(10,7,3,.45);
    border-top: 2px solid var(--hh-gold);
    position: relative; z-index: 2;
}

/* ----------------------------------------------------------------------
   5. Room cards
   ---------------------------------------------------------------------- */
.accomd-modations-room,
.room_item-1,
.room-compare_item {
    border-radius: 6px; overflow: hidden; background: var(--hh-paper);
    box-shadow: 0 2px 0 rgba(20,15,8,.03);
}
.accomd-modations-room .img,
.room_item-1 .img,
.room-compare_item .img { border-radius: 6px 6px 0 0; }
.accomd-modations-room .img img,
.room_item-1 .img img,
.room-compare_item .img img { transition: transform .7s var(--hh-ease); }
.accomd-modations-room:hover .img img,
.room_item-1:hover .img img,
.room-compare_item:hover .img img { transform: scale(1.08); }

.accomd-modations-room .text {
    background: linear-gradient(to top, rgba(15,11,6,.88), rgba(15,11,6,0)) !important;
    padding: 30px 20px 16px !important;
}
.accomd-modations-room .text h2 { font-family: var(--hh-serif); font-size: 19px; }
.accomd-modations-room .text .price .amout { color: var(--hh-gold-light) !important; }

.room_item-1 { padding: 26px 26px 30px; }
.room_item-1 h2 { font-size: 22px; }
.room_item-1 .img { margin-left: -26px; margin-right: -26px; width: calc(100% + 52px); margin-top: -26px; }
.room_item-1 .desc p { font-size: 14px; }
.room_item-1 .bot { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hh-line); }
.room_item-1 .bot .price { font-family: var(--hh-sans); color: var(--hh-stone); }
.room_item-1 .bot .price .amout { font-family: var(--hh-serif); font-size: 24px; color: var(--hh-gold); font-weight: 600; }

.room-compare_item { padding: 18px 18px 24px; }
.room-compare_item .img { margin: -18px -18px 0; width: calc(100% + 36px); }

/* ----------------------------------------------------------------------
   6. About / amenities / nearby
   ---------------------------------------------------------------------- */
.section-about, .section-statistics, .section-team, .section-amenities, .section-nearby { padding: 100px 0; }
/* .container here was never positioned, so (per CSS painting order) the
   positioned .awe-overlay painted over it instead of behind it - text was
   only readable through the tint, not fully in front of it. Positioning
   .container (like the sub-banner's own wrapper already does) fixes the
   stacking order so text sits cleanly above the overlay/photo. */
.section-statistics { position: relative; }
.section-statistics > .container { position: relative; z-index: 1; }
.section-statistics .awe-overlay { background: rgba(10,8,5,.6) !important; }
.about-item .img { border-radius: 6px; }
.about-item .text .desc p { color: var(--hh-stone); }

.feature-item .icon { border-color: var(--hh-gold); color: var(--hh-gold); }
.feature-item:hover .icon { background: var(--hh-gold); color: #fff; box-shadow: 0 14px 26px -10px rgba(174,138,78,.55); }
.feature-item h4 { font-family: var(--hh-sans); letter-spacing: .08em; color: var(--hh-ink); }

.statistics_item .count { font-family: var(--hh-serif); color: var(--hh-gold-light) !important; }
.nearby-list li:hover { border-color: var(--hh-gold); }

/* ----------------------------------------------------------------------
   7. Gallery
   ---------------------------------------------------------------------- */
/* Explicit, guaranteed gutter between tiles - box-sizing:border-box keeps
   the padding inside the isotope-computed column width instead of adding
   to it, so tiles line up instead of overlapping/touching. */
.gallery-isotope .item-isotope,
.gallery-isotope .item-size { box-sizing: border-box; }
.gallery-isotope .item-isotope { padding: 9px !important; margin-top: 0 !important; }
.gallery_item { border-radius: 4px; }
.gallery_item::after {
    content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,11,6,.75), rgba(15,11,6,0) 55%);
    opacity: 0; transition: opacity .35s var(--hh-ease); pointer-events: none;
}
.gallery_item:hover::after { opacity: 1; }
.gallery_item .text { font-family: var(--hh-sans); letter-spacing: .03em; }
.gallery-cat .list-inline > li > a {
    font-family: var(--hh-sans); font-size: 12px; letter-spacing: .14em; color: var(--hh-stone);
    border: 1px solid var(--hh-line); border-radius: 20px; padding: 8px 18px !important; display: inline-block; margin: 4px;
    transition: all .3s var(--hh-ease);
}
.gallery-cat .list-inline > li.active > a,
.gallery-cat .list-inline > li > a:hover { background: var(--hh-gold); border-color: var(--hh-gold); color: #fff; }

/* ----------------------------------------------------------------------
   8. Testimonials (guestbook)
   ---------------------------------------------------------------------- */
.guestbook-item .img { border: 3px solid var(--hh-gold); padding: 3px; }
.guestbook-item .text p { font-family: var(--hh-serif); font-size: 20px !important; font-style: italic; font-weight: 500; }
.guestbook-item .text span strong { color: var(--hh-gold-light) !important; font-family: var(--hh-sans); letter-spacing: .04em; }

/* ----------------------------------------------------------------------
   9. Blog / news cards
   ---------------------------------------------------------------------- */
.post, .news-item { border-radius: 6px; overflow: hidden; }
.news-item { background: var(--hh-paper); box-shadow: 0 2px 0 rgba(20,15,8,.03); padding-bottom: 6px; }
.news-item .text h2 { font-family: var(--hh-serif); font-size: 16px; }
.news-item .text h2 a { color: var(--hh-ink); }
.news-item .text h2 a:hover { color: var(--hh-gold); }
.news-item .text .date { color: var(--hh-gold); letter-spacing: .1em; font-size: 11px; }
.entry-title a { font-family: var(--hh-serif); }
.entry-categories a, .entry-tags a { color: var(--hh-gold) !important; }

/* ----------------------------------------------------------------------
   10. Footer
   ---------------------------------------------------------------------- */
#footer { background: var(--hh-charcoal) !important; }
.footer_top { background: var(--hh-charcoal-2) !important; border-bottom: 1px solid var(--hh-line-dark); }
.footer_bottom { background: #0D0B07 !important; }
.widget-title { font-family: var(--hh-serif) !important; font-weight: 600 !important; letter-spacing: .02em !important; position: relative; padding-bottom: 14px; }
.widget-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--hh-gold); }
.footer_center .widget ul li { margin-bottom: 6px; }
.footer_center .widget ul li a { color: rgba(255,255,255,.72); font-size: 13px; transition: color .25s var(--hh-ease); }
.footer_center .widget ul li a:hover { color: var(--hh-gold); }
.mailchimp .mailchimp-form .awe-btn { border-radius: 2px; }
.social-content a { border-color: rgba(255,255,255,.25) !important; transition: all .3s var(--hh-ease); }
.social-content a:hover { background: var(--hh-gold) !important; border-color: var(--hh-gold) !important; }

/* ----------------------------------------------------------------------
   11. Forms
   ---------------------------------------------------------------------- */
.contact-form .field-text, .contact-form .field-textarea,
.hh-form-group input, .hh-form-group textarea, .hh-form-group select {
    border-radius: 2px !important; border-color: var(--hh-line) !important;
}
.contact-form .field-text:focus, .contact-form .field-textarea:focus { border-color: var(--hh-gold) !important; box-shadow: 0 0 0 3px var(--hh-gold-soft); }
.reservation_content, .reservation-sidebar_availability { border-radius: 6px; overflow: hidden; }
.reservation-heading { font-family: var(--hh-serif) !important; letter-spacing: .02em !important; }

/* ----------------------------------------------------------------------
   12. Room detail
   ---------------------------------------------------------------------- */
.hh-room-gallery-main { border-radius: 6px; }
.room-detail_book { border-radius: 6px; overflow: hidden; box-shadow: 0 20px 50px -24px rgba(20,15,8,.25); }
.room-detail_total { background: var(--hh-charcoal); }
.room-detail_total h6 { color: rgba(255,255,255,.7); letter-spacing: .16em; }
.room-detail_total .price .amout { font-family: var(--hh-serif); color: var(--hh-gold-light) !important; font-size: 30px; }
.room-detail_total .icon-logo { filter: brightness(0) invert(1); max-width: 90px; }
.room-detail_tab-header li.active a, .room-detail_tab-header li a:hover { color: var(--hh-gold) !important; }
.room-detail_tab-header li.active { border-color: var(--hh-gold) !important; }

/* ----------------------------------------------------------------------
   13. Cards / alerts / misc
   ---------------------------------------------------------------------- */
.hh-alert, .alert-success, .alert-danger { border-radius: 4px; }
.hh-card, .hh-stat { border-radius: 6px; }

/* ----------------------------------------------------------------------
   14. Section rhythm - generous breathing room
   ---------------------------------------------------------------------- */
.section-home-about, .section-our-best, .section-event-news, .section-gallery,
.section-blog, .section-contact, .section-room, .section-room-detail { padding: 100px 0; }
.section-accomd {
    padding: 100px 0 90px;
    background-image: none !important;
    background-color: var(--hh-ivory-deep);
}
.section-home-guestbook { padding: 100px 0; }

@media (max-width: 991px) {
    .section-about, .section-statistics, .section-team, .section-amenities, .section-nearby,
    .section-home-about, .section-our-best, .section-event-news, .section-gallery,
    .section-blog, .section-contact, .section-room, .section-room-detail, .section-home-guestbook {
        padding: 60px 0;
    }
    .heading { font-size: 30px; }
    .header_menu .menu > li { margin: 0 10px; }
}

@media (max-width: 767px) {
    .room_item-1 { padding: 18px 18px 22px; }
    .room_item-1 .img { margin-left: -18px; margin-right: -18px; width: calc(100% + 36px); margin-top: -18px; }
}

/* ----------------------------------------------------------------------
   15. Homepage motion - staggered card reveals, image reveal/zoom,
   softer button micro-interaction. All gated behind html.reveal-ready
   (see custom.css) so nothing ever hides content if JS is slow/blocked.
   ---------------------------------------------------------------------- */
html.reveal-ready .col-xs-4:nth-child(1) .accomd-modations-room.reveal-up { transition-delay: .05s; }
html.reveal-ready .col-xs-4:nth-child(2) .accomd-modations-room.reveal-up { transition-delay: .15s; }
html.reveal-ready .col-xs-4:nth-child(3) .accomd-modations-room.reveal-up { transition-delay: .25s; }
html.reveal-ready .col-xs-4:nth-child(4) .accomd-modations-room.reveal-up { transition-delay: .35s; }
html.reveal-ready .col-xs-4:nth-child(5) .accomd-modations-room.reveal-up { transition-delay: .45s; }
html.reveal-ready .col-xs-4:nth-child(6) .accomd-modations-room.reveal-up { transition-delay: .55s; }

html.reveal-ready .col-md-12:nth-child(1) .news-item.reveal-up { transition-delay: .05s; }
html.reveal-ready .col-md-12:nth-child(2) .news-item.reveal-up { transition-delay: .18s; }
html.reveal-ready .col-md-12:nth-child(3) .news-item.reveal-up { transition-delay: .3s; }

/* A slightly quicker, snappier fade-up for cards than the default
   (the base .reveal-up timing in custom.css is tuned for large
   section blocks; cards read better with a touch less travel/time). */
.accomd-modations-room.reveal-up,
.news-item.reveal-up {
    transform: translateY(22px);
    transition: opacity .6s var(--hh-ease), transform .6s var(--hh-ease), box-shadow .35s ease, background .3s ease;
}

/* Image reveal: a gentle fade + settle-from-slightly-zoomed effect for
   the large editorial photos (About Us / Why Guests Choose Us), on top
   of the existing hover-zoom (independent transforms on wrapper vs img). */
.hh-img-reveal { overflow: hidden; }
.hh-img-reveal img { opacity: 1; transform: scale(1); transition: opacity 1s var(--hh-ease), transform 1.1s var(--hh-ease); }
html.reveal-ready .hh-img-reveal:not(.is-visible) img { opacity: 0; transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
    .accomd-modations-room.reveal-up, .news-item.reveal-up { transition-delay: 0s !important; }
    .hh-img-reveal img { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* Facilities strip replacing the booking form. */
.section-facility-strip .facility-bar { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 34px; align-items: center; }
.facility-intro span { display: block; color: var(--hh-gold-light); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; }
.facility-intro h2 { color: #fff; font-size: 22px; line-height: 1.25; margin-top: 5px; }
.facility-items { display: grid; grid-template-columns: repeat(4,minmax(120px,1fr)) auto; align-items: center; gap: 12px; }
.facility-item { display: flex; align-items: center; min-width: 0; padding: 8px 10px; border-left: 1px solid rgba(255,255,255,.12); }
.facility-item i { flex: 0 0 34px; color: var(--hh-gold-light); font-size: 19px; }
.facility-item span { color: #fff !important; font-size: 11px; line-height: 1.35; opacity: 1 !important; }
.facility-item strong { display: block; color: #fff !important; font-family: var(--hh-sans); font-size: 12px; font-weight: 500; opacity: 1 !important; }
.facility-contact {
    height: 48px; line-height: 30px; padding: 8px 20px !important;
    background-color: var(--hh-gold) !important; border-color: var(--hh-gold) !important;
    color: #fff !important; opacity: 1 !important;
}
.facility-contact:hover { background-color: var(--hh-ink) !important; border-color: var(--hh-ink) !important; }

.footer-social-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.footer-social-links a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.16); color: #fff !important; border-radius: 3px; transition: all .3s var(--hh-ease); }
.footer-social-links a i { color: var(--hh-gold-light) !important; margin: 0 !important; width: auto !important; }
.footer-social-links a:hover { background: var(--hh-gold); border-color: var(--hh-gold); transform: translateY(-2px); }
.footer-social-links a:hover i { color: #fff !important; }
.footer_bottom a { color: var(--hh-gold-light); }
.footer_bottom a:hover { color: #fff; }

.section-faq { padding: 100px 0; background: var(--hh-ivory-deep); }
.faq-heading { max-width: 700px; margin: 0 auto 42px; }
.faq-list { max-width: 900px; margin: 0 auto; }
.faq-item { margin-bottom: 12px; padding: 0 24px; background: #fff; border: 1px solid var(--hh-line); border-radius: 6px; box-shadow: 0 15px 40px -34px rgba(20,15,8,.5); }
.faq-item summary { position: relative; padding: 20px 42px 20px 0; cursor: pointer; list-style: none; color: var(--hh-ink); font-family: var(--hh-serif); font-size: 18px; font-weight: 600; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 0; top: 17px; color: var(--hh-gold); font: 26px/1 var(--hh-sans); transition: transform .3s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0; padding: 0 38px 21px 0; }

@media (max-width:1199px) {
    .section-facility-strip .facility-bar { grid-template-columns: 1fr; gap: 20px; }
    .facility-intro { text-align: center; }
    .facility-items { grid-template-columns: repeat(4,minmax(110px,1fr)); }
    .facility-contact { grid-column: 1/-1; }
}
@media (max-width:767px) {
    .facility-items { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .facility-contact { grid-column: 1/-1; width: 100%; }
    .section-faq { padding: 65px 0; }
}
@media (max-width:479px) {
    .facility-items { grid-template-columns: 1fr; }
    .facility-item { border-left: 0; border-bottom: 1px solid rgba(255,255,255,.1); padding: 12px 4px; }
    .facility-contact { grid-column: auto; }
    .faq-item { padding: 0 18px; }
    .faq-item summary { font-size: 16px; }
}

/* Homepage room grid: full-bleed imagery and a readable unified footer. */
.section-accomd .accomd-modations-content > .row,
.section-accomd .accomd-modations-content .owl-item > .row { display: flex; flex-wrap: wrap; row-gap: 30px; }
.section-accomd .accomd-modations-content .col-xs-4 { display: flex; }
.section-accomd .accomd-modations-room { width: 100%; min-height: 310px; position: relative; border: 1px solid rgba(174,138,78,.18); }
.section-accomd .accomd-modations-room .img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto; }
.section-accomd .accomd-modations-room .img a,
.section-accomd .accomd-modations-room .img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.section-accomd .accomd-modations-room .text {
    position: absolute !important; left: 0; right: 0; bottom: 0; z-index: 2;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
    min-height: 112px; padding: 45px 22px 20px !important;
    background: linear-gradient(to top, rgba(10,7,4,.94), rgba(10,7,4,.7) 55%, transparent) !important;
}
.section-accomd .accomd-modations-room .text h2,
.section-accomd .accomd-modations-room .text .price { margin: 0; color: #fff; }
.section-accomd .accomd-modations-room .text h2 a { color: #fff; }
.section-accomd .accomd-modations-room .text .price { white-space: nowrap; font-size: 12px; }

/* Testimonial logo seal replaces the unrelated stock user portrait. */
.section-home-guestbook .guestbook-item .img {
    width: 112px; height: 112px; padding: 14px; background: rgba(255,255,255,.94);
    border: 2px solid var(--hh-gold); border-radius: 50%; box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.section-home-guestbook .guestbook-item .img img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }

/* Highlights and news: balanced editorial card layout. */
.section-event-news .event-news > .row { display: flex; flex-wrap: wrap; align-items: stretch; }
.section-event-news .event, .section-event-news .news { height: 100%; }
.section-event-news .event-item { border-radius: 8px; overflow: hidden; box-shadow: 0 16px 38px -24px rgba(20,15,8,.42); }
.section-event-news .event-slide .event-item .img { height: 310px; }
.section-event-news .col-xs-6 .event-item .img { height: 220px; }
.section-event-news .event-item .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--hh-ease); }
.section-event-news .event-item:hover .img img { transform: scale(1.06); }
/* Flat, uniformly dark strip (not a bottom-heavy gradient) - the heading
   sits vertically centered here, and a gradient left it under-covered
   there, so brighter photos (like the "Book Direct" one) washed the text
   out even though the darker "Our Lobby" one looked fine. */
.section-event-news .event-item .text { background: rgba(8,6,4,.72); }
.section-event-news .news-item {
    display: grid; grid-template-columns: 190px minmax(0,1fr); min-height: 150px; margin-bottom: 18px;
    border: 1px solid var(--hh-line); box-shadow: 0 15px 36px -28px rgba(20,15,8,.5);
}
.section-event-news .news-item .img { width: 100%; height: 100%; min-height: 150px; }
.section-event-news .news-item .text { width: auto; padding: 22px 24px; }
.section-event-news .news-item .text h2 { line-height: 1.45; margin-top: 7px; }
.section-event-news .news-item .read-more { color: var(--hh-gold); font-size: 11px; letter-spacing: .09em; }

@media (max-width: 991px) {
    .section-event-news .event-news > .row { display: block; }
    .section-event-news .news { margin-top: 55px; }
}
@media (max-width: 600px) {
    .section-accomd .accomd-modations-room { min-height: 280px; }
    .section-accomd .accomd-modations-room .text { display: block; min-height: 105px; }
    .section-event-news .news-item { grid-template-columns: 120px minmax(0,1fr); }
    .section-event-news .news-item .text { padding: 16px; }
    .section-event-news .news-item .text h2 { font-size: 14px; }
}

/* Hero legibility: captions always sit above the photographic scrim. */
.section-slider .hero-overlay {
    z-index: 2;
    background:
        radial-gradient(ellipse at center, rgba(12, 9, 5, .76) 0%, rgba(12, 9, 5, .48) 42%, rgba(12, 9, 5, .2) 75%),
        linear-gradient(180deg, rgba(7, 5, 3, .46), rgba(7, 5, 3, .62));
}
.section-slider .hero-bottom-fade { z-index: 3; }
.section-slider .tp-caption { z-index: 8 !important; }
.section-slider .slider-caption-sub {
    padding: 9px 18px !important;
    background: rgba(10, 8, 5, .42);
    border: 1px solid rgba(216, 190, 139, .52);
    border-radius: 999px;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    color: #fff8e9 !important;
    font-weight: 600 !important;
    letter-spacing: .22em !important;
    text-align: center;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .9) !important;
}
.section-slider .slider-caption {
    padding: 8px 28px 14px !important;
    color: #fff !important;
    font-size: clamp(42px, 5vw, 72px) !important;
    line-height: 1.08 !important;
    text-align: center;
    text-shadow: 0 3px 3px rgba(0,0,0,.65), 0 12px 38px rgba(0,0,0,.85) !important;
}
.section-slider .awe-btn-slider {
    z-index: 9 !important;
    background: rgba(174, 138, 78, .95) !important;
    border-color: #d8be8b !important;
    color: #fff !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .38) !important;
}

/* Inner-page banners share the same legible editorial treatment. */
.section-sub-banner { background-color: var(--hh-charcoal); background-position: center !important; }
.section-sub-banner .awe-overlay {
    background: linear-gradient(90deg, rgba(10,8,5,.42), rgba(10,8,5,.66) 50%, rgba(10,8,5,.42)) !important;
}
.section-sub-banner .text { position: relative; z-index: 2; }
.section-sub-banner .text h2 {
    color: #fff; font-family: var(--hh-serif); font-size: clamp(34px, 4vw, 54px);
    font-weight: 600; letter-spacing: .04em; text-shadow: 0 5px 24px rgba(0,0,0,.8);
}
.section-sub-banner .text p {
    color: #fff3df; font-family: var(--hh-sans); font-size: 16px;
    letter-spacing: .06em; text-shadow: 0 3px 14px rgba(0,0,0,.9);
}
.section-slider .awe-btn-slider:hover { background: #fff !important; border-color: #fff !important; color: var(--hh-ink) !important; }
.section-slider .hero-scroll-cue { z-index: 10; }

@media (max-width: 767px) {
    .section-slider .slider-caption { font-size: clamp(29px, 9vw, 44px) !important; padding-left: 14px !important; padding-right: 14px !important; white-space: normal !important; width: min(88vw, 620px) !important; }
    .section-slider .slider-caption-sub { font-size: 10px !important; letter-spacing: .13em !important; white-space: normal !important; width: auto !important; max-width: 86vw; }
    .section-slider .hero-scroll-cue { bottom: 12px; }
}

/* Buttons: a light lift to accompany the existing fill/border transitions */
.awe-btn:hover { transform: translateY(-2px); }
.awe-btn-slider:hover { transform: translateY(-2px); }

@media (max-width: 767px) {
    .accomd-modations-room.reveal-up:nth-child(n) { transition-delay: 0s; }
}

/* ======================================================================
   16. Production responsive pass
   Keeps the original structure while removing legacy float/width clashes.
   ====================================================================== */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
img { max-width: 100%; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible { outline: 2px solid var(--hh-gold) !important; outline-offset: 3px; }

.header_content { transition: background-color .3s var(--hh-ease), box-shadow .3s var(--hh-ease), transform .3s var(--hh-ease); }
.site-logo-mark { width: auto; max-width: 178px; max-height: 76px; object-fit: contain; }
.menu-bars { appearance: none; background: transparent; border: 0; padding: 12px; cursor: pointer; }

/* Predictable media/card sizing prevents jumps and uneven grids. */
.accomd-modations-room .img { aspect-ratio: 4 / 3; overflow: hidden; }
.accomd-modations-room .img img, .gallery_item img { width: 100%; height: 100%; object-fit: cover; }
.post img, .news-item img, .about-item img { transition: transform .65s var(--hh-ease); }
.post:hover img, .news-item:hover img, .about-item:hover img { transform: scale(1.035); }

@media (max-width: 1199px) {
    .header_menu .menu > li { margin: 0 10px; }
    .header_menu .menu > li > a, .header_menu .menu > li.current-menu-item > a { letter-spacing: .07em; font-size: 12px; }
    .facility-bar { padding: 28px 26px; }
}

@media (max-width: 991px) {
    .footer_center [class*="col-"] { margin-bottom: 34px; }
    .room_item-1 .bot { gap: 14px; flex-wrap: wrap; }
}

@media (max-width: 767px) {
    .container { width: 100%; padding-left: 20px; padding-right: 20px; }
    .heading { font-size: clamp(27px, 8vw, 34px); line-height: 1.2; }
    .section-slider, #slider-revolution { min-height: 520px; }
    .section-facility-strip { margin-top: 0; padding: 0; background: var(--hh-charcoal-2); }
    .section-facility-strip .container { padding: 0; }
    .facility-bar { margin: 0; border-radius: 0; border-top-width: 1px; padding: 28px 20px 32px; box-shadow: none; }
    .accomd-modations-content .col-xs-4 { width: 50%; }
    .footer_top .mailchimp-form { width: 100%; }
}

@media (max-width: 479px) {
    .accomd-modations-content .col-xs-4 { width: 100%; }
    .room_item-1 .bot { display: block; }
    .room_item-1 .bot .awe-btn { display: block; width: 100%; margin-top: 16px; }
    #footer .footer_top .mailchimp .mailchimp-form { padding-right: 0; }
    #footer .footer_top .mailchimp .mailchimp-form .awe-btn { position: static; width: 100%; margin-top: 10px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Final visibility and mobile-navigation hardening. */
.mobile-hero-copy { display: none; }
/* Desktop: plain text over the image (no card) - the box is mobile-only, see below. */
.section-sub-banner .text h2, .section-sub-banner .text p { opacity: 1 !important; visibility: visible !important; }

@media (max-width: 991px) {
    #header .header_menu {
        position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important;
        width: min(86vw, 320px) !important; height: 100dvh !important; padding: 100px 22px 30px !important;
        overflow-y: auto; background: #fff !important; border-left: 1px solid var(--hh-line);
        box-shadow: -24px 0 60px rgba(10,7,4,.24); opacity: 0; visibility: hidden;
        transform: translateX(105%); transition: transform .38s var(--hh-ease), opacity .3s ease, visibility .3s ease;
        z-index: 990 !important;
    }
    #header .header_menu.active { opacity: 1; visibility: visible; transform: translateX(0); }
    #header .header_menu .menu { display: block !important; width: 100%; }
    #header .header_menu .menu > li { display: block; float: none; margin: 0 !important; border-bottom: 1px solid var(--hh-line); }
    #header .header_menu .menu > li > a { display: block; padding: 14px 4px !important; color: var(--hh-ink) !important; }
    #header .menu-bars { position: relative; z-index: 1000; }
    #header .menu-bars.active span, #header .menu-bars.active span::before, #header .menu-bars.active span::after { background-color: var(--hh-ink); }
}

@media (max-width: 767px) {
    .section-slider .tp-caption { display: none !important; }
    .mobile-hero-copy {
        position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column;
        align-items: center; justify-content: center; padding: 110px 22px 60px; text-align: center;
    }
    .mobile-hero-copy span { color: var(--hh-gold-light); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
    .mobile-hero-copy h2 { margin: 12px 0 24px; color: #fff; font-size: clamp(34px,11vw,48px); line-height: 1.05; text-shadow: 0 4px 24px #000; }
    .mobile-hero-copy .awe-btn { min-width: 175px; padding: 14px 22px !important; }
    .section-sub-banner { margin-top: 116px; min-height: 340px !important; padding: 0 !important; background-attachment: scroll !important; }
    .section-sub-banner .sub-banner { min-height: 340px; display: flex; align-items: center; }
    .section-sub-banner .text {
        width: calc(100% - 30px); padding: 22px 18px;
        background: rgba(10,7,4,.48); border: 1px solid rgba(216,190,139,.38);
        border-radius: 6px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
        max-width: 760px; margin: 0 auto;
    }
    .section-sub-banner .text h2 { margin: 0 !important; font-size: clamp(30px,10vw,40px); line-height: 1.15; }
    .section-sub-banner .text p { margin: 10px 0 0; font-size: 14px; line-height: 1.55; }
    .section-room .room_item-1 { padding-top: 22px; }
    .section-room .room_item-1 > h2 { position: relative; z-index: 2; margin: 0 0 16px; font-size: 23px; line-height: 1.2; }
    .section-room .room_item-1 .img { margin-top: 0 !important; }
    .section-room .room_item-1 .desc { padding-top: 4px; }
    #footer .footer_center [class*="col-"] { width: 100% !important; float: none; margin-bottom: 34px; }
    #footer .widget_logo .widget-logo { background: transparent !important; }
    #footer .widget_logo .widget-logo .img { height: auto; background: transparent !important; }
    #footer .widget_logo .widget-logo .text { position: static; padding: 0; background: transparent; }
    #footer .widget_logo p, #footer .widget p { color: rgba(255,255,255,.76); }
}


/* Mobile hero, navigation and content-edge alignment. */
@media (max-width: 991px) {
    #header .header_content .container { position: relative; }
    #header .menu-bars {
        position: absolute !important; top: 50% !important; right: 14px !important; left: auto !important;
        float: none !important; margin: 0 !important; transform: translateY(-50%); z-index: 1000;
    }
}

@media (max-width: 767px) {
    .section-slider { position: relative !important; isolation: isolate; }
    .section-slider::after {
        content: ""; position: absolute; inset: 0; z-index: 80; pointer-events: none;
        background: linear-gradient(180deg, rgba(8,6,4,.24), rgba(8,6,4,.48));
    }
    .section-slider .mobile-hero-copy {
        display: flex !important; visibility: visible !important; opacity: 1 !important;
        z-index: 90 !important; pointer-events: none;
    }
    .section-slider .mobile-hero-copy > * { visibility: visible !important; opacity: 1 !important; }
    .section-slider .mobile-hero-copy .awe-btn { pointer-events: auto; }
    .section-about .about-item,
    .section-about .about-item.about-right { width: 100%; }
    .section-about .about-item .img,
    .section-about .about-item .text,
    .section-about .about-item.about-right .img,
    .section-about .about-item.about-right .text {
        width: 100% !important; float: none !important; box-sizing: border-box;
        margin-left: 0 !important; margin-right: 0 !important;
    }
    .section-about .about-item .text,
    .section-about .about-item.about-right .text { padding: 24px 0 0 !important; }
    .section-about .about-item .text .heading,
    .section-about .about-item .text .desc {
        margin-left: 0 !important; margin-right: 0 !important;
        padding-left: 0 !important; padding-right: 0 !important;
    }
}