html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
}

.hero-bg {
  background-image: url('hero-blue2.jpg');
}

@media (min-width: 768px) {
  .hero-bg {
    background-image: url('hero-blue2-wide.jpg');
  }
}

.about-bg {
  background-image: url('bum1-mobile.jpg');
}

@media (min-width: 768px) {
  .about-bg {
    background-image: url('bum1-big.jpg');
  }
}

.experience-bg {
  background-image: url('2bodies-mobile.jpg');
}

@media (min-width: 768px) {
  .experience-bg {
    background-image: url('2bodies-big.jpg');
  }
}

.roster-bg {
  background-image: url('beach-bums2.jpg');
}

.pricing-bg-1 {
  background-image: url('black-lingerie2-orig.jpg');
}

.pricing-bg-2 {
  background-image: url('black-lingerie3-orig.jpg');
}

.pricing-bg-3 {
  background-image: url('purple-lingerie.jpg');
}

.contact-bg {
  background-image: url('legs-small.jpg');
}

.contact-bg-2 {
  background-image: url('belly-legs.jpg');
}

.hero-text {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7), 0 1px 6px rgba(0, 0, 0, 0.5);
}

.hero-text h1 {
  text-shadow: 0 3px 30px rgba(0, 0, 0, 0.8), 0 1px 8px rgba(0, 0, 0, 0.6);
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

::selection {
  background: #d4a45a;
  color: #1b2a3a;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f0e6d6;
}

::-webkit-scrollbar-thumb {
  background: #c9a96e88;
  border-radius: 4px;
}


.logo-gold {
  /* This forces the image to black first, then applies the gold color (#d4a45a) */
  filter: brightness(0) saturate(100%) invert(72%) sepia(21%) saturate(1001%) hue-rotate(349deg) brightness(115%) contrast(85%);
}

.text-gold, .text-goldLight, .text-goldDark {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  font-weight: 500;
}

.text-goldDark {
  font-weight: 600;
}

/* Consistent section title shadows */
h2.font-display {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.nav-glow {
  box-shadow: 0 4px 30px -2px rgba(212, 164, 90, 0.12);
}

.logo-glow-wrap {
  display: inline-flex;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 0 8px rgba(212, 164, 90, 0.4));
}

.logo-glow-wrap:hover {
  transform: scale(1.04);
  filter: drop-shadow(0 0 16px rgba(212, 164, 90, 0.75));
}