:root {

  --veyo-dark: #1a1f1c;

  --veyo-darker: #121612;

  --veyo-gold: #c5a059;

  --veyo-gold-soft: #d4b87a;

  --veyo-cream: #f3efe8;

  --veyo-cream-deep: #ebe6dc;

  --veyo-white: #ffffff;

  --veyo-text: #1a1f1c;

  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --font-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;

}



*,

*::before,

*::after {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  font-family: var(--font-sans);

  color: var(--veyo-white);

  background: var(--veyo-dark);

  -webkit-font-smoothing: antialiased;

}



img {

  max-width: 100%;

  height: auto;

  display: block;

}



a {

  text-decoration: none;

  color: inherit;

  transition: color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;

}



/* ========== PRELOADER ========== */

.veyo-preloader {

  position: fixed;

  inset: 0;

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  background:

    radial-gradient(ellipse at 50% 42%, rgba(197, 160, 89, 0.08) 0%, transparent 55%),

    var(--veyo-darker);

  transition: opacity 0.65s ease, visibility 0.65s ease;

}



.veyo-preloader.is-done {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

}



.preloader-inner {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  animation: preloaderFadeIn 0.8s ease both;

}



.preloader-logo {

  width: auto;

  height: clamp(120px, 22vw, 180px);

  object-fit: contain;

  filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.35));

  animation: preloaderBreath 2.8s ease-in-out infinite;

}



.preloader-text {

  margin: 22px 0 0;

  font-family: var(--font-sans);

  font-size: 11px;

  font-weight: 500;

  letter-spacing: 0.42em;

  text-transform: uppercase;

  color: var(--veyo-gold);

  display: inline-flex;

  align-items: baseline;

}



.preloader-dots {

  display: inline-flex;

  width: 2.4em;

  margin-left: 2px;

  letter-spacing: 0.08em;

}



.preloader-dots span {

  opacity: 0;

  animation: preloaderDot 1.4s ease-in-out infinite;

}



.preloader-dots span:nth-child(1) { animation-delay: 0s; }

.preloader-dots span:nth-child(2) { animation-delay: 0.2s; }

.preloader-dots span:nth-child(3) { animation-delay: 0.4s; }

.preloader-dots span:nth-child(4) { animation-delay: 0.6s; }



@keyframes preloaderFadeIn {

  from {

    opacity: 0;

    transform: translateY(10px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes preloaderBreath {

  0%, 100% {

    opacity: 0.88;

    transform: scale(1);

  }

  50% {

    opacity: 1;

    transform: scale(1.02);

  }

}



@keyframes preloaderDot {

  0%, 20% {

    opacity: 0;

  }

  40%, 70% {

    opacity: 1;

  }

  90%, 100% {

    opacity: 0;

  }

}



/* ========== NAVBAR ========== */

.veyo-nav {

  padding-top: 20px;

  padding-bottom: 6px;

  background: transparent;

  transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;

  z-index: 1030;

  align-items: flex-start;

}



.veyo-nav .container-fluid {

  align-items: flex-start;

  transition: align-items 0.35s ease;

}



.veyo-nav.scrolled {

  background: rgba(18, 22, 18, 0.94);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 1px 0 rgba(197, 160, 89, 0.15);

  padding-top: 8px;

  padding-bottom: 8px;

  align-items: center;

}



.veyo-nav.scrolled .container-fluid {

  align-items: center;

}



.veyo-nav .navbar-brand {

  padding: 0;

  margin: 0;

}



.brand-logo {

  height: 200px;

  width: auto;

  object-fit: contain;

  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));

  transition: height 0.35s ease;

}



.veyo-nav.scrolled .brand-logo {

  height: 100px;

}



.veyo-menu {

  align-items: center;

  gap: 0;

  margin-top: 22px;

  transition: margin-top 0.35s ease;

}



.veyo-nav.scrolled .veyo-menu {

  margin-top: 0;

}



.veyo-menu .nav-link {

  font-family: var(--font-sans);

  font-size: 14px;

  font-weight: 400;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.95) !important;

  padding: 6px 25px !important;

  position: relative;

}



.veyo-menu .nav-link:hover,

.veyo-menu .nav-link:focus {

  color: var(--veyo-gold) !important;

}



.veyo-menu .nav-item.divider {

  width: 1px;

  height: 14px;

  background: rgba(197, 160, 89, 0.55);

  margin: 0 3px;

  align-self: center;

  padding: 0;

}



.btn-reserve {

  font-family: var(--font-sans);

  font-size: 14px;

  font-weight: 500;

  letter-spacing: 0.28em;

  text-transform: uppercase;

  color: var(--veyo-gold) !important;

  background: transparent;

  border: 1px solid var(--veyo-gold);

  border-radius: 0;

  padding: 11px 26px;

  white-space: nowrap;

  margin-top: 18px;

  transition: margin-top 0.35s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;

}



.veyo-nav.scrolled .btn-reserve {

  margin-top: 0;

}



.btn-reserve:hover,

.btn-reserve:focus {

  background: var(--veyo-gold);

  color: var(--veyo-darker) !important;

  border-color: var(--veyo-gold);

}



.navbar-toggler {

  padding: 6px;

  width: 40px;

  height: 36px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 6px;

  background: rgba(22, 28, 24, 0.88);

  border-radius: unset;

}



.toggler-icon {

  display: block;

  width: 100%;

  height: 2px;

  background: var(--veyo-gold);

  transition: transform 0.3s ease, opacity 0.3s ease;

}



.navbar-toggler[aria-expanded="true"] .toggler-icon:nth-child(1) {

  transform: translateY(7.5px) rotate(45deg);

}



.navbar-toggler[aria-expanded="true"] .toggler-icon:nth-child(2) {

  opacity: 0;

}



.navbar-toggler[aria-expanded="true"] .toggler-icon:nth-child(3) {

  transform: translateY(-7.5px) rotate(-45deg);

}



/* ========== HERO ========== */

.hero {

  position: relative;

  background: url(assets/images/hero.jpg) center / cover no-repeat;

  display: flex;

  align-items: center;

  padding-top: 208px;

  padding-bottom: 88px;

  overflow: hidden;

  background-size: cover;

  background-position: top right;

  padding: 280px 0px 50px;

}



.hero-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, rgba(8, 12, 10, 0.94) 0%, rgb(8 12 10 / 71%) 22%, rgba(8, 12, 10, 0.28) 45%, rgba(8, 12, 10, 0.08) 68%, rgb(8 12 10 / 64%) 100%), linear-gradient(180deg, rgb(8 12 10 / 90%) 0%, transparent 28%, transparent 72%, rgb(8 12 10 / 41%) 100%);

  pointer-events: none;

}



.hero-inner {

  position: relative;

  z-index: 1;

  width: 100%;

}



.hero-title {

  font-family: var(--font-serif);

  font-weight: 500;

  font-size: 65px;

  line-height: 1.1;

  letter-spacing: 0.01em;

  color: var(--veyo-white);

  margin: 0;

  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);

  animation: fadeUp 0.9s ease both;

}



.hero-sub {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 9px;

  animation: fadeUp 0.9s ease 0.15s both;

}



/* Star icon (image) */

.star-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  line-height: 0;

}



.star-icon img {

  width: 14px;

  height: 14px;

  object-fit: contain;

  display: block;

}



.hero-eyebrow {

  font-family: var(--font-sans);

  font-size: 16px;

  font-weight: 500;

  letter-spacing: 0.26em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.95);

  line-height: 1.65;

  max-width: 80%;

}



.hero-desc {

  max-width: 416px;

  animation: fadeUp 0.9s ease 0.28s both;

}



.hero-desc p {

  font-family: var(--font-serif);

  font-size: 16px;

  font-weight: 400;

  line-height: 1.7;

  color: rgba(255, 255, 255, 0.92);

  letter-spacing: 0.01em;

  width: 60%;

}



.leaf-icon {

  flex-shrink: 0;

  margin-top: 2px;

  width: 42px;

}



.leaf-icon img {

  width: 42px;

  height: auto;

  object-fit: contain;

}



/* Signature property — fixed bottom right of hero */

.signature-card {

  position: absolute;

  right: clamp(16px, 8vw, 90px);

  bottom: clamp(24px, 4vh, 48px);

  z-index: 2;

  background: rgba(22, 28, 24, 0.88);

  border: 1px solid rgba(197, 160, 89, 0.65);

  padding: 28px 30px 26px;

  width: min(320px, calc(100% - 32px));

  backdrop-filter: blur(4px);

  -webkit-backdrop-filter: blur(4px);

  animation: fadeUp 0.9s ease 0.35s both;

  text-align: center;

}



/* Star centered on top border of Paje White House card */

.signature-card .card-star {

  position: absolute;

  top: 0;

  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 3;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 22px;

  height: 22px;

  line-height: 0;

}



.signature-card .card-star img {

  width: 12px;

  height: 12px;

  object-fit: contain;

  display: block;

}



@keyframes fadeUp {

  from {

    opacity: 0;

    transform: translateY(18px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.sig-label {

  font-family: var(--font-sans);

  font-size: 10px;

  font-weight: 500;

  letter-spacing: 0.28em;

  text-transform: uppercase;

  color: var(--veyo-gold);

  margin-bottom: 14px;

}



.sig-name {

  font-family: var(--font-serif);

  font-weight: 500;

  font-size: clamp(28px, 2.4vw, 34px);

  color: var(--veyo-white);

  margin: 0 0 9px;

  line-height: 1.15;

}



.sig-place {

  font-family: var(--font-serif);

  font-size: 18px;

  font-weight: 500;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: var(--veyo-gold);

  margin-bottom: 6px;

}



.sig-by {

  font-family: var(--font-serif);

  font-style: italic;

  font-size: 18px;

  color: var(--veyo-gold);

  margin-bottom: 22px;

}



.sig-link {

  font-family: var(--font-sans);

  font-size: 10px;

  font-weight: 500;

  letter-spacing: 0.24em;

  text-transform: uppercase;

  color: white;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;

}



.sig-link:hover {

  color: var(--veyo-gold-soft);

}



/* ========== FEATURES BAR ========== */

.features-bar {

  background: var(--veyo-darker);

  padding: 10px 0;

  border-top: none;

  position: relative;

}



.features-bar::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 2px;

  background: linear-gradient(90deg, #c5a059 0%, rgb(197 160 89 / 77%) 15%, var(--veyo-gold) 50%, rgb(197 160 89) 85%, #c5a059 100%)

}



.feature-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 14px;

  padding: 8px 4px;

  cursor: pointer;

}



.feature-icon {

  width: 44px;

  height: 44px;

  object-fit: contain;

  transition: transform 0.35s ease, opacity 0.35s ease;

}



.feature-item:hover .feature-icon {

  transform: scale(1.12);

}



.feature-item:hover span {

  color: var(--veyo-gold-soft);

}



.feature-item span {

  font-family: var(--font-sans);

  font-size: 10px;

  font-weight: 500;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: #ffffff;

  line-height: 1.4;

  max-width: 160px;

  transition: color 0.35s ease;

}



/* ========== INTRO ========== */

.intro-section {

  background:

    radial-gradient(ellipse at 50% 0%, rgba(197, 160, 89, 0.06) 0%, transparent 55%),

    linear-gradient(180deg, var(--veyo-cream) 0%, var(--veyo-cream-deep) 100%);

  padding: 28px 0 12px;

  color: var(--veyo-text);

  position: relative;

  border-top: 1px solid rgba(197, 160, 89, 0.45);

}



.intro-section::before {

  content: "";

  position: absolute;

  inset: 0;

  opacity: 0.35;

  pointer-events: none;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");

  background-size: 180px;

  mix-blend-mode: multiply;

}



/* Absolute star on top border center of intro section */

.intro-section .section-top-star {

  position: absolute;

  top: 0;

  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 24px;

  height: 24px;

  line-height: 0;

}



.intro-section .section-top-star img {

  width: 12px;

  height: 12px;

  object-fit: contain;

  display: block;

}



.intro-content {

  position: relative;

  z-index: 1;

}



/* Star + lines divider */

.star-line-divider {

  position: relative;

  z-index: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  width: min(280px, 70%);

  margin: 0 auto;

  padding: 28px 0;

}



.star-line-divider::before,

.star-line-divider::after {

  content: "";

  flex: 1;

  height: 1px;

  background: var(--veyo-gold);

  opacity: 0.75;

}



.star-line-divider::before {

  margin-right: 14px;

}



.star-line-divider::after {

  margin-left: 14px;

}



section.hero .star-line-divider {

  width: min(200px, 70%);

  margin: 0;

  padding: 10px 0;

}



/* Intro bottom divider — gradient lines */

section.intro-section .star-line-divider,

section.intro-section .intro-bottom-divider {

  width: min(260px, 65%);

  padding: 14px 0 20px;

}



section.intro-section .star-line-divider::before,

section.intro-section .star-line-divider::after {

  height: 1px;

  opacity: 1;

}



section.intro-section .star-line-divider::before {

  background: linear-gradient(to right, transparent, var(--veyo-gold));

}



section.intro-section .star-line-divider::after {

  background: linear-gradient(to left, transparent, var(--veyo-gold));

}



.star-line-divider .star-icon img {

  width: 12px;

  height: 12px;

}



.intro-eyebrow {

  font-family: var(--font-serif);

  font-size: 20px;

  font-weight: 700;

  letter-spacing: 0.28em;

  text-transform: uppercase;

  color: #b58a35;

  margin-bottom: 12px;

}



.intro-title {

  font-family: var(--font-serif);

  font-weight: 500;

  font-size: clamp(22px, 2.4vw, 30px);

  color: var(--veyo-text);

  margin: 0;

  line-height: 1.25;

  letter-spacing: 0.01em;

}



/* ========== MEDIA QUERIES ========== */

@media (min-width: 1600px) {

  .veyo-nav .container-fluid,

  .hero-inner {

    max-width: 1320px;

    margin-left: auto;

    margin-right: auto;

  }



  .signature-card {

    right: calc((100% - 1156px) / 2);

  }

}



@media (max-width: 1279.98px) {

  .veyo-menu .nav-link {

    padding: 6px 15px !important;

    font-size: 12px;

  }

}



@media (max-width: 1151.98px) {

  .veyo-menu .nav-link {

    padding: 6px 10px !important;

    font-size: 11px;

  }



  .hero-title {

    font-size: 50px;

  }

}



@media (max-width: 991.98px) {

  .veyo-nav,

  .veyo-nav .container-fluid {

    align-items: center;

  }



  .veyo-nav .navbar-collapse {

    background: rgba(18, 22, 18, 0.97);

    margin-top: 12px;

    padding: 20px 16px 24px;

    border: 1px solid rgba(197, 160, 89, 0.25);

  }



  .veyo-menu {

    margin-top: 0;

  }



  .veyo-menu .nav-link {

    padding: 12px 0 !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

  }



  .btn-reserve {

    display: inline-block;

    text-align: center;

    width: 100%;

    margin-top: 12px;

  }



  .brand-logo {

    height: 100px;

  }



  .hero-desc {

    margin-bottom: 50px;

    width: 100%;

    max-width: 100%;

  }



  .hero-desc p {

    width: 100% !important;

  }



  .hero {

    padding-top: 170px;

    padding-bottom: 256px;

    align-items: flex-start;

    background-position: top;

  }



  .signature-card {

    right: 16px;

    left: 16px;

    bottom: 24px;

    width: auto;

    max-width: none;

  }

}



@media (max-width: 767.98px) {

  .hero-title {

    font-size: 40px;

  }



  .hero-desc {

    margin-bottom: 50px;

  }



  .features-bar {

    padding: 36px 0;

  }



  .feature-item span {

    font-size: 8px;

    letter-spacing: 0.14em;

  }

}



@media (max-width: 575.98px) {

  .brand-logo {

    height: 100px;

  }



  .hero {

    padding-top: 170px;

    padding-bottom: 240px;

  }



  .hero-title {

    font-size: 38px;

  }



  .hero-eyebrow {

    font-size: 10px;

  }



  .hero-desc p {

    font-size: 14px;

    width: 100%;

  }



  .intro-section {

    padding: 22px 0 8px;

  }



  .intro-content {

    padding: 14px 16px 4px;

  }



  .star-line-divider {

    width: min(220px, 80%);

    padding: 22px 0;

  }



  section.intro-section .star-line-divider {

    padding: 10px 0 16px;

  }

}