/* Booking page banner — full-width photo (Firefly .png, 2064x512, upscaled @2x).
   The hand sits in the middle on a dark background; the empty dark area on the right
   carries the text in light colours. Previous hand banner: gold/booking-banner-hand. */
.bk-hero { position: relative; background: #17171b; }
.bk-hero__frame { position: relative; }
.bk-hero__bg { display: block; width: 100%; height: auto; aspect-ratio: 2064 / 512; object-fit: cover; }

.bk-hero__copy {
  position: absolute;
  inset: 0 0 0 auto;
  width: 38%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(1.5rem, 5vw, 7rem) 0 0;
  font-family: var(--bn-sans, "Outfit", sans-serif);
  color: #fff;
}
.bk-hero__kicker {
  margin: 0 0 0.8rem;
  color: #e8b4c0;                                  /* soft pink, picks up the nail tips */
  font-size: clamp(0.68rem, 0.8vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.bk-hero__title {
  margin: 0 0 clamp(0.6rem, 1vw, 1.1rem);
  font-family: var(--bn-sans, "Outfit", sans-serif);
  font-size: clamp(1.9rem, 3.4vw, 4.8rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: #fff;
}
.bk-hero__title em { display: block; color: #f1c6cf; font-style: normal; }
.bk-hero__lead {
  margin: 0;
  max-width: 30rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.88rem, 0.95vw, 1.1rem);
  font-weight: 300;
  line-height: 1.55;
}
.bk-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.3rem; margin-top: clamp(0.9rem, 1.4vw, 1.6rem); }
.bk-hero__cta {
  display: inline-flex;
  align-items: center;
  padding: clamp(0.75rem, 0.9vw, 1rem) clamp(1.4rem, 1.8vw, 2.1rem);
  background: var(--bn-red, #7d1f1f);
  color: #fff;
  font-size: clamp(0.92rem, 1vw, 1.1rem);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
}
.bk-hero__cta:hover, .bk-hero__cta:focus-visible { background: var(--bn-red-hover, #5d1614); }
.bk-hero__note { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }

/* entrance: photo eases in, text rises */
@media (prefers-reduced-motion: no-preference) {
  .bk-hero__bg { animation: bkFade 1.4s ease both; }
  .bk-hero__copy > * { animation: bkRise 0.9s cubic-bezier(0.19, 1, 0.22, 1) both; }
  .bk-hero__copy > :nth-child(1) { animation-delay: 0.2s; }
  .bk-hero__copy > :nth-child(2) { animation-delay: 0.3s; }
  .bk-hero__copy > :nth-child(3) { animation-delay: 0.45s; }
  .bk-hero__copy > :nth-child(4) { animation-delay: 0.58s; }
}
@keyframes bkFade { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes bkRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* narrower screens: the banner gets taller (cropped from the sides) so the text still fits */
@media (max-width: 1200px) {
  .bk-hero__bg { aspect-ratio: 2.9 / 1; object-position: 88% 50%; }  /* crop the cloth side so the hand moves left of the text */
  .bk-hero__copy { width: 44%; }
  .bk-hero__note { display: none; }
}

/* tablet + phone: photo on top, text below on the same dark background */
@media (max-width: 900px) {
  .bk-hero__bg { aspect-ratio: 2.2 / 1; object-position: 52% 50%; }
  .bk-hero__copy { position: static; width: auto; padding: 1.6rem clamp(1.25rem, 5vw, 2.5rem) 2rem; }
  .bk-hero__title { font-size: clamp(2.2rem, 7vw, 3.4rem); }
  .bk-hero__title em { display: inline; }
}
@media (max-width: 640px) {
  .bk-hero__bg { aspect-ratio: 4 / 3; }
  .bk-hero__title em { display: block; }
}