/* Grove Resort interactivity layer — sits above the engine's @layer sw defaults.
   Unlayered on purpose, so it always wins without specificity hacks. */

/* ---------- hotspot markers ---------- */
.mx-layer { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.mx-group { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }

.mx-spot {
  position: absolute; transform: translate(-50%, -50%);
  width: 34px; height: 34px; padding: 0; border: 0; cursor: pointer;
  background: transparent; display: grid; place-items: center;
}
.mx-spot__dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--sw-accent, #5FB0AE);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sw-bg) 70%, transparent),
              0 2px 10px rgba(0, 0, 0, .55);
  transition: transform .25s ease;
}
.mx-spot__ring {
  position: absolute; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--sw-accent, #5FB0AE); opacity: .55;
  animation: mx-pulse 2.8s ease-out infinite;
}
@keyframes mx-pulse {
  0%   { transform: scale(.5);  opacity: .7; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}
.mx-spot:hover .mx-spot__dot,
.mx-spot:focus-visible .mx-spot__dot { transform: scale(1.45); }

/* ---------- detail drawer ---------- */
.mx-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(420px, 92vw); overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(26px, 4vw, 44px) clamp(22px, 3vw, 36px) 40px;
  background: color-mix(in srgb, var(--sw-bg) 94%, #000);
  border-left: 1px solid color-mix(in srgb, var(--sw-accent) 26%, transparent);
  box-shadow: -30px 0 80px rgba(0, 0, 0, .55);
  transform: translateX(102%); transition: transform .42s cubic-bezier(.22, .8, .3, 1);
  visibility: hidden;
}
.mx-drawer.is-open { transform: none; visibility: visible; }
.mx-drawer__x, .mx-modal__x {
  position: absolute; top: 16px; right: 18px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--sw-ink);
  background: color-mix(in srgb, var(--sw-ink) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--sw-ink) 18%, transparent);
  transition: background .2s;
}
.mx-drawer__x:hover, .mx-modal__x:hover { background: color-mix(in srgb, var(--sw-ink) 20%, transparent); }
.mx-drawer__eyebrow {
  display: block; font-size: .74rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--sw-accent);
}
.mx-drawer__title {
  font-family: var(--sw-font-display); font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.12;
  color: var(--sw-ink); margin: 10px 0 20px;
}
.mx-drawer__img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 12px; margin-bottom: 22px;
  border: 1px solid color-mix(in srgb, var(--sw-accent) 18%, transparent);
}
.mx-drawer__list { margin: 0; padding: 0; }
.mx-drawer__row {
  padding: 15px 0 15px 14px; margin-bottom: 2px; border-left: 2px solid transparent;
  border-top: 1px solid color-mix(in srgb, var(--sw-ink) 12%, transparent);
  transition: border-color .3s, background .3s;
}
.mx-drawer__row.is-focus {
  border-left-color: var(--sw-accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--sw-accent) 10%, transparent), transparent 70%);
}
.mx-drawer__row dt {
  font-family: var(--sw-font-display); font-size: 1.06rem; font-weight: 600;
  color: var(--sw-ink); margin-bottom: 5px;
}
.mx-drawer__row dd {
  margin: 0; font-size: .93rem; line-height: 1.55;
  color: color-mix(in srgb, var(--sw-ink) 68%, var(--sw-ink-soft));
}
.mx-drawer__cta, .mx-form__go {
  margin-top: 28px; width: 100%; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .95rem;
  padding: 14px 22px; border-radius: 999px; border: 0;
  color: #0E1518; background: var(--sw-accent);
  transition: transform .2s, filter .2s;
}
.mx-drawer__cta:hover, .mx-form__go:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* ---------- enquiry modal ---------- */
.mx-modal {
  position: fixed; inset: 0; z-index: 90; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: color-mix(in srgb, #000 62%, transparent); backdrop-filter: blur(6px);
}
.mx-modal.is-open { display: flex; }
.mx-modal__card {
  position: relative; width: min(480px, 100%); max-height: 90vh; overflow-y: auto;
  padding: clamp(26px, 4vw, 40px);
  background: color-mix(in srgb, var(--sw-bg) 96%, #000);
  border: 1px solid color-mix(in srgb, var(--sw-accent) 28%, transparent);
  border-radius: 18px; box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
}
.mx-modal__note {
  margin: 0 0 22px; font-size: .9rem; line-height: 1.55;
  color: color-mix(in srgb, var(--sw-ink) 62%, var(--sw-ink-soft));
}
.mx-form { display: flex; flex-direction: column; gap: 14px; }
.mx-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: .78rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sw-ink-soft);
}
.mx-form__row { display: flex; gap: 12px; }
.mx-form__row label { flex: 1; }
.mx-form input, .mx-form select {
  font: inherit; font-size: .98rem; letter-spacing: normal; text-transform: none;
  color: var(--sw-ink); background: color-mix(in srgb, var(--sw-ink) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--sw-ink) 18%, transparent);
  border-radius: 10px; padding: 12px 14px; width: 100%;
  transition: border-color .2s, background .2s;
}
.mx-form input:focus, .mx-form select:focus {
  outline: none; border-color: var(--sw-accent);
  background: color-mix(in srgb, var(--sw-ink) 11%, transparent);
}
.mx-form select option { background: #0E1518; color: #E9DAC4; }
.mx-form__err {
  margin: 0; font-size: .87rem; color: #E4995E;
  padding: 10px 14px; border-radius: 8px;
  background: color-mix(in srgb, #E4995E 14%, transparent);
}
.mx-form__ok {
  margin: 0; font-size: 1.02rem; line-height: 1.6; text-align: center;
  padding: 24px 8px; color: var(--sw-ink);
}

/* ---------- responsive / motion ---------- */
@media (max-width: 860px) {
  .mx-drawer { width: 100%; }
  .mx-spot { width: 40px; height: 40px; }   /* finger-sized target */
  .mx-form__row { flex-direction: column; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-spot__ring { animation: none; }
  .mx-drawer { transition: none; }
}

/* ---------- dark-theme corrections to the engine's chrome ----------
   scrub-engine.js hardcodes `#fff` mixes and `color:#fff` in a few places, which
   assume a light page. Those literals are not tokens, so the :root override block
   cannot reach them — they have to be restated here. Symptoms without this:
   an unreadable white pill on the route rail, a washed-out nav, and light-on-light
   text in the primary buttons. */
.sw-route__label {
  background: color-mix(in srgb, var(--sw-bg) 88%, transparent);
  color: var(--sw-ink);
  border-color: color-mix(in srgb, var(--sw-accent) 32%, transparent);
}
.sw-nav {
  background: color-mix(in srgb, var(--sw-bg) 70%, transparent);
  border-color: color-mix(in srgb, var(--sw-accent) 22%, transparent);
}
.sw-nav__item.is-active { color: #0E1518; }
.sw-copy__tags li {
  background: color-mix(in srgb, var(--sw-ink) 9%, transparent);
  color: var(--sw-ink);
  border-color: color-mix(in srgb, var(--sw-accent) 34%, transparent);
}
/* Buttons: engine sets color:#fff on a var(--sw-ink) ground — light on light here. */
.sw-topcta,
.sw-btn--primary { color: #0E1518; background: var(--sw-ink); }

/* ---------- route rail: bigger dots + drop-down brief ----------
   The engine ships 9px dots and a label that slides in horizontally. Enlarge the
   dots so the transition marker actually reads, and replace the label with a panel
   that drops down as it fades in. */
.sw-route { gap: 26px; }
.sw-route__dot   { width: 22px; height: 22px; }
.sw-route__dot i { width: 14px; height: 14px; }
.sw-route__dot.is-active i {
  transform: scale(1.5);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--sw-accent) 20%, transparent);
}
.sw-route::before { width: 2px; opacity: .3; }
/* The engine's own sideways label is superseded by .mx-brief below. */
.sw-route__label { display: none !important; }

.mx-brief {
  position: absolute; right: calc(100% + 16px); top: -6px;
  display: block; width: max-content; max-width: 250px; text-align: right;
  padding: 10px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--sw-bg) 90%, #000);
  border: 1px solid color-mix(in srgb, var(--sw-accent) 32%, transparent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  backdrop-filter: blur(10px);
  pointer-events: none;
  /* the drop-down: start lifted and transparent, settle down into place */
  opacity: 0; transform: translateY(-10px);
  transition: opacity .28s ease, transform .28s cubic-bezier(.22, .8, .3, 1);
}
.mx-brief strong {
  display: block; font-family: var(--sw-font-display);
  font-size: 1rem; font-weight: 600; line-height: 1.15; color: var(--sw-ink);
}
.mx-brief em {
  display: block; margin-top: 4px; font-style: normal;
  font-size: .8rem; line-height: 1.4;
  color: color-mix(in srgb, var(--sw-ink) 62%, var(--sw-ink-soft));
}
/* Fade in on hover/focus, and on the active dot while a transition is announcing. */
.sw-route__dot:hover .mx-brief,
.sw-route__dot:focus-visible .mx-brief,
.sw-route.is-announcing .sw-route__dot.is-active .mx-brief {
  opacity: 1; transform: translateY(0);
}

@media (max-width: 860px) {
  .sw-route__dot { width: 30px; height: 30px; }
  .mx-brief { max-width: 190px; padding: 8px 11px; }
  .mx-brief strong { font-size: .9rem; }
  .mx-brief em { font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-brief { transition: opacity .2s ease; transform: none; }
  .sw-route__dot:hover .mx-brief,
  .sw-route.is-announcing .sw-route__dot.is-active .mx-brief { transform: none; }
}

/* ---------- scene hotspot: the drop widget ----------
   Replaces the old hover-only pill. Sits under the dot, drops down as it fades in,
   and lifts away as it fades out. Driven by scroll: interactive.js puts `.is-live`
   on the group once that scene is settled (its linger band), so the widget animates
   in on scroll rather than only on hover. */
.mx-spot__card {
  position: absolute; left: 50%; top: calc(100% + 12px);
  width: max-content; max-width: 250px; text-align: left;
  padding: 11px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--sw-bg) 90%, #000);
  border: 1px solid color-mix(in srgb, var(--sw-accent) 34%, transparent);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .55);
  backdrop-filter: blur(10px);
  pointer-events: none; z-index: 2;
  opacity: 0; transform: translate(-50%, -10px);
  transition: opacity .32s ease, transform .32s cubic-bezier(.22, .8, .3, 1);
}
/* A small pointer back up to the dot. */
.mx-spot__card::before {
  content: ""; position: absolute; left: 50%; top: -5px;
  width: 9px; height: 9px; transform: translateX(-50%) rotate(45deg);
  background: inherit;
  border-left: 1px solid color-mix(in srgb, var(--sw-accent) 34%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--sw-accent) 34%, transparent);
}
.mx-spot__card strong {
  display: block; font-family: var(--sw-font-display);
  font-size: 1.02rem; font-weight: 600; line-height: 1.15; color: var(--sw-ink);
}
.mx-spot__card em {
  display: block; margin-top: 5px; font-style: normal;
  font-size: .8rem; line-height: 1.45;
  color: color-mix(in srgb, var(--sw-ink) 64%, var(--sw-ink-soft));
}
/* Hotspots low in the frame drop upward instead, so nothing runs off screen. */
.mx-spot--up .mx-spot__card { top: auto; bottom: calc(100% + 12px); transform: translate(-50%, 10px); }
.mx-spot--up .mx-spot__card::before { top: auto; bottom: -5px; border: 0;
  border-right: 1px solid color-mix(in srgb, var(--sw-accent) 34%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--sw-accent) 34%, transparent); }

/* Fade + drop in when the scene settles on scroll, and on hover/focus. */
.mx-group.is-live .mx-spot__card,
.mx-spot:hover .mx-spot__card,
.mx-spot:focus-visible .mx-spot__card { opacity: 1; transform: translate(-50%, 0); }
.mx-spot:hover .mx-spot__card { border-color: color-mix(in srgb, var(--sw-accent) 62%, transparent); }

@media (max-width: 860px) {
  .mx-spot__card { max-width: 190px; padding: 9px 11px; }
  .mx-spot__card strong { font-size: .92rem; }
  .mx-spot__card em { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-spot__card { transition: opacity .2s ease; transform: translate(-50%, 0); }
  .mx-spot--up .mx-spot__card { transform: translate(-50%, 0); }
}

/* The side rail keeps its larger dots, but its brief is hover-only now — the
   scroll-triggered drop widget belongs to the scene hotspots, not two places at once. */
.sw-route.is-announcing .sw-route__dot.is-active .mx-brief { opacity: 0; transform: translateY(-10px); }
.sw-route__dot:hover .mx-brief,
.sw-route__dot:focus-visible .mx-brief { opacity: 1; transform: translateY(0); }

/* ---------- contact section (after the flight) ----------
   Normal-flow content below the scroll track. z-index 65 puts it above every fixed
   engine layer (stage 10, copy 20, hotspots 30, rail 40, topbar 50, progress 60) so it
   slides up over the final frame, but below the drawer (70) and enquiry modal (90). */
.gv-contact {
  position: relative; z-index: 65;
  color: var(--sw-ink); font-family: var(--sw-font-body);
  --sw-accent: #E07A4F;
}
.gv-contact *, .gv-contact *::before, .gv-contact *::after { box-sizing: border-box; }
.gv-contact__fade {
  height: 38vh; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%,
    color-mix(in srgb, var(--sw-bg) 55%, transparent) 55%, var(--sw-bg) 100%);
}
.gv-contact__body {
  background: var(--sw-bg);
  padding: clamp(24px, 5vw, 64px) clamp(18px, 5vw, 64px) 28px;
}
.gv-contact__head, .gv-contact__grid, .gv-foot { max-width: 1160px; margin-inline: auto; }
.gv-contact__head { max-width: 1160px; margin-bottom: clamp(32px, 5vw, 56px); }
.gv-eyebrow {
  display: block; font-size: .74rem; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--sw-accent);
}
.gv-contact__title {
  font-family: var(--sw-font-display); font-weight: 500; letter-spacing: -.005em;
  font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.04; margin: 14px 0 0;
}
.gv-contact__lede {
  margin: 18px 0 0; max-width: 52ch; font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.6;
  color: color-mix(in srgb, var(--sw-ink) 72%, var(--sw-ink-soft));
}
.gv-contact__grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px); align-items: start;
}

/* form — same field language as the enquiry modal */
.gv-form {
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(22px, 3vw, 34px); border-radius: 18px;
  background: color-mix(in srgb, var(--sw-ink) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--sw-ink) 12%, transparent);
}
.gv-form label {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  font-size: .76rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sw-ink-soft);
}
.gv-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gv-form__row--3 { grid-template-columns: 1fr 1fr .7fr; }
.gv-form input, .gv-form select, .gv-form textarea {
  font: inherit; font-size: .98rem; letter-spacing: normal; text-transform: none;
  color: var(--sw-ink); background: color-mix(in srgb, var(--sw-ink) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--sw-ink) 18%, transparent);
  border-radius: 10px; padding: 12px 14px; width: 100%; min-width: 0;
  transition: border-color .2s, background .2s; color-scheme: dark;
}
.gv-form textarea { resize: vertical; min-height: 110px; }
.gv-form input:focus, .gv-form select:focus, .gv-form textarea:focus {
  outline: none; border-color: var(--sw-accent);
  background: color-mix(in srgb, var(--sw-ink) 11%, transparent);
}
.gv-form select option { background: #0E1518; color: #E9DAC4; }
.gv-form__err {
  margin: 0; font-size: .87rem; color: #E4995E; padding: 10px 14px; border-radius: 8px;
  background: color-mix(in srgb, #E4995E 14%, transparent);
}
.gv-form__go {
  align-self: flex-start; margin-top: 4px; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .95rem; letter-spacing: .04em;
  padding: 14px 28px; border: 0; border-radius: 999px;
  color: #1a1410; background: var(--sw-accent);
  transition: transform .2s, filter .2s;
}
.gv-form__go:hover { filter: brightness(1.08); transform: translateY(-1px); }
.gv-form__go:focus-visible { outline: 2px solid var(--sw-ink); outline-offset: 3px; }
.gv-form__ok { margin: 0; padding: 36px 8px; text-align: center; font-size: 1.05rem; line-height: 1.6; }

/* details column */
.gv-info { display: flex; flex-direction: column; gap: 28px; }
.gv-info__block { padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--sw-ink) 14%, transparent); }
.gv-info h3 {
  margin: 0 0 10px; font-size: .76rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sw-ink-soft);
}
.gv-info p { margin: 0; font-size: 1.02rem; line-height: 1.6; }
.gv-info p + p { margin-top: 8px; }
.gv-info a { color: var(--sw-ink); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--sw-accent) 60%, transparent); }
.gv-info a:hover { color: var(--sw-accent); }
.gv-muted { font-size: .9rem !important; color: color-mix(in srgb, var(--sw-ink) 55%, var(--sw-ink-soft)); }
.gv-social { display: flex; flex-wrap: wrap; gap: 18px; }

/* footer bar */
.gv-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px;
  margin-top: clamp(48px, 7vw, 88px); padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--sw-ink) 12%, transparent);
  font-size: .86rem; color: var(--sw-ink-soft);
}
.gv-foot a { color: inherit; text-decoration: none; }
.gv-foot a:hover { color: var(--sw-ink); }
.gv-foot__brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sw-font-display); font-size: 1.2rem; letter-spacing: .04em; color: var(--sw-ink) !important;
}
.gv-foot__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.gv-foot__legal { margin: 0; width: 100%; font-size: .8rem; opacity: .8; }

@media (max-width: 860px) {
  .gv-contact__grid { grid-template-columns: 1fr; }
  .gv-form__row, .gv-form__row--3 { grid-template-columns: 1fr 1fr; }
  .gv-form__row--3 label:last-child { grid-column: 1 / -1; }
  .gv-form__go { align-self: stretch; }
}
@media (max-width: 420px) {
  .gv-form__row { grid-template-columns: 1fr; }
}