html {
  scroll-behavior: smooth;
}

body {
  text-rendering: optimizeLegibility;
}

body,
a,
button,
input,
select,
textarea {
  -webkit-font-smoothing: antialiased;
}

.luxury-animate body {
  animation: page-fade-in 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.site-nav {
  background:
    linear-gradient(180deg, rgba(9, 27, 40, 0.88), rgba(9, 27, 40, 0.64)),
    linear-gradient(90deg, rgba(200, 174, 125, 0.12), transparent 26%, transparent 74%, rgba(200, 174, 125, 0.1));
  -webkit-backdrop-filter: blur(18px) saturate(132%);
  backdrop-filter: blur(18px) saturate(132%);
  box-shadow: 0 20px 60px rgba(4, 18, 29, 0.18);
  transition: background 700ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 700ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 700ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-nav::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: min(920px, calc(100% - 48px));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(200, 174, 125, 0.7), transparent);
  pointer-events: none;
}

.site-nav.is-scrolled {
  background:
    linear-gradient(180deg, rgba(9, 27, 40, 0.96), rgba(9, 27, 40, 0.86)),
    linear-gradient(90deg, rgba(200, 174, 125, 0.12), transparent 28%, transparent 72%, rgba(200, 174, 125, 0.1));
  border-color: rgba(200, 174, 125, 0.46);
  box-shadow: 0 18px 50px rgba(8, 25, 39, 0.34);
}

.site-nav-shell {
  width: 100%;
  max-width: none !important;
  min-height: 70px;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.brand-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 170px;
  order: 1;
  text-align: left;
  text-decoration: none;
}

.brand-mark {
  font-size: 20px;
  letter-spacing: 0.34em;
  line-height: 1;
  text-shadow: 0 0 24px rgba(200, 174, 125, 0.28);
}

.brand-subtitle {
  color: rgba(200, 174, 125, 0.86);
  font-size: 9px;
  letter-spacing: 0.34em;
  line-height: 1;
}

.booking-panel,
.section-nav {
  flex: 1 1 620px;
  justify-content: flex-end;
  order: 2;
}

.booking-field {
  width: 154px;
  min-height: 42px;
  padding: 0 13px;
  color-scheme: dark;
  color: #f2eee6;
  font-size: 12px;
  letter-spacing: 0.04em;
  background-color: rgba(242, 238, 230, 0.045);
}

.booking-field:hover,
.booking-field:focus {
  background-color: rgba(242, 238, 230, 0.075);
}

.booking-field option {
  background-color: #0f2637;
  color: #f2eee6;
}

.booking-cta {
  min-height: 42px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.22em;
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 16px 32px rgba(4, 18, 29, 0.18);
}

.header-link {
  padding: 14px 12px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-decoration: none;
}

.luxury-animate .brand-lockup,
.luxury-animate .booking-panel,
.luxury-animate .section-nav {
  animation: nav-arrive 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.luxury-animate .booking-panel,
.luxury-animate .section-nav {
  animation-delay: 120ms;
}

header {
  overflow: hidden;
}

header > img,
header > video {
  transform-origin: center;
}

.luxury-animate header > img,
.luxury-animate header > video {
  animation: hero-drift 18s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.luxury-animate header h1,
.luxury-animate header p,
.luxury-animate header .w-24 {
  animation: hero-copy-rise 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.luxury-animate header .w-24 {
  animation-delay: 160ms;
}

.luxury-animate header p {
  animation-delay: 260ms;
}

.luxury-animate [data-template-id="hero-book-cta"] {
  animation: hero-cta-rise 1200ms cubic-bezier(0.22, 1, 0.36, 1) 420ms both;
}

[class*="bg-gold"],
a,
button,
input,
select,
textarea {
  transition: background-color 380ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 380ms cubic-bezier(0.22, 1, 0.36, 1),
    color 380ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

a[class*="bg-gold"]:hover,
button[class*="bg-gold"]:hover,
.canva-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(15, 38, 55, 0.18);
}

a[data-template-id="hero-book-cta"]:hover {
  transform: translateX(-50%) translateY(-2px);
}

a:not([class*="bg-gold"]):hover {
  opacity: 0.78;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #c8ae7d;
  box-shadow: 0 0 0 3px rgba(200, 174, 125, 0.18);
}

.luxury-media-frame {
  overflow: hidden;
  isolation: isolate;
}

.canva-image,
.canva-video,
section img,
section video {
  transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.luxury-media-frame:hover > img,
.luxury-media-frame:hover > video,
.bg-ivory.flex:hover > img,
.bg-ivory.flex:hover .relative > img,
.grid > img:hover {
  transform: scale(1.035);
}

.bg-ivory.flex,
article,
aside,
blockquote,
.faq-item {
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bg-ivory.flex:hover,
article:hover,
aside:hover,
blockquote:hover {
  transform: translateY(-3px);
}

.luxury-animate [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
    clip-path 1100ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, clip-path;
}

.luxury-animate [data-reveal="fade"] {
  transform: none;
}

.luxury-animate [data-reveal="media"] {
  transform: translate3d(0, 20px, 0) scale(1.025);
  clip-path: inset(8% 0 8% 0);
}

.luxury-animate [data-reveal="line"] {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: center;
}

.luxury-animate [data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  clip-path: inset(0);
}

.luxury-animate [data-reveal="line"].is-visible {
  transform: scaleX(1);
}

.luxury-animate .faq-answer {
  animation: answer-open 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes page-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes hero-drift {
  from {
    transform: scale(1.035);
  }
  to {
    transform: scale(1.085);
  }
}

@keyframes hero-copy-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hero-cta-rise {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes nav-arrive {
  from {
    opacity: 0;
    transform: translate3d(0, -12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes answer-open {
  from {
    opacity: 0;
    transform: translate3d(0, -6px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 920px) {
  .site-nav-shell {
    min-height: 0;
    justify-content: flex-start;
    gap: 12px;
  }

  .brand-lockup {
    align-items: flex-start;
    min-width: 100%;
    order: 1;
  }

  .booking-panel,
  .section-nav {
    flex: 1 1 100%;
    order: 2;
    justify-content: center;
  }

  .booking-field {
    width: min(31vw, 154px);
  }
}

@media (max-width: 640px) {
  .site-nav-shell {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .brand-mark {
    font-size: 17px;
    letter-spacing: 0.28em;
  }

  .brand-subtitle {
    font-size: 8px;
    letter-spacing: 0.28em;
  }

  .booking-field {
    flex: 1 1 31%;
    min-width: 96px;
    height: 38px;
    min-height: 38px;
    padding: 0 9px;
    font-size: 11px;
  }

  .booking-cta {
    flex: 1 1 100%;
    min-height: 38px;
    padding: 0 18px;
    font-size: 11px;
  }

  .header-link {
    padding: 12px 8px;
    font-size: 10px;
    letter-spacing: 0.18em;
  }
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .luxury-animate [data-reveal] {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}