/* Foundations */
:root {
  --bg-black: #0b0b0b;
  --bg-dark: #151210;
  --bg-card: #1c1814;
  --gold: #f2a900;
  --gold-light: #ffd56b;
  --gold-dark: #b8790a;
  --sand: #e8d5b0;
  --maroon: #7a1f2b;
  --text-white: #ffffff;
  --text-muted: #b9ae9a;
  --gold-gradient: linear-gradient(135deg, #b8790a, #f2a900, #ffd56b, #f2a900);
  --font-heading: "Cinzel", Georgia, serif;
  --font-subheading: "Playfair Display", Georgia, serif;
  --font-body: "Poppins", sans-serif;
  --header-height: 82px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
body { margin: 0; background: var(--bg-black); color: var(--text-white); font: 400 14px/1.8 var(--font-body); overflow-x: hidden; }
body.menu-open, body.lightbox-open { overflow: hidden; }
::selection { color: var(--bg-black); background: var(--gold-light); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
.wrap { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.section { position: relative; padding: 112px 0; }
.section-title { margin: 0; font: 600 clamp(2.15rem, 4vw, 3.45rem)/1.2 var(--font-heading); letter-spacing: -.035em; }
.section-title em { color: var(--gold-light); font-family: var(--font-subheading); font-weight: 500; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 15px; color: var(--gold-light); font-size: .69rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.eyebrow > span { width: 28px; height: 1px; background: var(--gold); }
.section-heading { max-width: 670px; margin: 0 auto 54px; text-align: center; }
.section-heading .eyebrow { justify-content: center; }
.section-heading > p:not(.eyebrow) { margin: 16px 0 0; color: var(--text-muted); }
.ornament-divider { display: flex; align-items: center; gap: 12px; width: 125px; margin: 21px 0; color: var(--gold); }
.ornament-divider::before, .ornament-divider::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--gold-dark)); }
.ornament-divider::after { background: linear-gradient(90deg, var(--gold-dark), transparent); }
.section-heading .ornament-divider { margin: 20px auto 0; }
.lead { color: var(--sand); font: 500 1.22rem/1.65 var(--font-subheading); }

/* Loader and page utilities */
.page-loader { position: fixed; z-index: 9999; inset: 0; display: grid; place-content: center; justify-items: center; gap: 23px; background: var(--bg-black); transition: opacity .65s ease, visibility .65s ease; }
.page-loader.loaded { opacity: 0; visibility: hidden; }
.loader-mark { position: relative; display: grid; width: 94px; height: 94px; place-items: center; border-radius: 50%; box-shadow: 0 0 45px #f2a90038; animation: loader-glow 2s ease-in-out infinite; }
.loader-mark img, .loader-mark .fallback-emblem { z-index: 1; width: 68px; height: 68px; object-fit: cover; border: 1px solid var(--gold); border-radius: 50%; }
.fallback-emblem { display: grid; place-items: center; color: var(--gold-light); background: radial-gradient(circle, #44300f, #17120a); font-size: 1.5rem; }
.loader-mark .fallback-emblem[hidden], .brand-mark .fallback-emblem[hidden] { display: none; }
.loader-ring { position: absolute; inset: 0; border: 1px solid transparent; border-top-color: var(--gold-light); border-right-color: var(--gold); border-bottom-color: var(--gold-dark); border-radius: 50%; animation: spin 2.4s linear infinite; }
.loader-caption { color: var(--text-muted); font: 500 .75rem var(--font-subheading); letter-spacing: .13em; }
.scroll-progress { position: fixed; z-index: 1300; top: 0; left: 0; width: 0; height: 3px; background: var(--gold-gradient); box-shadow: 0 0 12px #f2a90088; }
.cursor-glow { position: fixed; z-index: 1; top: 0; left: 0; width: 270px; height: 270px; border-radius: 50%; pointer-events: none; opacity: .14; background: radial-gradient(circle, #f2a90033, transparent 70%); transform: translate(-50%, -50%); }

/* Navigation */
.site-header { position: fixed; z-index: 1000; inset: 0 0 auto; height: var(--header-height); border-bottom: 1px solid transparent; transition: background .35s ease, border-color .35s ease, box-shadow .35s ease; }
.site-header.scrolled { background: #0b0b0bf2; border-color: #f2a90055; box-shadow: 0 8px 30px #0008; backdrop-filter: blur(14px); }
.navbar { display: flex; height: 100%; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark { display: grid; width: 48px; height: 48px; place-items: center; overflow: hidden; border: 1px solid #f2a900a8; border-radius: 50%; background: #17120a; box-shadow: 0 0 18px #f2a9002a; }
.brand-mark img, .brand-mark .fallback-emblem { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.brand-mark .fallback-emblem { font-size: 1.2rem; }
.brand-name { display: grid; font: 600 1.05rem/1 var(--font-heading); letter-spacing: .04em; }
.brand-name b { color: var(--gold-light); font-weight: 600; }
.brand-name small { margin-top: 5px; color: var(--text-muted); font: 500 .48rem/1 var(--font-body); letter-spacing: .3em; }
.nav-links { display: flex; align-items: center; gap: clamp(13px, 1.65vw, 25px); margin: 0; padding: 0; list-style: none; }
.nav-link { position: relative; display: block; padding: 9px 0; color: #eee8dd; font-size: .7rem; transition: color .25s ease; }
.nav-link::after { position: absolute; right: 0; bottom: 3px; left: 0; height: 1px; content: ""; background: var(--gold-gradient); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.nav-link:hover, .nav-link.active { color: var(--gold-light); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.menu-toggle { display: none; }
.nav-book { margin-left: 2px; }

/* Buttons */
.button { position: relative; display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 12px; overflow: hidden; padding: 0 25px; border: 1px solid transparent; border-radius: 2px; color: #160f04; background: var(--gold-gradient); background-size: 200% auto; box-shadow: 0 8px 24px #b8790a22; font-size: .72rem; font-weight: 600; letter-spacing: .06em; transition: transform .25s ease, box-shadow .25s ease, background-position .4s ease; cursor: pointer; }
.button::before { position: absolute; top: -60%; left: -60%; width: 35%; height: 220%; content: ""; background: #ffffff78; transform: rotate(25deg); transition: left .65s ease; }
.button:hover { background-position: right center; box-shadow: 0 10px 32px #f2a9004d; transform: translateY(-2px); }
.button:hover::before { left: 130%; }
.button > * { position: relative; }
.button-outline { border-color: #f2a900a6; color: var(--gold-light); background: #100e0bbc; box-shadow: none; }
.button-outline::before { background: #f2a90030; }
.button-small { min-height: 39px; padding: 0 16px; font-size: .68rem; }
.button.pulse { animation: button-pulse 2.6s ease-in-out infinite; }
.ripple { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff9; pointer-events: none; transform: scale(0); animation: ripple .6s ease-out forwards; }

/* Hero */
.hero { position: relative; display: grid; min-height: min(850px, 100svh); min-height: max(700px, 100svh); align-items: center; overflow: hidden; background: #1a130a; }
.hero-backdrop, .experience-backdrop { position: absolute; inset: 0; background-position: center; background-size: cover; }
.hero-backdrop { background-image: linear-gradient(90deg, #0b0b0be8 0%, #0b0b0bb5 48%, #0b0b0b55 100%), linear-gradient(0deg, #0b0b0bce 0%, transparent 34%), url("public/front.jpeg"); animation: ken-burns 24s ease-in-out infinite alternate; }
.hero::after { position: absolute; z-index: 0; right: 0; bottom: 0; left: 0; height: 1px; content: ""; background: linear-gradient(90deg, transparent, var(--gold-dark), transparent); }
.hero-content { position: relative; z-index: 2; padding-top: 75px; }
.hero-eyebrow { margin-bottom: 21px; animation: fade-up .9s .2s both; }
.hero-title { margin: 0; font: 600 clamp(3rem, 8.3vw, 7.1rem)/1.05 var(--font-heading); letter-spacing: -.055em; }
.typing-title { display: inline-block; color: var(--gold-light); background: var(--gold-gradient); background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% auto; animation: shimmer 5s linear infinite, fade-up .9s .35s both; }
.hero-subtitle { max-width: 680px; margin: 20px 0 11px; color: #f5e8cf; font: 500 clamp(1.15rem, 2.2vw, 1.65rem)/1.5 var(--font-subheading); animation: fade-up .9s .48s both; }
.hero-copy { max-width: 520px; margin: 0; color: #ded4c2; font-size: .9rem; animation: fade-up .9s .6s both; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px; animation: fade-up .9s .72s both; }
.hero-actions .button:first-child { animation: button-pulse 2.8s 2s ease-in-out infinite; }
.dust-canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.camel-track { position: absolute; right: 0; bottom: 52px; left: 0; z-index: 2; height: 36px; overflow: hidden; opacity: .72; }
.camel-walker { position: absolute; left: -60px; bottom: -3px; font-size: 2.2rem; filter: sepia(1) saturate(.5); animation: camel-walk 34s linear infinite; }
.scroll-cue { position: absolute; z-index: 2; bottom: 36px; left: 50%; display: grid; justify-items: center; gap: 7px; color: #d7c6a9; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; transform: translateX(-50%); }
.mouse { display: grid; width: 20px; height: 31px; justify-items: center; padding-top: 5px; border: 1px solid #e8d5b0b0; border-radius: 12px; }
.mouse i { width: 2px; height: 6px; border-radius: 3px; background: var(--gold-light); animation: mouse-scroll 1.3s ease infinite; }
.hero-location { position: absolute; right: 30px; bottom: 38px; z-index: 2; color: #d7c6a9; font-size: .65rem; letter-spacing: .08em; }
.hero-location i { margin-right: 5px; color: var(--gold); }

/* About and counters */
.about-section { overflow: hidden; background: var(--bg-dark); }
.about-section::before, .gallery-section::before { position: absolute; inset: 0; content: ""; pointer-events: none; opacity: .06; background-image: radial-gradient(circle at center, transparent 0 27px, var(--gold) 28px 29px, transparent 30px), radial-gradient(circle at center, transparent 0 55px, var(--gold) 56px 57px, transparent 58px); background-size: 120px 120px; mask-image: linear-gradient(90deg, #000, transparent 70%); }
.about-grid { position: relative; display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: clamp(50px, 9vw, 118px); }
.about-visual { position: relative; max-width: 460px; margin: 0 auto; }
.arch-frame { height: 560px; overflow: hidden; border: 1px solid #f2a90088; border-radius: 48% 48% 4px 4px / 35% 35% 4px 4px; padding: 9px; background: linear-gradient(145deg, #f2a90088, #b8790a22 55%, #f2a90088); box-shadow: 0 22px 80px #0008; }
.arch-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; filter: saturate(.83); }
.experience-seal { position: absolute; right: -32px; bottom: 66px; display: grid; width: 138px; height: 138px; place-content: center; justify-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-light); background: #151210ed; box-shadow: 0 0 0 7px #f2a90019; text-align: center; transform: rotate(8deg); }
.experience-seal span { font-size: .47rem; letter-spacing: .12em; }
.experience-seal strong { margin: 2px 0; font: 600 1.1rem/1.15 var(--font-heading); }
.experience-seal i { font-size: .7rem; }
.visual-caption { position: absolute; bottom: 15px; left: -30px; color: var(--sand); font: italic 1rem var(--font-subheading); transform: rotate(-90deg); transform-origin: left; }
.about-copy > p:not(.eyebrow):not(.lead) { color: var(--text-muted); }
.about-copy .ornament-divider { margin-top: 19px; margin-bottom: 18px; }
.highlight-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin: 25px 0 29px; padding: 0; list-style: none; color: #e7dece; font-size: .76rem; }
.highlight-list i { margin-right: 8px; color: var(--gold); font-size: .7rem; }
.text-link { padding: 0; border: 0; color: var(--gold-light); background: none; font-size: .72rem; font-weight: 600; letter-spacing: .04em; cursor: pointer; }
.text-link i { margin-left: 7px; transition: transform .25s ease; }
.text-link:hover i { transform: translateX(5px); }
.stats-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 88px; border-top: 1px solid #f2a90036; border-bottom: 1px solid #f2a90036; }
.stat-item { display: grid; justify-items: center; padding: 26px 15px; border-right: 1px solid #f2a90029; text-align: center; }
.stat-item:last-child { border: 0; }
.stat-icon { color: var(--gold); font-size: 1.05rem; }
.stat-item strong { margin: 3px 0 0; color: var(--gold-light); font: 600 2rem/1.2 var(--font-heading); }
.stat-item > span:last-child { color: var(--text-muted); font-size: .69rem; }

/* Rooms and amenities */
.rooms-section { background: #0e0d0b; }
.room-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.room-card { overflow: hidden; border: 1px solid #f2a90032; background: var(--bg-card); transform-style: preserve-3d; transition: border-color .3s, box-shadow .3s; }
.room-card:hover { border-color: #f2a900a1; box-shadow: 0 18px 48px #0009, 0 0 24px #f2a90013; }
.room-image { position: relative; height: 275px; overflow: hidden; }
.room-image::after { position: absolute; inset: 45% 0 0; content: ""; background: linear-gradient(transparent, #111b); }
.room-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .75s cubic-bezier(.2,.7,.2,1); }
.room-card:hover .room-image img { transform: scale(1.07); }
.room-number { position: absolute; z-index: 1; right: 17px; bottom: 9px; color: #fff9; font: 500 2rem var(--font-heading); }
.room-info { padding: 22px 25px 24px; }
.room-info h3 { margin: 0 0 7px; color: var(--sand); font: 600 1.2rem var(--font-subheading); }
.room-info > p { min-height: 48px; margin: 0; color: var(--text-muted); font-size: .75rem; }
.room-features { display: flex; flex-wrap: wrap; gap: 9px 16px; margin: 18px 0; padding: 13px 0; border-top: 1px solid #ffffff12; border-bottom: 1px solid #ffffff12; color: #cec3b1; font-size: .65rem; }
.room-features i { margin-right: 5px; color: var(--gold); }
.room-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.price { color: var(--text-muted); font-size: .63rem; }
.price b { color: var(--gold-light); font-size: .84rem; }
.price small { display: block; }
.room-enquire { white-space: nowrap; }
.amenities-section { overflow: hidden; background: var(--bg-dark); }
.amenities-section::before { position: absolute; inset: 0; content: ""; pointer-events: none; opacity: .08; background: radial-gradient(ellipse at 50% 40%, #f2a90038, transparent 65%); }
.amenity-grid { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; }
.amenity-card { display: grid; min-height: 142px; align-content: center; justify-items: center; gap: 12px; border: 1px solid #f2a9002a; background: #1c1814c2; backdrop-filter: blur(10px); transition: border-color .3s, transform .35s, box-shadow .3s; }
.amenity-card i { color: var(--gold); font-size: 1.55rem; transition: transform .5s, color .3s, text-shadow .3s; }
.amenity-card span { color: #e6dece; font-size: .7rem; }
.amenity-card:hover { border-color: var(--gold); box-shadow: 0 0 26px #f2a90024; transform: translateY(-5px); }
.amenity-card:hover i { color: var(--gold-light); text-shadow: 0 0 20px #f2a9008f; transform: rotateY(180deg); }

/* Gallery and experiences */
.gallery-section { background: #0e0d0b; overflow: hidden; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 165px; grid-auto-flow: dense; gap: 13px; }
.gallery-item { position: relative; min-width: 0; min-height: 0; overflow: hidden; padding: 0; border: 1px solid #f2a90038; background: var(--bg-card); cursor: zoom-in; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, filter .4s ease; }
.gallery-item > span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold-light); background: #0b0b0b00; opacity: 0; transition: opacity .3s, background .3s; }
.gallery-item > span i { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--gold); border-radius: 50%; background: #151210bc; }
.gallery-item:hover img { filter: brightness(.68); transform: scale(1.08); }
.gallery-item:hover > span { background: #0b0b0b4a; opacity: 1; }
.gallery-tall { grid-row: span 2; }
.gallery-wide { grid-column: span 2; }
.experience-section { overflow: hidden; background: #20170d; }
.experience-backdrop { background-image: linear-gradient(90deg, #0b0b0bf0, #0b0b0bc9), url("public/front.jpeg"); background-attachment: fixed; opacity: .8; }
.experience-content { position: relative; z-index: 1; }
.experience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.experience-card { display: flex; align-items: flex-start; gap: 17px; min-height: 145px; padding: 23px; border: 1px solid #f2a90036; background: #17130fd9; backdrop-filter: blur(9px); transition: transform .3s, border-color .3s, background .3s; }
.experience-card:hover { border-color: #f2a900a8; background: #211a12e8; transform: translateY(-5px); }
.experience-icon { display: grid; width: 43px; height: 43px; flex: 0 0 43px; place-items: center; border: 1px solid #f2a90074; border-radius: 50%; color: var(--gold); font-size: 1rem; }
.experience-card h3 { margin: 0 0 4px; color: var(--sand); font: 600 1rem var(--font-subheading); }
.experience-card p { margin: 0 0 9px; color: var(--text-muted); font-size: .7rem; line-height: 1.6; }
.experience-card small { color: var(--gold-light); font-size: .61rem; letter-spacing: .04em; }

/* Reviews */
.reviews-section { background: var(--bg-dark); }
.review-carousel { max-width: 800px; margin: auto; }
.review-track { position: relative; min-height: 285px; overflow: hidden; }
.review-slide { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; padding: 28px 50px; opacity: 0; pointer-events: none; text-align: center; transform: translateX(24px); transition: opacity .55s, transform .55s; }
.review-slide.active { opacity: 1; pointer-events: auto; transform: translateX(0); }
.review-stars { color: var(--gold); font-size: 1.05rem; letter-spacing: .2em; }
.review-slide blockquote { max-width: 700px; margin: 20px 0 25px; color: #eee4d2; font: 400 clamp(1.05rem, 2.3vw, 1.4rem)/1.7 var(--font-subheading); }
.review-person { display: flex; align-items: center; gap: 11px; text-align: left; }
.guest-avatar { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-light); background: #2b2114; font: 600 1rem var(--font-heading); }
.review-person strong, .review-person small { display: block; }
.review-person strong { color: var(--sand); font-size: .74rem; }
.review-person small { color: var(--text-muted); font-size: .65rem; }
.review-controls { display: flex; align-items: center; justify-content: center; gap: 22px; }
.carousel-arrow { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #f2a90066; border-radius: 50%; color: var(--gold-light); background: transparent; cursor: pointer; transition: background .25s, color .25s; }
.carousel-arrow:hover { color: var(--bg-black); background: var(--gold); }
.review-dots { display: flex; gap: 8px; }
.review-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 20px; background: #756b59; cursor: pointer; transition: width .3s, background .3s; }
.review-dot.active { width: 22px; background: var(--gold); }

/* Booking form */
.booking-section { overflow: hidden; background: #17130e; }
.booking-section::before { position: absolute; inset: 0; content: ""; opacity: .09; background: radial-gradient(circle at 15% 50%, #f2a90070, transparent 28%), radial-gradient(circle at 90% 10%, #f2a90055, transparent 20%); }
.booking-wrap { position: relative; display: grid; grid-template-columns: .75fr 1.25fr; align-items: start; gap: clamp(42px, 8vw, 105px); }
.booking-intro { padding-top: 25px; }
.booking-intro > p:not(.eyebrow) { color: var(--text-muted); }
.booking-note { display: flex; align-items: center; gap: 14px; margin: 30px 0 22px; padding: 16px; border-left: 2px solid #2cbf68; background: #ffffff08; color: var(--text-muted); font-size: .7rem; }
.booking-note > i { color: #39ce75; font-size: 1.7rem; }
.booking-note b { color: var(--sand); }
.booking-form { padding: 31px; border: 1px solid #f2a90052; background: #100e0de8; box-shadow: 0 25px 80px #0004; }
.form-heading { display: grid; gap: 5px; margin-bottom: 23px; }
.form-heading > span { color: var(--gold-light); font: 600 1.12rem var(--font-heading); letter-spacing: .06em; }
.form-heading small { color: var(--text-muted); font-size: .68rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.form-field { display: grid; align-content: start; gap: 6px; min-width: 0; color: #ddd2bf; font-size: .68rem; }
.form-field > span b { color: var(--gold); }
.form-field > span small { color: var(--text-muted); font-size: .6rem; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid #ffffff1b; border-radius: 1px; outline: 0; color: #f1e9db; background: #1c1814; font-size: .7rem; transition: border-color .25s, box-shadow .25s; }
.form-field select { color-scheme: dark; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #837b6e; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px #f2a90017; }
.form-field input.invalid, .form-field select.invalid { border-color: #e46c64; }
.form-field input.valid, .form-field select.valid { border-color: #37c779; }
.form-field textarea { min-height: 89px; resize: vertical; }
.form-full { grid-column: 1 / -1; }
.field-error { min-height: 0; color: #ff938b; font-size: .61rem; line-height: 1.35; }
.field-error:not(:empty) { animation: fade-up .25s ease both; }
.form-status { min-height: 8px; margin-top: 7px; color: #78dfa1; font-size: .7rem; }
.submit-button { width: 100%; margin-top: 13px; }
.form-privacy { margin: 13px 0 0; color: #81796c; font-size: .59rem; text-align: center; }
.form-privacy i { margin-right: 4px; }
.success-popup { position: fixed; z-index: 1500; right: 24px; bottom: 28px; display: flex; align-items: center; gap: 13px; min-width: 290px; padding: 15px 19px; border: 1px solid #38c9788c; background: #131b16f5; box-shadow: 0 12px 40px #0008; opacity: 0; pointer-events: none; transform: translateY(20px); transition: opacity .35s, transform .35s; }
.success-popup.visible { opacity: 1; transform: translateY(0); }
.success-popup > span { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 50%; color: #0a160e; background: #37c779; font-size: 1.15rem; }
.success-popup strong { font-size: .75rem; }
.success-popup p { margin: 0; color: #b3c5b8; font-size: .64rem; }
.success-popup > .fa-circle-check { margin-left: auto; color: #55d68b; }

/* Contact and footer */
.contact-section { background: #0e0d0b; }
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: stretch; gap: 38px; }
.contact-details { display: grid; align-content: start; gap: 18px; }
.contact-card { display: flex; gap: 18px; padding: 22px; border: 1px solid #f2a90030; background: #171411; }
.contact-icon { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border: 1px solid #f2a90066; border-radius: 50%; color: var(--gold); }
.contact-card h3 { margin: 0 0 8px; color: var(--sand); font: 600 .95rem var(--font-subheading); }
.contact-card p { margin: 0 0 8px; color: var(--text-muted); font-size: .72rem; }
.contact-card > div > a { color: var(--gold-light); font-size: .67rem; }
.contact-card > div > a i { margin-left: 4px; }
.contact-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.contact-list li { display: flex; justify-content: space-between; gap: 14px; color: var(--text-muted); font-size: .67rem; }
.contact-list li > span:last-child { display: flex; align-items: center; gap: 9px; }
.contact-list a { color: var(--gold-light); white-space: nowrap; }
.contact-whatsapp { color: #40d078 !important; font-size: .9rem; }
.map-frame { position: relative; min-height: 440px; overflow: hidden; border: 1px solid #f2a90082; border-radius: 2px; box-shadow: 0 15px 45px #0006; }
.map-frame iframe { width: 100%; height: 100%; min-height: 440px; border: 0; filter: grayscale(.85) sepia(.35) contrast(.9); }
.map-label { position: absolute; right: 14px; bottom: 14px; padding: 8px 12px; color: var(--sand); background: #100e0ded; font-size: .62rem; }
.map-label i { margin-right: 6px; color: var(--gold); }
.site-footer { border-top: 1px solid #f2a9003b; background: #090807; }
.footer-main { display: grid; grid-template-columns: 1.5fr .75fr .75fr 1fr; gap: 48px; padding-top: 65px; padding-bottom: 55px; }
.footer-brand > p { max-width: 285px; margin: 18px 0; color: var(--text-muted); font-size: .7rem; }
.social-links { display: flex; gap: 9px; }
.social-links a { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #f2a90048; border-radius: 50%; color: var(--gold-light); font-size: .75rem; transition: color .25s, background .25s, transform .25s; }
.social-links a:hover { color: #111; background: var(--gold); transform: translateY(-3px); }
.footer-column { display: grid; align-content: start; justify-items: start; gap: 9px; }
.footer-column h3 { margin: 0 0 8px; color: var(--gold-light); font: 600 .9rem var(--font-heading); }
.footer-column > a { color: var(--text-muted); font-size: .67rem; transition: color .2s; }
.footer-column > a:hover { color: var(--gold-light); }
.footer-contact > a { position: relative; padding-left: 22px; }
.footer-contact > a i { position: absolute; top: 4px; left: 0; color: var(--gold); }
.footer-bottom { border-top: 1px solid #ffffff10; }
.footer-bottom > .wrap { display: flex; min-height: 53px; align-items: center; justify-content: space-between; gap: 12px; color: #8e8577; font-size: .61rem; }
.footer-bottom a { color: #b9ae9a; }
.footer-bottom a i { margin-left: 4px; color: var(--maroon); }

/* Floating controls and gallery lightbox */
.floating-action { position: fixed; z-index: 900; display: grid; place-items: center; border-radius: 50%; color: #fff; box-shadow: 0 7px 25px #0008; }
.whatsapp-float { right: 22px; bottom: 22px; width: 56px; height: 56px; background: #20b95b; font-size: 1.65rem; animation: whatsapp-pulse 2.5s infinite; }
.whatsapp-float > span { position: absolute; right: 66px; padding: 6px 10px; border: 1px solid #ffffff1b; background: #111; color: #ddd; font-size: .62rem; opacity: 0; pointer-events: none; transition: opacity .2s; white-space: nowrap; }
.whatsapp-float:hover > span { opacity: 1; }
.call-float { right: 29px; bottom: 91px; width: 42px; height: 42px; border: 1px solid #fff6; background: var(--gold-dark); font-size: .9rem; }
.back-to-top { position: fixed; z-index: 899; right: 28px; bottom: 148px; display: grid; width: 43px; height: 43px; place-items: center; border: 0; border-radius: 50%; color: var(--gold-light); background: #17130ee8; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .25s, transform .25s; cursor: pointer; }
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-track, .progress-circle { fill: none; stroke-width: 1.5; }
.progress-track { stroke: #ffffff28; }
.progress-circle { stroke: var(--gold); stroke-dasharray: 119.38; stroke-dashoffset: 119.38; transition: stroke-dashoffset .15s linear; }
.back-to-top i { font-size: .75rem; }
.lightbox { position: fixed; z-index: 2000; inset: 0; display: flex; align-items: center; justify-content: center; padding: 65px; background: #050403f5; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox figure { display: grid; max-width: min(1000px, 82vw); max-height: 83vh; justify-items: center; margin: 0; }
.lightbox figure img { max-width: 100%; max-height: 78vh; border: 1px solid #f2a90076; object-fit: contain; box-shadow: 0 22px 80px #000; }
.lightbox-caption { margin-top: 12px; color: var(--sand); font-size: .72rem; }
.lightbox-close, .lightbox-nav { position: absolute; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #f2a90061; border-radius: 50%; color: var(--gold-light); background: #14110de8; cursor: pointer; transition: background .2s, color .2s; }
.lightbox-close:hover, .lightbox-nav:hover { color: #111; background: var(--gold); }
.lightbox-close { top: 26px; right: 28px; font-size: 1.2rem; }
.lightbox-prev { left: 28px; }
.lightbox-next { right: 28px; }

/* Reveal and animation */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal.reveal-left { transform: translateX(-32px); }
.reveal.reveal-right { transform: translateX(32px); }
.reveal.zoom-in { transform: scale(.94); }
.reveal.visible { opacity: 1; transform: translate(0) scale(1); }
.room-grid .reveal:nth-child(2), .amenity-grid .reveal:nth-child(2), .experience-grid .reveal:nth-child(2) { transition-delay: .08s; }
.room-grid .reveal:nth-child(3), .amenity-grid .reveal:nth-child(3), .experience-grid .reveal:nth-child(3) { transition-delay: .15s; }
.room-grid .reveal:nth-child(4), .amenity-grid .reveal:nth-child(4), .experience-grid .reveal:nth-child(4) { transition-delay: .22s; }
.amenity-grid .reveal:nth-child(5), .experience-grid .reveal:nth-child(5) { transition-delay: .29s; }
.amenity-grid .reveal:nth-child(6), .experience-grid .reveal:nth-child(6) { transition-delay: .36s; }
.amenity-grid .reveal:nth-child(n+7) { transition-delay: .14s; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes loader-glow { 50% { box-shadow: 0 0 55px #f2a90070; } }
@keyframes ken-burns { to { transform: scale(1.08); } }
@keyframes shimmer { to { background-position: 200% center; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes camel-walk { from { left: -60px; } to { left: calc(100% + 50px); } }
@keyframes mouse-scroll { 0% { opacity: 0; transform: translateY(0); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(9px); } }
@keyframes button-pulse { 0%, 100% { box-shadow: 0 8px 24px #b8790a22; } 50% { box-shadow: 0 8px 30px #f2a90058; } }
@keyframes whatsapp-pulse { 0%, 100% { box-shadow: 0 0 0 0 #20b95b66, 0 7px 25px #0008; } 60% { box-shadow: 0 0 0 12px #20b95b00, 0 7px 25px #0008; } }
@keyframes ripple { to { opacity: 0; transform: scale(25); } }

/* Responsive layouts */
@media (max-width: 1050px) {
  :root { --header-height: 74px; }
  .reveal.reveal-left, .reveal.reveal-right { transform: translateY(28px); }
  .nav-links { gap: 13px; }
  .nav-link { font-size: .64rem; }
  .nav-book { padding-inline: 12px; }
  .about-grid { gap: 54px; }
  .arch-frame { height: 500px; }
  .footer-main { gap: 28px; }
}
@media (max-width: 860px) {
  .reveal.reveal-left, .reveal.reveal-right { transform: translateY(28px); }
  .menu-toggle { position: relative; z-index: 2; display: grid; width: 42px; height: 42px; align-content: center; justify-items: center; gap: 6px; padding: 0; border: 1px solid #f2a90062; background: #0b0b0b82; cursor: pointer; }
  .menu-toggle span { display: block; width: 18px; height: 1px; background: var(--gold-light); transition: transform .25s, opacity .25s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }
  .nav-drawer { position: fixed; top: var(--header-height); right: 0; bottom: 0; width: min(360px, 86vw); padding: 24px; border-left: 1px solid #f2a90044; background: #100e0df7; box-shadow: -20px 15px 50px #0008; transform: translateX(105%); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
  .nav-drawer.open { transform: translateX(0); }
  .nav-links { display: grid; align-content: start; gap: 0; }
  .nav-links li { border-bottom: 1px solid #ffffff10; }
  .nav-link { padding: 12px 0; font-size: .85rem; }
  .nav-book { margin: 16px 0 0; }
  .nav-links li:last-child { border: 0; }
  .about-grid { grid-template-columns: .8fr 1.2fr; gap: 38px; }
  .arch-frame { height: 430px; }
  .experience-seal { right: -20px; width: 112px; height: 112px; }
  .visual-caption { left: -20px; }
  .highlight-list { grid-template-columns: 1fr; gap: 8px; }
  .amenity-grid { grid-template-columns: repeat(4, 1fr); }
  .experience-grid { grid-template-columns: repeat(2, 1fr); }
  .booking-wrap { grid-template-columns: 1fr 1.25fr; gap: 35px; }
  .footer-main { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer-contact { grid-column: 2 / 4; }
}
@media (max-width: 640px) {
  .wrap { width: min(100% - 36px, 480px); }
  .section { padding: 78px 0; }
  .section-heading { margin-bottom: 38px; }
  .section-title { font-size: clamp(2rem, 9vw, 2.7rem); }
  .reveal.reveal-left, .reveal.reveal-right { transform: translateY(28px); }
  .site-header { background: #0b0b0b88; backdrop-filter: blur(8px); }
  .brand-mark { width: 42px; height: 42px; }
  .brand-name { font-size: .95rem; }
  .hero { min-height: 760px; min-height: max(720px, 100svh); }
  .hero-backdrop { background-position: 57% center; background-image: linear-gradient(90deg, #0b0b0be8, #0b0b0bb5 60%, #0b0b0b77), linear-gradient(0deg, #0b0b0bd9, transparent 50%), url("public/front.jpeg"); }
  .hero-content { padding-top: 50px; }
  .hero-title { font-size: clamp(2.75rem, 12vw, 4.5rem); }
  .hero-eyebrow { font-size: .58rem; letter-spacing: .15em; }
  .hero-subtitle { max-width: 390px; font-size: 1.22rem; }
  .hero-copy { max-width: 350px; font-size: .79rem; }
  .hero-actions { gap: 10px; margin-top: 26px; }
  .hero-actions .button { min-height: 47px; padding-inline: 17px; font-size: .65rem; }
  .camel-track { bottom: 51px; }
  .scroll-cue { bottom: 20px; left: 24px; grid-auto-flow: column; align-items: center; transform: none; }
  .hero-location { right: 18px; bottom: 29px; font-size: .57rem; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-visual { width: min(88%, 380px); }
  .arch-frame { height: 450px; }
  .about-copy { padding-top: 5px; }
  .highlight-list { grid-template-columns: 1fr 1fr; gap: 9px; font-size: .66rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); margin-top: 52px; }
  .stat-item { padding: 20px 9px; border-bottom: 1px solid #f2a90029; }
  .stat-item:nth-child(2) { border-right: 0; }
  .stat-item:nth-child(n+3) { border-bottom: 0; }
  .stat-item strong { font-size: 1.7rem; }
  .room-grid { grid-template-columns: 1fr; gap: 17px; }
  .room-image { height: 245px; }
  .room-info { padding: 19px; }
  .room-info > p { min-height: auto; }
  .amenity-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .amenity-card { min-height: 112px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 125px; gap: 8px; }
  .gallery-wide { grid-column: span 2; }
  .experience-backdrop { background-attachment: scroll; }
  .experience-grid { grid-template-columns: 1fr; gap: 10px; }
  .experience-card { min-height: 118px; padding: 18px; }
  .review-track { min-height: 350px; }
  .review-slide { padding: 20px 8px; }
  .review-slide blockquote { font-size: 1.08rem; }
  .booking-wrap { grid-template-columns: 1fr; gap: 27px; }
  .booking-intro { padding-top: 0; }
  .booking-form { padding: 22px 16px; }
  .form-grid { gap: 12px 9px; }
  .form-field { font-size: .64rem; }
  .form-field input, .form-field select, .form-field textarea { padding: 10px 8px; font-size: .66rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 20px; }
  .contact-card { padding: 17px 14px; gap: 12px; }
  .contact-list li { font-size: .63rem; }
  .map-frame, .map-frame iframe { min-height: 330px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 29px 20px; padding-top: 48px; padding-bottom: 37px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-contact { grid-column: 1 / -1; }
  .footer-bottom > .wrap { min-height: 62px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 2px; font-size: .56rem; }
  .whatsapp-float { right: 14px; bottom: 15px; width: 51px; height: 51px; }
  .call-float { right: 20px; bottom: 76px; width: 39px; height: 39px; }
  .back-to-top { right: 19px; bottom: 127px; width: 40px; height: 40px; }
  .lightbox { padding: 58px 18px; }
  .lightbox figure { max-width: 100%; }
  .lightbox-nav { width: 37px; height: 37px; bottom: 18px; }
  .lightbox-prev { left: calc(50% - 48px); }
  .lightbox-next { right: calc(50% - 48px); }
  .lightbox-close { top: 14px; right: 14px; }
  .success-popup { right: 12px; bottom: 78px; min-width: 0; width: calc(100% - 24px); }
  .cursor-glow { display: none; }
}
@media (max-width: 380px) {
  .wrap { width: calc(100% - 30px); }
  .brand { gap: 7px; }
  .brand-name { font-size: .87rem; }
  .hero-title { font-size: 2.6rem; }
  .hero-actions .button { padding-inline: 13px; }
  .highlight-list { grid-template-columns: 1fr; }
  .room-features { gap: 8px 11px; }
}
@media (hover: none), (pointer: coarse) { .cursor-glow { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .cursor-glow, .dust-canvas { display: none; }
}