/* Lightweight interaction layer: intentionally small and consistent with the original design. */
:root {
  --accent: #6f583d;
  --fable-ease: cubic-bezier(.22, 1, .36, 1);
}

html { scroll-padding-top: 96px; }

/* Keep the display serif for the brand, but avoid waiting for a webfont in all UI copy. */
body {
  --font-manrope: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

/* Static export: content never waits for JavaScript before it can be seen. */
[data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.reviews-progress-bar {
  animation: none !important;
  transform: scaleX(1) !important;
}

/* Team portraits share one consistent frame on desktop and mobile. */
@media (min-width: 961px) {
  .team.section { padding-top: 96px; padding-bottom: 116px; }
  .team-grid { margin-top: 64px; gap: 104px; }
  .team-card,
  .team-card.team-card-reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: start !important;
  }
  .team-card figure {
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto !important;
    overflow: hidden;
  }
}

.fable-skip-link {
  position: fixed;
  z-index: 300;
  top: 12px;
  left: 12px;
  padding: 11px 15px;
  border-radius: 8px;
  color: var(--background);
  background: var(--foreground);
  font: 700 11px/1.2 var(--font-manrope), Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: translateY(-170%);
  transition: transform .2s ease;
}

.fable-skip-link:focus { transform: translateY(0); }

.fable-scroll-progress {
  position: fixed;
  z-index: 120;
  inset: 0 0 auto;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--accent);
  pointer-events: none;
  will-change: transform;
}

.fable-back-to-top {
  position: fixed;
  z-index: 65;
  right: 22px;
  bottom: 22px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--foreground);
  background: rgba(242, 238, 231, .94);
  box-shadow: 0 12px 28px rgba(23, 22, 18, .12);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .22s ease, visibility .22s ease, transform .25s var(--fable-ease), background .2s ease;
}

.fable-back-to-top:hover,
.fable-back-to-top:focus-visible {
  color: var(--background);
  background: var(--foreground);
}

.fable-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* The hero must be visible straight away; the film is progressively enhanced afterwards. */
.hero-bg video {
  transform: scale(1.02);
  transition: opacity .35s ease;
}

.fable-video-control {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 999px;
  color: #fff;
  background: rgba(16, 15, 13, .48);
  backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .2s ease, visibility .2s ease, transform .25s var(--fable-ease);
}

.fable-video-control.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.fable-video-control small {
  font: 700 9px/1 var(--font-manrope), Arial, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* One restrained hover language across cards, photos and links. */
.hero .button-light:hover,
.hero .button-light:focus-visible {
  color: var(--background) !important;
  background: var(--foreground) !important;
  border-color: var(--foreground) !important;
}

@media (hover: hover) and (pointer: fine) {
  .service-card,
  .team-card figure,
  .gallery-item,
  .fable-story-ritual {
    transition: transform .32s var(--fable-ease), box-shadow .32s ease, border-color .25s ease;
  }

  .service-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    box-shadow: 0 18px 38px rgba(23, 22, 18, .09);
  }

  .gallery-item img,
  .team-card figure img,
  .story-photo img,
  .fable-story-ritual img {
    transition: transform .6s var(--fable-ease), filter .35s ease;
  }

  .gallery-item:hover img,
  .team-card figure:hover img,
  .story-photo:hover img,
  .fable-story-ritual:hover img {
    transform: scale(1.035);
    filter: saturate(1.03);
  }
}

/* Reviews stay lightweight: only the active quote fades, never the whole section. */
.reviews-card-main { transition: opacity .14s ease, transform .14s ease; }
.reviews-card-main.is-changing { opacity: .3; transform: translateY(4px); }

.reviews-text p {
  max-width: 34ch;
  margin-inline: auto;
  color: #2b2925;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -.005em;
}
.reviews-author strong { letter-spacing: .22em !important; }
.reviews-author span { color: #776f65; }

.reviews-dots {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0 !important;
  width: 440px;
  max-width: none;
}

.reviews-dot {
  position: relative;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.reviews-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: currentColor;
  opacity: .38;
  transform: translate(-50%, -50%);
  transition: width .22s ease, opacity .22s ease;
}

.reviews-dot.reviews-dot-active::after { width: 20px; opacity: 1; }

.fable-review-counter {
  display: none;
  min-width: 74px;
  color: var(--muted-foreground);
  font: 700 10px/1 var(--font-manrope), Arial, sans-serif;
  letter-spacing: .12em;
  text-align: center;
}

/* Gallery lightbox. */
.gallery-item { cursor: zoom-in; }

.gallery-item::after {
  display: none !important;
  content: none !important;
}

.gallery-item:hover::after,
.gallery-item:focus-visible::after { opacity: 1; transform: scale(1); }

.fable-lightbox {
  position: fixed;
  z-index: 220;
  inset: 0;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 62px;
  align-items: center;
  gap: 20px;
  padding: 34px;
  color: #fff;
  background: rgba(14, 13, 11, .93);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}

.fable-lightbox.is-open { opacity: 1; visibility: visible; }

.fable-lightbox__figure {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin: 0;
}

.fable-lightbox__image {
  width: auto;
  max-width: min(80vw, 1120px);
  max-height: 78vh;
  height: auto;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

.fable-lightbox__caption {
  color: rgba(255, 255, 255, .72);
  font-size: 10px;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}

.fable-lightbox__close,
.fable-lightbox__arrow {
  border: 1px solid rgba(255, 255, 255, .34);
  color: #fff;
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
}

.fable-lightbox__arrow {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  font-size: 22px;
}

.fable-lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 22px;
}

body.lightbox-open { overflow: hidden; }

/* A single hospitality detail, kept inside the existing story image on desktop. */
.fable-story-ritual {
  position: absolute;
  z-index: 3;
  bottom: 30px;
  left: -22px;
  width: clamp(124px, 18vw, 184px);
  aspect-ratio: 3 / 4;
  margin: 0;
  padding: 5px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 12px;
  color: #fff;
  background: var(--background);
  box-shadow: 0 16px 35px rgba(26, 21, 14, .22);
}

.fable-story-ritual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(11, 9, 6, .76) 100%);
  pointer-events: none;
}

.fable-story-ritual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
}

.fable-story-ritual figcaption {
  position: absolute;
  z-index: 1;
  right: 14px;
  bottom: 13px;
  left: 14px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.fable-story-ritual figcaption span {
  font: 700 9px/1.3 var(--font-manrope), Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .72;
}

.fable-story-ritual figcaption strong {
  max-width: 130px;
  font-family: var(--font-cormorant), Georgia, serif;
  font-size: clamp(19px, 1.7vw, 25px);
  font-weight: 400;
  line-height: .95;
  text-align: left;
}

.mobile-story-ritual { display: none !important; }

/* Replaces a third-party map frame: no Google request until the visitor asks for it. */
.contact-map-static {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 420px;
  padding: clamp(24px, 4vw, 42px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: #fff;
  background: #29251f;
}

.contact-map-static::before,
.contact-map-static::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.contact-map-static::before {
  inset: -25%;
  opacity: .34;
  background:
    linear-gradient(104deg, transparent 47%, rgba(239, 221, 185, .46) 48%, transparent 49%) 0 0 / 130px 105px,
    linear-gradient(20deg, transparent 47%, rgba(239, 221, 185, .28) 48%, transparent 49%) 0 0 / 105px 130px,
    radial-gradient(circle at 60% 44%, rgba(171, 133, 81, .55) 0 3px, transparent 4px);
  transform: rotate(-7deg);
}

.contact-map-static::after {
  z-index: 0;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 15, 12, .02), rgba(17, 15, 12, .8));
}

.contact-map-static > * { position: relative; z-index: 1; }

.contact-map-kicker {
  margin: 0 0 9px;
  font: 700 10px/1.2 var(--font-manrope), Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .72;
}

.contact-map-static h3 {
  margin: 0 0 18px;
  font-family: var(--font-cormorant), Georgia, serif;
  font-size: clamp(31px, 4vw, 48px);
  font-weight: 400;
  line-height: .95;
}

.contact-map-static a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 260px);
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 999px;
  color: #fff;
  font: 700 10px/1 var(--font-manrope), Arial, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: color .2s ease, background .2s ease;
}

.contact-map-static a:hover,
.contact-map-static a:focus-visible { color: var(--foreground); background: #fff; }

/* Live map: the iframe is lazy-loaded and keeps the same calm card treatment. */
.contact-map-live {
  position: relative;
  min-height: 520px;
  width: min(100%, 760px);
  margin-inline: auto;
  overflow: hidden;
  border-radius: 18px;
  background: #d9d6ce;
}
.contact-map-live iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 520px;
  border: 0;
  filter: saturate(.72) contrast(.96);
}
.contact-map-live::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(20,18,15,.68), rgba(20,18,15,.08) 58%, transparent);
}
.contact-map-live-card {
  position: absolute;
  z-index: 1;
  left: 38px;
  bottom: 38px;
  color: #fff;
}
.contact-map-live-card .contact-map-kicker { color: rgba(255,255,255,.72); }
.contact-map-live-card h3 { margin: 8px 0 20px; color: #fff; }
.contact-map-live-card a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: 188px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 999px;
  color: #fff;
  font: 700 10px/1 var(--font-manrope), Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.contact-map-live-card a:hover,
.contact-map-live-card a:focus-visible { color: var(--foreground); background: #fff; }

.contact-amenity:not(:last-child) { display: none !important; }

/* Contact information already has its own section: keep the photo footer short and purposeful. */
.photo-footer {
  min-height: 760px !important;
  height: 760px;
}

.photo-footer-bg img { object-position: center 24%; }

@media (min-width: 961px) {
  .photo-footer-bg { background: #171513; }
  .photo-footer-bg img { object-fit: cover; object-position: center 24%; }
}

.photo-footer-accordions { display: none !important; }

.photo-footer-logo {
  flex: 1 1 auto !important;
  padding: 52px 20px 24px !important;
}

.photo-footer-bottom {
  margin-top: 0 !important;
  padding-top: 15px !important;
  padding-bottom: calc(15px + env(safe-area-inset-bottom)) !important;
}

/* Polished mobile menu without duplicate controls or background interaction. */
@media (max-width: 960px) {
  .main-nav {
    z-index: 140 !important;
    padding: 0 !important;
    pointer-events: none;
  }

  .main-nav.is-open { pointer-events: auto; }

  .main-nav-backdrop {
    background: rgba(18, 16, 13, .56) !important;
    backdrop-filter: blur(8px);
  }

  .main-nav-sidebar {
    width: min(100%, 430px) !important;
    height: 100svh !important;
    padding: calc(20px + env(safe-area-inset-top)) 26px calc(20px + env(safe-area-inset-bottom)) !important;
    background: var(--background) !important;
    box-shadow: 18px 0 70px rgba(20, 17, 13, .19) !important;
  }

  .main-nav-header {
    min-height: 54px;
    margin: 0 0 clamp(22px, 5vh, 42px) !important;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
  }

  .main-nav-logo { width: 48px !important; height: 48px !important; }

  .main-nav-close {
    display: grid !important;
    place-items: center;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 1px solid var(--border) !important;
    border-radius: 50%;
    color: var(--foreground) !important;
  }

  .main-nav-close:hover,
  .main-nav-close:focus-visible { color: var(--background) !important; background: var(--foreground) !important; }

  .main-nav-links {
    flex: 0 0 auto !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  .main-nav-links > a:not(.nav-booking-mobile) {
    display: grid !important;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    min-height: clamp(52px, 7.5vh, 66px);
    padding: 3px 0 !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--foreground) !important;
    font-family: var(--font-cormorant), Georgia, serif !important;
    font-size: clamp(31px, 8.1vw, 40px) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: -.03em !important;
  }

  .main-nav-links > a:not(.nav-booking-mobile)::after {
    content: "↗";
    display: block !important;
    font: 500 13px/1 var(--font-manrope), Arial, sans-serif;
    opacity: .45;
  }

  .main-nav-links > a:not(.nav-booking-mobile):hover,
  .main-nav-links > a:not(.nav-booking-mobile):focus-visible { color: var(--accent) !important; }

  .main-nav-links .nav-index {
    display: block !important;
    color: var(--accent);
    font: 700 8px/1 var(--font-manrope), Arial, sans-serif;
    letter-spacing: .1em;
  }

  .nav-booking-mobile {
    display: flex !important;
    min-height: 56px !important;
    margin: clamp(22px, 4vh, 32px) 0 0 !important;
    padding: 0 21px !important;
    border: 1px solid var(--foreground) !important;
    border-radius: 999px !important;
    background: var(--foreground) !important;
    color: var(--background) !important;
    justify-content: space-between !important;
    letter-spacing: .13em !important;
  }

  .menu-button.is-open { visibility: hidden; }
  body.nav-open .mobile-booking,
  body.nav-open .fable-back-to-top { opacity: 0 !important; visibility: hidden !important; pointer-events: none; }
}

@media (max-width: 680px) {
  html { scroll-padding-top: 72px; }
  .reviews-text p {
    max-width: 31ch;
    margin-inline: auto;
    color: #2b2925;
    font-size: clamp(1.12rem, 5vw, 1.32rem) !important;
    font-style: italic;
    font-weight: 400 !important;
    line-height: 1.52 !important;
    letter-spacing: -.005em;
  }
  .reviews-author strong { font-size: 10px !important; letter-spacing: .22em !important; }
  .reviews-author span { font-size: 11px !important; color: #776f65; }
  .contact.section { padding-top: 36px !important; padding-bottom: 36px !important; }
  .contact-inner { gap: 24px !important; }
  .team-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 56px !important; }
  .team-card, .team-card.team-card-reverse { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; }
  .team-card figure, .team-card.team-card-reverse figure {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    overflow: hidden;
  }
  .team-card figure img { width: 100%; height: 100%; object-fit: cover; }
  /* The persistent booking button is the only fixed mobile CTA. */
  .fable-back-to-top { display: none !important; }
  /* Arrows plus a compact position counter are calmer than two rows of ten dots. */
  .reviews-dots { display: none; }
  .fable-review-counter { display: inline-block; }
  .fable-video-control { bottom: 18px; }
  .gallery-item::after { display: none !important; content: none !important; }
  .fable-lightbox { grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 5px; padding: 64px 7px 24px; }
  .fable-lightbox__arrow { width: 40px; height: 40px; font-size: 18px; }
  .fable-lightbox__image { max-width: 100%; max-height: 72vh; }
  .fable-story-ritual {
    position: relative;
    left: auto;
    bottom: auto;
    display: block !important;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    margin: 28px 0;
    padding: 0;
    border-radius: 14px;
  }
  .fable-story-ritual img { object-position: center top; }
  .contact-map-static { min-height: 290px; padding: 24px; }
  .contact-map-live { position: relative !important; height: 280px !important; min-height: 280px; margin-bottom: 34px; border-radius: 12px; }
  .contact-map-live iframe { height: 280px; min-height: 280px; }
  .contact-map-live-card { left: 24px; bottom: 24px; }
  .photo-footer { clear: both; min-height: 380px !important; height: 380px; }
  .photo-footer-logo { padding-top: 28px !important; }
}

@media (max-width: 380px), (max-height: 700px) {
  .main-nav-sidebar { padding-top: calc(12px + env(safe-area-inset-top)) !important; }
  .main-nav-header { margin-bottom: 12px !important; padding-bottom: 9px; }
  .main-nav-logo { width: 42px !important; height: 42px !important; }
  .main-nav-links > a:not(.nav-booking-mobile) { min-height: 47px; font-size: 29px !important; }
  .nav-booking-mobile { min-height: 50px !important; margin-top: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}