/* ==========================================================================
   Luxe Haven — Hotel Booking Website
   Global Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  --gold: #c8a24a;
  --gold-soft: #e0c88b;
  --gold-dark: #a4822f;
  --ink: #0d0f12;
  --ink-2: #16191e;
  --ink-3: #1f242b;
  --line: rgba(255, 255, 255, .10);
  --line-dark: rgba(13, 15, 18, .10);
  --body: #6b7280;
  --heading: #10141a;
  --white: #ffffff;
  --cream: #faf7f1;
  --cream-2: #f3ede1;

  --ff-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ff-body: 'Jost', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --container: 1240px;
  --radius: 14px;
  --radius-lg: 26px;
  --shadow: 0 18px 50px rgba(13, 15, 18, .10);
  --shadow-lg: 0 30px 80px rgba(13, 15, 18, .18);
  --t: .35s cubic-bezier(.4, 0, .2, 1);

  --header-h: 100px;
  /* how far the video frame hangs into the section beneath it */
  --video-overlap: clamp(70px, 9vw, 150px);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--body);
  background: var(--white);
  /* clip, not hidden: overflow-x:hidden turns body into a scroll container,
     which stops every position:sticky on the page from sticking */
  overflow-x: clip;
}

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

a { color: inherit; text-decoration: none; transition: color var(--t); }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-head);
  color: var(--heading);
  margin: 0 0 .6em;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.7vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

button, input, select, textarea { font: inherit; color: inherit; }
/* padding:0 matters — UA button padding sets a min-content floor that stops
   small fixed-size buttons (the hero dots) from staying square in flex/grid. */
button { cursor: pointer; border: 0; background: none; padding: 0; }

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

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--cream-2); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 10px; }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}
.container-wide { max-width: 1480px; }
/* Near-full-bleed shell used by the header */
.container-fluid { width: 100%; max-width: 1800px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 56px); }

.row { display: flex; flex-wrap: wrap; margin: -15px; }
.row > * { padding: 15px; }

.grid { display: grid; gap: 30px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.section { padding: clamp(64px, 8vw, 118px) 0; }
.section-sm { padding: clamp(48px, 6vw, 80px) 0; }
.bg-cream { background: var(--cream); }
.bg-dark { background: var(--ink); color: rgba(255, 255, 255, .68); }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5 { color: #fff; }

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mb-0 { margin-bottom: 0; }
.mt-40 { margin-top: 40px; }

/* --------------------------------------------------------------------------
   4. Buttons & shared bits
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 34px;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 60px;
  background: var(--gold);
  color: #fff;
  border: 1px solid var(--gold);
  transition: var(--t);
  white-space: nowrap;
}
.btn:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }

.btn-outline { background: transparent; color: var(--heading); border-color: rgba(13, 15, 18, .18); }
.btn-outline:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
/* A white puck would vanish on an outline button — invert it */
.btn-outline .btn__icon { background: var(--gold); color: #fff; }
.btn-outline:hover .btn__icon { background: #fff; color: var(--gold-dark); }

.btn-light { background: #fff; color: var(--heading); border-color: #fff; }
.btn-light:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
/* On a white pill the icon puck inverts: dark disc, white glyph */
.btn-light .btn__icon { background: var(--ink); color: #fff; }
.btn-light:hover .btn__icon { background: #fff; color: var(--gold-dark); }

.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn-ghost-light:hover { background: #fff; border-color: #fff; color: var(--heading); }

.btn-sm { padding: 11px 24px; font-size: .74rem; }
.btn-block { width: 100%; justify-content: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.eyebrow::before,
.eyebrow.is-center::after {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.section-head { max-width: 660px; margin-bottom: 58px; }
.section-head.is-center { margin-inline: auto; text-align: center; }
.section-head p { font-size: 1.02rem; }

.divider-orn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--gold); margin-bottom: 18px;
}
.divider-orn::before, .divider-orn::after {
  content: ""; width: 46px; height: 1px; background: currentColor; opacity: .5;
}

/* --------------------------------------------------------------------------
   5. Preloader
   -------------------------------------------------------------------------- */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--ink);
  transition: opacity .5s ease, visibility .5s ease;
}
#preloader.is-done { opacity: 0; visibility: hidden; }
.loader-ring {
  width: 58px; height: 58px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .14);
  border-top-color: var(--gold);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   6. Header / Navigation
   -------------------------------------------------------------------------- */
/* Optional contact strip above the header. Not used by default — add the
   .topbar markup back into index.html and rebuild if you want it. */
.topbar {
  background: var(--ink-2);
  color: rgba(255, 255, 255, .62);
  font-size: .82rem;
  border-bottom: 1px solid var(--line);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 46px; flex-wrap: wrap;
}
.topbar__list { display: flex; gap: 26px; flex-wrap: wrap; }
.topbar__list i { color: var(--gold); margin-right: 8px; }
.topbar a:hover { color: var(--gold); }
.topbar__social { display: flex; gap: 16px; }

.site-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-dark);
  transition: box-shadow var(--t), background var(--t);
}
.site-header.is-stuck { box-shadow: 0 10px 34px rgba(13, 15, 18, .09); }

.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.brand__mark {
  display: grid; place-items: center;
  color: var(--gold); font-size: 1.9rem; line-height: 1;
}
.brand__text { line-height: 1.1; }
.brand__name {
  font-family: var(--ff-head); font-size: 1.85rem; font-weight: 600;
  font-style: italic; color: var(--heading); letter-spacing: 0;
}
.brand__tag {
  display: block; font-size: .62rem; letter-spacing: .34em;
  text-transform: uppercase; color: var(--gold); font-style: normal;
}

.nav { margin-left: clamp(24px, 6vw, 88px); margin-right: auto; }
.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 16px;
  font-size: .84rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--heading);
}
.nav__link:hover, .nav__item.is-active > .nav__link { color: var(--gold); }
.nav__link i { font-size: .6rem; opacity: .7; }

.nav__item { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 12px); left: 0;
  min-width: 232px; padding: 12px 0;
  background: #fff; border-radius: 12px;
  box-shadow: var(--shadow);
  border-top: 3px solid var(--gold);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: var(--t);
}
.nav__item:hover > .dropdown,
.nav__item:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: block; padding: 9px 24px;
  font-size: .88rem; color: var(--body);
}
.dropdown a:hover { color: var(--gold); padding-left: 30px; }

.header__actions { display: flex; align-items: center; gap: 14px; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-dark);
  color: var(--heading);
  transition: var(--t);
}
.icon-btn:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

/* Borderless header icons (search / menu), as in the reference header */
.icon-btn--plain { border: 0; font-size: 1.15rem; }
.icon-btn--plain:hover { background: transparent; color: var(--gold); }
/* Hamburger is mobile-only — the full nav is visible on desktop, so the
   off-canvas panel has no reason to be reachable there. */
.nav-toggle { font-size: 1.35rem; display: none; }

.header__divider { width: 1px; height: 30px; background: var(--line-dark); margin-inline: 6px; }
.btn-quote { letter-spacing: .12em; padding: 13px 28px; }

/* Mobile nav panel */
.mobile-nav {
  position: fixed; inset: 0 0 0 auto; width: min(340px, 88vw);
  z-index: 1000; background: var(--ink); color: #fff;
  padding: 26px 24px 40px; overflow-y: auto;
  transform: translateX(100%); transition: transform var(--t);
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.mobile-nav .brand__name { color: #fff; }
.mobile-nav__close { color: #fff; font-size: 1.35rem; padding: 8px; margin: -8px; }
.mobile-nav__list > li { border-bottom: 1px solid var(--line); }
.mobile-nav__list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 2px; font-size: .95rem; letter-spacing: .05em;
  color: rgba(255, 255, 255, .82); text-transform: uppercase;
}
.mobile-nav__list a:hover { color: var(--gold); }
/* The toggle is a sibling of the link, never nested inside it — a button
   inside an anchor is invalid and taps navigate instead of expanding. */
.mobile-nav__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mobile-nav__row > a { flex: 1; }
.mobile-nav__sub { display: none; padding-bottom: 8px; }
.mobile-nav__sub.is-open { display: block; }
.mobile-nav__sub a { padding: 9px 14px; font-size: .84rem; text-transform: none; opacity: .8; }
.sub-toggle {
  flex-shrink: 0; padding: 14px 6px 14px 14px;
  color: var(--gold); font-size: .9rem; line-height: 1;
}
.sub-toggle:hover { color: #fff; }

.overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(13, 15, 18, .6);
  opacity: 0; visibility: hidden; transition: var(--t);
}
.overlay.is-open { opacity: 1; visibility: visible; }

/* Site search — matches page titles/keywords from a static index in main.js */
.search-panel {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(13, 15, 18, .96);
  display: grid; place-items: start center;
  padding: clamp(70px, 14vh, 150px) 20px 40px;
  opacity: 0; visibility: hidden; transition: var(--t);
}
.search-panel.is-open { opacity: 1; visibility: visible; }
.search-panel__inner { width: min(680px, 100%); text-align: center; }
.search-panel__close {
  position: absolute; top: 26px; right: 30px;
  color: #fff; font-size: 1.6rem; padding: 10px;
}
.search-panel__close:hover { color: var(--gold); }
.search-panel .eyebrow { color: var(--gold); justify-content: center; display: flex; }
.search-panel__field { position: relative; margin-top: 10px; }
.search-panel__field i {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  color: var(--gold); font-size: 1.1rem;
}
.search-panel__field input {
  width: 100%; padding: 16px 0 16px 38px;
  background: transparent; border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  color: #fff; font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  font-family: var(--ff-head);
}
.search-panel__field input:focus { outline: none; border-bottom-color: var(--gold); }
.search-panel__field input::placeholder { color: rgba(255, 255, 255, .34); }
.search-results { margin-top: 26px; text-align: left; display: grid; gap: 2px; }
.search-results a {
  display: block; padding: 14px 18px; border-radius: 10px;
  color: rgba(255, 255, 255, .82);
}
.search-results a:hover, .search-results a:focus-visible { background: rgba(255, 255, 255, .07); color: #fff; }
.search-results strong { display: block; font-family: var(--ff-head); font-size: 1.08rem; color: #fff; }
.search-results span { font-size: .88rem; }
.search-results .is-empty { padding: 14px 18px; color: rgba(255, 255, 255, .5); font-size: .94rem; }

/* --------------------------------------------------------------------------
   7. Hero slider
   -------------------------------------------------------------------------- */
/* Full-bleed hero: header + hero together fill exactly one screen.
   svh keeps it honest on mobile browsers with collapsing toolbars. */
.hero-wrap { position: relative; }

.hero {
  position: relative; overflow: hidden;
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  min-height: 540px;
}
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.1s ease;
}
.hero__slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(13, 15, 18, .82) 0%, rgba(13, 15, 18, .55) 48%, rgba(13, 15, 18, .28) 100%);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide.is-active .hero__img { animation: kenburns 8s ease-out forwards; }
.hero__img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12); } }

.hero__content {
  position: relative; z-index: 3; height: 100%;
  display: flex; align-items: center;
  /* The image runs edge to edge, so the panel needs its own inset. Symmetric,
     so on narrow screens it sits centred with equal margins instead of
     bleeding off the right edge. */
  padding-inline: clamp(22px, 6vw, 92px);
}

/* Frosted glass panel, soft-edged via a mask on the backdrop layer only */
.hero__panel {
  position: relative; color: #fff;
  width: min(790px, 100%);
  padding: clamp(38px, 5vw, 74px) clamp(26px, 5vw, 82px);
}
.hero__panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(26, 19, 14, .40);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: radial-gradient(125% 125% at 42% 50%, #000 56%, transparent 100%);
  mask-image: radial-gradient(125% 125% at 42% 50%, #000 56%, transparent 100%);
}
.hero__panel h1 {
  color: #fff; margin-bottom: 40px;
  font-size: clamp(2.5rem, 5.6vw, 5.3rem);
  line-height: 1.06; letter-spacing: -.015em;
}
.hero__panel h1 em { font-style: italic; }
/* "Effortlessly" drops out of the serif into the sans, as in the reference */
.hero__sans { font-family: var(--ff-body); font-style: normal; font-weight: 400; }

/* Floating client-satisfaction card at the hero's bottom-right corner */
.hero__stat {
  position: absolute; right: 0; bottom: 0; z-index: 6;
  display: flex; align-items: stretch;
  max-width: min(720px, 62vw);
}
.hero__stat-card { background: #fff; padding: 30px 34px; max-width: 380px; }
.hero__stat-row { display: flex; align-items: center; gap: 22px; }
/* Direct child only, so the counter span inside <strong> keeps the large size */
.hero__stat-row > span { font-size: 1.02rem; line-height: 1.3; color: var(--heading); }
.hero__stat-row strong {
  font-family: var(--ff-body); font-weight: 400;
  font-size: clamp(2.2rem, 3.6vw, 3.1rem); line-height: 1; color: var(--heading);
}
.hero__stat-card p { margin-top: 18px; font-size: .95rem; color: var(--gold-dark); }
.hero__stat img { width: 240px; object-fit: cover; flex-shrink: 0; }

.hero__dots {
  position: absolute; right: 46px; top: 50%; transform: translateY(-50%);
  z-index: 4; display: grid; gap: 14px; justify-items: center;
}
.hero__dots button {
  width: 12px; height: 12px; aspect-ratio: 1;
  flex: 0 0 auto; min-width: 0; min-height: 0; padding: 0;
  border-radius: 50%; line-height: 0;
  border: 1px solid rgba(255, 255, 255, .6); background: transparent;
  -webkit-appearance: none; appearance: none;
  transition: var(--t);
}
.hero__dots button.is-active { background: var(--gold); border-color: var(--gold); transform: scale(1.35); }

.hero__scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 4; color: rgba(255, 255, 255, .7); font-size: .7rem;
  letter-spacing: .3em; text-transform: uppercase;
  display: grid; justify-items: center; gap: 8px;
}
.hero__scroll span { animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* --------------------------------------------------------------------------
   8. Page banner (inner pages)
   -------------------------------------------------------------------------- */
.page-banner {
  position: relative;
  padding: clamp(90px, 13vw, 170px) 0;
  background-size: cover; background-position: center;
  text-align: center; color: #fff;
}
.page-banner::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13, 15, 18, .74), rgba(13, 15, 18, .82));
}
.page-banner .container { position: relative; z-index: 2; }
.page-banner h1 { color: #fff; margin-bottom: 14px; }
.breadcrumb {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 10px; font-size: .84rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .68);
}
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 10px; opacity: .5; }
.breadcrumb .is-current { color: var(--gold); }

/* --------------------------------------------------------------------------
   9. Booking bar / form
   -------------------------------------------------------------------------- */
.booking-bar { position: relative; z-index: 20; margin-top: -62px; }
/* Sits below the hero rather than overlapping it, so it clears the stat card */
.booking-bar.is-below { margin-top: clamp(30px, 4vw, 54px); }
.booking-card {
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 30px;
  border-top: 4px solid var(--gold);
}
.booking-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(4, 1fr) auto;
  align-items: end;
}
.field { display: grid; gap: 7px; }
.field label {
  font-size: .72rem; font-weight: 500; letter-spacing: .17em;
  text-transform: uppercase; color: var(--heading);
}
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 16px;
  border: 1px solid rgba(13, 15, 18, .13);
  border-radius: 10px; background: var(--cream);
  color: var(--heading); font-size: .94rem;
  transition: var(--t);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold);
  background: #fff; box-shadow: 0 0 0 4px rgba(200, 162, 74, .13);
}
.field input::placeholder, .field textarea::placeholder { color: #a3a9b3; }

.form-note { font-size: .84rem; margin-top: 14px; }
.form-status {
  display: none; margin-top: 18px; padding: 14px 18px;
  border-radius: 10px; font-size: .92rem;
  background: rgba(200, 162, 74, .12);
  border: 1px solid rgba(200, 162, 74, .35);
  color: var(--gold-dark);
}
.form-status.is-visible { display: block; }
.field-error { color: #c0392b; font-size: .78rem; display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #c0392b; }
.field.has-error .field-error { display: block; }

/* --------------------------------------------------------------------------
   9b. Availability results
   -------------------------------------------------------------------------- */
.avail {
  margin-top: 22px;
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 30px;
}
.avail[hidden] { display: none; }
.avail__head { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line-dark); }
.avail__head h3 { font-size: 1.4rem; margin-bottom: 4px; }
.avail__head p { font-size: .92rem; }
.avail__empty { font-size: .96rem; }
.avail__empty a { color: var(--gold); text-decoration: underline; }
.avail__list { display: grid; gap: 18px; }

.avail-card {
  display: grid; grid-template-columns: 150px 1fr 250px;
  gap: 22px; align-items: center;
  border: 1px solid var(--line-dark); border-radius: var(--radius);
  padding: 16px; transition: all 400ms ease;
}
.avail-card:hover { border-color: var(--gold); box-shadow: var(--shadow); }
.avail-card > img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; }
.avail-card h4 { font-size: 1.18rem; margin-bottom: 8px; }
.avail-card__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .85rem; }
.avail-card__meta li { display: flex; align-items: center; gap: 7px; }
.avail-card__meta i { color: var(--gold); }
.avail-card__left { margin-top: 10px; font-size: .84rem; }
.avail-card__left.is-scarce { color: #c0392b; font-weight: 500; }

.avail-card__price { text-align: right; }
.avail-card__price > strong {
  font-family: var(--ff-head); font-size: 1.7rem; color: var(--gold); line-height: 1;
}
.avail-card__price > span { display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.avail-card__sum { margin: 14px 0; font-size: .85rem; }
.avail-card__sum li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.avail-card__sum .is-total {
  border-top: 1px solid var(--line-dark); margin-top: 6px; padding-top: 9px;
  font-family: var(--ff-head); font-size: 1.02rem; color: var(--heading);
}

@media (max-width: 991px) {
  .avail-card { grid-template-columns: 120px 1fr; }
  .avail-card__price { grid-column: 1 / -1; text-align: left; border-top: 1px solid var(--line-dark); padding-top: 16px; }
  .avail-card__price .btn { width: 100%; }
}
@media (max-width: 767px) {
  .avail { padding: 22px; }
  .avail-card { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   10. About / feature blocks
   -------------------------------------------------------------------------- */
/* Query container so the badge, its type and the sub-image border all scale
   with the composition — it keeps the desktop arrangement at every size
   instead of breaking apart on small screens. */
.about-media { position: relative; container-type: inline-size; }
.about-media img { border-radius: var(--radius-lg); }
.about-media__main { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.about-media__sub {
  position: absolute; right: -10%; bottom: 8%;
  width: 55%; aspect-ratio: 1; object-fit: cover;
  border: clamp(4px, 1.9cqw, 10px) solid #fff;
  box-shadow: var(--shadow);
}
.exp-badge {
  position: absolute; left: -8%; top: 8%;
  background: var(--gold); color: #fff;
  border-radius: 50%;
  width: clamp(80px, 26cqw, 132px); aspect-ratio: 1;
  display: grid; place-content: center; text-align: center;
  box-shadow: var(--shadow);
}
.exp-badge strong { font-family: var(--ff-head); font-size: clamp(1.3rem, 6.8cqw, 2.3rem); line-height: 1; }
.exp-badge span { font-size: clamp(.52rem, 2.1cqw, .68rem); letter-spacing: .14em; text-transform: uppercase; }

.check-list { display: grid; gap: 12px; margin: 26px 0 32px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; }
.check-list i { color: var(--gold); margin-top: 6px; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { text-align: center; }
/* strong carries the small suffix (+, K); the counted number sits in a span
   inside it and is set large. */
.stat strong {
  display: block; font-family: var(--ff-head);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem); color: var(--gold); line-height: 1;
}
.stat strong span {
  font-size: clamp(2.4rem, 4.6vw, 3.4rem);
  letter-spacing: normal; text-transform: none;
}
/* Direct child only — otherwise this also hits the counter span above */
.stat > span { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   10b. Homepage about — image collage + advantages
   -------------------------------------------------------------------------- */
.about-section { position: relative; overflow: hidden; }

/* Faint diamond lattice in the top-right corner */
.about-pattern {
  position: absolute; top: 0; right: 0;
  width: 330px; height: 250px; pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, rgba(13, 15, 18, .08) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(-45deg, rgba(13, 15, 18, .08) 0 1px, transparent 1px 48px);
  -webkit-mask-image: linear-gradient(215deg, #000, transparent 70%);
  mask-image: linear-gradient(215deg, #000, transparent 70%);
}

.about-layout {
  display: grid; grid-template-columns: 1.02fr 1fr;
  gap: 70px; align-items: center;
}

.about-collage { display: grid; grid-template-columns: 1fr 1.04fr; gap: 20px; align-items: center; }
.about-collage__col { display: grid; gap: 20px; }
.about-collage img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.about-collage__col img { aspect-ratio: 1 / .87; }
.about-collage__tall img { aspect-ratio: 1 / 1.74; }

/* "— About Us" reads as plain dark text, not the gold spaced eyebrow */
.eyebrow.is-plain {
  color: var(--heading); font-size: .96rem;
  letter-spacing: .02em; text-transform: none;
}
.eyebrow.is-plain::before { width: 26px; opacity: 1; }

.about-content h2 {
  font-size: clamp(2.1rem, 3.6vw, 3.05rem);
  line-height: 1.14; margin-bottom: 22px;
}
.about-content h2 em { font-style: italic; }
.about-content > p { max-width: 490px; }

.advantages {
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
  border-left: 1px solid rgba(13, 15, 18, .16);
  padding: 4px 0 4px 30px;
  margin: 34px 0 38px;
}
.advantages__body { flex: 1; min-width: 250px; }
.advantages h3 { font-style: italic; font-size: 1.5rem; margin-bottom: 18px; }

.adv-list { display: grid; gap: 13px; }
.adv-list li { display: flex; gap: 13px; color: var(--heading); font-size: .99rem; }
.adv-list li::before { content: "\25C6"; color: var(--gold); font-size: .6rem; line-height: 2.6; }

/* Rotating "welcome" seal */
.seal { position: relative; width: 124px; height: 124px; flex-shrink: 0; }
.seal svg { width: 100%; height: 100%; animation: seal-spin 20s linear infinite; }
.seal text {
  font-family: var(--ff-body); font-size: 8.4px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; fill: var(--heading);
}
.seal__mark {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--gold); font-size: 1.55rem;
}
@keyframes seal-spin { to { transform: rotate(360deg); } }

/* Pill CTA with the icon puck on the right */
.btn-pill { padding: 8px 10px 8px 32px; gap: 18px; }
.btn__icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  background: #fff; color: var(--gold-dark);
  font-size: .9rem; transition: transform var(--t);
}
.btn-pill:hover .btn__icon { transform: rotate(-28deg); }

.about-foot { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.signature { display: flex; align-items: center; gap: 18px; }
.signature svg { width: 82px; height: 40px; color: var(--heading); flex-shrink: 0; }
.signature strong { display: block; font-family: var(--ff-head); font-size: 1.06rem; color: var(--heading); }
.signature span { font-size: .93rem; }

@media (max-width: 1199px) {
  .about-layout { gap: 44px; }
  .advantages { gap: 22px; padding-left: 24px; }
}
@media (max-width: 991px) {
  .about-layout { grid-template-columns: 1fr; gap: 50px; }
  .about-pattern { display: none; }
}
@media (max-width: 767px) {
  .about-collage { grid-template-columns: 1fr; }
  .about-collage__col { grid-template-columns: 1fr 1fr; }
  .about-collage__col img { aspect-ratio: 1 / 1; }
  .about-collage__tall img { aspect-ratio: 4 / 3; }
  .advantages { border-left: 0; padding-left: 0; margin: 28px 0 32px; }
  .about-foot { gap: 26px; }
}

/* --------------------------------------------------------------------------
   10c. Hotel facilities — overlapping outlined circles
   -------------------------------------------------------------------------- */
.facilities { position: relative; overflow: hidden; }

/* Faint architectural wash in the bottom-left corner */
.facilities__wash {
  position: absolute; left: 0; bottom: 0;
  width: 300px; height: 340px; pointer-events: none;
  background: url('https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=600&q=80') left bottom / cover no-repeat;
  opacity: .08;
  -webkit-mask-image: linear-gradient(60deg, #000, transparent 68%);
  mask-image: linear-gradient(60deg, #000, transparent 68%);
}

.facilities__head { max-width: 810px; margin-bottom: 44px; }
.facilities__head h2 {
  font-size: clamp(1.9rem, 4vw, 3.25rem);
  line-height: 1.16; margin-bottom: 0;
}
.facilities__head h2 em { font-style: italic; }

.facility-row { display: flex; justify-content: center; position: relative; }

.facility {
  border: 1px solid #e8e8e8;
  border-radius: 50%;
  /* flex column instead of inline-block, so the content centres in the circle */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 50px 45px;
  position: relative;
  text-align: center;
  height: 330px;
  max-width: 329px;
  width: 100%;
  transition: all 400ms ease;
  /* Row is a flex container — without this the circles squash into ellipses */
  flex: 0 0 auto;
}
/* Pull the circles together so their outlines just touch, as in the reference */
.facility + .facility { margin-left: -6px; }
.facility:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow);
  transform: translateY(-6px);
  z-index: 2;
}

.facility__icon { color: var(--heading); margin-bottom: 18px; transition: color var(--t); }
.facility__icon svg { width: clamp(38px, 3.4vw, 48px); height: auto; display: block; }
.facility:hover .facility__icon { color: var(--gold); }

.facility h3 {
  font-family: var(--ff-body); font-weight: 400;
  font-size: clamp(.98rem, 1.25vw, 1.2rem);
  line-height: 1.35; margin-bottom: 12px;
}
.facility p {
  font-size: clamp(.82rem, .95vw, .95rem);
  line-height: 1.7; margin: 0;
}

/* Four 329px circles need ~1298px of row; scale them down before that runs out */
@media (max-width: 1360px) {
  .facility { height: 272px; max-width: 272px; padding: 24px 34px 32px; }
}
@media (max-width: 991px) {
  .facilities__wash { display: none; }
  .facility-row { flex-wrap: wrap; gap: 26px; max-width: 640px; margin-inline: auto; }
  .facility + .facility { margin-left: 0; }
  .facility { height: 290px; max-width: 290px; padding: 28px 38px 34px; }
}
@media (max-width: 767px) {
  .facility-row { max-width: 320px; }
  .facility { height: 300px; max-width: 300px; padding: 30px 44px 36px; }
  .facility h3 { font-size: 1.15rem; }
  .facility p { font-size: .92rem; }
}

/* --------------------------------------------------------------------------
   11. Cards — services / amenities
   -------------------------------------------------------------------------- */
.card {
  background: #fff; border-radius: var(--radius);
  border: 1px solid var(--line-dark);
  padding: 38px 30px; transition: var(--t);
  height: 100%;
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: transparent; }
.card__icon {
  width: 66px; height: 66px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(200, 162, 74, .12);
  color: var(--gold); font-size: 1.5rem;
  margin-bottom: 22px; transition: var(--t);
}
.card:hover .card__icon { background: var(--gold); color: #fff; }
.card h3 { font-size: 1.28rem; }
.card p { font-size: .95rem; }
.card__link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: .76rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}
.card__link:hover { gap: 14px; }

.service-tile {
  position: relative; border-radius: var(--radius);
  overflow: hidden; height: 340px; display: flex;
  align-items: flex-end; color: #fff;
}
.service-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.service-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(13, 15, 18, .88));
}
.service-tile:hover img { transform: scale(1.09); }
.service-tile__body { position: relative; z-index: 2; padding: 30px; }
.service-tile h3 { color: #fff; margin-bottom: 6px; }
.service-tile p { font-size: .9rem; color: rgba(255, 255, 255, .78); }

/* --------------------------------------------------------------------------
   11b. "Book Your Room Stay" — centred peek carousel with overlaid card
   -------------------------------------------------------------------------- */
.stays { background: #f4f4f3; position: relative; overflow: hidden; }

/* Dotted grid in the top-left corner */
.stays__pattern {
  position: absolute; left: 0; top: 0;
  width: 340px; height: 230px; pointer-events: none;
  background-image: radial-gradient(rgba(13, 15, 18, .16) 1px, transparent 1px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 72%);
  mask-image: linear-gradient(135deg, #000, transparent 72%);
}

/* Header sits left, arrows to its right */
.stays__head {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; flex-wrap: wrap; margin-bottom: 46px;
}
.stays__head h2 {
  margin-bottom: 0; max-width: 12ch;
  font-size: clamp(1.9rem, 3.9vw, 3.1rem); line-height: 1.16;
}
.stays__head h2 em { font-style: italic; }

.stays__nav { display: flex; gap: 12px; }
.stays__nav button {
  width: 56px; height: 56px; border-radius: 6px;
  background: #fff; border: 1px solid #e8e8e8;
  color: var(--heading); display: grid; place-items: center;
  font-size: 1.02rem; transition: all 400ms ease;
}
.stays__nav button:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

/* Native horizontal scroll; the nearest slide snaps to the centre.
   The side padding is what lets the first and last slides reach the middle. */
.stay-slider { --slide-w: min(1200px, 62.5vw); }
.stay-track {
  /* positioned so slide offsetLeft is measured against the track, which the
     looping maths in main.js relies on */
  position: relative;
  display: flex; gap: 30px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-inline: max(16px, calc((100% - var(--slide-w)) / 2));
  scrollbar-width: none; -ms-overflow-style: none;
}
.stay-track::-webkit-scrollbar { display: none; }

.stay-slide {
  position: relative;
  flex: 0 0 var(--slide-w);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.stay-slide__media { display: block; overflow: hidden; }
.stay-slide__media img {
  width: 100%; aspect-ratio: 2.31 / 1; object-fit: cover;
  transition: transform .8s ease;
}
.stay-slide:hover .stay-slide__media img { transform: scale(1.04); }

/* White card overlays the image's bottom-right */
.stay-slide__card {
  position: absolute; right: 4.4%; bottom: 14%;
  width: min(41%, 500px);
  background: #fff; padding: 26px 28px 28px;
}
.stay-slide__price {
  position: absolute; left: 0; bottom: 100%;
  background: var(--gold-dark); color: #fff;
  padding: 4px 13px; font-size: .82rem;
  border-radius: 2px 2px 0 0;
}
.stay-slide__sub { display: block; font-size: .94rem; color: var(--body); }
.stay-slide h3 { font-size: clamp(1.3rem, 1.5vw, 1.78rem); margin: 6px 0 10px; }
.stay-slide h3 a:hover { color: var(--gold); }
.stay-slide__card > p { font-size: .93rem; margin-bottom: 18px; }

/* Meta items carry a thin circular icon puck */
.stay-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 22px; font-size: .88rem; }
.stay-meta li { display: flex; align-items: center; gap: 9px; }
.stay-meta i {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid #e6e6e6; display: grid; place-items: center;
  color: var(--heading); font-size: .66rem; flex-shrink: 0;
  transition: all 400ms ease;
}
.stay-slide:hover .stay-meta i { border-color: var(--gold); color: var(--gold); }
.stay-slide .btn-pill { padding: 6px 6px 6px 24px; font-size: .8rem; }
.stay-slide .btn__icon { width: 34px; height: 34px; font-size: .78rem; }

@media (prefers-reduced-motion: reduce) { .stay-track { scroll-behavior: auto; } }

@media (max-width: 1199px) {
  .stay-slider { --slide-w: 74vw; }
  .stay-slide__card { padding: 22px 22px 24px; bottom: 9%; width: min(46%, 460px); }
  .stay-meta { gap: 8px 16px; font-size: .82rem; }
}

/* Below tablet the card drops beneath the image instead of overlaying it */
@media (max-width: 991px) {
  .stay-slider { --slide-w: 84vw; }
  .stay-track { gap: 20px; }
  .stay-slide__media img { aspect-ratio: 16 / 10; }
  .stay-slide__card {
    position: static; width: auto;
    margin: 22px 0 0; padding: 26px 24px 28px;
    border: 1px solid #e8e8e8;
  }
  .stay-slide__price { position: static; display: inline-block; margin-bottom: 12px; border-radius: 3px; }
  .stays__nav button { width: 48px; height: 48px; }
}
@media (max-width: 767px) {
  .stay-slider { --slide-w: 88vw; }
  .stays__head { margin-bottom: 32px; }
  .stays__head h2 { max-width: none; }
}

/* --------------------------------------------------------------------------
   12. Room cards
   -------------------------------------------------------------------------- */
.room-card {
  background: #fff; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--line-dark);
  transition: var(--t); height: 100%;
  display: flex; flex-direction: column;
}
.room-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.room-card__media { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.room-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.room-card:hover .room-card__media img { transform: scale(1.08); }
.room-card__price {
  position: absolute; left: 18px; bottom: 18px;
  background: var(--gold); color: #fff;
  padding: 8px 18px; border-radius: 50px;
  font-size: .86rem; font-weight: 500;
}
.room-card__price span { font-size: .72rem; opacity: .85; }
.room-card__tag {
  position: absolute; right: 18px; top: 18px;
  background: rgba(13, 15, 18, .78); color: #fff;
  padding: 6px 14px; border-radius: 50px;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
}
.room-card__body { padding: 28px; display: flex; flex-direction: column; flex: 1; }
.room-card h3 { font-size: 1.35rem; margin-bottom: 8px; }
.room-card h3 a:hover { color: var(--gold); }
.room-meta {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  padding: 16px 0; margin: 16px 0;
  border-block: 1px solid var(--line-dark);
  font-size: .84rem;
}
.room-meta li { display: flex; align-items: center; gap: 7px; }
.room-meta i { color: var(--gold); }
.room-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; }
.stars { color: var(--gold); font-size: .82rem; letter-spacing: 2px; }

/* Filter bar */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 46px; }
.filter-bar button {
  padding: 10px 24px; border-radius: 50px;
  border: 1px solid var(--line-dark);
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--heading); transition: var(--t);
}
.filter-bar button:hover, .filter-bar button.is-active {
  background: var(--gold); border-color: var(--gold); color: #fff;
}

/* --------------------------------------------------------------------------
   12b. Why choose us — cards, circles and numbered steps
   -------------------------------------------------------------------------- */
/* bg5.jpg already carries the dot clusters and diagonals, so no CSS pattern
   here. cover keeps the image's own aspect ratio (no stretching); anchored to
   the top so the top-left dot cluster stays in frame when it crops. */
.why {
  position: relative; overflow: hidden;
  background: #f4f4f7 url('../image/bg5.jpg') center top / cover no-repeat;
}
.why__building {
  position: absolute; right: 0; bottom: 0;
  width: min(390px, 32vw); aspect-ratio: 447 / 410;
  pointer-events: none;
  background: url('../image/Building.png') right bottom / contain no-repeat;
}

.why__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}
.why__intro { align-self: start; padding: 6px 20px 0 0; }
.why__intro h2 {
  margin-bottom: 0;
  font-size: clamp(1.8rem, 2.7vw, 2.55rem); line-height: 1.2;
}
.why__intro h2 em { font-style: italic; }

.why-card {
  align-self: start;
  background: #fff; border-radius: 14px;
  padding: 34px 36px 36px;
  transition: all 400ms ease;
}
.why-card:hover { box-shadow: var(--shadow); transform: translateY(-6px); }
.why-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.why-card__icon { color: var(--gold-dark); }
.why-card__icon svg { width: 52px; height: 52px; display: block; }
.why-card__num { font-size: .88rem; color: #a9adb5; }
.why-card h3 { font-size: 1.32rem; margin: 24px 0 12px; }
/* Cards are wide in a two-column grid — cap the measure so lines stay readable */
.why-card p { font-size: .95rem; margin-bottom: 18px; max-width: 46ch; }
.why-card__link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .93rem; color: var(--heading);
  text-decoration: underline; text-underline-offset: 5px;
}
.why-card__link i { color: var(--gold-dark); transition: transform var(--t); }
.why-card__link:hover { color: var(--gold-dark); }
.why-card__link:hover i { transform: translateX(5px); }

@media (max-width: 991px) {
  .why__building { display: none; }
  .why__grid { gap: 20px; }
  .why-card { padding: 28px 26px 30px; }
  .why__intro { padding-right: 0; }
}
@media (max-width: 767px) {
  .why__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   12c. Video band — framed image with a centred play control
   -------------------------------------------------------------------------- */
/* The frame hangs down into the section below, so overflow must stay visible
   and z-index lifts it above that section's background. */
.video-band {
  position: relative;
  z-index: 3;
  background: #fff;
  padding-top: 85px;
  padding-bottom: 6px;
}
.video-band__frame { margin-bottom: calc(var(--video-overlap) * -1); }
/* Pair with .is-overlapped on the next section so its content clears the frame */
.section.is-overlapped { padding-top: calc(clamp(64px, 8vw, 118px) + var(--video-overlap)); }
.video-band__dots {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 250px; height: 300px; pointer-events: none;
  background-image: radial-gradient(rgba(13, 15, 18, .16) 1px, transparent 1px);
  background-size: 15px 15px;
}
.video-band__dots--l {
  left: 0;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 78%);
  mask-image: linear-gradient(90deg, #000, transparent 78%);
}
.video-band__dots--r {
  right: 0;
  -webkit-mask-image: linear-gradient(270deg, #000, transparent 78%);
  mask-image: linear-gradient(270deg, #000, transparent 78%);
}

.video-band__frame { position: relative; border-radius: 6px; overflow: hidden; }
.video-band__frame img { width: 100%; aspect-ratio: 2.54 / 1; object-fit: cover; }
.video-band__frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(13, 15, 18, .58));
}
.video-band__body {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 34px;
  padding: 20px;
}
.video-band__play {
  width: 84px; height: 84px; border-radius: 50%;
  background: #fff; color: var(--ink);
  display: grid; place-items: center; font-size: 1.25rem;
  padding-left: 5px; transition: var(--t);
}
.video-band__play:hover { transform: scale(1.08); background: var(--gold); color: #fff; }
.video-band h2 {
  color: #fff; text-align: center; font-style: italic;
  margin-bottom: 0; font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: 1.28;
}

@media (max-width: 991px) {
  .video-band__dots { display: none; }
  .video-band__frame img { aspect-ratio: 16 / 10; }
  .video-band__body { gap: 24px; }
  .video-band__play { width: 66px; height: 66px; font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   13. Video / CTA parallax
   -------------------------------------------------------------------------- */
.parallax {
  position: relative; background-size: cover;
  background-position: center; background-attachment: fixed;
  color: #fff; text-align: center;
}
.parallax::before { content: ""; position: absolute; inset: 0; background: rgba(13, 15, 18, .72); }
.parallax .container { position: relative; z-index: 2; }
.parallax h2 { color: #fff; }
.parallax p { color: rgba(255, 255, 255, .78); }


/* --------------------------------------------------------------------------
   14. Testimonials
   -------------------------------------------------------------------------- */
.testimonial {
  background: #fff; border-radius: var(--radius);
  padding: 38px 34px; border: 1px solid var(--line-dark);
  height: 100%; position: relative;
}
.testimonial::before {
  content: "\201C"; position: absolute; right: 26px; top: 6px;
  font-family: var(--ff-head); font-size: 5.5rem;
  color: rgba(200, 162, 74, .18); line-height: 1;
}
.testimonial p { font-size: 1rem; font-style: italic; color: var(--heading); }
.testimonial__author { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.testimonial__author img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.testimonial__author strong { display: block; font-family: var(--ff-head); color: var(--heading); font-size: 1.05rem; }
.testimonial__author span { font-size: .82rem; color: var(--gold); }

.slider { position: relative; }
.slider__track { display: flex; transition: transform .55s cubic-bezier(.4, 0, .2, 1); }
.slider__slide { flex: 0 0 100%; padding-inline: 15px; }
.slider__nav { display: flex; justify-content: center; gap: 12px; margin-top: 40px; }
.slider__nav button {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line-dark); color: var(--heading);
  display: grid; place-items: center; transition: var(--t);
}
.slider__nav button:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

/* --------------------------------------------------------------------------
   15. Accordion (FAQ)
   -------------------------------------------------------------------------- */
.accordion { display: grid; gap: 16px; }
.acc-item {
  background: #fff; border: 1px solid var(--line-dark);
  border-radius: var(--radius); overflow: hidden;
  transition: var(--t);
}
.acc-item.is-open { border-color: var(--gold); box-shadow: var(--shadow); }
.acc-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 22px 26px; text-align: left;
  font-family: var(--ff-head); font-size: 1.08rem; color: var(--heading);
}
.acc-head i { color: var(--gold); transition: transform var(--t); flex-shrink: 0; }
.acc-item.is-open .acc-head i { transform: rotate(45deg); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.acc-body > div { padding: 0 26px 24px; font-size: .96rem; }

/* --------------------------------------------------------------------------
   16. Gallery
   -------------------------------------------------------------------------- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gallery-item {
  position: relative; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 1; cursor: pointer;
}
.gallery-item.is-tall { grid-row: span 2; aspect-ratio: 1/2.06; }
.gallery-item.is-wide { grid-column: span 2; aspect-ratio: 2.06/1; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.gallery-item::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(13, 15, 18, .55); opacity: 0; transition: var(--t);
}
.gallery-item span {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  color: #fff; font-size: 1.5rem;
  opacity: 0; transform: scale(.7); transition: var(--t);
}
.gallery-item:hover img { transform: scale(1.09); }
.gallery-item:hover::after { opacity: 1; }
.gallery-item:hover span { opacity: 1; transform: scale(1); }

.lightbox {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(13, 15, 18, .94);
  display: none; place-items: center; padding: 30px;
}
.lightbox.is-open { display: grid; }
.lightbox img { max-width: min(1100px, 92vw); max-height: 86vh; border-radius: 8px; }
.lightbox__close {
  position: absolute; top: 26px; right: 30px;
  color: #fff; font-size: 1.6rem; padding: 10px;
}
.lightbox__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff;
  display: grid; place-items: center; transition: var(--t);
}
.lightbox__arrow:hover { background: var(--gold); }
.lightbox__prev { left: 26px; }
.lightbox__next { right: 26px; }

/* --------------------------------------------------------------------------
   17. Team
   -------------------------------------------------------------------------- */
.team-card { text-align: center; }
.team-card__media {
  position: relative; overflow: hidden;
  border-radius: var(--radius); aspect-ratio: 3/3.6; margin-bottom: 20px;
}
.team-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.team-card:hover .team-card__media img { transform: scale(1.07); }
.team-social {
  position: absolute; left: 50%; bottom: 20px;
  transform: translate(-50%, 22px);
  display: flex; gap: 10px; opacity: 0; transition: var(--t);
}
.team-card:hover .team-social { opacity: 1; transform: translate(-50%, 0); }
.team-social a {
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; color: var(--heading);
  display: grid; place-items: center; font-size: .85rem;
}
.team-social a:hover { background: var(--gold); color: #fff; }
.team-card h4 { margin-bottom: 2px; font-family: var(--ff-head); font-size: 1.2rem; }
.team-card span { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }

/* --------------------------------------------------------------------------
   18. Blog
   -------------------------------------------------------------------------- */
/* Article cards use .journal-card (section 18b) everywhere now. .post-meta is
   kept — the blog-details article header still uses it. */
.post-meta { display: flex; gap: 18px; font-size: .8rem; margin-bottom: 12px; flex-wrap: wrap; }
.post-meta i { color: var(--gold); margin-right: 6px; }

.post-body h2, .post-body h3 { margin-top: 34px; }
.post-body img { border-radius: var(--radius); margin: 28px 0; }
.blockquote {
  border-left: 3px solid var(--gold);
  background: var(--cream); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 28px 32px; margin: 30px 0;
  font-family: var(--ff-head); font-size: 1.18rem;
  font-style: italic; color: var(--heading);
}
.tag-list { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-list a {
  padding: 7px 18px; border-radius: 50px;
  border: 1px solid var(--line-dark); font-size: .78rem;
}
.tag-list a:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

.sidebar { display: grid; gap: 30px; align-content: start; }
.widget {
  background: var(--cream); border-radius: var(--radius); padding: 30px;
}
.widget h4 {
  font-family: var(--ff-head); font-size: 1.2rem; margin-bottom: 20px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line-dark);
}
.widget-search { display: flex; gap: 8px; }
.widget-search input {
  flex: 1; padding: 12px 16px; border-radius: 10px;
  border: 1px solid var(--line-dark); background: #fff;
}
.widget-search button {
  width: 48px; border-radius: 10px; background: var(--gold); color: #fff;
}
.widget-list li + li { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-dark); }
.widget-list a { display: flex; justify-content: space-between; gap: 12px; font-size: .93rem; }
.widget-list a:hover { color: var(--gold); }
.mini-post { display: flex; gap: 14px; }
.mini-post + .mini-post { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-dark); }
.mini-post img { width: 78px; height: 72px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.mini-post h5 { font-size: .95rem; margin-bottom: 3px; line-height: 1.4; }
.mini-post h5 a:hover { color: var(--gold); }
.mini-post span { font-size: .78rem; }

.pagination { display: flex; justify-content: center; gap: 10px; margin-top: 54px; }
.pagination a, .pagination span {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-dark); font-size: .92rem;
  transition: var(--t);
}
.pagination a:hover, .pagination .is-active { background: var(--gold); border-color: var(--gold); color: #fff; }

/* --------------------------------------------------------------------------
   18b. Journal — image with an offset white card overlapping bottom-right
   -------------------------------------------------------------------------- */
.journal { background: #fff; }
.journal__head { max-width: 720px; margin-bottom: 54px; }
.journal__head h2 { margin-bottom: 0; font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.journal__head h2 em { font-style: italic; }

.journal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px; }
/* Single-column run of cards, used on the blog listing page */
.journal-list { display: grid; gap: 56px; }

/* The card is its own query container, so the same component adapts to the
   column it lands in — wide on the homepage, narrow beside a sidebar. */
.journal-card { position: relative; container-type: inline-size; }

.journal-card__media {
  display: block; width: 100%;
  border-radius: 14px; overflow: hidden;
}
.journal-card__media img {
  width: 100%; aspect-ratio: 730 / 502; object-fit: cover;
  transition: transform .8s ease;
}
.journal-card:hover .journal-card__media img { transform: scale(1.05); }

/* cqw keeps the padding proportional to the card, not the viewport */
.journal-card__body {
  position: relative;
  width: 100%; margin: -40px 0 0 auto;
  background: #fff; border-radius: 14px;
  box-shadow: 0 18px 50px rgba(13, 15, 18, .13);
  padding: clamp(22px, 4.2cqw, 34px) clamp(22px, 5.2cqw, 42px) clamp(24px, 4.5cqw, 36px);
  transition: box-shadow 400ms ease;
}

/* Only offset the card once there is room for it to stay readable.
   Percentage margins resolve against the card width, so the composition
   holds its proportions at every size. */
@container (min-width: 520px) {
  .journal-card__media { width: 89%; }
  .journal-card__body { width: 64.3%; margin-top: -27.4%; }
}
.journal-card:hover .journal-card__body { box-shadow: 0 26px 60px rgba(13, 15, 18, .18); }

.journal-card__meta {
  display: flex; align-items: center; gap: 14px;
  font-size: .95rem; color: var(--heading);
}
.journal-card__meta span + span::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; margin-right: 14px;
  background: var(--heading); vertical-align: middle;
}
.journal-card h3 {
  font-family: var(--ff-body); font-weight: 600;
  font-size: clamp(1.05rem, 3cqw, 1.5rem);
  line-height: 1.34; margin: 14px 0 clamp(18px, 3.6cqw, 30px);
}
.journal-card h3 a:hover { color: var(--gold); }
.journal-card__link {
  display: block;
  border-top: 1px solid rgba(13, 15, 18, .14);
  padding-top: clamp(18px, 1.8vw, 24px);
  font-size: 1rem; color: var(--heading);
}
.journal-card__link:hover { color: var(--gold); }

.journal__foot { margin-top: 56px; }

@media (max-width: 991px) {
  .journal-grid { grid-template-columns: 1fr; gap: 50px; }
  .journal-list { gap: 44px; }
}
@media (max-width: 767px) {
  .journal__foot { margin-top: 40px; }
}

/* --------------------------------------------------------------------------
   19. Room details
   -------------------------------------------------------------------------- */
.detail-gallery { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); }
.detail-gallery > :first-child { grid-column: span 4; aspect-ratio: 16/8; }
.detail-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); aspect-ratio: 4/3; }

.spec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 30px 0; }
.spec {
  background: var(--cream); border-radius: var(--radius);
  padding: 22px; text-align: center;
}
.spec i { color: var(--gold); font-size: 1.3rem; display: block; margin-bottom: 10px; }
.spec strong { display: block; font-family: var(--ff-head); color: var(--heading); }
.spec span { font-size: .8rem; }

.amenity-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.amenity-list li { display: flex; align-items: center; gap: 10px; font-size: .94rem; }
.amenity-list i { color: var(--gold); }

/* Sticky sidebar column, for asides holding more than one block.
   align-self:start keeps the grid item at content height so it can travel
   inside the taller row beside it. */
.sticky-col {
  position: sticky; top: calc(var(--header-h) + 20px);
  align-self: start;
}
/* The column does the sticking, so its widget shouldn't also try */
.sticky-col .booking-widget { position: static; top: auto; }

.booking-widget {
  position: sticky; top: calc(var(--header-h) + 20px);
  background: #fff; border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg); padding: 30px;
  box-shadow: var(--shadow);
}
.price-head {
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 20px; margin-bottom: 22px;
  border-bottom: 1px solid var(--line-dark);
}
.price-head strong { font-family: var(--ff-head); font-size: 2.2rem; color: var(--gold); }
.summary-list { margin: 22px 0; font-size: .93rem; }
.summary-list li { display: flex; justify-content: space-between; padding: 8px 0; }
.summary-list li.is-total {
  border-top: 1px solid var(--line-dark); margin-top: 8px; padding-top: 14px;
  font-family: var(--ff-head); font-size: 1.15rem; color: var(--heading);
}

/* --------------------------------------------------------------------------
   20. Pricing / menu
   -------------------------------------------------------------------------- */
.price-card {
  background: #fff; border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg); padding: 44px 34px;
  text-align: center; transition: var(--t); height: 100%;
}
.price-card:hover, .price-card.is-featured { border-color: var(--gold); box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.price-card .amount {
  font-family: var(--ff-head); font-size: 3rem;
  color: var(--gold); line-height: 1; display: block; margin: 14px 0 6px;
}
.price-card ul { display: grid; gap: 11px; margin: 26px 0 32px; font-size: .94rem; }
.price-card ul i { color: var(--gold); margin-right: 8px; }

.menu-item { display: flex; gap: 18px; align-items: center; }
.menu-item img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.menu-item__info { flex: 1; }
.menu-item__top { display: flex; align-items: baseline; gap: 12px; }
.menu-item__top h4 { margin-bottom: 4px; font-size: 1.1rem; }
.menu-item__dots { flex: 1; border-bottom: 1px dashed rgba(13, 15, 18, .2); }
.menu-item__price { color: var(--gold); font-family: var(--ff-head); font-size: 1.2rem; }
.menu-item p { font-size: .88rem; }

/* --------------------------------------------------------------------------
   21. Contact
   -------------------------------------------------------------------------- */
.contact-card {
  background: #fff; border: 1px solid var(--line-dark);
  border-radius: var(--radius); padding: 34px 28px; text-align: center;
  transition: var(--t); height: 100%;
}
.contact-card:hover { box-shadow: var(--shadow); transform: translateY(-6px); border-color: transparent; }
.contact-card i {
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(200, 162, 74, .12); color: var(--gold);
  display: grid; place-items: center; font-size: 1.3rem; margin: 0 auto 18px;
}
.map-frame { border-radius: var(--radius-lg); overflow: hidden; line-height: 0; box-shadow: var(--shadow); }
.map-frame iframe { width: 100%; height: 460px; border: 0; }

/* --------------------------------------------------------------------------
   22. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, .62); }
.footer-top { padding: clamp(56px, 7vw, 92px) 0 60px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 44px; }
.site-footer h4 {
  color: #fff; font-family: var(--ff-head); font-size: 1.2rem;
  margin-bottom: 24px; position: relative; padding-bottom: 14px;
}
.site-footer h4::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 44px; height: 2px; background: var(--gold);
}
.site-footer .brand__name { color: #fff; }
.footer-links li + li { margin-top: 11px; }
.footer-links a { font-size: .94rem; }
.footer-links a:hover { color: var(--gold); padding-left: 6px; }
.footer-contact li { display: flex; gap: 12px; margin-bottom: 14px; font-size: .94rem; }
.footer-contact i { color: var(--gold); margin-top: 6px; }
.social-row { display: flex; gap: 12px; margin-top: 24px; }
.social-row a {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-items: center;
  color: rgba(255, 255, 255, .8); transition: var(--t);
}
.social-row a:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.newsletter { display: flex; gap: 10px; margin-top: 8px; }
.newsletter input {
  flex: 1; min-width: 0; padding: 13px 18px; border-radius: 50px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--line); color: #fff;
}
.newsletter input::placeholder { color: rgba(255, 255, 255, .4); }
/* This input sits inside a .field, and `.field input:focus` (0,2,1) turns the
   background white — beating `.newsletter input`'s white text. Without a dark
   colour here you type white on white. */
.newsletter input:focus {
  outline: none; border-color: var(--gold);
  background: #fff; color: var(--heading);
}
.newsletter input:focus::placeholder { color: #a3a9b3; }
.newsletter button {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--gold); color: #fff; flex-shrink: 0;
}
.newsletter button:hover { background: var(--gold-dark); }
.footer-bottom {
  border-top: 1px solid var(--line); padding: 24px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; font-size: .88rem;
}
.footer-bottom a:hover { color: var(--gold); }

.to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 800;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--gold); color: #fff; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(14px); transition: var(--t);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--gold-dark); }

/* --------------------------------------------------------------------------
   23. Error page
   -------------------------------------------------------------------------- */
.error-code {
  font-family: var(--ff-head); font-weight: 700;
  font-size: clamp(6rem, 20vw, 15rem); line-height: 1;
  color: var(--gold); margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   24. Scroll reveal
   -------------------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].is-revealed { opacity: 1; transform: none; }

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

/* --------------------------------------------------------------------------
   25. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .nav__link { padding: 12px 11px; font-size: .78rem; }
  /* Two columns, with the brand block and newsletter spanning the full width
     so Quick Links and Support stay paired on their own row. */
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .footer-grid > :first-child,
  .footer-grid > :last-child { grid-column: 1 / -1; }
  /* Small overhang only — a bigger one would push past the container padding
     and give the page a horizontal scrollbar */
  .about-media__sub { right: -3%; }
  .exp-badge { left: -3%; }
}

@media (max-width: 991px) {
  :root { --header-h: 76px; }
  .nav, .header__actions .btn, .header__divider { display: none; }
  .nav-toggle { display: grid; }
  .brand__name { font-size: 1.55rem; }

  /* The stat card moves out of the hero and sits below it */
  .hero__stat {
    position: static; max-width: none;
    margin: 0 auto; width: min(var(--container), 100%);
    box-shadow: var(--shadow);
  }
  .hero__stat-card { max-width: none; flex: 1; }
  .hero__stat img { width: 34%; }
  .booking-grid { grid-template-columns: repeat(2, 1fr); }
  .booking-grid > .btn-wrap { grid-column: span 2; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item.is-wide { grid-column: span 2; }
  .spec-grid { grid-template-columns: repeat(2, 1fr); }
  .amenity-list { grid-template-columns: repeat(2, 1fr); }
  .hero__dots { right: 20px; }
  .parallax { background-attachment: scroll; }
  .booking-widget, .sticky-col { position: static; }
  /* Sidebar layouts declared inline on room-details / blog / booking / contact */
  #detail-layout, #blog-layout { grid-template-columns: 1fr !important; }
  .detail-gallery { grid-template-columns: repeat(2, 1fr); }
  .detail-gallery > :first-child { grid-column: span 2; }
  .topbar__inner { justify-content: center; }
}

@media (max-width: 767px) {
  body { font-size: 15px; }
  .grid, .row { gap: 24px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .booking-bar { margin-top: -30px; }
  .booking-card { padding: 22px; }
  .booking-grid { grid-template-columns: 1fr; }
  .booking-grid > .btn-wrap { grid-column: span 1; }
  /* Stays full screen on phones, just with a smaller floor */
  .hero { min-height: 460px; }
  .hero__panel { width: 100%; }
  /* Dots stay absolute — the hero clips overflow, so they cannot go in flow */
  .hero__dots {
    top: auto; bottom: 22px; left: 50%; right: auto;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px;
  }
  .hero__scroll { display: none; }
  /* Card on top, image beneath it (DOM order — no reordering) */
  .hero__stat { flex-direction: column; }
  .hero__stat img { width: 100%; height: 190px; }
  /* Stays two-up — Quick Links and Support remain side by side on phones */
  .footer-grid { gap: 32px 24px; }
  .footer-bottom { justify-content: center; text-align: center; }
  .spec-grid, .amenity-list, .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item.is-wide, .gallery-item.is-tall { grid-column: auto; grid-row: auto; aspect-ratio: 4/3; }
  .detail-gallery, .detail-gallery > :first-child { grid-template-columns: 1fr; grid-column: auto; }
  .topbar { display: none; }
  .menu-item { flex-direction: column; text-align: center; }
  .menu-item__top { flex-direction: column; gap: 4px; }
  .menu-item__dots { display: none; }
  .lightbox__arrow { width: 42px; height: 42px; }
  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
}