@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

:root {
  --c-ink: #f6f8fc;
  --c-ink-dim: #b6bfd2;
  --c-bg: #07090f;
  --c-bg-2: #0d111b;
  --c-surface: #141a28;
  --c-surface-2: #1b2233;
  --c-line: rgba(255, 255, 255, 0.09);
  --c-gold: #d8b25c;
  --c-gold-2: #f3d98f;
  --c-gold-deep: #97762a;
  --c-green: #43d69f;
  --c-red: #ff6a7d;
  --c-focus: #84ccff;
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 9px;
  --shadow-lg: 0 32px 72px rgba(0, 0, 0, 0.58);
  --shadow-md: 0 18px 44px rgba(0, 0, 0, 0.42);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --wrap: 1200px;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.nav-open {
  overflow: hidden;
}

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

a {
  color: var(--c-gold-2);
  text-decoration: none;
  transition: color 0.22s var(--ease);
}

a:hover {
  color: #fff;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  color: #fff;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.3rem, 5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.1vw, 1.75rem); }

p { margin: 0 0 1.1rem; }

.section {
  position: relative;
  padding: 96px 0;
}

.section--tight { padding: 68px 0; }
.section--soft { background-color: var(--c-bg-2); }
.section--surface { background-color: var(--c-surface); }

.section__head {
  max-width: 780px;
  margin: 0 auto 56px;
  text-align: center;
}

.section__head--left {
  margin-left: 0;
  text-align: left;
}

.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold-2);
  margin-bottom: 16px;
}

.section__eyebrow::before {
  content: "";
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold));
}

.section__lead {
  color: var(--c-ink-dim);
  font-size: 1.06rem;
  margin: 0;
}

.photo-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.gold-text {
  color: var(--c-gold-2);
}

.hairline {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-line), transparent);
  margin: 0;
}

.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--c-gold-2), var(--c-gold));
  color: #17110a;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  padding: 0.86rem 2rem;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(216, 178, 92, 0.24);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), filter 0.25s var(--ease);
}

.btn-gold:hover,
.btn-gold:focus {
  color: #17110a;
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 18px 40px rgba(216, 178, 92, 0.34);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  color: var(--c-ink);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.82rem 1.9rem;
  border: 1px solid rgba(216, 178, 92, 0.55);
  border-radius: 999px;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.btn-ghost:hover,
.btn-ghost:focus {
  color: #fff;
  background-color: rgba(216, 178, 92, 0.14);
  border-color: var(--c-gold-2);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  padding: 20px 0;
  transition: background-color 0.35s var(--ease), padding 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header.is-stuck {
  padding: 11px 0;
  background-color: rgba(7, 9, 15, 0.92);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--c-line);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.header__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
}

.header__meta {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 0.9rem;
  color: var(--c-ink-dim);
}

.header__meta span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.header__meta i {
  color: var(--c-gold);
}

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav__link {
  position: relative;
  color: var(--c-ink);
  font-size: 0.96rem;
  font-weight: 500;
  padding: 6px 0;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--c-gold-2);
  transition: width 0.3s var(--ease);
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--c-gold-2);
}

.nav__link:hover::after,
.nav__link.is-active::after {
  width: 100%;
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  color: #fff;
  font-size: 1.15rem;
}

.nav-panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(360px, 88vw);
  background-color: var(--c-surface);
  border-left: 1px solid var(--c-line);
  padding: 92px 28px 40px;
  transform: translateX(102%);
  transition: transform 0.42s var(--ease);
  z-index: 1050;
  overflow-y: auto;
}

.nav-panel.is-open {
  transform: translateX(0);
}

.nav-panel__list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}

.nav-panel__list li + li {
  border-top: 1px solid var(--c-line);
}

.nav-panel__list a {
  display: block;
  padding: 15px 0;
  color: var(--c-ink);
  font-size: 1.05rem;
}

.nav-panel__list a:hover {
  color: var(--c-gold-2);
  padding-left: 6px;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
  z-index: 1045;
}

.nav-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 150px 0 90px;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -180px;
  width: 720px;
  height: 360px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(216, 178, 92, 0.18), transparent 70%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.hero__title {
  margin-bottom: 22px;
}

.hero__text {
  color: var(--c-ink-dim);
  font-size: 1.12rem;
  max-width: 620px;
  margin-bottom: 34px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 46px;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 42px;
  padding-top: 28px;
  border-top: 1px solid var(--c-line);
}

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

.hero__fact strong {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--c-gold-2);
  line-height: 1.1;
}

.hero__fact span {
  font-size: 0.86rem;
  color: var(--c-ink-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.badge-18 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 106, 125, 0.14);
  border: 1px solid rgba(255, 106, 125, 0.55);
  color: #ffc3cb;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 15px;
  border-radius: 999px;
}

.badge-18 i {
  color: var(--c-red);
}

.rg-note {
  background-color: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--r-md);
  padding: 28px 30px;
}

.rg-note p {
  color: var(--c-ink-dim);
  margin-bottom: 0;
  font-size: 0.98rem;
}

.card-lux {
  height: 100%;
  background-color: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.card-lux:hover {
  transform: translateY(-8px);
  border-color: rgba(216, 178, 92, 0.45);
  box-shadow: var(--shadow-lg);
}

.card-lux__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background-color: var(--c-surface-2);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.card-lux__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.card-lux:hover .card-lux__media img {
  transform: scale(1.06);
}

.card-lux__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(7, 9, 15, 0.78);
  border: 1px solid var(--c-line);
  backdrop-filter: blur(8px);
  color: var(--c-gold-2);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
}

.card-lux__body {
  padding: 28px 28px 30px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.card-lux__title {
  font-size: 1.32rem;
  margin-bottom: 12px;
}

.card-lux__text {
  color: var(--c-ink-dim);
  font-size: 0.97rem;
  margin-bottom: 20px;
}

.card-lux__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--c-line);
}

.card-lux__price {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--c-gold-2);
}

.card-lux__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--c-ink);
}

.card-lux__link:hover {
  color: var(--c-gold-2);
}

.card-lux__link i {
  transition: transform 0.3s var(--ease);
}

.card-lux__link:hover i {
  transform: translateX(4px);
}

.feature {
  height: 100%;
  padding: 34px 30px;
  background-color: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}

.feature:hover {
  transform: translateY(-6px);
  border-color: rgba(216, 178, 92, 0.4);
}

.feature__icon {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(140deg, rgba(216, 178, 92, 0.22), rgba(216, 178, 92, 0.05));
  border: 1px solid rgba(216, 178, 92, 0.35);
  color: var(--c-gold-2);
  font-size: 1.35rem;
  margin-bottom: 22px;
}

.feature__title {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.feature__text {
  color: var(--c-ink-dim);
  font-size: 0.96rem;
  margin: 0;
}

.steps {
  counter-reset: lux-step;
  display: grid;
  gap: 22px;
}

.step {
  position: relative;
  display: flex;
  gap: 22px;
  padding: 26px 28px;
  background-color: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.step:hover {
  border-color: rgba(216, 178, 92, 0.42);
  transform: translateX(6px);
}

.step__num {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--c-gold-2), var(--c-gold-deep));
  color: #17110a;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}

.step__title {
  font-size: 1.12rem;
  margin-bottom: 6px;
}

.step__text {
  color: var(--c-ink-dim);
  font-size: 0.95rem;
  margin: 0;
}

.stat {
  text-align: center;
  padding: 18px 10px;
}

.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.1rem);
  font-weight: 700;
  color: var(--c-gold-2);
  line-height: 1.1;
}

.stat__label {
  display: block;
  margin-top: 6px;
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-dim);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}

.gallery__item {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--c-line);
  aspect-ratio: 4 / 3;
  background-color: var(--c-surface-2);
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s var(--ease), filter 0.4s var(--ease);
}

.gallery__item:hover img {
  transform: scale(1.07);
}

.gallery__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 20px 16px;
  background: linear-gradient(to top, rgba(5, 7, 12, 0.92), transparent);
  font-size: 0.92rem;
  font-weight: 500;
  color: #fff;
}

.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
}

.review {
  position: relative;
  background-color: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 32px 30px 28px;
}

.review__stars {
  color: var(--c-gold);
  font-size: 0.9rem;
  letter-spacing: 3px;
  margin-bottom: 16px;
}

.review__quote {
  color: var(--c-ink);
  font-size: 1rem;
  margin-bottom: 22px;
}

.review__author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--c-line);
}

.review__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--c-surface-2);
}

.review__name {
  display: block;
  font-weight: 600;
  font-size: 0.96rem;
  color: #fff;
}

.review__role {
  display: block;
  font-size: 0.84rem;
  color: var(--c-ink-dim);
}

.partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 44px;
  padding: 26px 0;
}

.partners__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-ink-dim);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  opacity: 0.78;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}

.partners__item:hover {
  opacity: 1;
  color: var(--c-gold-2);
}

.lux-slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  background-color: var(--c-surface);
}

.lux-slider__viewport {
  overflow: hidden;
}

.lux-slider__track {
  display: flex;
  transition: transform 0.7s var(--ease);
  will-change: transform;
}

.lux-slider__slide {
  flex: 0 0 100%;
  min-width: 100%;
  padding: 58px 54px;
}

.lux-slider__slide h3 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  margin-bottom: 14px;
}

.lux-slider__slide p {
  color: var(--c-ink-dim);
  max-width: 720px;
  margin-bottom: 0;
}

.lux-slider__nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lux-slider__arrow {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--c-line);
  color: #fff;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.lux-slider__arrow:hover {
  background: var(--c-gold);
  color: #17110a;
}

.lux-slider__dots {
  display: flex;
  gap: 9px;
}

.lux-slider__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.22);
  transition: background-color 0.3s var(--ease), width 0.3s var(--ease);
}

.lux-slider__dot.is-active {
  width: 30px;
  border-radius: 999px;
  background: var(--c-gold);
}

.form-lux {
  background-color: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 38px 34px;
}

.form-lux .form-label {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-ink);
  margin-bottom: 8px;
}

.form-lux .form-control,
.form-lux .form-select {
  background-color: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-ink);
  padding: 0.82rem 1rem;
  font-size: 0.97rem;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.form-lux .form-control::placeholder {
  color: #7f8899;
}

.form-lux .form-control:focus,
.form-lux .form-select:focus {
  background-color: var(--c-bg-2);
  color: var(--c-ink);
  border-color: rgba(216, 178, 92, 0.65);
  box-shadow: 0 0 0 3px rgba(216, 178, 92, 0.16);
}

.form-lux .form-control.is-invalid,
.form-lux .form-select.is-invalid {
  border-color: var(--c-red);
}

.form-lux .form-check-label {
  font-size: 0.9rem;
  color: var(--c-ink-dim);
}

.form-lux .form-check-input {
  background-color: var(--c-bg-2);
  border-color: var(--c-line);
}

.form-lux .form-check-input:checked {
  background-color: var(--c-gold);
  border-color: var(--c-gold);
}

.form-alert {
  display: none;
  margin-top: 20px;
  padding: 15px 18px;
  border-radius: var(--r-sm);
  font-size: 0.94rem;
  border: 1px solid transparent;
}

.form-alert.is-visible {
  display: block;
  animation: alertIn 0.35s var(--ease);
}

.form-alert--ok {
  background: rgba(67, 214, 159, 0.12);
  border-color: rgba(67, 214, 159, 0.5);
  color: #b8f4de;
}

.form-alert--err {
  background: rgba(255, 106, 125, 0.12);
  border-color: rgba(255, 106, 125, 0.5);
  color: #ffc7cf;
}

@keyframes alertIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.newsletter {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.newsletter .form-control {
  flex: 1 1 240px;
}

.faq-accordion .accordion-item {
  background-color: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md) !important;
  margin-bottom: 14px;
  overflow: hidden;
}

.faq-accordion .accordion-button {
  background-color: var(--c-surface);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  padding: 22px 26px;
  box-shadow: none;
}

.faq-accordion .accordion-button:not(.collapsed) {
  background-color: var(--c-surface-2);
  color: var(--c-gold-2);
}

.faq-accordion .accordion-button:focus {
  box-shadow: none;
  border-color: var(--c-line);
}

.faq-accordion .accordion-button::after {
  filter: invert(1) sepia(1) saturate(4) hue-rotate(5deg);
}

.faq-accordion .accordion-body {
  color: var(--c-ink-dim);
  font-size: 0.97rem;
  padding: 6px 26px 26px;
}

.cta-band {
  position: relative;
  padding: 92px 0;
  text-align: center;
}

.cta-band__inner {
  max-width: 760px;
  margin: 0 auto;
}

.cta-band p {
  color: var(--c-ink-dim);
  font-size: 1.06rem;
  margin-bottom: 30px;
}

.map-frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-line);
  filter: grayscale(0.35) contrast(1.05);
  transition: filter 0.4s var(--ease);
}

.map-frame:hover {
  filter: grayscale(0);
}

.map-frame iframe {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
}

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

.contact-list li {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-line);
}

.contact-list li:last-child {
  border-bottom: 0;
}

.contact-list i {
  color: var(--c-gold);
  font-size: 1.1rem;
  margin-top: 4px;
}

.contact-list strong {
  display: block;
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 3px;
}

.contact-list span {
  color: var(--c-ink-dim);
  font-size: 0.96rem;
}

.site-footer {
  background-color: var(--c-bg-2);
  border-top: 1px solid var(--c-line);
  padding: 78px 0 0;
}

.footer__title {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold-2);
  margin-bottom: 22px;
}

.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__list li + li {
  margin-top: 11px;
}

.footer__list a {
  color: var(--c-ink-dim);
  font-size: 0.95rem;
}

.footer__list a:hover {
  color: var(--c-gold-2);
}

.footer__text {
  color: var(--c-ink-dim);
  font-size: 0.93rem;
  line-height: 1.75;
}

.footer__legal {
  margin-top: 54px;
  padding: 28px 0;
  border-top: 1px solid var(--c-line);
  color: var(--c-ink-dim);
  font-size: 0.86rem;
}

.footer__legal p {
  margin-bottom: 6px;
}

.footer__legal strong {
  color: var(--c-ink);
  font-weight: 600;
}

.footer__socials {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.footer__socials a {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--c-line);
  color: var(--c-ink);
}

.footer__socials a:hover {
  background: var(--c-gold);
  color: #17110a;
  border-color: var(--c-gold);
}

.footer__bottom {
  padding: 20px 0 26px;
  border-top: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--c-ink-dim);
  font-size: 0.85rem;
}

.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1080;
  padding: 16px;
  transform: translateY(130%);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}

.cookie-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.cookie-bar__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  background: rgba(20, 26, 40, 0.97);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px);
}

.cookie-bar__text {
  flex: 1 1 420px;
  margin: 0;
  font-size: 0.93rem;
  color: var(--c-ink-dim);
}

.cookie-bar__text strong {
  color: #fff;
}

.cookie-bar__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cookie-bar__btn {
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.68rem 1.5rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.cookie-bar__btn--accept {
  background: linear-gradient(135deg, var(--c-gold-2), var(--c-gold));
  color: #17110a;
}

.cookie-bar__btn--accept:hover {
  filter: brightness(1.06);
}

.cookie-bar__btn--decline {
  background: transparent;
  border-color: var(--c-line);
  color: var(--c-ink);
}

.cookie-bar__btn--decline:hover {
  background: rgba(255, 255, 255, 0.07);
}

.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1035;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(216, 178, 92, 0.5);
  background: rgba(7, 9, 15, 0.88);
  color: var(--c-gold-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s var(--ease);
  backdrop-filter: blur(10px);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.to-top:hover {
  background: var(--c-gold);
  color: #17110a;
}

[data-aos] {
  pointer-events: none;
}

[data-aos].aos-animate {
  pointer-events: auto;
}

@media (max-width: 991px) {
  .header__meta {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav--desktop {
    display: none;
  }

  .hero {
    min-height: auto;
    padding: 130px 0 72px;
  }

  .section {
    padding: 72px 0;
  }

  .lux-slider__slide {
    padding: 40px 28px;
  }
}

@media (max-width: 575px) {
  body {
    font-size: 16px;
  }

  .hero__actions .btn-gold,
  .hero__actions .btn-ghost {
    width: 100%;
  }

  .form-lux {
    padding: 28px 22px;
  }

  .cookie-bar__actions {
    width: 100%;
  }

  .cookie-bar__btn {
    flex: 1 1 auto;
    text-align: center;
  }

  .map-frame iframe {
    height: 340px;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
/* ---- Mobile header overlap fix (keeps fixed header compact and clears the hero) ---- */
@media (max-width: 991.98px) {
  .site-header .navbar-collapse:not(.show) {
    display: none !important;
  }

  .site-header .header__meta {
    display: none !important;
  }

  .site-header .navbar-collapse.show {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 72vh;
    overflow-y: auto;
    padding: 16px 20px 22px;
    background-color: rgba(7, 9, 15, 0.97);
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
  }

  .site-header .navbar-nav {
    align-items: flex-start;
    text-align: left;
  }

  /* Push page content below the fixed header so the hero never sits under it */
  #page-root {
    padding-top: 104px;
  }

  .hero {
    padding-top: 54px !important;
  }
}

/* ===== Fix: fixed header must not overlap the hero on mobile ===== */

/* Keep the collapsible menu hidden by default at all widths until it is
   explicitly opened (Bootstrap adds .show). This prevents the fixed header
   from growing tall and covering the hero. */
#inject-header .navbar-collapse.collapse:not(.show):not(.collapsing) {
  display: none !important;
}

@media (max-width: 991.98px) {
  /* Hide the desktop contact meta block when Bootstrap utilities are unavailable */
  #inject-header .header__meta {
    display: none !important;
  }

  /* Give the hero enough top spacing to clear the fixed header */
  .hero {
    padding-top: 170px;
  }
}

@media (min-width: 992px) {
  #inject-header .navbar-collapse.collapse {
    display: flex !important;
    flex-basis: auto;
    flex-grow: 1;
    align-items: center;
  }
}

/* --- Mobile header fallback ------------------------------------------------
   Keeps the fixed navbar compact and collapsible on small screens even if the
   Bootstrap bundle is unavailable, so it can never cover the hero section. */
@media (max-width: 991.98px) {
  .site-header .navbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .site-header .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
  }

  .site-header .navbar-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--c-line);
    border-radius: 12px;
    color: #fff;
    font-size: 1.15rem;
    order: 2;
  }

  .site-header .navbar-collapse {
    display: none;
    flex-basis: 100%;
    width: 100%;
    order: 3;
  }

  .site-header .navbar-collapse.show,
  .site-header .navbar-collapse.is-open-fallback {
    display: block;
  }

  .site-header .navbar-nav {
    display: block;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
  }

  .site-header .navbar-nav .nav-link,
  .site-header .navbar-nav .dropdown-toggle {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 0;
    background: transparent;
    border: 0;
  }

  .site-header .dropdown-menu {
    position: static;
    background: transparent;
    border: 0;
    padding-left: 14px;
  }
}

/* On mobile the header reserves its own space in the document flow instead of
   floating over the page, so it can never overlap the hero section - even when
   the navigation menu is expanded. */
@media (max-width: 991.98px) {
  .site-header {
    position: sticky;
    top: 0;
  }

  .site-header.is-stuck {
    padding: 20px 0;
  }

  .hero {
    padding-top: 64px;
  }
}

/* ===== Final mobile header/hero overlap guard ===== */
@media (max-width: 991.98px) {
  /* Take the header out of the fixed overlay model on small screens so it can
     never sit on top of the hero, even if the navigation is expanded. */
  #inject-header {
    position: relative;
    z-index: 1040;
    width: 100%;
  }

  #inject-header .site-header,
  #inject-header .site-header.is-stuck {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 14px 0 !important;
    background-color: rgba(7, 9, 15, 0.97);
    border-bottom: 1px solid var(--c-line);
    box-shadow: none;
  }

  /* Keep the collapsible menu closed until the user opens it */
  #inject-header .navbar-collapse,
  #inject-header .navbar-collapse.collapse {
    display: none !important;
    flex-basis: auto !important;
    width: 100%;
  }

  #inject-header .navbar-collapse.show,
  #inject-header .navbar-collapse.collapsing {
    display: block !important;
  }

  #inject-header .header__meta {
    display: none !important;
  }

  /* Small, safe top spacing for the hero below the in-flow header */
  .hero {
    padding-top: 40px !important;
  }
}

/* ===== Definitive mobile header overlap fix =====
   On small screens the header is taken out of fixed/sticky positioning and put
   back into the normal document flow, so it can never float over the hero
   section. The hero keeps a comfortable top padding for breathing room. */
@media (max-width: 991.98px) {
  .site-header,
  .site-header.is-stuck {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 10;
  }

  .site-header.is-stuck {
    background-color: rgba(7, 9, 15, 0.92);
  }

  .hero {
    padding-top: 64px !important;
  }
}

/* ============================================================
   QA FIX 1 — AOS blocks must never hide content or block clicks.
   If the AOS animation library is unavailable the original rules
   keep [data-aos] elements at opacity:0 / pointer-events:none,
   which makes forms unclickable. Force them fully visible.
   ============================================================ */
[data-aos],
[data-aos].aos-animate {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ============================================================
   QA FIX 2 — Brand logos must not inflate the header height.
   Global `img { height: auto }` lets a large logo scale up to the
   full container width, growing the fixed header to ~1000px and
   covering the hero. Pin the logo to its intended 40px height.
   ============================================================ */
.header__brand img,
.navbar-brand img,
#inject-header .navbar-brand img,
.site-footer .header__brand img {
  height: 40px !important;
  max-height: 40px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}

/* Keep the brand row a single compact line */
.header__brand,
#inject-header .navbar-brand {
  align-items: center !important;
  flex-wrap: nowrap !important;
  max-height: 56px;
}

/* ============================================================
   QA FIX 3 — Mobile header/hero overlap guard.
   The header is kept in the document flow on small screens, the
   collapsible menu stays closed until opened, and the hero keeps
   a safe top spacing below it.
   ============================================================ */
@media (max-width: 991.98px) {
  #inject-header {
    position: relative !important;
    top: auto !important;
    z-index: 1040;
  }

  #inject-header .site-header,
  #inject-header .site-header.is-stuck {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 0 !important;
    background-color: rgba(7, 9, 15, 0.97);
    border-bottom: 1px solid var(--c-line);
    box-shadow: none;
  }

  /* Closed menu must stay closed (works with or without Bootstrap CSS) */
  #inject-header .navbar-collapse:not(.show):not(.is-open-fallback):not(.collapsing) {
    display: none !important;
  }

  /* Hero clears the in-flow header */
  .hero {
    padding-top: 48px !important;
  }
}

/* ============================================================
   QA FIX 4 — Guarantee the fixed header never overlaps the hero
   on mobile. The header remains pinned to the top of the
   viewport, so the page content (starting with the hero section)
   reserves matching top space and always begins below it.
   ============================================================ */
@media (max-width: 991.98px) {
  /* Reserve the header height above the main content so its box
     starts below the fixed header instead of underneath it. */
  main {
    padding-top: 92px;
  }

  #inject-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
  }

  #inject-header .site-header,
  #inject-header .site-header.is-stuck {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 20px 0 !important;
  }
}

/* ============================================================
   QA FIX — Header / hero overlap on mobile (360px).
   The fixed header sits on top of the first section, whose box
   starts at the very top of the document (top = 0), producing a
   measured overlap equal to the header height. Reserve the
   header's height in the document flow on small screens and pin
   the header to the top so it can never sit over the hero.
   ============================================================ */
@media (max-width: 991.98px) {
  /* Keep the header out of the normal flow so no blank band appears */
  #inject-header {
    position: static !important;
    height: 0 !important;
  }

  #inject-header .site-header,
  #inject-header .site-header.is-stuck {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1040;
    padding: 20px 0 !important;
    background-color: rgba(7, 9, 15, 0.94);
    border-bottom: 1px solid var(--c-line);
  }

  /* Push the page content (and therefore the hero) below the header */
  main {
    padding-top: 96px !important;
  }

  /* The hero no longer needs its own extra top spacing for the header */
  .hero {
    padding-top: 40px !important;
  }
}

/* --- QA fix: prevent fixed header from overlapping hero on mobile --- */
@media (max-width: 991.98px) {
  body { padding-top: 91px; }
  #inject-header .site-header,
  .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; }
  html { scroll-padding-top: 95px; }
}
@media (max-width: 400px) {
  body { padding-top: 88px; }
}

/* ============================================================
   QA FINAL FIX — Mobile header must not overlap the hero.
   The header is placed back in the normal document flow as a
   sticky element on small screens, so it reserves its own space
   and the hero always begins below it (overlap = 0). The body /
   main offsets that other rules added are neutralised so no blank
   band appears above the header.
   ============================================================ */
@media (max-width: 991.98px) {
  #inject-header {
    position: static !important;
    height: auto !important;
    top: auto !important;
    width: 100% !important;
  }

  #inject-header .site-header,
  #inject-header .site-header.is-stuck,
  .site-header,
  .site-header.is-stuck {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    z-index: 1040 !important;
    padding: 12px 0 !important;
    background-color: rgba(7, 9, 15, 0.97) !important;
    border-bottom: 1px solid var(--c-line);
    box-shadow: none;
  }

  body,
  main,
  #page-root {
    padding-top: 0 !important;
  }

  .hero {
    padding-top: 48px !important;
    min-height: auto !important;
  }

  html {
    scroll-padding-top: 80px;
  }
}

/* ============================================================
   QA FINAL OVERRIDE — Mobile header/hero overlap (360px).
   Prior rules set `#inject-header .site-header { position: fixed }`
   with !important (id+class specificity), which beat the later
   `.site-header { position: sticky }` override, leaving the header
   floating over the hero (overlap = header height). Force the
   header back into the normal document flow with matching
   specificity and neutralise the body/main offsets so the hero
   begins directly below it (overlap = 0).
   ============================================================ */
@media (max-width: 991.98px) {
  #inject-header {
    position: static !important;
    height: auto !important;
    top: auto !important;
  }

  #inject-header .site-header,
  #inject-header .site-header.is-stuck {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 1040 !important;
    padding: 14px 0 !important;
    background-color: rgba(7, 9, 15, 0.97) !important;
    border-bottom: 1px solid var(--c-line);
    box-shadow: none !important;
  }

  body,
  main,
  #page-root {
    padding-top: 0 !important;
  }

  .hero {
    padding-top: 40px !important;
  }
}

/* ============================================================
   QA DEFINITIVE FIX — fixed header / hero overlap on mobile.
   Previous appends produced conflicting rules (some made the header
   sticky but horizontal overflow on html/body neutralised it, so the
   hero box still started at y=0). This final block pins the header to
   the top of the viewport and reserves exactly its height on the body,
   so the first section (hero) always starts below the header.
   ============================================================ */
@media (max-width: 991.98px) {
  #inject-header {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
  }

  #inject-header .site-header,
  #inject-header .site-header.is-stuck,
  .site-header,
  .site-header.is-stuck {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1040 !important;
  }

  /* Reserve the header height above the page content */
  body {
    padding-top: 96px !important;
  }

  main,
  #page-root {
    padding-top: 0 !important;
  }

  .hero {
    padding-top: 40px !important;
    min-height: auto !important;
  }

  html {
    scroll-padding-top: 96px;
  }
}

/* ============================================================
   QA FIX (final) — Mobile header must not overlap the hero.
   Put the header back into the normal document flow on small
   screens (position: static) so it reserves its own height and
   the hero box always starts below it. Any body/main top padding
   added by earlier overrides is neutralised so no blank band or
   negative offset remains. This guarantees overlap = 0 at 360px.
   ============================================================ */
@media (max-width: 991.98px) {
  #inject-header {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    width: 100% !important;
    z-index: 1040;
  }

  #inject-header .site-header,
  #inject-header .site-header.is-stuck,
  .site-header,
  .site-header.is-stuck {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    padding: 12px 0 !important;
    background-color: rgba(7, 9, 15, 0.97) !important;
    border-bottom: 1px solid var(--c-line);
    box-shadow: none;
  }

  body,
  main,
  #page-root {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .hero {
    padding-top: 48px !important;
    min-height: auto !important;
  }

  html {
    scroll-padding-top: 0 !important;
  }
}

/* ============================================================
   QA FINAL OVERRIDE 2 — Mobile header/hero overlap (360px).
   Guarantee the hero's box starts below the fixed header by
   reserving the header height on the hero's container, and zero
   out the earlier conflicting body/main offsets so the total
   reserved space equals exactly the header height.
   ============================================================ */
@media (max-width: 991.98px) {
  body,
  main {
    padding-top: 0 !important;
  }

  #page-root {
    padding-top: 92px !important;
  }

  #inject-header {
    position: static !important;
    height: 0 !important;
    top: auto !important;
  }

  #inject-header .site-header,
  #inject-header .site-header.is-stuck {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    z-index: 1040 !important;
    padding: 14px 0 !important;
    background-color: rgba(7, 9, 15, 0.97) !important;
    border-bottom: 1px solid var(--c-line);
  }

  .hero {
    padding-top: 40px !important;
  }
}

/* ============================================================
   QA FIX (resolved) — Reserve the fixed header height above the
   page content on mobile so the hero box starts BELOW the header.
   The header stays pinned to the top of the viewport and the body
   reserves an equal (slightly larger) top space, giving overlap 0
   at 360px without hiding any content.
   ============================================================ */
@media (max-width: 991.98px) {
  /* Pin the header to the top of the viewport */
  #inject-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    width: 100% !important;
    z-index: 1040;
  }

  #inject-header .site-header,
  #inject-header .site-header.is-stuck,
  .site-header,
  .site-header.is-stuck {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    padding: 20px 0 !important;
    background-color: rgba(7, 9, 15, 0.96) !important;
    border-bottom: 1px solid var(--c-line);
    box-shadow: none;
  }

  /* Reserve the header height so the hero (and the rest of the page)
     begins below the fixed header instead of underneath it. */
  body { padding-top: 100px !important; }

  /* Neutralise conflicting offsets on the inner wrappers */
  main,
  #page-root {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .hero {
    padding-top: 40px !important;
    min-height: auto !important;
  }

  html { scroll-padding-top: 104px !important; }
}