/*
 * Apple-inspired immersive experience v7
 *
 * A cinematic, product-like presentation for Binissafullet Vell: oversized
 * type, full-bleed photography, calm glass surfaces and short, purposeful
 * motion. It deliberately avoids scroll-jacking, ornamental noise and heavy
 * effects so the house and its images remain the product.
 */

:root {
  --apple-paper: #f5f4ef;
  --apple-paper-warm: #ece9e1;
  --apple-surface: #fffefa;
  --apple-surface-soft: rgb(255 254 250 / 76%);
  --apple-ink: #102a24;
  --apple-ink-soft: rgb(16 42 36 / 68%);
  --apple-night: #0b201b;
  --apple-night-soft: #132f28;
  --apple-gold: #c8915e;
  --apple-line: rgb(16 42 36 / 11%);
  --apple-line-light: rgb(255 255 255 / 16%);
  --apple-radius-media: clamp(1.5rem, 2.5vw, 2.25rem);
  --apple-radius-panel: clamp(1.25rem, 2vw, 1.75rem);
  --apple-radius-control: 999px;
  --apple-shadow-media: 0 32px 90px rgb(5 24 19 / 14%);
  --apple-shadow-panel: 0 20px 55px rgb(5 24 19 / 8%);
  --apple-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --apple-ease-ui: cubic-bezier(0.2, 0.72, 0.2, 1);
  --apple-ui-speed: 220ms;
  --apple-reveal-speed: 460ms;
  --apple-section: clamp(6rem, 10vw, 10rem);
}

html {
  background: var(--apple-paper);
  scroll-padding-top: 6rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--apple-paper) !important;
  color: var(--apple-ink);
}

body::before,
body::after {
  display: none !important;
}

.container {
  max-width: 88rem !important;
}

:is(
    .home-hero-content,
    .premium-hero-inner,
    .interior-page-lead,
    .luxury-signature,
    .luxury-review-suite,
    .como-included-suite,
    .room-collection,
    .contact-suite,
    .contact-form-suite,
    .checkin-prep-suite,
    .guide-page
  ) p {
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.7 !important;
}

:is(
    .finca-kicker,
    .premium-hero-kicker,
    .guide-kicker,
    .guide-hero-kicker,
    .interior-page-lead [class*="tracking-"],
    .luxury-page [class*="tracking-"],
    .room-collection [class*="tracking-"]
  ) {
  font-size: 0.72rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.13em !important;
}

/* Keep the management apps stable: the immersive rules below are semantic. */
html[data-page="requests"] body,
html[data-page="proposal-admin"] body {
  background: var(--premium-paper) !important;
}

/* Glass navigation with a fixed footprint: no layout shift while scrolling. */
html:not([data-page="requests"]):not([data-page="proposal-admin"]) header {
  min-height: 4.75rem;
  padding-bottom: 0.72rem !important;
  padding-top: 0.72rem !important;
  transition:
    background-color var(--apple-ui-speed) ease,
    border-color var(--apple-ui-speed) ease,
    color var(--apple-ui-speed) ease !important;
}

html:not([data-page="requests"]):not([data-page="proposal-admin"])
  header[class*="bg-primary"] {
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  background: rgb(8 29 24 / 82%) !important;
  border-bottom: 1px solid rgb(255 255 255 / 13%) !important;
  box-shadow: none !important;
}

html:not([data-page="requests"]):not([data-page="proposal-admin"])
  header:not([class*="bg-primary"]) {
  background: linear-gradient(180deg, rgb(5 19 15 / 42%), transparent) !important;
  border-bottom: 1px solid transparent !important;
}

header::after {
  display: none !important;
}

.site-nav-brand > span:first-child {
  font-weight: 600 !important;
  letter-spacing: -0.045em !important;
}

.site-nav-brand > span:last-child {
  font-size: 0.59rem !important;
  letter-spacing: 0.18em !important;
}

.site-nav-language {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgb(255 255 255 / 8%) !important;
  border-color: rgb(255 255 255 / 16%) !important;
  border-radius: var(--apple-radius-control) !important;
}

.site-nav-language > button,
header nav > div > div[class*="md:hidden"] > button:last-child {
  border-radius: var(--apple-radius-control) !important;
}

/* Home: one cinematic first impression, with the typography doing the work. */
.home-hero,
.ssg-home-shell .ssg-hero {
  background-color: var(--apple-night) !important;
  min-height: 100svh !important;
}

.home-hero::before,
.home-hero::after {
  display: none !important;
}

.home-hero-shade,
.ssg-home-shell .ssg-hero::after {
  background:
    linear-gradient(90deg, rgb(4 17 13 / 78%) 0%, rgb(4 17 13 / 40%) 42%, rgb(4 17 13 / 9%) 72%),
    linear-gradient(180deg, rgb(4 17 13 / 34%) 0%, transparent 45%, rgb(4 17 13 / 66%) 100%) !important;
}

.home-hero-content {
  max-width: 88rem !important;
}

.home-hero .hero-copy-reveal-title,
.ssg-home-shell .ssg-title {
  font-family: "Playfair Display", serif !important;
  font-size: clamp(5rem, 10.5vw, 10.5rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.052em !important;
  line-height: 0.86 !important;
  text-shadow: 0 22px 70px rgb(0 0 0 / 28%) !important;
}

.home-hero .hero-copy-reveal-title > span {
  color: #efbf8d !important;
  font-family: "Playfair Display", serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.052em !important;
}

.home-hero .hero-copy-reveal-kicker,
.ssg-home-shell .ssg-eyebrow {
  font-size: 0.72rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.15em !important;
}

.home-hero .hero-copy-reveal-body,
.ssg-home-shell .ssg-copy {
  max-width: 39rem !important;
}

.home-hero .hero-copy-reveal-body p,
.ssg-home-shell .ssg-copy {
  color: rgb(255 255 255 / 84%) !important;
  font-size: clamp(1.04rem, 1.45vw, 1.25rem) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.62 !important;
}

.home-hero-ledger {
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  background: rgb(8 29 24 / 28%) !important;
  border: 1px solid rgb(255 255 255 / 14%) !important;
  border-radius: var(--apple-radius-control) !important;
  display: none !important;
  padding: 0.72rem 1.25rem !important;
}

.home-hero-ledger-item {
  font-size: 0.63rem !important;
  letter-spacing: 0.13em !important;
}

.ssg-home-shell .ssg-facts {
  display: none !important;
}

/* Internal heroes become immersive editorial covers. */
.premium-page-hero {
  align-items: flex-end;
  display: flex;
  min-height: 84svh !important;
  padding-bottom: clamp(4rem, 8vw, 7.5rem) !important;
  padding-top: 9rem !important;
}

.premium-page-hero::before,
.premium-page-hero::after {
  display: none !important;
}

.premium-hero-media::after {
  background:
    linear-gradient(90deg, rgb(5 20 16 / 67%), rgb(5 20 16 / 10%) 72%),
    linear-gradient(180deg, rgb(5 20 16 / 28%), transparent 45%, rgb(5 20 16 / 66%));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.premium-hero-media > div:last-child {
  opacity: 0.35 !important;
}

.premium-hero-inner {
  margin-left: 0 !important;
  max-width: 76rem !important;
  text-align: left !important;
}

.premium-hero-kicker {
  margin-bottom: 1.75rem !important;
}

.premium-hero-kicker > span:first-child,
.premium-hero-kicker > span:last-child {
  display: none;
}

.premium-hero-title,
.guide-hero-title,
.interior-page-lead h1 {
  font-family: "Playfair Display", serif !important;
  font-size: clamp(3.75rem, 7.7vw, 8.25rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.072em !important;
  line-height: 0.9 !important;
  margin-left: 0 !important;
  max-width: 12ch !important;
}

.premium-hero-title > span,
.guide-hero-title > span,
.interior-page-lead h1 > span {
  font-family: "Playfair Display", serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.04em !important;
}

.premium-hero-copy {
  margin-left: 0 !important;
  max-width: 43rem !important;
}

[data-ssg-shell]:not(.ssg-home-shell) .ssg-hero {
  align-items: flex-end !important;
  min-height: 76svh !important;
  padding-bottom: clamp(4rem, 8vw, 7rem) !important;
  padding-top: 9rem !important;
}

[data-ssg-shell]:not(.ssg-home-shell) .ssg-hero::after {
  background:
    linear-gradient(90deg, rgb(5 20 16 / 70%), rgb(5 20 16 / 12%) 74%),
    linear-gradient(180deg, rgb(5 20 16 / 26%), transparent 44%, rgb(5 20 16 / 68%)) !important;
}

[data-ssg-shell]:not(.ssg-home-shell) .ssg-container {
  margin-left: max(var(--premium-gutter), calc((100vw - 88rem) / 2 + var(--premium-gutter)));
  margin-right: var(--premium-gutter);
  width: auto !important;
}

[data-ssg-shell]:not(.ssg-home-shell) .ssg-title {
  font-family: "Playfair Display", serif !important;
  font-size: clamp(3.75rem, 7.7vw, 8.25rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.072em !important;
  line-height: 0.9 !important;
  max-width: 12ch !important;
}

[data-ssg-shell]:not(.ssg-home-shell) .ssg-copy {
  font-size: clamp(1rem, 1.25vw, 1.16rem) !important;
  line-height: 1.7 !important;
  max-width: 43rem !important;
}

/* Full, quiet chapters: visual rhythm instead of decorative separators. */
:is(
    .luxury-signature,
    .luxury-review-suite,
    .como-included-suite,
    .luxury-final-cta,
    .contact-suite,
    .contact-form-suite,
    .checkin-prep-suite,
    .guide-section
  ) {
  padding-bottom: var(--apple-section) !important;
  padding-top: var(--apple-section) !important;
}

:is(
    .luxury-signature,
    .luxury-review-suite,
    .como-included-suite,
    .luxury-final-cta,
    .contact-suite,
    .contact-form-suite,
    .checkin-prep-suite,
    .guide-section
  )::before,
:is(
    .luxury-signature,
    .luxury-review-suite,
    .como-included-suite,
    .luxury-final-cta,
    .contact-suite,
    .contact-form-suite,
    .checkin-prep-suite,
    .guide-section
  )::after {
  opacity: 0 !important;
}

@media (min-width: 1024px) {
  :is(.luxury-signature, .luxury-review-suite, .como-included-suite) {
    align-items: center;
    display: flex;
    min-height: 100svh;
  }

  :is(.luxury-signature, .luxury-review-suite, .como-included-suite) > .container {
    width: 100%;
  }
}

/* Trust facts read like a product specification, not another card. */
.finca-ledger-strip {
  background: var(--apple-paper) !important;
  padding: clamp(4rem, 7vw, 6.5rem) 0 !important;
}

.finca-ledger-shell {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.finca-ledger-row {
  border-bottom: 1px solid var(--apple-line);
  min-height: 3.1rem;
}

.finca-ledger-row:last-child {
  border-bottom: 0;
}

.finca-ledger-rule,
.finca-ledger-stamp {
  display: none !important;
}

.finca-ledger-number {
  color: rgb(16 42 36 / 28%) !important;
}

/* The story: one image, one message, no template-like collage. */
.luxury-signature {
  background: var(--apple-night) !important;
  color: white !important;
}

.luxury-signature > .container > .grid {
  gap: clamp(3rem, 7vw, 7rem) !important;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr) !important;
}

.luxury-signature h2 {
  font-size: clamp(3.4rem, 6vw, 6.75rem) !important;
  letter-spacing: -0.052em !important;
  line-height: 0.91 !important;
}

.luxury-signature-stage {
  display: grid !important;
  gap: 1.25rem;
  min-height: 0 !important;
}

.luxury-signature-float,
.luxury-signature-stage::before,
.luxury-signature-stage::after {
  display: none !important;
}

.luxury-signature-main {
  aspect-ratio: 4 / 3 !important;
  inset: auto !important;
  max-width: none !important;
  position: relative !important;
  width: 100% !important;
}

.luxury-signature-main,
.luxury-signature-main img {
  border-radius: var(--apple-radius-media) !important;
}

.luxury-signature-main img {
  transform: none !important;
}

.luxury-signature-badge {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-top: 1px solid var(--apple-line-light) !important;
  bottom: auto !important;
  box-shadow: none !important;
  color: white !important;
  left: auto !important;
  max-width: none !important;
  padding: 1.25rem 0 0 !important;
  position: relative !important;
  right: auto !important;
}

.luxury-signature-badge :is(p, span) {
  color: rgb(255 255 255 / 76%) !important;
}

.luxury-signature-badge p:nth-of-type(1) {
  color: white !important;
}

/* What is included: three large photographic product tiles. */
.como-included-suite {
  background: var(--apple-paper) !important;
}

.como-included-suite > .container > div:first-child {
  border-top: 0 !important;
  display: block !important;
  margin: 0 auto;
  max-width: 68rem;
  padding-top: 0 !important;
  text-align: center;
}

.como-included-suite > .container > div:first-child p {
  margin: 2rem auto 0 !important;
}

.como-included-suite h2 {
  font-family: "Playfair Display", serif !important;
  font-size: clamp(3.5rem, 6.5vw, 7rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.068em !important;
  line-height: 0.9 !important;
  margin-left: auto;
  margin-right: auto;
  max-width: 12ch !important;
}

.como-included-suite h2 > span {
  font-family: "Playfair Display", serif !important;
  font-weight: 500 !important;
}

.como-included-suite .grid:has(> .como-included-card) {
  gap: clamp(1rem, 2vw, 1.5rem) !important;
  margin-top: clamp(3rem, 6vw, 5.5rem) !important;
}

.como-included-card {
  border-radius: var(--apple-radius-panel) !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  min-height: 32rem !important;
}

.como-included-card::before,
.como-included-card::after {
  display: none !important;
}

.como-included-card .como-included-image,
.como-included-card .como-included-image img {
  height: 100% !important;
}

.como-included-card .como-included-image img {
  transform: none !important;
  transition: transform 700ms var(--apple-ease) !important;
}

.como-included-copy {
  background: linear-gradient(180deg, transparent 25%, rgb(5 20 16 / 84%) 100%) !important;
  padding: clamp(1.5rem, 3vw, 2.25rem) !important;
}

.como-included-number {
  display: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .como-included-card:hover .como-included-image img {
    transform: scale(1.018) !important;
  }
}

/* Reviews: the single dark product chapter. */
.luxury-review-suite {
  background: var(--apple-night) !important;
}

.luxury-review-suite h2 {
  font-size: clamp(3.45rem, 5.8vw, 6.5rem) !important;
  letter-spacing: -0.052em !important;
  line-height: 0.92 !important;
}

.luxury-review-card {
  background: rgb(255 255 255 / 6%) !important;
  border: 1px solid rgb(255 255 255 / 13%) !important;
  border-radius: var(--apple-radius-panel) !important;
  box-shadow: none !important;
  transition: border-color var(--apple-ui-speed) ease !important;
}

.luxury-review-card:hover {
  border-color: rgb(255 255 255 / 26%) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Rooms: three oversized product panels with photography first. */
.room-collection {
  background: var(--apple-paper) !important;
  padding-bottom: var(--apple-section) !important;
  padding-top: clamp(8rem, 12vw, 11rem) !important;
}

.room-collection::before,
.room-collection::after {
  display: none !important;
}

.room-collection .interior-page-lead {
  border: 0 !important;
  margin: 0 auto clamp(4rem, 8vw, 7rem) !important;
  max-width: 72rem;
  padding: 0 !important;
  text-align: center;
}

.room-collection .interior-page-lead > .grid {
  align-items: center !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: center !important;
}

.room-collection .interior-page-lead > .grid > div:first-child {
  width: 100%;
}

.room-collection .interior-page-lead > .grid > div:last-child {
  justify-self: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 48rem !important;
  text-align: center !important;
  width: 100%;
}

.room-collection .interior-page-lead h1 {
  margin-left: auto !important;
  margin-right: auto !important;
}

.room-collection .interior-page-lead p {
  margin: 2rem auto 0 !important;
  max-width: 48rem !important;
  text-align: center !important;
}

.room-collection .interior-page-lead div[class*="flex-wrap"] {
  justify-content: center !important;
}

.room-collection > .container > .grid:last-child {
  gap: clamp(2rem, 4vw, 3.5rem) !important;
}

.luxury-room-row {
  background: var(--apple-surface) !important;
  border: 1px solid rgb(16 42 36 / 7%);
  border-radius: var(--apple-radius-media);
  box-shadow: 0 12px 45px rgb(5 24 19 / 6%);
  gap: clamp(2rem, 4vw, 4rem) !important;
  overflow: clip;
  padding: clamp(0.75rem, 1.5vw, 1.25rem);
}

.luxury-room-gallery {
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  min-height: 0 !important;
}

.luxury-room-gallery > .group,
.luxury-room-gallery img {
  border-radius: calc(var(--apple-radius-media) - 0.55rem) !important;
}

.luxury-room-gallery img {
  transform: none !important;
}

.luxury-room-gallery > .group > div[class*="top-6"],
.luxury-room-gallery > .group > button {
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  border-radius: var(--apple-radius-control) !important;
}

.luxury-room-copy {
  background: transparent !important;
  border: 0 !important;
  padding: clamp(1.25rem, 3vw, 3.25rem) clamp(1rem, 2.5vw, 2.5rem) !important;
}

.luxury-room-copy::before {
  display: none !important;
}

.room-index {
  color: rgb(16 42 36 / 35%) !important;
  font-family: "Playfair Display", serif !important;
  font-size: 0.72rem !important;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.luxury-room-copy h2 {
  font-family: "Playfair Display", serif !important;
  font-size: clamp(2.7rem, 4.4vw, 4.4rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.062em !important;
  line-height: 0.94 !important;
}

.luxury-room-copy > div[class*="grid-cols-2"] {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  gap: 0 !important;
}

.luxury-room-copy > div[class*="grid-cols-2"] > div {
  background: transparent !important;
  border-bottom: 1px solid var(--apple-line);
  min-height: 4rem !important;
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
}

/* Large, soft surfaces across secondary pages. */
:is(
    .premium-surface,
    .luxury-card,
    .contact-care-card,
    .luxury-contact-overview,
    .checkin-step-card,
    .checkin-arrival-bar,
    .guide-card,
    .guide-dark-card,
    .guide-intro-card,
    .guide-honest-panel,
    .guide-private-card
  ) {
  border-radius: var(--apple-radius-panel) !important;
}

:is(
    .premium-surface,
    .luxury-card,
    .contact-care-card,
    .luxury-contact-overview,
    .checkin-step-card,
    .guide-card,
    .guide-intro-card,
    .guide-honest-panel,
    .guide-private-card
  ) {
  background: var(--apple-surface-soft) !important;
  border: 1px solid var(--apple-line) !important;
  box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
  :is(.premium-surface, .luxury-card, .contact-care-card, .checkin-step-card, .guide-card):hover {
    border-color: rgb(16 42 36 / 20%) !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

/* Booking becomes a light concierge surface rather than a dense widget. */
.luxury-booking-shell {
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
  background: rgb(255 254 250 / 74%) !important;
  border: 1px solid rgb(255 255 255 / 62%) !important;
  border-radius: var(--apple-radius-panel) !important;
  box-shadow: var(--apple-shadow-panel) !important;
  padding: 0.28rem !important;
}

.luxury-booking-form {
  background: transparent !important;
  border-radius: calc(var(--apple-radius-panel) - 0.28rem) !important;
}

.booking-field {
  min-height: 4.65rem !important;
}

.booking-field > span:first-child {
  background: rgb(16 42 36 / 5%) !important;
  border: 1px solid rgb(16 42 36 / 8%) !important;
  box-shadow: none !important;
  color: rgb(16 42 36 / 74%) !important;
}

:is(.luxury-cta, .booking-submit-panel button) {
  border-radius: var(--apple-radius-control) !important;
  box-shadow: none !important;
  letter-spacing: 0.085em !important;
  transition:
    background-color var(--apple-ui-speed) ease,
    color var(--apple-ui-speed) ease,
    transform 120ms ease !important;
}

:is(.luxury-cta, .booking-submit-panel button):active {
  transform: scale(0.985) !important;
}

:is([role="dialog"], .contact-form-suite, .guide-private-card)
  :is(input, select, textarea) {
  background: rgb(255 255 255 / 84%) !important;
  border: 1px solid rgb(16 42 36 / 13%) !important;
  border-radius: 0.9rem !important;
  min-height: 3.55rem;
  transition:
    border-color var(--apple-ui-speed) ease,
    box-shadow var(--apple-ui-speed) ease !important;
}

:is([role="dialog"], .contact-form-suite, .guide-private-card)
  :is(input, select, textarea):focus {
  border-color: rgb(16 42 36 / 42%) !important;
  box-shadow: 0 0 0 4px rgb(16 42 36 / 8%) !important;
}

[role="dialog"] {
  border-radius: clamp(1.5rem, 3vw, 2.25rem) !important;
  box-shadow: 0 34px 100px rgb(4 17 13 / 24%) !important;
}

/* A centred, grouped guest selector with calm hotel-console proportions. */
.booking-guests-popover {
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  backdrop-filter: blur(22px) saturate(135%);
  background: rgb(255 254 250 / 94%) !important;
  border: 1px solid rgb(16 42 36 / 12%) !important;
  border-radius: 1.55rem !important;
  box-shadow:
    0 26px 72px rgb(5 24 19 / 16%),
    inset 0 1px 0 rgb(255 255 255 / 82%) !important;
  max-height: min(70dvh, 36rem);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0.62rem !important;
  width: min(22rem, calc(100vw - 2rem)) !important;
}

.booking-guests-popover-inner {
  background: rgb(16 42 36 / 3.5%);
  border: 1px solid rgb(16 42 36 / 8%);
  border-radius: 1.15rem;
  overflow: hidden;
}

.booking-guests-popover-inner > * {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

.booking-guests-popover .guest-counter-row {
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  column-gap: 0.75rem;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 9rem;
  min-height: 4.35rem;
  padding: 0.62rem 0.62rem 0.62rem 1rem !important;
  width: 100%;
}

.booking-guests-popover
  > .booking-guests-popover-inner
  > .guest-counter-row:first-child {
  padding-right: 0.62rem !important;
}

.booking-guests-popover .guest-counter-row + .guest-counter-row {
  border-top: 1px solid rgb(16 42 36 / 8%) !important;
}

.booking-guests-popover .guest-counter-row > span:first-child,
.booking-guests-popover .guest-age-fields legend {
  color: rgb(16 42 36 / 68%) !important;
  font-family: "Playfair Display", serif !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
}

.booking-guests-popover .guest-counter-controls {
  background: rgb(255 255 255 / 76%);
  border: 1px solid rgb(16 42 36 / 9%);
  border-radius: var(--apple-radius-control);
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgb(5 24 19 / 5%);
  gap: 0.2rem !important;
  justify-content: space-between;
  justify-self: end;
  padding: 0.2rem;
  width: 9rem;
}

.booking-guests-popover .guest-counter-button {
  background: transparent !important;
  border: 0 !important;
  color: var(--apple-ink) !important;
  height: 2.5rem !important;
  min-height: 2.5rem !important;
  min-width: 2.5rem !important;
  transition:
    background-color var(--apple-ui-speed) var(--apple-ease-ui),
    color var(--apple-ui-speed) var(--apple-ease-ui),
    transform 120ms ease !important;
  width: 2.5rem !important;
}

.booking-guests-popover .guest-counter-button:active {
  transform: scale(0.92);
}

.booking-guests-popover .guest-counter-button:disabled {
  color: rgb(16 42 36 / 26%) !important;
  opacity: 1 !important;
}

.booking-guests-popover .guest-counter-value {
  color: var(--apple-ink) !important;
  font-family: "Playfair Display", serif !important;
  font-size: 0.92rem !important;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  width: 1.7rem !important;
}

.booking-guests-popover .guest-age-fields {
  border-color: rgb(16 42 36 / 8%) !important;
  margin: 0 !important;
  padding: 0.9rem 1rem 1rem !important;
}

.booking-guests-popover .guest-age-fields legend {
  padding: 0 0.25rem !important;
}

.booking-guests-popover .guest-age-grid {
  gap: 0.55rem !important;
  margin-top: 0.65rem !important;
}

.booking-guests-popover .guest-age-grid label {
  color: rgb(16 42 36 / 58%) !important;
  font-family: "Playfair Display", serif !important;
  font-size: 0.64rem !important;
  font-weight: 650 !important;
}

.booking-guests-popover .guest-age-select {
  background-color: rgb(255 255 255 / 84%) !important;
  border-color: rgb(16 42 36 / 10%) !important;
  border-radius: 0.82rem !important;
  color: var(--apple-ink) !important;
  font-family: "Playfair Display", serif !important;
  min-height: 3rem !important;
}

@media (hover: hover) and (pointer: fine) {
  .booking-guests-popover .guest-counter-button:not(:disabled):hover {
    background: var(--apple-ink) !important;
    color: #fff !important;
  }
}

/* Contact and check-in retain operational clarity with a calmer visual frame. */
:is(.contact-suite, .contact-form-suite, .checkin-prep-suite) {
  background: var(--apple-paper) !important;
}

.contact-care-strip {
  background: var(--apple-paper-warm) !important;
}

.checkin-arrival-bar {
  background: var(--apple-night) !important;
  border-color: var(--apple-line-light) !important;
}

.checkin-visual,
.guide-image-plate,
.luxury-image-frame {
  border-radius: var(--apple-radius-media) !important;
  box-shadow: var(--apple-shadow-media) !important;
}

.guide-nav-pill {
  border-radius: var(--apple-radius-control) !important;
  letter-spacing: 0.085em !important;
}

.guide-hero-note {
  -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
  backdrop-filter: blur(16px) saturate(125%) !important;
  background: rgb(7 24 20 / 58%) !important;
  border-color: rgb(255 255 255 / 16%) !important;
  border-radius: var(--apple-radius-panel) !important;
  box-shadow: none !important;
}

.guide-hero-ledger {
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  background: rgb(7 24 20 / 36%) !important;
  border-color: rgb(255 255 255 / 15%) !important;
  border-radius: 1.1rem !important;
  gap: 1px !important;
  overflow: hidden;
}

.guide-hero-ledger > button {
  background: rgb(255 255 255 / 5%) !important;
  min-height: 5.25rem !important;
}

/* Closing gesture: almost no chrome, only a very clear invitation. */
.luxury-final-cta {
  background: var(--apple-paper) !important;
}

.finca-contact-letter {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.finca-contact-letter h2 {
  font-family: "Playfair Display", serif !important;
  font-size: clamp(3.4rem, 6vw, 6.75rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.067em !important;
  line-height: 0.9 !important;
}

.finca-contact-letter h2 > span {
  font-family: "Playfair Display", serif !important;
  font-weight: 500 !important;
}

.finca-contact-line {
  border-color: var(--apple-line) !important;
  transition:
    border-color var(--apple-ui-speed) ease,
    color var(--apple-ui-speed) ease !important;
}

.finca-contact-line:hover {
  border-color: rgb(16 42 36 / 26%) !important;
  transform: none !important;
}

.finca-contact-line .finca-contact-value-email {
  font-family: "Playfair Display", serif !important;
  font-weight: 500 !important;
}

.site-footer {
  background: var(--apple-night) !important;
  border-top: 0 !important;
  padding-bottom: clamp(2.75rem, 5vw, 4.5rem) !important;
  padding-top: clamp(5rem, 9vw, 8rem) !important;
}

.site-footer h2 {
  font-family: "Playfair Display", serif !important;
  font-size: clamp(3rem, 6vw, 6.25rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.04em !important;
}

.site-footer h2 > span {
  font-family: "Playfair Display", serif !important;
  font-weight: 500 !important;
}

.site-footer
  > .container
  > div[class~="md:grid-cols-12"]
  > div:nth-child(2) {
  display: none !important;
}

@media (min-width: 768px) {
  .site-footer > .container > div[class~="md:grid-cols-12"] {
    grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 0.6fr) !important;
  }

  .site-footer
    > .container
    > div[class~="md:grid-cols-12"]
    > :is(div:first-child, div:last-child) {
    grid-column: auto !important;
  }
}

/* Motion tuning: quick, soft and content-led. */
.premium-reveal {
  transition:
    opacity var(--apple-reveal-speed) var(--apple-ease),
    transform var(--apple-reveal-speed) var(--apple-ease) !important;
}

.premium-reveal:not(.is-visible) {
  transform: translate3d(0, 12px, 0) !important;
}

:is(
    .luxury-room-gallery img,
    .luxury-signature-main img,
    .como-included-card img,
    .premium-hero-image
  ) {
  transition-duration: 650ms !important;
  transition-timing-function: var(--apple-ease) !important;
}

/* Initial HTML shell and hydrated application share the same first frame. */
.ssg-section {
  background: var(--apple-paper) !important;
  border-top: 0 !important;
  padding: var(--apple-section) 0 !important;
}

.ssg-grid {
  gap: 1rem !important;
}

.ssg-card {
  background: var(--apple-surface) !important;
  border: 1px solid var(--apple-line) !important;
  border-radius: var(--apple-radius-panel) !important;
  box-shadow: none !important;
  padding: clamp(1.5rem, 3vw, 2.5rem) !important;
}

/* Mobile: full-screen first impression, tactile horizontal stories. */
@media (max-width: 767px) {
  :root {
    --apple-section: 5.25rem;
    --premium-gutter: 1.15rem;
  }

  html {
    scroll-padding-top: 4.75rem;
  }

  html:not([data-page="requests"]):not([data-page="proposal-admin"]) header {
    min-height: 4.35rem;
  }

  html:not([data-page="requests"]):not([data-page="proposal-admin"])
    header[class*="bg-primary"] {
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    background: rgb(8 29 24 / 92%) !important;
  }

  .home-hero,
  .ssg-home-shell .ssg-hero {
    min-height: 100svh !important;
  }

  .home-hero-shade,
  .ssg-home-shell .ssg-hero::after {
    background: linear-gradient(
      180deg,
      rgb(4 17 13 / 46%) 0%,
      rgb(4 17 13 / 8%) 38%,
      rgb(4 17 13 / 85%) 100%
    ) !important;
  }

  .home-hero-content {
    padding-bottom: 5rem !important;
  }

  .home-hero .hero-copy-reveal-title,
  .ssg-home-shell .ssg-title {
    font-size: clamp(3.75rem, 16vw, 5.25rem) !important;
    letter-spacing: -0.07em !important;
    line-height: 0.86 !important;
  }

  .home-hero-ledger {
    display: none !important;
  }

  .premium-page-hero {
    min-height: 76svh !important;
    padding-bottom: 3.75rem !important;
    padding-top: 7.5rem !important;
  }

  .premium-hero-title,
  .guide-hero-title,
  .interior-page-lead h1 {
    font-size: clamp(3.2rem, 14vw, 4.9rem) !important;
    letter-spacing: -0.066em !important;
  }

  .premium-hero-copy {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  [data-ssg-shell]:not(.ssg-home-shell) .ssg-hero {
    min-height: 72svh !important;
    padding-bottom: 3.75rem !important;
    padding-top: 7.5rem !important;
  }

  [data-ssg-shell]:not(.ssg-home-shell) .ssg-container {
    margin-left: var(--premium-gutter);
    margin-right: var(--premium-gutter);
  }

  [data-ssg-shell]:not(.ssg-home-shell) .ssg-title {
    font-size: clamp(3.2rem, 14vw, 4.9rem) !important;
  }

  .luxury-signature > .container > .grid {
    display: grid !important;
    gap: 3.25rem !important;
    grid-template-columns: 1fr !important;
  }

  .luxury-signature h2,
  .luxury-review-suite h2,
  .como-included-suite h2,
  .finca-contact-letter h2 {
    font-size: clamp(3rem, 13vw, 4.6rem) !important;
  }

  .luxury-signature-main {
    aspect-ratio: 4 / 5 !important;
  }

  .como-included-suite .grid:has(> .como-included-card) {
    display: grid !important;
    gap: 0.9rem !important;
    grid-auto-columns: min(84vw, 23rem);
    grid-auto-flow: column;
    grid-template-columns: none !important;
    margin-left: calc(var(--premium-gutter) * -1);
    margin-right: calc(var(--premium-gutter) * -1);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 0 var(--premium-gutter) 1rem;
    scroll-padding-inline: var(--premium-gutter);
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .como-included-suite .grid:has(> .como-included-card)::-webkit-scrollbar {
    display: none;
  }

  .como-included-card {
    min-height: 31rem !important;
    scroll-snap-align: center;
  }

  .luxury-room-row {
    border-radius: 1.45rem !important;
    padding: 0.62rem !important;
  }

  .luxury-room-gallery,
  .luxury-room-gallery > .group,
  .luxury-room-gallery img {
    border-radius: 1rem !important;
  }

  .luxury-room-copy {
    border-top: 0 !important;
    padding: 1.65rem 0.75rem 1.25rem !important;
  }

  .luxury-room-copy h2 {
    font-size: clamp(2.65rem, 11vw, 3.65rem) !important;
  }

  .luxury-booking-shell {
    border-radius: 1.2rem !important;
  }

  .booking-field {
    min-height: 4.25rem !important;
  }

  [role="dialog"] {
    border-radius: 1.5rem !important;
  }

  [aria-label$="WhatsApp"] {
    border-radius: 50% !important;
    box-shadow: 0 14px 36px rgb(8 50 35 / 20%) !important;
  }
}

@media (max-width: 380px) {
  .home-hero .hero-copy-reveal-title,
  .ssg-home-shell .ssg-title {
    font-size: 3.55rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  .premium-reveal,
  .premium-reveal:not(.is-visible),
  .hero-copy-reveal,
  .ssg-home-shell :is(.ssg-eyebrow, .ssg-title, .ssg-copy, .ssg-facts),
  :is(
      .luxury-room-gallery img,
      .luxury-signature-main img,
      .como-included-card img,
      .premium-hero-image
    ) {
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .home-hero video,
  .ssg-home-shell .ssg-hero video {
    display: none !important;
  }
}

html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 1ms !important;
}

html[data-motion="reduced"] :is(.home-hero, .ssg-home-shell .ssg-hero) video {
  display: none !important;
}

html[data-motion="touch"]
  header[class*="bg-primary"],
html[data-motion="touch"] .luxury-booking-shell {
  -webkit-backdrop-filter: blur(9px) saturate(115%);
  backdrop-filter: blur(9px) saturate(115%);
}

/* Editorial type for content; the interface type is restored below for controls. */
html body,
html body #root,
html body #root :not(svg, svg *),
html body > :not(#root),
html body > :not(#root) :not(svg, svg *) {
  font-family: "Playfair Display", serif !important;
}

/*
 * Interactive typography
 * Plus Jakarta Sans keeps every action crisp and consistent, including
 * nested labels and controls rendered in portals outside #root.
 */
html body #root :is(button, [role="button"]),
html body #root :is(button, [role="button"]) :not(svg, svg *),
html body > :not(#root) :is(button, [role="button"]),
html body > :not(#root) :is(button, [role="button"]) :not(svg, svg *),
html body #root a:is(.luxury-cta, .guide-nav-pill),
html body #root a:is(.luxury-cta, .guide-nav-pill) :not(svg, svg *),
html body #root a[class~="inline-flex"][class~="rounded-full"],
html body #root a[class~="inline-flex"][class~="rounded-full"] :not(svg, svg *) {
  font-family: "Plus Jakarta Sans", sans-serif !important;
}

/* The wordmark is an identity element even though it is implemented as a button. */
html body #root button.site-nav-brand,
html body #root button.site-nav-brand :not(svg, svg *) {
  font-family: "Playfair Display", serif !important;
}

/* Let the moving hero continue seamlessly below the translucent navigation. */
html body #root header.fixed.top-0 {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Booking CTA: a compact concierge footer that belongs to the light form. */
.luxury-booking-form .booking-submit-panel {
  align-items: stretch;
  background: #f7f2e9 !important;
  border-top: 1px solid rgb(16 42 36 / 9%);
  color: #17312c !important;
  display: flex !important;
  gap: 0.42rem !important;
  padding: 0.85rem 1rem 0.95rem !important;
}

/* Keep the complete booking action in one interface typeface. */
html body #root .luxury-booking-form .booking-submit-panel,
html body #root
  .luxury-booking-form
  .booking-submit-panel
  :not(svg, svg *) {
  font-family: "Plus Jakarta Sans", sans-serif !important;
}

.luxury-booking-form .booking-submit-panel > span:first-child {
  color: #9b6036 !important;
  display: block !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 0.64rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.3 !important;
  order: 1;
}

.luxury-booking-form .booking-submit-panel > button {
  background: #17372f !important;
  border: 1px solid rgb(16 42 36 / 12%) !important;
  border-radius: 0.95rem !important;
  box-shadow: 0 9px 22px rgb(5 24 19 / 14%) !important;
  color: #fffaf3 !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.018em !important;
  line-height: 1.2 !important;
  min-height: 3.4rem !important;
  order: 3;
  padding: 0.85rem 1.15rem !important;
}

.luxury-booking-form .booking-submit-panel > button > span:first-child {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
}

.luxury-booking-form .booking-submit-panel > button > span:last-child {
  background: #d6a474 !important;
  color: #17372f !important;
}

.luxury-booking-form .booking-submit-panel > span:last-child {
  color: rgb(23 49 44 / 62%) !important;
  display: block !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.005em !important;
  line-height: 1.4 !important;
  order: 2;
  text-align: left !important;
}

@media (max-width: 767px) {
  .luxury-booking-form .booking-submit-panel {
    gap: 0.48rem !important;
    padding: 0.75rem 0.85rem 0.8rem !important;
  }

  .luxury-booking-form .booking-submit-panel > span:first-child {
    display: none !important;
  }

  .luxury-booking-form .booking-submit-panel > button {
    order: 1;
  }

  .luxury-booking-form .booking-submit-panel > span:last-child {
    order: 2;
    text-align: center !important;
  }
}

@media (min-width: 768px) and (max-width: 1119px) {
  .luxury-booking-form .booking-submit-panel {
    align-items: center;
    column-gap: clamp(1.25rem, 3vw, 2rem) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
    grid-template-rows: auto auto;
    min-height: 5.3rem;
    padding: 0.75rem 1rem !important;
    row-gap: 0.15rem !important;
  }

  .luxury-booking-form .booking-submit-panel > span:first-child {
    align-self: end;
    grid-column: 1;
    grid-row: 1;
  }

  .luxury-booking-form .booking-submit-panel > span:last-child {
    align-self: start;
    grid-column: 1;
    grid-row: 2;
  }

  .luxury-booking-form .booking-submit-panel > button {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    width: 100%;
  }
}

@media (min-width: 1120px) {
  .luxury-booking-form .booking-submit-panel {
    border-left: 1px solid rgb(16 42 36 / 9%);
    border-top: 0;
    justify-content: center;
    padding: 0.55rem !important;
  }

  .luxury-booking-form .booking-submit-panel > span {
    display: none !important;
  }

  .luxury-booking-form .booking-submit-panel > button {
    min-height: 3.75rem !important;
    width: 100%;
  }
}

@media (hover: hover) and (pointer: fine) {
  .luxury-booking-form .booking-submit-panel > button:hover {
    background: #215247 !important;
    box-shadow: 0 11px 26px rgb(5 24 19 / 17%) !important;
    transform: translateY(-1px) !important;
  }
}

/* Contact actions share one premium system instead of two unrelated buttons. */
.luxury-contact-overview > .mt-8.space-y-6 > .flex.flex-col {
  display: grid !important;
  gap: 0.75rem !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
}

.luxury-contact-overview > .mt-8.space-y-6 > .flex.flex-col > button {
  border: 1px solid rgb(16 42 36 / 10%) !important;
  border-radius: 1rem !important;
  box-shadow: 0 12px 28px rgb(5 24 19 / 12%) !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  gap: 0.6rem !important;
  letter-spacing: 0.025em !important;
  line-height: 1.2 !important;
  min-height: 4rem !important;
  min-width: 0;
  padding: 0.9rem 1rem !important;
  width: 100% !important;
}

.luxury-contact-overview > .mt-8.space-y-6 > .flex.flex-col > button:first-child {
  background: #15372f !important;
  color: #fffaf3 !important;
}

.luxury-contact-overview > .mt-8.space-y-6 > .flex.flex-col > button:last-child {
  background: #1f845e !important;
  color: #ffffff !important;
}

@media (hover: hover) and (pointer: fine) {
  .luxury-contact-overview > .mt-8.space-y-6 > .flex.flex-col > button:first-child:hover {
    background: #205044 !important;
    transform: translateY(-1px) !important;
  }

  .luxury-contact-overview > .mt-8.space-y-6 > .flex.flex-col > button:last-child:hover {
    background: #176f4e !important;
    transform: translateY(-1px) !important;
  }
}

@media (max-width: 480px) {
  .luxury-contact-overview > .mt-8.space-y-6 > .flex.flex-col {
    grid-template-columns: 1fr;
  }
}

/* About values: warm mineral surfaces replace the accidental grey override. */
.luxury-page section[class*="bg-black/30"] .luxury-card {
  background: linear-gradient(145deg, #fffaf3 0%, #f1e7da 100%) !important;
  border-color: rgb(169 101 58 / 28%) !important;
  box-shadow: none !important;
  color: #17312c !important;
}

.luxury-page section[class*="bg-black/30"] .luxury-card :is(h3, p) {
  color: #17312c !important;
}

.luxury-page section[class*="bg-black/30"] .luxury-card > div:first-child {
  background: rgb(169 101 58 / 11%) !important;
  border-color: rgb(169 101 58 / 32%) !important;
  color: #a9653a !important;
}

/* Keep the map useful while removing the redundant drag instruction card. */
.contact-suite
  .premium-reveal-right
  [role="img"]
  > .pointer-events-none.absolute.bottom-4.left-4.right-4 {
  display: none !important;
}

/* Home signature: premium progressive carousel with a photographic fallback. */
.luxury-signature-main:not([data-signature-carousel="ready"])
  > picture
  > img {
  content: url("/images/stanze/familiar/25.webp") !important;
  object-position: 50% 48% !important;
}

.luxury-signature-main {
  background: #102a24 !important;
  isolation: isolate;
  overflow: hidden !important;
}

.luxury-signature-main > picture {
  opacity: 1;
  transition: opacity 520ms var(--apple-ease), visibility 0s linear 0s;
}

.luxury-signature-main[data-signature-carousel="ready"] > picture {
  opacity: 0;
  visibility: hidden;
  transition: opacity 520ms var(--apple-ease), visibility 0s linear 520ms;
}

.signature-carousel {
  --signature-duration: 6200ms;
  color: #fffaf3;
  inset: 0;
  opacity: 0;
  outline: none;
  overflow: hidden;
  position: absolute;
  touch-action: pan-y;
  transition: opacity 520ms var(--apple-ease);
  user-select: none;
  z-index: 3;
}

.luxury-signature-main[data-signature-carousel="ready"]
  > .signature-carousel {
  opacity: 1;
}

.signature-carousel::before,
.signature-carousel::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.signature-carousel::before {
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: inherit;
  z-index: 5;
}

.signature-carousel::after {
  background: linear-gradient(
    180deg,
    rgb(4 20 16 / 4%) 48%,
    rgb(4 20 16 / 44%) 100%
  );
  display: block !important;
  z-index: 2;
}

.signature-carousel:focus-visible {
  box-shadow: inset 0 0 0 2px #e9b37d;
}

.signature-carousel-track,
.signature-carousel-slide {
  inset: 0;
  position: absolute;
}

.signature-carousel-slide {
  background: #102a24;
  clip-path: inset(0 0 0 8% round var(--apple-radius-media));
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  z-index: 0;
  transition:
    clip-path 1120ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 940ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 1120ms;
}

.signature-carousel[data-direction="previous"] .signature-carousel-slide {
  clip-path: inset(0 8% 0 0 round var(--apple-radius-media));
}

.signature-carousel-slide.is-active {
  clip-path: inset(0 round var(--apple-radius-media));
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
  visibility: visible;
  z-index: 1;
}

.signature-carousel-slide.is-leaving {
  clip-path: inset(0 round var(--apple-radius-media));
  opacity: 0;
  visibility: visible;
  z-index: 0;
}

.signature-carousel-slide picture,
.signature-carousel-slide img {
  display: block;
  height: 100% !important;
  width: 100%;
}

.signature-carousel-slide picture {
  transform: scale(1.015) translate3d(0, 0, 0);
  transform-origin: 50% 50%;
  will-change: transform;
}

.signature-carousel-slide img,
.luxury-signature-main:hover .signature-carousel-slide img {
  content: normal !important;
  object-fit: cover;
  object-position: var(--slide-position, 50% 50%) !important;
  transform: none !important;
  transition: none !important;
}

.signature-carousel-slide.is-active picture {
  animation: signature-carousel-drift 7.2s cubic-bezier(0.2, 0.65, 0.3, 1)
    both;
}

.signature-carousel-slide.is-leaving picture {
  transform: scale(1.06) translate3d(var(--pan-x, -0.7%), var(--pan-y, -0.3%), 0);
}

@keyframes signature-carousel-drift {
  from {
    transform: scale(1.015) translate3d(0, 0, 0);
  }

  to {
    transform: scale(1.06)
      translate3d(var(--pan-x, -0.7%), var(--pan-y, -0.3%), 0);
  }
}

.signature-carousel-counter {
  -webkit-backdrop-filter: blur(14px) saturate(118%);
  backdrop-filter: blur(14px) saturate(118%);
  background: rgb(7 28 23 / 52%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  color: rgb(255 250 243 / 88%);
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: 0.15em;
  padding: 0.48rem 0.65rem;
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 6;
}

.signature-carousel-controls {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 6;
}

.signature-carousel-control {
  -webkit-backdrop-filter: blur(14px) saturate(118%);
  align-items: center;
  backdrop-filter: blur(14px) saturate(118%);
  background: rgb(7 28 23 / 48%);
  border: 1px solid rgb(255 255 255 / 21%);
  border-radius: 999px !important;
  color: #fffaf3;
  display: inline-flex;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 1rem;
  height: 2.75rem !important;
  justify-content: center;
  min-height: 2.75rem !important;
  min-width: 2.75rem !important;
  padding: 0 !important;
  pointer-events: auto;
  position: absolute;
  transition:
    background-color 260ms ease,
    border-color 260ms ease,
    opacity 260ms ease,
    transform 260ms ease !important;
  width: 2.75rem !important;
}

.signature-carousel-control--previous,
.signature-carousel-control--next {
  opacity: 0;
  top: 50%;
  transform: translateY(-50%) !important;
}

.signature-carousel-control--previous {
  left: 1rem;
}

.signature-carousel-control--next {
  right: 1rem;
}

.signature-carousel-control--pause {
  bottom: 0.8rem;
  font-size: 0.72rem;
  opacity: 0.78;
  right: 0.8rem;
}

.signature-carousel-control:is(:hover, :focus-visible) {
  background: rgb(7 28 23 / 78%);
  border-color: rgb(239 183 127 / 68%);
  opacity: 1;
}

.signature-carousel-control--previous:is(:hover, :focus-visible),
.signature-carousel-control--next:is(:hover, :focus-visible) {
  transform: translateY(-50%) scale(1.045) !important;
}

.signature-carousel-control:focus-visible,
.signature-carousel-dot:focus-visible {
  outline: 2px solid #efb77f;
  outline-offset: 3px;
}

.signature-carousel-indicators {
  -webkit-backdrop-filter: blur(14px) saturate(118%);
  align-items: center;
  backdrop-filter: blur(14px) saturate(118%);
  background: rgb(7 28 23 / 48%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  bottom: 0.8rem;
  display: flex;
  gap: 0;
  left: 50%;
  padding: 0.17rem 0.3rem;
  position: absolute;
  transform: translateX(-50%);
  z-index: 6;
}

.signature-carousel-dot {
  border: 0;
  border-radius: 999px !important;
  color: rgb(255 255 255 / 44%);
  height: 2.2rem !important;
  min-height: 2.2rem !important;
  min-width: 1.7rem !important;
  padding: 0 !important;
  position: relative;
  width: 1.7rem !important;
}

.signature-carousel-dot::before {
  background: currentColor;
  border-radius: 999px;
  content: "";
  height: 2px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: width 360ms var(--apple-ease), color 360ms ease;
  width: 0.65rem;
}

.signature-carousel-dot.is-active {
  color: #efb77f;
}

.signature-carousel-dot.is-active::before {
  width: 1.18rem;
}

.signature-carousel-progress {
  background: rgb(255 255 255 / 16%);
  bottom: 0;
  height: 2px;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 7;
}

.signature-carousel-progress::after {
  background: #efb77f;
  content: "";
  inset: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left center;
}

.signature-carousel-progress.is-running::after {
  animation: signature-carousel-progress var(--signature-duration) linear
    forwards;
}

@keyframes signature-carousel-progress {
  to {
    transform: scaleX(1);
  }
}

@media (hover: hover) and (pointer: fine) {
  .signature-carousel:hover
    :is(
      .signature-carousel-control--previous,
      .signature-carousel-control--next
    ),
  .signature-carousel:focus-within
    :is(
      .signature-carousel-control--previous,
      .signature-carousel-control--next
    ) {
    opacity: 0.9;
  }
}

@media (max-width: 639px) {
  .signature-carousel-slide img {
    object-position: var(--slide-position-mobile, 50% 50%) !important;
  }

  .signature-carousel-counter {
    right: 0.68rem;
    top: 0.68rem;
  }

  .signature-carousel-control--previous,
  .signature-carousel-control--next {
    opacity: 0.88;
  }

  .signature-carousel-control--previous {
    left: 0.62rem;
  }

  .signature-carousel-control--next {
    right: 0.62rem;
  }

  .signature-carousel-control--pause {
    bottom: 0.55rem;
    right: 0.55rem;
  }

  .signature-carousel-indicators {
    bottom: 0.55rem;
  }

  .signature-carousel-slide.is-active picture {
    animation-name: signature-carousel-drift-mobile;
  }
}

@keyframes signature-carousel-drift-mobile {
  from {
    transform: scale(1.01) translate3d(0, 0, 0);
  }

  to {
    transform: scale(1.045)
      translate3d(var(--pan-x, -0.35%), var(--pan-y, -0.2%), 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .signature-carousel,
  .signature-carousel-slide,
  .signature-carousel-slide picture,
  .signature-carousel-progress::after {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}

html[data-motion="reduced"]
  :is(
    .signature-carousel,
    .signature-carousel-slide,
    .signature-carousel-slide picture,
    .signature-carousel-progress::after
  ) {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

/* Centre the review introduction without disturbing the editorial card grid. */
.luxury-review-suite > .container > .grid > :first-child {
  margin-inline: auto !important;
  text-align: center !important;
  width: 100%;
}

.luxury-review-suite > .container > .grid > :first-child > span {
  justify-content: center !important;
  width: 100%;
}

.luxury-review-suite > .container > .grid > :first-child > :is(h2, p),
.luxury-review-suite > .container > .grid > :first-child > div:last-child {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Calendar: one centred geometry for caption, navigation and the seven-day grid. */
.booking-calendar-popover {
  background: rgb(255 254 250 / 98%) !important;
  border: 1px solid rgb(23 49 44 / 13%) !important;
  border-radius: 1.35rem !important;
  box-shadow:
    0 24px 64px rgb(5 24 19 / 16%),
    inset 0 1px 0 rgb(255 255 255 / 85%) !important;
  max-width: calc(100vw - 1rem) !important;
  overflow: hidden;
  padding: 0.45rem !important;
  width: min(19.5rem, calc(100vw - 1rem)) !important;
}

.booking-calendar-popover .rdp {
  padding: 0.65rem !important;
  width: 100% !important;
}

.booking-calendar-popover .rdp > div,
.booking-calendar-popover .rdp > div > div {
  width: 100% !important;
}

.booking-calendar-popover .rdp > div {
  display: block !important;
}

.booking-calendar-popover .rdp > div > div {
  display: grid !important;
  gap: 0.45rem !important;
}

.booking-calendar-popover .rdp > div > div > div:first-child {
  min-height: 2.45rem;
  padding: 0 !important;
}

.booking-calendar-popover .rdp [aria-live="polite"] {
  color: #17312c !important;
  font-family: "Playfair Display", serif !important;
  font-size: 0.94rem !important;
  font-weight: 650 !important;
  text-align: center;
  text-transform: capitalize;
}

.booking-calendar-popover .rdp button[name="previous-month"],
.booking-calendar-popover .rdp button[name="next-month"] {
  background: rgb(23 49 44 / 4%) !important;
  border: 1px solid rgb(23 49 44 / 10%) !important;
  border-radius: 999px !important;
  color: #17312c !important;
  height: 2.25rem !important;
  min-height: 2.25rem !important;
  min-width: 2.25rem !important;
  opacity: 1 !important;
  padding: 0 !important;
  top: 50% !important;
  transform: translateY(-50%);
  width: 2.25rem !important;
}

.booking-calendar-popover .rdp button[name="previous-month"] {
  left: 0 !important;
}

.booking-calendar-popover .rdp button[name="next-month"] {
  right: 0 !important;
}

.booking-calendar-popover .rdp table[role="grid"] {
  table-layout: fixed;
  width: 100% !important;
}

.booking-calendar-popover .rdp table[role="grid"] :is(thead, tbody) tr {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  width: 100% !important;
}

.booking-calendar-popover .rdp table[role="grid"] thead tr {
  margin-bottom: 0.2rem;
}

.booking-calendar-popover .rdp table[role="grid"] tbody tr {
  margin-top: 0.15rem !important;
}

.booking-calendar-popover .rdp table[role="grid"] :is(th, td) {
  padding: 0 !important;
  text-align: center;
  width: auto !important;
}

.booking-calendar-popover .rdp table[role="grid"] th {
  color: rgb(23 49 44 / 56%) !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 0.66rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.025em;
}

.booking-calendar-popover .rdp [role="gridcell"] {
  display: grid;
  height: 2.35rem !important;
  place-items: center;
  width: auto !important;
}

.booking-calendar-popover .rdp button[name="day"] {
  border-radius: 999px !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 0.78rem !important;
  font-variant-numeric: tabular-nums;
  height: 2.25rem !important;
  min-height: 2.25rem !important;
  min-width: 2.25rem !important;
  padding: 0 !important;
  width: 2.25rem !important;
}

@media (max-width: 639px) {
  .luxury-signature-main:not([data-signature-carousel="ready"])
    > picture
    > img {
    content: url("/images/stanze/familiar/25-mobile.webp") !important;
  }
}

@media (max-width: 359px) {
  .booking-calendar-popover {
    max-width: calc(100vw - 0.75rem) !important;
    width: calc(100vw - 0.75rem) !important;
  }

  .booking-calendar-popover .rdp {
    padding: 0.45rem !important;
  }

  .booking-calendar-popover .rdp [role="gridcell"] {
    height: 2.2rem !important;
  }

  .booking-calendar-popover .rdp button[name="day"] {
    height: 2.1rem !important;
    min-height: 2.1rem !important;
    min-width: 2.1rem !important;
    width: 2.1rem !important;
  }
}

/*
 * Booking calendars — centred modal treatment.
 *
 * The public booking bar uses the same calendar from two differently placed
 * triggers. Presenting it as a small, modal surface makes arrival and
 * departure geometrically identical on every viewport. The following rules
 * also neutralise a generic dialog rule that otherwise adds 4.25rem only on
 * the right side of the calendar's inner wrapper.
 */
@keyframes booking-calendar-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.booking-calendar-overlay {
  animation: booking-calendar-overlay-in 180ms ease-out both;
  appearance: none;
  backdrop-filter: blur(3px) saturate(0.9);
  background: rgb(4 20 16 / 48%);
  border: 0;
  border-radius: 0;
  display: block;
  height: 100%;
  inset: 0;
  margin: 0;
  padding: 0;
  pointer-events: auto !important;
  position: fixed;
  width: 100%;
  z-index: 119;
}

.booking-calendar-popover {
  box-sizing: border-box;
  margin: 0 !important;
  max-height: calc(
    100dvh - max(0.75rem, env(safe-area-inset-top)) -
      max(0.75rem, env(safe-area-inset-bottom))
  ) !important;
  max-width: calc(100vw - 1.5rem) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  width: min(19.5rem, calc(100vw - 1.5rem)) !important;
}

.booking-calendar-dialog {
  left: 50% !important;
  outline: none !important;
  padding: 0 !important;
  position: fixed !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center !important;
  z-index: 120 !important;
}

/* Undo the generic booking-dialog close-button allowance on this compact dialog. */
.booking-calendar-dialog[role="dialog"] > .rdp > div:first-child {
  padding-right: 0 !important;
}

.booking-calendar-dialog[data-state="open"] {
  animation: booking-calendar-dialog-in 190ms cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

.booking-calendar-dialog[data-state="closed"] {
  animation: booking-calendar-dialog-out 130ms ease-in both;
}

@keyframes booking-calendar-dialog-in {
  from {
    opacity: 0;
    scale: 0.97;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes booking-calendar-dialog-out {
  from {
    opacity: 1;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 0.98;
  }
}

:is(.booking-calendar-popover, [role="dialog"] form) .rdp {
  box-sizing: border-box;
  display: block !important;
  margin-inline: auto !important;
  max-width: 100% !important;
  padding: clamp(0.45rem, 1.6vw, 0.65rem) !important;
  width: min(100%, 19.5rem) !important;
}

:is(.booking-calendar-popover, [role="dialog"] form) .rdp > div {
  display: flex !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

:is(.booking-calendar-popover, [role="dialog"] form) .rdp > div > div {
  display: grid !important;
  gap: 0.42rem !important;
  margin: 0 !important;
  margin-inline: auto !important;
  min-width: 0;
  width: min(100%, 17.5rem) !important;
}

:is(.booking-calendar-popover, [role="dialog"] form)
  .rdp > div > div > * + * {
  margin-top: 0 !important;
}

:is(.booking-calendar-popover, [role="dialog"] form)
  .rdp > div > div > div:first-child {
  box-sizing: border-box;
  min-height: 2.35rem;
  padding-inline: 2.55rem !important;
  position: relative !important;
  width: 100% !important;
}

:is(.booking-calendar-popover, [role="dialog"] form)
  .rdp [aria-live="polite"] {
  display: block;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

:is(.booking-calendar-popover, [role="dialog"] form)
  .rdp button[name="previous-month"],
:is(.booking-calendar-popover, [role="dialog"] form)
  .rdp button[name="next-month"] {
  height: 2.15rem !important;
  margin: 0 !important;
  min-height: 2.15rem !important;
  min-width: 2.15rem !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 2.15rem !important;
}

:is(.booking-calendar-popover, [role="dialog"] form)
  .rdp button[name="previous-month"] {
  left: 0.1rem !important;
  right: auto !important;
}

:is(.booking-calendar-popover, [role="dialog"] form)
  .rdp button[name="next-month"] {
  left: auto !important;
  right: 0.1rem !important;
}

:is(.booking-calendar-popover, [role="dialog"] form)
  .rdp table[role="grid"] {
  margin: 0 auto !important;
  table-layout: fixed;
  width: 100% !important;
}

:is(.booking-calendar-popover, [role="dialog"] form)
  .rdp table[role="grid"] tr {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0 !important;
  width: 100% !important;
}

:is(.booking-calendar-popover, [role="dialog"] form)
  .rdp table[role="grid"] tbody tr + tr {
  margin-top: 0.12rem !important;
}

:is(.booking-calendar-popover, [role="dialog"] form)
  .rdp table[role="grid"] :is(th, td) {
  min-width: 0 !important;
  padding: 0 !important;
  text-align: center;
  width: auto !important;
}

:is(.booking-calendar-popover, [role="dialog"] form)
  .rdp [role="gridcell"] {
  display: grid !important;
  height: 2.3rem !important;
  min-height: 0 !important;
  min-width: 0 !important;
  place-items: center;
  width: auto !important;
}

:is(.booking-calendar-popover, [role="dialog"] form)
  .rdp button[name="day"] {
  aspect-ratio: 1;
  height: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: min(100%, 2.15rem) !important;
}

@media (max-width: 359px) {
  .booking-calendar-popover {
    max-width: calc(100vw - 1.5rem) !important;
    width: calc(100vw - 1.5rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .booking-calendar-overlay {
    animation: none;
    backdrop-filter: none;
  }

  .booking-calendar-dialog[data-state] {
    animation: none;
  }
}

/*
 * DayPicker alignment safeguard.
 *
 * Keep this semantic block last: DayPicker's utility classes otherwise let
 * the month shrink to its contents and centre the title together with both
 * arrows.  The result looks off-centre even when the dialog itself is placed
 * exactly in the middle of the viewport.
 */
:is(.booking-calendar-popover, [role="dialog"] form) .rdp-months {
  align-items: stretch !important;
  display: grid !important;
  margin: 0 auto !important;
  max-width: 17.5rem !important;
  padding: 0 !important;
  width: 100% !important;
}

:is(.booking-calendar-popover, [role="dialog"] form) .rdp-month {
  display: grid !important;
  gap: 0.42rem !important;
  margin: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
}

:is(.booking-calendar-popover, [role="dialog"] form) .rdp-month > * + * {
  margin-top: 0 !important;
}

:is(.booking-calendar-popover, [role="dialog"] form) .rdp-caption {
  align-items: center !important;
  display: grid !important;
  grid-template-columns: 2.15rem minmax(0, 1fr) 2.15rem !important;
  min-height: 2.35rem !important;
  padding: 0 !important;
  position: relative !important;
  width: 100% !important;
}

:is(.booking-calendar-popover, [role="dialog"] form) .rdp-caption_label {
  display: block !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: stretch !important;
  margin: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
  text-align: center !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100% !important;
}

:is(.booking-calendar-popover, [role="dialog"] form) .rdp-nav {
  display: contents !important;
}

:is(.booking-calendar-popover, [role="dialog"] form) .rdp-nav_button {
  align-items: center !important;
  align-self: center !important;
  display: inline-flex !important;
  height: 2.15rem !important;
  justify-content: center !important;
  margin: 0 !important;
  min-height: 2.15rem !important;
  min-width: 2.15rem !important;
  padding: 0 !important;
  position: static !important;
  top: auto !important;
  transform: none !important;
  width: 2.15rem !important;
}

:is(.booking-calendar-popover, [role="dialog"] form)
  .rdp-nav_button_previous {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  left: auto !important;
  right: auto !important;
}

:is(.booking-calendar-popover, [role="dialog"] form)
  .rdp-nav_button_next {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  left: auto !important;
  right: auto !important;
}

:is(.booking-calendar-popover, [role="dialog"] form) .rdp-table {
  margin: 0 !important;
  table-layout: fixed !important;
  width: 100% !important;
}

:is(.booking-calendar-popover, [role="dialog"] form) .rdp-head_row,
:is(.booking-calendar-popover, [role="dialog"] form) .rdp-row {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  margin: 0 !important;
  width: 100% !important;
}

:is(.booking-calendar-popover, [role="dialog"] form)
  .rdp-tbody
  .rdp-row
  + .rdp-row {
  margin-top: 0.12rem !important;
}

:is(.booking-calendar-popover, [role="dialog"] form)
  :is(.rdp-head_cell, .rdp-cell) {
  min-width: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  width: auto !important;
}