/* Clear photography with glass limited to the content panels. */
.bg-particles { display: none !important; }
.hero.hero-refined { min-height: 680px; }
.hero-refined .hero-image {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  will-change: opacity;
}
.hero-refined .hero-overlay {
  background: linear-gradient(180deg, transparent 45%, rgba(9, 22, 16, .12)) !important;
  backdrop-filter: none;
}
.hero-refined .hero-panel {
  padding: 42px !important;
  justify-content: flex-end;
  align-items: stretch !important;
}
.hero-refined .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(24px, 1fr) 280px;
  width: 100%;
  max-width: none;
  gap: 0;
  align-items: end;
}
.hero-refined .hero-copy,
.hero-refined .hero-side {
  position: relative;
  margin: 0;
  min-width: 0;
  border: 1px solid rgba(255, 250, 226, .48) !important;
  border-radius: 24px;
  background: linear-gradient(125deg, rgba(255, 250, 233, .13), rgba(14, 29, 23, .44) 75%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -1px 0 rgba(255, 255, 255, .08), 0 16px 36px rgba(6, 18, 12, .16) !important;
  backdrop-filter: blur(4px) saturate(105%) !important;
  -webkit-backdrop-filter: blur(4px) saturate(105%) !important;
  text-align: left !important;
}
.hero-refined .hero-copy { grid-column: 1; padding: 30px !important; }
.hero-refined .hero-kicker {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  margin: 0 0 16px !important;
  color: #fff1c7;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .19em;
  text-align: left;
}
.hero-refined .hero-copy h1 {
  max-width: 17ch !important;
  margin: 0 0 16px !important;
  font-size: clamp(38px, 3.2vw, 52px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  text-align: left;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .24);
}
.hero-refined .hero-lead {
  max-width: 45ch !important;
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.65;
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
.hero-refined .hero-cta-desktop {
  display: inline-flex !important;
  min-height: 48px;
  margin: 22px 0 0 !important;
  padding: 12px 25px;
  width: auto !important;
  background: linear-gradient(135deg, #fff4d3, #e9ca80) !important;
  border-color: #fff0c3 !important;
  color: #443312 !important;
  box-shadow: inset 0 1px 0 #fff9e8, 0 6px 18px rgba(0, 0, 0, .12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
}
.hero-refined .hero-meta {
  display: block;
  width: 100%;
  max-width: none !important;
  margin: 22px 0 0 !important;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .25);
}
.hero-refined .price-card {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 5px 8px;
  padding: 0;
  min-height: 0;
  border: 0 !important;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.hero-refined .price-card .label,
.hero-refined .price-card small { font-size: 12px; color: #fff !important; }
.hero-refined .price-card strong { font-size: 25px; line-height: 1.2; }
.hero-refined .hero-side {
  grid-column: 3;
  align-self: end;
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 24px !important;
}
.hero-refined .hero-side-top { justify-content: flex-start !important; gap: 8px; }
.hero-refined .hero-side .pill {
  min-width: 0;
  padding: 6px 8px;
  font-size: 10px;
  background: rgba(255, 255, 255, .08) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.hero-refined .hero-side h3 { margin: 0; font-size: 24px; }
.hero-refined .hero-side p { margin: 0; color: #fff !important; font-size: 14px; line-height: 1.65; }
.hero-refined .hero-side .btn {
  min-height: 44px;
  background: rgba(255, 255, 255, .12) !important;
  color: #fff !important;
  text-shadow: none;
  border-color: rgba(255, 255, 255, .6) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.hero-refined .btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
#reach .reach-card > img { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; }
#reach .section-heading .eyebrow { display: block; margin-bottom: 10px; }
#reach .section-heading h2 { display: block; }
@media (min-width: 901px) and (max-width: 1150px) {
  .hero-refined .hero-panel { padding: 28px !important; }
  .hero-refined .hero-grid { grid-template-columns: minmax(0, 1fr) 30px 260px; }
}
@media (max-width: 900px) {
  .hero.hero-refined { min-height: 640px; }
  .hero-refined .hero-panel { padding: 22px !important; justify-content: flex-end; }
  .hero-refined .hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .hero-refined .hero-copy { width: min(100%, 520px) !important; padding: 26px !important; }
  .hero-refined .hero-side { display: none !important; }
  .hero-refined .hero-copy h1 { font-size: clamp(32px, 5.8vw, 44px) !important; max-width: 17ch !important; }
}
@media (max-width: 480px) {
  .hero.hero-refined { min-height: 650px; }
  /* The source photos are wide; shift their framing up to reveal the resort above the text. */
  .hero-refined .hero-image { height: calc(100% + 120px); top: -120px; }
  .hero.hero-refined .hero-image.is-active { animation: heroPhonePan 14s linear both !important; }
  .hero.hero-refined .hero-image:nth-of-type(even).is-active { animation-direction: reverse !important; }
  .hero-refined .hero-panel { padding: 16px !important; }
  .hero-refined .hero-copy { padding: 23px 20px !important; border-radius: 20px; }
  .hero-refined .hero-copy h1 { font-size: 32px !important; }
  .hero-refined .hero-lead { font-size: 14px; }
  .hero-refined .hero-kicker { font-size: 10px; }
  .hero-refined .hero-cta-desktop { width: 100% !important; max-width: none !important; }
  .hero-refined .price-card { gap: 5px 7px; }
  .hero-refined .price-card strong { font-size: 23px; }
}
@keyframes heroPhonePan {
  from { object-position: left center; }
  to { object-position: right center; }
}
@media (max-width: 480px) and (prefers-reduced-motion: reduce) {
  .hero.hero-refined .hero-image.is-active { animation: none !important; object-position: center; }
}
@media (max-width: 640px) {
  /* The hero already has a booking action; keep floating icons off its text. */
  body.hero-in-view .floating-contact { visibility: hidden; pointer-events: none; }
}