/* header-top was removed, so show the full bar (not -4.8rem) when scrolling up */
.scrolled-up .header {
  transform: translateY(0) !important
}

.vel-book {
  position: relative;
  display: inline-flex;
  --e: cubic-bezier(.16, 1, .3, 1)
}

/* the trigger itself shrinks into a round close button */
.vel-book__trigger {
  overflow: hidden;
  justify-content: center;
  will-change: width;
  min-width: 0 !important;
  transition: width .68s cubic-bezier(.45, .05, .15, 1), padding .68s cubic-bezier(.45, .05, .15, 1), border-radius .68s cubic-bezier(.45, .05, .15, 1), color .3s ease !important
}

.vel-book__trigger .btn-text {
  transition: opacity .2s ease .06s;
  white-space: nowrap
}

.vel-book.is-open .vel-book__trigger {
  width: var(--tw-x, 4.8rem) !important;
  min-width: var(--tw-x, 4.8rem) !important;
  padding-left: 0 !important;
  padding-right: 0 !important
}

.vel-book.is-open .vel-book__trigger .btn-text {
  opacity: 0;
  transition-delay: 0s;
  transition-duration: .14s
}

.vel-book__x {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  color: inherit;
  transition: opacity .26s ease, transform .4s cubic-bezier(.45, .05, .15, 1);
  transform: scale(.7)
}

.vel-book.is-open .vel-book__x {
  opacity: 1;
  transform: scale(1);
  transition-delay: .26s
}

.vel-book__x svg {
  width: 2.4rem;
  height: 2.4rem;
  display: block
}

/* --- the nav bar itself grows downward; its contents never move --- */
.header .header-main-bg {
  transition: height .6s cubic-bezier(.65, 0, .35, 1)
}

.header.is-booking .header-main .header-main-bg {
  height: calc(var(--bar, 6.4rem) + var(--dh, 37rem))
}

.vel-book__drawer {
  position: absolute;
  left: 0;
  top: var(--bar, 6.4rem);
  width: 100%;
  /* the drawer is a mask that grows with the bar, so its contents are
     revealed line by line instead of appearing over a half-open bar */
  height: 0;
  z-index: 3;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  transition: height .6s cubic-bezier(.65, 0, .35, 1), visibility .6s
}

.header.is-booking .vel-book__drawer {
  height: var(--dh, 37rem);
  visibility: visible;
  pointer-events: auto
}

.vel-book__grid {
  display: grid;
  grid-template-columns: minmax(0, 19rem) 1px minmax(0, 27rem) 1px minmax(0, 1fr);
  gap: 3rem;
  justify-content: start;
  height: var(--dh, 37rem);
  padding: 1.6rem 1.6rem 2rem;
  color: #0b0b0c;
  border-top: 1px solid rgba(0, 0, 0, .09)
}

.vel-book__div {
  background: rgba(0, 0, 0, .09)
}

.vel-book__col {
  display: flex;
  flex-direction: column;
  min-width: 0
}

.vel-book__eyebrow {
  font-size: 1.2rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .45)
}

.vel-book__label {
  margin-top: 1.2rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: #0b0b0c
}

/* calendar (light, to sit inside the white nav bar) */
.vel-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .8rem
}

.vel-cal__month {
  font-size: 1.5rem;
  font-weight: 600;
  color: #0b0b0c;
  text-transform: capitalize
}

.vel-cal__nav {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(0, 0, 0, .06);
  color: #0b0b0c;
  transition: background .3s
}

.vel-cal__nav:hover {
  background: rgba(0, 0, 0, .14)
}

.vel-cal__dow,
.vel-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .3rem
}

.vel-cal__dow span {
  text-align: center;
  font-size: 1.1rem;
  color: rgba(0, 0, 0, .4);
  padding-bottom: .4rem
}

.vel-cal__day {
  position: relative;
  overflow: hidden;
  height: 2.7rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: .8rem;
  cursor: pointer;
  background: rgba(0, 0, 0, .05);
  color: #0b0b0c;
  font-size: 1.3rem;
  transition: background .25s, color .25s, transform .25s
}

.vel-cal__day-n {
  position: relative;
  z-index: 1
}

.vel-cal__day::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170%;
  height: 0;
  padding-bottom: 170%;
  border-radius: 50%;
  background: linear-gradient(100deg, #5eead4, #67e8f9, #818cf8, #a78bfa, #f472b6, #5eead4);
  background-size: 200% 100%;
  transform: translate(-110%, -20%) scale(.2);
  transition: transform .6s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 0;
  pointer-events: none
}

.vel-cal__day:hover:not(:disabled):not(.is-sel) {
  background: rgba(0, 0, 0, .13);
  transform: translateY(-1px)
}

.vel-cal__day:disabled {
  opacity: .28;
  cursor: default;
  background: transparent
}

.vel-cal__day.is-sel {
  color: #0b0b0c;
  font-weight: 700;
  background: linear-gradient(100deg, #5eead4, #67e8f9, #818cf8, #a78bfa, #f472b6, #5eead4);
  transition: none
}

.vel-cal__day.is-sel::before {
  display: none
}

.vel-cal__day.is-empty {
  background: transparent;
  cursor: default
}

.vel-cal__day.is-empty::before {
  display: none
}

/* slots */
.vel-book__slot-row {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: .5rem;
  margin-top: 1rem
}

.vel-book__slot {
  border: 0;
  border-radius: 999px;
  padding: .7rem 1.2rem;
  cursor: pointer;
  font-size: 1.3rem;
  background: rgba(0, 0, 0, .06);
  color: #0b0b0c;
  transition: background .25s, color .25s
}

.vel-book__slot:hover {
  background: rgba(0, 0, 0, .14)
}

.vel-book__slot.is-sel {
  color: #0b0b0c;
  font-weight: 700;
  background: linear-gradient(100deg, #5eead4, #67e8f9, #818cf8, #a78bfa, #f472b6, #5eead4);
  transition: none
}

.vel-book__cta {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 1.2rem;
  padding: 1.1rem 1.3rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: #0b0b0c;
  text-decoration: none;
  margin-top: 0;
  /* diffuse colour mesh: five soft blobs, each drifting on its own tile at its
     own rate. No linear/conic sweep, so there is no hard stop line anywhere. */
  background-color: #8ee0e4;
  background-image:
    radial-gradient(42% 55% at 50% 50%, #5eead4 0%, rgba(94, 234, 212, 0) 72%),
    radial-gradient(46% 58% at 50% 50%, #a78bfa 0%, rgba(167, 139, 250, 0) 70%),
    radial-gradient(44% 56% at 50% 50%, #f472b6 0%, rgba(244, 114, 182, 0) 70%),
    radial-gradient(48% 60% at 50% 50%, #67e8f9 0%, rgba(103, 232, 249, 0) 68%),
    radial-gradient(52% 64% at 50% 50%, #818cf8 0%, rgba(129, 140, 248, 0) 66%);
  background-repeat: no-repeat;
  background-size: 165% 165%, 180% 180%, 172% 172%, 190% 190%, 205% 205%;
  animation: vel-mesh-drift 18s ease-in-out infinite alternate;
  transition: opacity .3s
}

@keyframes vel-mesh-drift {
  0% {
    background-position: 12% 18%, 88% 8%, 72% 92%, 6% 78%, 46% 44%
  }

  25% {
    background-position: 38% 62%, 58% 34%, 24% 70%, 44% 22%, 76% 82%
  }

  50% {
    background-position: 82% 30%, 16% 76%, 54% 12%, 90% 52%, 24% 34%
  }

  75% {
    background-position: 56% 88%, 40% 14%, 8% 44%, 62% 90%, 66% 16%
  }

  100% {
    background-position: 14% 46%, 92% 66%, 84% 26%, 20% 10%, 50% 74%
  }
}

@media(prefers-reduced-motion:reduce) {
  .vel-book__cta {
    animation: none
  }
}

.vel-book__cta.is-disabled {
  opacity: .35;
  pointer-events: none
}

.vel-book__cta-arrow {
  width: 2rem;
  height: 2rem;
  display: block;
  flex: none
}

@media(max-width:1099px) {
  .vel-book__col--form {
    flex-direction: column
  }

  .vel-book__send {
    width: auto;
    align-self: flex-start
  }
}

.vel-book__col--form {
  overflow: visible;
  display: flex;
  flex-direction: row;
  gap: 1.8rem;
  align-items: stretch
}

.vel-book__fields {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem 1.2rem;
  align-content: start
}

.vel-book__field--msg {
  grid-column: 1 / -1
}

.vel-book__field--full {
  grid-column: 1 / -1
}

/* Honeypot. Hidden from people and from the tab order, but still a real,
   fillable input in the DOM so a form-filling bot walks into it. Not
   display:none -- some bots skip anything with that -- and not
   visibility:hidden either; it is moved out of view and made
   non-interactive instead. aria-hidden + tabindex=-1 keep it away from
   screen readers and keyboard users, so it costs nothing in accessibility.
   The value is checked and then discarded server-side by the
   enforce_lead_limits trigger; it is never stored. */
.vel-book__hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}


.vel-book__event {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.vel-book__event-title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: #0b0b0c
}

.vel-book__event-desc {
  font-size: 1.3rem;
  line-height: 1.4;
  color: rgba(0, 0, 0, .6)
}

.vel-book__event-when {
  margin-top: .4rem;
  font-size: 1.35rem;
  font-weight: 600;
  color: #0b0b0c
}

.vel-book__event-tz {
  font-size: 1.2rem;
  color: rgba(0, 0, 0, .5)
}

.vel-book__field select {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 1.1rem;
  background-color: rgba(0, 0, 0, .03);
  color: #0b0b0c;
  font-size: 1.35rem;
  font-family: inherit;
  line-height: 1.2;
  padding: .9rem 2.8rem .9rem 1rem;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230b0b0c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  transition: border-color .25s, background-color .25s
}

.vel-book__field select:hover {
  border-color: rgba(0, 0, 0, .32)
}

.vel-book__field select:focus {
  outline: 0;
  border-color: #0b0b0c;
  background-color: #fff
}

.vel-book__field select:has(option[value=""]:checked) {
  color: rgba(0, 0, 0, .42)
}

.vel-book__field select option {
  color: #0b0b0c;
  background: #fff
}

.vel-book__field select option[value=""] {
  color: rgba(0, 0, 0, .42)
}

.vel-book__field {
  display: flex;
  flex-direction: column;
  gap: .35rem
}

.vel-book__field>span {
  font-size: 1.15rem;
  color: rgba(0, 0, 0, .5)
}

.vel-book__field input,
.vel-book__field textarea {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: .8rem;
  background: rgba(0, 0, 0, .03);
  color: #0b0b0c;
  font-size: 1.35rem;
  font-family: inherit;
  padding: .85rem 1rem;
  transition: border-color .25s, background .25s
}

.vel-book__field input::placeholder,
.vel-book__field textarea::placeholder {
  color: rgba(0, 0, 0, .32)
}

.vel-book__field input:focus,
.vel-book__field textarea:focus {
  outline: 0;
  border-color: #0b0b0c;
  background: #fff
}

.vel-book__field textarea {
  resize: none;
  line-height: 1.4
}

.vel-book__send {
  position: relative;
  flex: none;
  width: auto;
  margin-top: 0;
  display: flex
}

.vel-book__send>.vel-book__cta {
  margin-top: 0
}

.vel-book__tip {
  position: absolute;
  right: calc(100% + 1rem);
  left: auto;
  top: 50%;
  bottom: auto;
  width: max-content;
  max-width: 24rem;
  z-index: 6;
  font-size: 1.2rem;
  line-height: 1.35;
  font-weight: 500;
  color: #0b0b0c;
  background: #8ff0ee;
  border-radius: .8rem;
  padding: .7rem .9rem;
  text-align: center;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .55);
  opacity: 0;
  visibility: hidden;
  transform: translate(1rem, -50%);
  transition: opacity .45s ease, transform .6s cubic-bezier(.65, 0, .35, 1), visibility .6s;
  pointer-events: none
}

.vel-book__send.is-locked:hover .vel-book__tip {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%)
}

.vel-book__tip::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: .6rem solid transparent;
  border-left-color: #8ff0ee
}

/* narrow layouts stack the form, so the send column sits at the left edge and
   there is no room beside it — put the tip back above there. */
@media(max-width:1099px) {
  .vel-book__tip {
    right: auto;
    left: 0;
    top: auto;
    bottom: calc(100% + .8rem);
    transform: translate(0, -1rem)
  }

  .vel-book__send.is-locked:hover .vel-book__tip {
    transform: translate(0, 0)
  }

  .vel-book__tip::after {
    left: 2rem;
    top: 100%;
    transform: none;
    border-left-color: transparent;
    border-top-color: #8ff0ee
  }
}

/* keep the gradient hover now that the trigger is no longer :last-child */
.vel-book__trigger .btn-fill {
  /* Wide enough to cover the square X-state box corner to corner. A 120% circle
     is narrower than that square's diagonal, which is what made the fill read as
     a circle inside a square the instant .is-open was dropped. Held at 180% in
     every state, so nothing resizes while the bar closes. */
  width: 180% !important;
  padding-bottom: 180% !important;
  background: radial-gradient(at 20% 28%, #5eead4 0px, transparent 55%), radial-gradient(at 80% 14%, #a78bfa 0px, transparent 52%), radial-gradient(at 66% 86%, #f472b6 0px, transparent 55%), radial-gradient(at 10% 74%, #67e8f9 0px, transparent 50%), radial-gradient(at 94% 64%, #818cf8 0px, transparent 50%), #8ee0e4
}

.vel-book__trigger:hover,
.vel-book__trigger:hover .btn-text {
  color: #0b0b0c
}

.vel-book.is-open .vel-book__trigger .btn-fill {
  transform: translate(-100%, -25%) scale(.2) !important;
  transition: transform .5s cubic-bezier(0.19, 1, 0.22, 1) !important
}

.vel-book.is-open .vel-book__trigger:hover .btn-fill {
  transform: translate(-50%, -50%) scale(1) !important
}

/* mobile: the buttons live inside the slide-out nav, so the drawer flows in place */
@media(max-width:1099px) {
  .header.is-booking .header-main .header-main-bg {
    height: 4.8rem
  }

  .vel-book__drawer {
    position: static;
    order: 9;
    width: 100%;
    height: auto;
    padding-bottom: 1.6rem
  }

  .header.is-booking .vel-book__drawer {
    height: auto;
    visibility: visible
  }

  .vel-book__grid {
    grid-template-columns: 1fr;
    height: auto;
    gap: 1.6rem;
    padding: 1.6rem 0 0
  }

  .vel-book__div {
    display: none
  }
}

@media(prefers-reduced-motion:reduce) {

  .vel-book__drawer,
  .header .header-main-bg,
  .vel-book__trigger {
    transition-duration: .01ms
  }
}