/* ==========================================================================
   Externo - Site menu (xm-*)
   One fullscreen menu for every page. The markup is injected by
   assets/js/site-menu.js; any element with [data-xm-menu-toggle] opens it.
   Self-contained: no dependency on style.css or home.css tokens.
   ========================================================================== */

:root {
  /* pitch black: the panel reads as a true blackout, the gold glow below is
     the only thing lifting it off pure #000 */
  --xm-ink: #000000;
  --xm-gold: #ffc13d;
  --xm-gold-deep: #f2a900;
  --xm-soft: #ffe09e;
  --xm-snow: #fdfcfa;
  --xm-line: rgba(253, 252, 250, 0.14);
  --xm-font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --xm-font-body: "Urbanist", ui-sans-serif, system-ui, sans-serif;
  --xm-gutter: clamp(20px, 4.2vw, 64px);
  --xm-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --xm-ease-io: cubic-bezier(0.83, 0, 0.17, 1);
}

/* ---------------------------- scroll lock -------------------------------
   style.css keeps a stable scrollbar gutter, so hiding overflow does not
   widen the page. --ext-sbw (site-menu.js) is the fallback for engines
   without scrollbar-gutter; it reports 0 wherever the gutter holds.

   Only html is clipped, never body: making body a scroll container of its own
   re-parents the sticky site header to it, so on a scrolled page the header
   drops back to the top of the document and pops into place again the moment
   the lock lifts. Hiding overflow on the root stops the page just as well. */
html.xm-lock {
  overflow: hidden;
}

html.xm-lock body {
  padding-right: var(--ext-sbw, 0px);
}

/* ------------------------------ shell ----------------------------------- */
.xm-menu {
  position: fixed;
  inset: 0;
  /* 100vw, not 100%: the reserved scrollbar gutter is outside the fixed
     containing block, and without this the page background shows through it
     as a bright stripe down the side of the blackout. The panel's own
     alignment is measured against this box, so it stays exact either way. */
  width: 100vw;
  z-index: 940;
  visibility: hidden;
  pointer-events: none;
  overflow: clip;
}

.xm-menu.is-open,
.xm-menu.is-closing {
  visibility: visible;
}

.xm-menu.is-open {
  pointer-events: auto;
}

/* Curtain: three full-cover sheets cascade down (soft → gold → ink) and
   leave on close in reverse (ink → gold → soft). No leftover stripes. */
.xm-sheet {
  position: absolute;
  inset: 0;
  transform: translateY(-101%);
  transition: transform 0.6s var(--xm-ease-io);
  will-change: transform;
}

.xm-sheet-soft {
  background: var(--xm-soft);
}

.xm-sheet-gold {
  background: var(--xm-gold);
}

.xm-sheet-ink {
  background: var(--xm-ink);
}

/* a soft gold glow lives on the ink sheet so the surface isn't flat black */
.xm-sheet-ink::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(44% 54% at 8% 0%, rgba(255, 193, 61, 0.14), transparent 64%),
    radial-gradient(36% 44% at 100% 100%, rgba(255, 193, 61, 0.08), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease 0.35s;
}

.xm-menu.is-open .xm-sheet {
  transform: none;
}

.xm-menu.is-open .xm-sheet-gold {
  transition-delay: 0.07s;
}

.xm-menu.is-open .xm-sheet-ink {
  transition-delay: 0.14s;
}

.xm-menu.is-open .xm-sheet-ink::after {
  opacity: 1;
}

/* Closing order is: panel content clears (0 - 0.2s), then the curtain lifts.
   The sheets used to start on frame 1 and finish before the top row had even
   begun its 0.32s-delayed fade, so the logo and close button hung in mid-air
   over the revealed page. Everything inside now exits first, by design. */
.xm-menu.is-closing .xm-sheet {
  transition-duration: 0.52s;
}

.xm-menu.is-closing .xm-sheet-ink {
  transition-delay: 0.1s;
}

.xm-menu.is-closing .xm-sheet-gold {
  transition-delay: 0.17s;
}

.xm-menu.is-closing .xm-sheet-soft {
  transition-delay: 0.24s;
}

/* --------------------------- watermark "e" ------------------------------
   Sits between the sheets and the scrolling inner so its off-canvas bleed
   never creates scrollbars. */
.xm-watermark {
  position: absolute;
  z-index: 1;
  right: -4%;
  bottom: -16%;
  height: min(74vh, 640px);
  width: auto;
  color: var(--xm-gold);
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.7s ease 0.5s, transform 0.9s var(--xm-ease-out) 0.5s;
  pointer-events: none;
}

.xm-menu.is-open .xm-watermark {
  opacity: 0.05;
  transform: none;
}

.xm-menu.is-closing .xm-watermark {
  opacity: 0;
  transition-delay: 0s;
  transition-duration: 0.18s;
}

/* ------------------------------- inner ----------------------------------
   The column is pinned to the host header's own content box: site-menu.js
   measures the toggle and the logo at open time and writes --xm-pad-*, so the
   menu's logo and close button land exactly where the header's pair sat. The
   literal values below are the fallback for when that measurement is skipped
   (header hidden off-screen, or JS bailed). */
.xm-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  /* min-content floor on the nav row: a plain 1fr collapses below the links on
     a short landscape viewport and they overlap the logo instead of letting
     the panel scroll */
  grid-template-rows: auto minmax(min-content, 1fr) auto;
  grid-template-areas:
    "top top"
    "nav aside"
    "foot foot";
  gap: 0 clamp(24px, 5vw, 96px);
  padding: var(--xm-pad-t, clamp(18px, 3vh, 30px)) var(--xm-pad-r, var(--xm-gutter))
    clamp(18px, 3.4vh, 34px) var(--xm-pad-l, var(--xm-gutter));
  max-width: var(--xm-col-max, 1500px);
  margin: 0 auto;
  /* scrollable only as a safety net on tiny viewports - never show bars */
  overflow-y: auto;
  overflow-x: clip;
  scrollbar-width: none;
  overscroll-behavior: contain;
}

.xm-inner::-webkit-scrollbar {
  display: none;
}

/* the dialog takes programmatic/click focus (tabindex="-1") - never show
   the browser's default ring around the whole panel */
.xm-inner:focus {
  outline: none;
}

/* ------------------------------ top row --------------------------------- */
.xm-top {
  grid-area: top;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* same row height as the header the menu replaced, so both pairs share a
     vertical centre line */
  min-height: var(--xm-close-h, 52px);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease 0.32s, transform 0.5s var(--xm-ease-out) 0.32s;
  /* on very short viewports the inner scrolls - keep the close control
     pinned so the exit never scrolls away */
  position: sticky;
  top: 0;
  z-index: 5;
}

.xm-menu.is-open .xm-top {
  opacity: 1;
  transform: none;
}

/* the top row must be gone before the curtain uncovers the page behind it */
.xm-menu.is-closing .xm-top {
  opacity: 0;
  transform: translateY(-8px);
  transition-delay: 0s;
  transition-duration: 0.18s;
}

.xm-logo {
  display: inline-flex;
  line-height: 0;
}

.xm-logo img {
  width: var(--xm-logo-w, clamp(108px, 9vw, 132px));
  height: auto;
}

.xm-close {
  flex: 0 0 auto;
  width: var(--xm-close-w, 52px);
  height: var(--xm-close-h, 52px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(253, 252, 250, 0.42);
  border-radius: 50%;
  background: transparent;
  color: var(--xm-snow);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease,
    color 0.3s ease, transform 0.45s var(--xm-ease-out);
}

.xm-close svg {
  width: 20px;
  height: 20px;
}

.xm-close:hover,
.xm-close:focus-visible {
  background: var(--xm-gold);
  border-color: var(--xm-gold);
  color: var(--xm-ink);
  transform: rotate(90deg);
}

/* -------------------------------- nav ----------------------------------- */
.xm-nav {
  grid-area: nav;
  align-self: center;
  /* "safe" drops back to start-alignment the moment the list is taller than
     its row, so a short landscape viewport scrolls the panel instead of
     bleeding the links up over the logo (overflow above the scrollport can
     never be scrolled back into view) */
  align-self: safe center;
  min-width: 0;
  /* deliberately no min-height:0 - that would zero the row's min-content floor
     and let the links collapse into the panel below them */
}

.xm-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.xm-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 26px);
  width: 100%;
  padding: clamp(2px, 0.5vh, 8px) 0;
  color: var(--xm-snow);
  text-decoration: none;
  transition: transform 0.4s var(--xm-ease-out);
  will-change: transform;
}

.xm-link:hover,
.xm-link:focus-visible {
  transform: translateX(14px);
}

/* word reveal (open) + gold roll (hover) */
.xm-mask {
  display: block;
  overflow: hidden;
  padding: 0.06em 0;
  margin: -0.06em 0;
  min-width: 0;
}

.xm-reveal {
  display: block;
  transform: translateY(115%);
  transition: transform 0.7s var(--xm-ease-out);
  will-change: transform;
}

.xm-menu.is-open .xm-reveal {
  transform: none;
}

.xm-menu.is-open .xm-item:nth-child(1) .xm-reveal { transition-delay: 0.4s; }
.xm-menu.is-open .xm-item:nth-child(2) .xm-reveal { transition-delay: 0.445s; }
.xm-menu.is-open .xm-item:nth-child(3) .xm-reveal { transition-delay: 0.49s; }
.xm-menu.is-open .xm-item:nth-child(4) .xm-reveal { transition-delay: 0.535s; }
.xm-menu.is-open .xm-item:nth-child(5) .xm-reveal { transition-delay: 0.58s; }
.xm-menu.is-open .xm-item:nth-child(6) .xm-reveal { transition-delay: 0.625s; }
.xm-menu.is-open .xm-item:nth-child(7) .xm-reveal { transition-delay: 0.67s; }
.xm-menu.is-open .xm-item:nth-child(8) .xm-reveal { transition-delay: 0.715s; }

.xm-menu.is-closing .xm-reveal {
  transform: translateY(-115%);
  transition-duration: 0.26s;
  transition-delay: 0s;
}

/* The gold hover-face sits one line below its white twin, so rolling the whole
   stack up on close pulled it straight into the mask - the words went gold and
   sat there until the curtain carried them off. Drop it out of the way so the
   mask actually empties. */
.xm-menu.is-closing .xm-face-gold {
  opacity: 0;
}

.xm-roll {
  display: block;
  position: relative;
  transition: transform 0.5s var(--xm-ease-io);
  will-change: transform;
}

.xm-link:hover .xm-roll,
.xm-link:focus-visible .xm-roll {
  transform: translateY(-100%);
}

.xm-face {
  display: block;
  font: 600 clamp(28px, 5.6vh, 56px)/1.12 var(--xm-font-display);
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.xm-face-gold {
  position: absolute;
  top: 100%;
  left: 0;
  color: var(--xm-gold);
}

/* current page (or the section a child page belongs to) stays gold */
.xm-link[aria-current="page"] .xm-face,
.xm-link.is-active .xm-face {
  color: var(--xm-gold);
}

/* ------------------------------- aside ---------------------------------- */
.xm-aside {
  grid-area: aside;
  position: relative;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-left: clamp(0px, 2vw, 40px);
}

.xm-aside > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s ease, transform 0.6s var(--xm-ease-out);
}

.xm-menu.is-open .xm-aside > * {
  opacity: 1;
  transform: none;
}

.xm-menu.is-open .xm-eyebrow { transition-delay: 0.55s; }
.xm-menu.is-open .xm-desc { transition-delay: 0.62s; }
.xm-menu.is-open .xm-cta-row { transition-delay: 0.69s; }

.xm-menu.is-closing .xm-aside > * {
  opacity: 0;
  transition-delay: 0s;
  transition-duration: 0.18s;
}

.xm-eyebrow {
  margin: 0;
  font: 700 13px/1 var(--xm-font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(253, 252, 250, 0.72);
}

.xm-desc {
  margin: 0;
  max-width: 30ch;
  min-height: 4.5em;
  font: 500 clamp(17px, 1.5vw, 21px)/1.5 var(--xm-font-body);
  color: rgba(253, 252, 250, 0.82);
}

.xm-desc.is-swapping {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.xm-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* icon-only WhatsApp circle beside the CTA */
.xm-wa {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--xm-gold);
  border-radius: 50%;
  color: var(--xm-snow);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--xm-ease-out);
}

.xm-wa svg {
  width: 24px;
  height: 24px;
}

.xm-wa:hover,
.xm-wa:focus-visible {
  background: var(--xm-gold);
  color: var(--xm-ink);
  transform: scale(1.06);
}

.xm-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border: 1px solid var(--xm-gold);
  border-radius: 999px;
  background: transparent;
  color: var(--xm-snow);
  font: 700 15px/1 var(--xm-font-body);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--xm-ease-out);
}

.xm-cta:hover,
.xm-cta:focus-visible {
  background: var(--xm-gold);
  color: var(--xm-ink);
  transform: scale(1.04);
}

/* the CTA doubles as the site-wide booking-modal trigger; neutralise the
   legacy .ext-capsule-meet-btn skin (white pill, width 100%, scale hover) */
.xm-cta.ext-capsule-meet-btn {
  width: auto;
  height: auto;
  background: transparent;
  border: 1px solid var(--xm-gold);
  color: var(--xm-snow);
  font: 700 15px/1 var(--xm-font-body);
}

.xm-cta.ext-capsule-meet-btn:hover,
.xm-cta.ext-capsule-meet-btn:focus-visible {
  background: var(--xm-gold);
  border-color: var(--xm-gold);
  color: var(--xm-ink);
  transform: scale(1.04);
}

/* ------------------------------- footer --------------------------------- */
.xm-foot {
  grid-area: foot;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 20px;
  border-top: 1px solid var(--xm-line);
  padding-top: 18px;
  opacity: 0;
  transition: opacity 0.5s ease 0.8s;
}

.xm-menu.is-open .xm-foot {
  opacity: 1;
}

.xm-menu.is-closing .xm-foot {
  opacity: 0;
  transition-delay: 0s;
  transition-duration: 0.18s;
}

.xm-mail {
  color: var(--xm-gold);
  font: 700 clamp(15px, 1.4vw, 18px)/1 var(--xm-font-display);
  text-decoration: none;
}

.xm-mail:hover,
.xm-mail:focus-visible {
  text-decoration: underline;
}

.xm-social {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
}

.xm-social a {
  position: relative;
  color: rgba(253, 252, 250, 0.7);
  font: 600 14px/1 var(--xm-font-body);
  text-decoration: none;
  transition: color 0.2s ease;
}

.xm-social a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--xm-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--xm-ease-out);
}

.xm-social a:hover,
.xm-social a:focus-visible {
  color: var(--xm-gold);
}

.xm-social a:hover::after,
.xm-social a:focus-visible::after {
  transform: scaleX(1);
}

/* ---------------------------- focus rings ------------------------------- */
.xm-menu a:focus-visible,
.xm-menu button:focus-visible {
  outline: 2px solid var(--xm-gold);
  outline-offset: 4px;
}

/* ----------------------------- responsive ------------------------------- */
@media (max-width: 1023px) {
  .xm-inner {
    grid-template-columns: 1fr;
    /* four stacked rows here. The nav keeps the flexible track (with the same
       min-content floor) - spread across four auto tracks instead, the spare
       height inflates the top row and drops the close button off the header's
       line. */
    grid-template-rows: auto minmax(min-content, 1fr) auto auto;
    grid-template-areas:
      "top"
      "nav"
      "aside"
      "foot";
    align-content: stretch;
  }

  .xm-nav {
    align-self: start;
  }

  /* keep the booking CTA + WhatsApp reachable; drop the desktop-only
     description panel */
  .xm-aside {
    align-self: start;
    padding-left: 0;
    gap: 14px;
    margin-bottom: 18px;
  }

  .xm-eyebrow,
  .xm-desc {
    display: none;
  }

  .xm-face {
    font-size: clamp(28px, 5.2vh, 46px);
  }
}

@media (max-width: 640px) {
  .xm-face {
    font-size: clamp(26px, 4.6vh, 38px);
  }

  .xm-link:hover,
  .xm-link:focus-visible {
    transform: translateX(8px);
  }

  .xm-foot {
    flex-direction: column;
    align-items: flex-start;
  }

  .xm-social {
    flex-wrap: wrap;
    gap: 14px 20px;
  }

  .xm-watermark {
    right: -30%;
    bottom: -10%;
    height: 46vh;
  }
}

/* short viewports: tighten the list so 8 items always fit */
@media (max-height: 640px) {
  .xm-face {
    font-size: clamp(22px, 4.8vh, 34px);
  }

  .xm-desc {
    min-height: 0;
  }
}

/* Landscape phones and the like: the panel genuinely scrolls here, and the top
   row stays pinned so the exit is always reachable - so give it something to
   sit on, or the links slide across the logo. Scoped to these heights only:
   at normal sizes the panel never scrolls and a scrim would only flatten the
   gold glow in the corner. */
@media (max-height: 560px) {
  .xm-top::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: calc(0px - var(--xm-pad-l, var(--xm-gutter)));
    right: calc(0px - var(--xm-pad-r, var(--xm-gutter)));
    top: calc(0px - var(--xm-pad-t, 24px));
    bottom: -18px;
    background: linear-gradient(180deg, var(--xm-ink) 0%, var(--xm-ink) 66%, transparent 100%);
    pointer-events: none;
  }
}

/* --------------------------- reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  .xm-sheet,
  .xm-sheet-ink::after,
  .xm-reveal,
  .xm-roll,
  .xm-link,
  .xm-top,
  .xm-aside > *,
  .xm-cta,
  .xm-wa,
  .xm-foot,
  .xm-social a::after,
  .xm-watermark,
  .xm-close {
    transition-duration: 0.01s !important;
    transition-delay: 0s !important;
  }

  .xm-reveal {
    transform: none !important;
  }
}