/*
 * Experience polish v3
 * Conservative overrides layered after the compiled stylesheet.
 */

:root {
  --experience-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --experience-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --experience-duration-fast: 180ms;
  --experience-duration-medium: 420ms;
  --experience-duration-slow: 700ms;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  scrollbar-gutter: stable;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Persistent keyboard escape hatch, kept outside the React root. */
.skip-link {
  background: #f7f1e6;
  border: 1px solid rgb(232 168 124 / 70%);
  border-radius: 999px;
  box-shadow: 0 14px 40px rgb(7 24 20 / 24%);
  color: #1a332f;
  font-size: 0.8125rem;
  font-weight: 700;
  left: max(1rem, env(safe-area-inset-left));
  letter-spacing: 0.04em;
  padding: 0.75rem 1rem;
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  transform: translateY(calc(-100% - 2rem));
  transition: transform var(--experience-duration-fast) var(--experience-ease-out);
  z-index: 1000;
}

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

.skip-link + #root:focus {
  outline: none !important;
}

/* Keep motion language consistent across the public experience. */
:where(a, button, [role="button"], input, select, textarea) {
  transition-timing-function: var(--experience-ease-standard);
}

:where(
    .premium-surface,
    .premium-image-panel,
    .luxury-card,
    .luxury-review-card,
    .guide-card,
    .contact-card
  ) {
  transition-timing-function: var(--experience-ease-out);
}

.premium-surface {
  transform: translate3d(0, 0, 0);
  transition:
    transform var(--experience-duration-medium) var(--experience-ease-out),
    box-shadow var(--experience-duration-medium) var(--experience-ease-out),
    border-color var(--experience-duration-fast) var(--experience-ease-standard),
    background-color var(--experience-duration-fast) var(--experience-ease-standard);
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .premium-surface:hover {
    transform: translate3d(0, -4px, 0);
  }
}

@media (hover: none), (pointer: coarse) {
  .premium-surface:hover {
    transform: translate3d(0, 0, 0);
  }
}

/* Poster remains visible whenever the hero video is absent or still loading. */
.home-hero,
.ssg-home-shell .ssg-hero {
  background-color: #10231f;
  background-image: url("/images/home/hero.webp");
  background-image: image-set(
    url("/images/home/hero.avif") type("image/avif"),
    url("/images/home/hero.webp") type("image/webp"),
    url("/images/home/hero.jpg") type("image/jpeg")
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Hero copy is readable and settled in under one second on desktop. */
@keyframes experienceHeroReveal {
  from {
    opacity: 0;
    filter: blur(5px);
    transform: translate3d(0, 12px, 0);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .hero-copy-reveal,
  .ssg-home-shell .ssg-eyebrow,
  .ssg-home-shell .ssg-title,
  .ssg-home-shell .ssg-copy,
  .ssg-home-shell .ssg-facts {
    animation-duration: 650ms;
    animation-fill-mode: both;
    animation-name: experienceHeroReveal;
    animation-timing-function: var(--experience-ease-out);
  }

  .hero-copy-reveal-kicker,
  .ssg-home-shell .ssg-eyebrow {
    animation-delay: 40ms;
  }

  .hero-copy-reveal-title,
  .ssg-home-shell .ssg-title {
    animation-delay: 120ms;
  }

  .hero-copy-reveal-body,
  .ssg-home-shell .ssg-copy {
    animation-delay: 220ms;
  }

  .ssg-home-shell .ssg-facts {
    animation-delay: 300ms;
  }
}

/* Strong, consistent keyboard focus without changing pointer interactions. */
body :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #e8a87c !important;
  outline-offset: 3px !important;
}

@media (forced-colors: active) {
  body :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline-color: CanvasText !important;
  }
}

/* Minimum target sizes for high-value controls; visual micro-controls use hit-area pseudos. */
:where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select) {
  min-height: 44px;
}

:where(
    .luxury-booking-form,
    .contact-suite,
    .contact-form-suite,
    .checkin-prep-suite,
    .guide-page,
    [role="dialog"]
  ) :where(button, [role="button"], a[role="button"]) {
  min-height: 44px;
}

.site-nav-brand,
header nav > div > div[class*="md:grid"] > div:nth-child(2) > button {
  min-height: 44px;
}

.site-nav-language > button,
[role="switch"] {
  overflow: visible;
  position: relative;
}

.site-nav-language > button::after,
[role="switch"]::after {
  content: "";
  height: 44px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
}

/* Gallery pagination keeps its discreet dot treatment inside a true 44px target. */
.luxury-room-gallery > div[class*="bottom-5"] {
  gap: 0 !important;
  padding: 0.125rem 0.25rem !important;
}

.luxury-room-gallery button[class~="h-1.5"] {
  background-color: transparent !important;
  height: 44px !important;
  min-height: 44px;
  min-width: 44px;
  position: relative;
  width: 44px !important;
}

.luxury-room-gallery button[class~="h-1.5"]::before {
  background: rgb(247 241 230 / 55%);
  border-radius: 9999px;
  content: "";
  height: 0.375rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition:
    width var(--experience-duration-medium) var(--experience-ease-out),
    background-color var(--experience-duration-fast) var(--experience-ease-standard);
  width: 0.375rem;
}

.luxury-room-gallery button[class~="h-1.5"][class~="w-8"]::before {
  background: #f7f1e6;
  width: 2rem;
}

/* Preserve vertical page gestures over the custom map while retaining zoom support. */
[role="img"][style*="touch-action"] {
  touch-action: pan-y pinch-zoom !important;
}

/* Raise only public-facing 9–10px utility copy to a durable readable floor. */
:is(
    header,
    .home-hero,
    .finca-ledger-strip,
    .luxury-signature,
    .luxury-review-suite,
    .como-included-suite,
    .luxury-final-cta,
    .luxury-page,
    .room-collection,
    .luxury-booking-form,
    .contact-care-strip,
    .contact-suite,
    .contact-form-suite,
    .checkin-prep-suite,
    .guide-page,
    .site-footer
  ) :is([class~="text-[9px]"], [class~="text-[10px]"]) {
  font-size: 0.6875rem !important;
  line-height: 1rem !important;
}

.guide-nav-pill {
  font-size: 0.6875rem;
  line-height: 1rem;
}

@media (max-width: 767px) {
  .home-hero,
  .ssg-home-shell .ssg-hero {
    background-image: url("/images/home/hero-mobile.webp");
    background-image: image-set(
      url("/images/home/hero-mobile.avif") type("image/avif"),
      url("/images/home/hero-mobile.webp") type("image/webp"),
      url("/images/home/hero-mobile.jpg") type("image/jpeg")
    );
    background-position: center;
  }

  /* Dynamic viewport units prevent the mobile menu from being clipped by browser chrome. */
  header > div.fixed.inset-0[class*="z-[60]"] {
    -webkit-overflow-scrolling: touch;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh;
    min-height: 100svh;
    overscroll-behavior: contain;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
    padding-left: max(1.25rem, env(safe-area-inset-left)) !important;
    padding-right: max(1.25rem, env(safe-area-inset-right)) !important;
    padding-top: max(4.75rem, calc(env(safe-area-inset-top) + 4rem)) !important;
  }

  header > div.fixed.inset-0[class*="z-[60]"] > div {
    flex: 1 0 auto;
    height: auto !important;
    min-height: 100%;
  }

  header > div.fixed.inset-0[class*="z-[60]"] > div > div:first-child {
    gap: 0.625rem !important;
  }

  header > div.fixed.inset-0[class*="z-[60]"] > div > div:first-child > button {
    font-size: clamp(1.4rem, 7vw, 1.75rem) !important;
    line-height: 1.05;
    min-height: 44px;
    padding: 0.625rem 0.25rem 0.75rem !important;
  }

  header > div.fixed.inset-0[class*="z-[60]"] > div > div:last-child {
    flex: 0 0 auto;
    margin-bottom: 0 !important;
    margin-top: 0.75rem !important;
    min-height: 44px;
  }

  /* A calmer, repeatable mobile section cadence. */
  :is(
      .luxury-signature,
      .luxury-review-suite,
      .como-included-suite,
      .luxury-section,
      .luxury-restoration,
      .contact-suite,
      .guide-section
    ) {
    padding-bottom: 4.5rem !important;
    padding-top: 4.5rem !important;
  }

  :is(.luxury-final-cta, .contact-care-strip, .guide-closing) {
    padding-bottom: 3.75rem !important;
    padding-top: 3.75rem !important;
  }

  .contact-form-suite {
    padding-bottom: 4.5rem !important;
  }

  .interior-page-lead {
    padding-bottom: 3.5rem !important;
    padding-top: 6.5rem !important;
  }

  :is(.room-collection, .checkin-prep-suite) {
    padding-bottom: 4.5rem !important;
    padding-top: 6.5rem !important;
  }

  .guide-section-header {
    margin-bottom: 3rem !important;
  }

  .luxury-room-gallery {
    height: clamp(24rem, 125vw, 30rem) !important;
    min-height: 24rem !important;
  }

  .luxury-signature-stage {
    min-height: 35rem !important;
  }

  .checkin-visual {
    min-height: 34rem !important;
  }
}

/* The compiled header switches to its wide layout at 768px, but its content
 * needs about 1100px. Keep the compact, fully usable header until then. */
@media (min-width: 768px) and (max-width: 1119px) {
  header nav > [class~="md:grid"] {
    display: none !important;
  }

  header nav > [class~="md:hidden"] {
    display: flex !important;
  }

  header > div.fixed.inset-0[class*="z-[60]"] {
    -webkit-overflow-scrolling: touch;
    display: flex !important;
    height: 100dvh !important;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .luxury-booking-bar {
    position: relative !important;
    top: auto !important;
  }

  .luxury-booking-form > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .luxury-booking-form .booking-field {
    grid-column: span 1 / span 1 !important;
  }

  .luxury-booking-form .booking-submit-panel {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }
}

/* On phones and tablets, lead with the useful check-in message and action;
 * the editorial image follows as supporting atmosphere. */
@media (max-width: 1023px) {
  .checkin-prep-suite > .container > .grid {
    display: flex;
    flex-direction: column;
  }

  .checkin-prep-suite > .container > .grid > .premium-reveal-right {
    display: flex;
    flex-direction: column;
    order: -1;
  }

  .checkin-prep-suite .premium-reveal-right > .mt-8 {
    order: 1;
  }

  .checkin-prep-suite .premium-reveal-right > .mt-10 {
    order: 2;
  }
}

@media (max-width: 360px) and (max-height: 620px) {
  header nav > [class~="md:hidden"] > .site-nav-language {
    gap: 0 !important;
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important;
  }

  header nav > [class~="md:hidden"] > .site-nav-language > button:not([class~="bg-secondary"]) {
    display: none !important;
  }

  header nav > [class~="md:hidden"] > .site-nav-language > button[class~="bg-secondary"] {
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
  }

  .home-hero .hero-copy-reveal-title {
    font-size: 2.95rem !important;
  }

  header > div.fixed.inset-0[class*="z-[60]"] {
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
    padding-top: max(4.25rem, calc(env(safe-area-inset-top) + 3.75rem)) !important;
  }

  header > div.fixed.inset-0[class*="z-[60]"] > div > div:first-child {
    gap: 0.25rem !important;
  }

  header > div.fixed.inset-0[class*="z-[60]"] > div > div:first-child > button {
    font-size: 1.35rem !important;
    padding-bottom: 0.45rem !important;
    padding-top: 0.45rem !important;
  }

  header > div.fixed.inset-0[class*="z-[60]"] > div > div:last-child {
    margin-top: 0.5rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero video,
  .ssg-home-shell .ssg-hero video {
    display: none !important;
  }

  .hero-copy-reveal,
  .ssg-home-shell .ssg-eyebrow,
  .ssg-home-shell .ssg-title,
  .ssg-home-shell .ssg-copy,
  .ssg-home-shell .ssg-facts {
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .premium-surface {
    transition-duration: 1ms !important;
  }
}

/*
 * Design refinement v4
 * A restrained layer for clearer hierarchy, smoother motion and stronger
 * responsive booking UX. It intentionally stays outside the compiled bundle.
 */
:root {
  --experience-forest: #1a332f;
  --experience-forest-deep: #10231f;
  --experience-cream: #f7f1e6;
  --experience-copper: #9a612d;
  --experience-copper-light: #f0c98e;
  --experience-radius-editorial: 0.75rem;
  --experience-radius-panel: 1.3rem;
  --experience-shadow-soft: 0 22px 70px rgb(16 35 31 / 12%);
  --experience-shadow-raised: 0 30px 90px rgb(16 35 31 / 18%);
}

::selection {
  background: rgb(232 168 124 / 44%);
  color: var(--experience-forest-deep);
}

:is(h1, h2, h3) {
  text-wrap: balance;
}

:is(p, blockquote) {
  text-wrap: pretty;
}

/* A quiet elevation makes the fixed navigation legible over changing media. */
header[class*="bg-primary"] {
  border-bottom-color: rgb(240 201 142 / 18%) !important;
  box-shadow: 0 12px 34px rgb(7 24 20 / 14%) !important;
}

/* The first focus color is dark enough on paper; dark areas use the light one. */
body :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--experience-copper) !important;
}

:is(
    header,
    .home-hero,
    .luxury-signature,
    .luxury-review-suite,
    .luxury-review-card,
    .site-footer,
    .guide-section-dark,
    .guide-closing
  ) :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--experience-copper-light) !important;
}

/* Restore the directional reveal language that the active bundle expects. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .premium-reveal-up:not(.is-visible) {
    transform: translate3d(0, 1.5rem, 0);
  }

  .premium-reveal-left:not(.is-visible) {
    transform: translate3d(-1.5rem, 0, 0);
  }

  .premium-reveal-right:not(.is-visible) {
    transform: translate3d(1.5rem, 0, 0);
  }

  .premium-reveal-scale:not(.is-visible) {
    transform: scale(0.975);
  }
}

.premium-reveal.is-visible,
.premium-surface {
  will-change: auto;
}

/* Image zoom now follows the same soft curve instead of snapping on hover. */
:is(
    .como-included-image,
    .luxury-signature-main,
    .luxury-signature-float,
    .luxury-room-gallery
  ) img {
  transition:
    opacity 500ms ease-out,
    filter 500ms ease-out,
    transform 1000ms var(--experience-ease-out) !important;
}

@media (hover: hover) and (pointer: fine) {
  .luxury-room-row:hover .luxury-room-gallery img {
    transform: scale(1.025);
  }

  .luxury-room-copy:hover {
    border-color: rgb(154 97 45 / 20%);
    box-shadow: var(--experience-shadow-raised), inset 0 1px rgb(255 255 255 / 72%);
  }

  .luxury-cta:hover svg:last-child,
  .booking-submit-panel button:hover svg:last-child {
    transform: translateX(0.2rem);
  }
}

.luxury-cta svg:last-child,
.booking-submit-panel button svg:last-child {
  transition: transform var(--experience-duration-fast) var(--experience-ease-out);
}

/* Booking controls gain clearer states without losing their editorial restraint. */
.booking-field {
  transition:
    background-color var(--experience-duration-fast) var(--experience-ease-standard),
    box-shadow var(--experience-duration-fast) var(--experience-ease-standard);
}

.booking-field:focus-visible {
  position: relative;
  z-index: 2;
}

.luxury-booking-form [class~="text-primary/50"],
[role="dialog"] [class~="text-primary/50"] {
  color: rgb(26 51 47 / 74%) !important;
}

button[class~="h-7"][class~="w-7"] {
  min-height: 44px;
  min-width: 44px;
}

/* Keep only the intentional, localized close control in the booking dialog. */
[role="dialog"]:has(> div > div:first-child > button[aria-label])
  > button:has(> .sr-only) {
  display: none !important;
}

[role="dialog"] > div.flex.flex-col.h-full + button {
  display: none !important;
}

[role="dialog"] > div > div:first-child > button[aria-label] {
  align-items: center;
  border: 1px solid rgb(240 201 142 / 58%);
  border-radius: 999px;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  right: 0.75rem !important;
  top: 0.75rem !important;
  width: 44px;
}

[role="dialog"] > div > div:first-child
  :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--experience-copper-light) !important;
}

[role="dialog"] > div > div:first-child {
  padding-right: 4.25rem !important;
}

/* The floating contact action remains recognisable but no longer dominates. */
[aria-label$="WhatsApp"] {
  box-shadow:
    0 16px 38px rgb(20 110 68 / 25%),
    0 0 0 1px rgb(255 255 255 / 28%) !important;
}

/* The pagination lives one level deeper than the gallery hook. */
.luxury-room-gallery div[class*="bottom-5"] {
  gap: 0 !important;
  padding: 0.125rem 0.25rem !important;
}

@media (max-width: 767px) {
  /* Never leave the fast SSG shell invisible while React loads on mobile. */
  .ssg-home-shell :is(.ssg-eyebrow, .ssg-title, .ssg-copy, .ssg-facts) {
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

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

  /* Avoid the double top padding unique to the nested accommodation lead. */
  .room-collection > .container > .interior-page-lead {
    padding-top: 0 !important;
  }

  /* Use the available width and keep both date labels readable. */
  .luxury-booking-bar > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .booking-field {
    gap: 0.625rem !important;
  }

  .booking-field > span:first-child {
    height: 2.125rem !important;
    width: 2.125rem !important;
  }

  [aria-label$="WhatsApp"] {
    bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
    padding: 0.65rem !important;
    right: max(0.75rem, env(safe-area-inset-right)) !important;
    z-index: 35 !important;
  }
}

@media (max-width: 639px) {
  [role="dialog"] {
    border-radius: 1.25rem !important;
    max-height: calc(
      100dvh - max(0.5rem, env(safe-area-inset-top)) -
        max(0.5rem, env(safe-area-inset-bottom))
    ) !important;
    width: calc(100vw - 1rem) !important;
  }

  [role="dialog"] > div.flex.flex-col.h-full {
    max-height: inherit !important;
  }

  [role="dialog"] form.overflow-y-auto {
    overscroll-behavior: contain;
    padding: 1rem !important;
    padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  }

  [role="dialog"] form div:has(> .rdp) {
    padding: 0.5rem !important;
  }

  [role="dialog"] form div[class~="border-primary/20"][class~="p-4"] {
    padding: 0.5rem !important;
  }

  [role="dialog"] form .rdp {
    padding: 0.25rem !important;
  }
}

@media (max-width: 359px) {
  .booking-field {
    gap: 0.5rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .booking-field > span:first-child {
    height: 2rem !important;
    width: 2rem !important;
  }

  [aria-label$="WhatsApp"] {
    padding: 0.5rem !important;
  }

  [role="dialog"] {
    width: calc(100vw - 0.5rem) !important;
  }

  [role="dialog"] form.overflow-y-auto {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  [role="dialog"] form div:has(> .rdp) {
    padding: 0.25rem !important;
  }

  [role="dialog"] form div[class~="border-primary/20"][class~="p-4"] {
    padding: 0.25rem !important;
  }

  [role="dialog"] form .rdp {
    padding: 0 !important;
  }

  [role="dialog"] [role="gridcell"] {
    height: 40px !important;
    min-height: 40px !important;
    min-width: 40px !important;
    width: 40px !important;
  }

  .luxury-room-copy > div[class*="grid-cols-2"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .luxury-room-copy > div[class*="grid-cols-2"] > div {
    min-height: 4rem !important;
  }

  .luxury-room-gallery button[class~="h-1.5"] {
    min-width: 40px;
    width: 40px !important;
  }
}

@media (hover: none), (pointer: coarse) {
  :is(
      .como-included-card,
      .luxury-signature-main,
      .luxury-signature-float,
      .luxury-room-row
    ):hover img {
    transform: none !important;
  }

  .luxury-cta::after {
    display: none;
  }
}

/*
 * Fine editorial refinement v5
 *
 * The visual language is intentionally quieter: photography, typography and
 * spacing carry the experience while pills, deep shadows and repeated frames
 * recede. The existing forest / cream / copper identity remains unchanged.
 */
:root {
  --fine-radius-xs: 0.35rem;
  --fine-radius-sm: 0.55rem;
  --fine-radius-md: 0.75rem;
  --fine-radius-lg: 0.95rem;
  --fine-border-light: rgb(26 51 47 / 13%);
  --fine-border-dark: rgb(240 201 142 / 22%);
  --fine-shadow-resting: 0 18px 54px rgb(16 35 31 / 9%);
  --fine-shadow-media: 0 24px 68px rgb(7 24 20 / 16%);
  --fine-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  scrollbar-color: rgb(154 97 45 / 72%) var(--experience-cream);
  scrollbar-width: thin;
}

body {
  letter-spacing: -0.006em;
}

body::-webkit-scrollbar {
  width: 10px;
}

body::-webkit-scrollbar-track {
  background: var(--experience-cream);
}

body::-webkit-scrollbar-thumb {
  background: rgb(154 97 45 / 70%);
  border: 3px solid var(--experience-cream);
  border-radius: 999px;
}

:is(h1, h2, h3, .font-display) {
  font-kerning: normal;
  font-optical-sizing: auto;
}

:is(h1, h2, h3) {
  letter-spacing: -0.028em;
}

:where(
    .finca-kicker,
    .guide-kicker,
    [class*="tracking-[0.34em]"],
    [class*="tracking-[0.4em]"]
  ) {
  letter-spacing: 0.22em !important;
}

/* A hairline page-progress cue: useful, quiet and progressively enhanced. */
header {
  isolation: isolate;
}

header::after {
  background: linear-gradient(
    90deg,
    transparent,
    var(--experience-copper-light) 8%,
    var(--experience-copper-light) 92%,
    transparent
  );
  bottom: -1px;
  content: "";
  height: 1px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 2;
}

@keyframes fineReadingProgress {
  to {
    transform: scaleX(1);
  }
}

@supports (animation-timeline: scroll()) {
  header::after {
    animation-duration: 1ms;
    animation-fill-mode: both;
    animation-name: fineReadingProgress;
    animation-timing-function: linear;
    animation-timeline: scroll(root block);
  }
}

header[class*="bg-primary"] {
  -webkit-backdrop-filter: blur(18px) saturate(112%);
  backdrop-filter: blur(18px) saturate(112%);
  background: rgb(16 35 31 / 94%) !important;
  border-bottom-color: rgb(240 201 142 / 14%) !important;
  box-shadow: 0 1px 0 rgb(255 255 255 / 4%) !important;
}

.site-nav-brand {
  min-width: 7.5rem;
}

.site-nav-brand > span:first-child {
  letter-spacing: -0.025em;
}

.site-nav-language {
  background: rgb(247 241 230 / 6%) !important;
  border-color: rgb(247 241 230 / 18%) !important;
  box-shadow: none !important;
}

/* The homepage becomes an editorial cover on wide screens. */
.home-hero-shade {
  background:
    linear-gradient(
      90deg,
      rgb(5 16 13 / 82%) 0%,
      rgb(8 22 18 / 54%) 34%,
      rgb(8 22 18 / 18%) 66%,
      rgb(5 16 13 / 42%) 100%
    ),
    linear-gradient(
      180deg,
      rgb(5 16 13 / 58%),
      transparent 42%,
      rgb(5 16 13 / 72%)
    );
}

.home-hero .hero-copy-reveal-title {
  letter-spacing: -0.042em !important;
  text-shadow: 0 18px 55px rgb(0 0 0 / 34%) !important;
}

.home-hero .hero-copy-reveal-title > span {
  text-shadow: 0 12px 38px rgb(0 0 0 / 30%) !important;
}

.home-hero-ledger {
  background: linear-gradient(
    90deg,
    transparent,
    rgb(7 24 20 / 30%) 15%,
    rgb(7 24 20 / 30%) 85%,
    transparent
  );
  box-shadow: none;
}

@media (min-width: 1024px) {
  .home-hero-content {
    align-items: flex-start !important;
    max-width: 88rem !important;
    padding-left: clamp(3.5rem, 7vw, 7.5rem) !important;
    padding-right: clamp(3.5rem, 7vw, 7.5rem) !important;
    text-align: left !important;
    width: 100%;
  }

  .home-hero .hero-copy-reveal-kicker {
    margin-bottom: 2.25rem !important;
  }

  .home-hero .hero-copy-reveal-kicker > span:last-child {
    display: none;
  }

  .home-hero .hero-copy-reveal-title {
    font-size: clamp(5.8rem, 9.2vw, 9rem) !important;
    line-height: 0.88 !important;
    margin-bottom: 2.25rem !important;
  }

  .home-hero .hero-copy-reveal-body {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 39rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .home-hero-ledger {
    left: clamp(3.5rem, 7vw, 7.5rem) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 50rem !important;
    right: auto !important;
    width: min(50rem, calc(100% - 7rem));
  }
}

/* Interior heroes retain drama, with tighter editorial typography. */
.premium-hero-title,
.interior-page-lead h1 {
  letter-spacing: -0.035em !important;
}

.premium-hero-title {
  max-width: 13ch;
}

.premium-hero-copy {
  max-width: 40rem;
}

.premium-page-hero::before {
  border-color: rgb(247 241 230 / 13%) !important;
  border-top-color: rgb(240 201 142 / 28%) !important;
  opacity: 0.72;
}

/* Calm motion: one reveal language, no blur and no theatrical lift. */
.premium-reveal {
  filter: none !important;
  transition-duration: 560ms !important;
  transition-timing-function: var(--fine-ease) !important;
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  :is(
      .premium-reveal-up,
      .premium-reveal-left,
      .premium-reveal-right
    ):not(.is-visible) {
    transform: translate3d(0, 12px, 0) !important;
  }

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

.premium-surface {
  transition:
    border-color 260ms ease,
    box-shadow 520ms var(--fine-ease),
    background-color 260ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .premium-surface:hover {
    transform: none !important;
  }
}

/* Keep the ledger/paper motif as a signature, not as a repeated effect. */
.finca-ledger-shell,
.finca-contact-letter {
  box-shadow: var(--fine-shadow-resting) !important;
}

.luxury-signature::after,
.como-included-suite::before {
  opacity: 0.16 !important;
}

.luxury-review-suite::before {
  display: none;
}

:is(
    .room-collection,
    .luxury-section,
    .luxury-final-cta,
    .contact-care-strip,
    .checkin-prep-suite,
    .site-footer
  )::before,
:is(.luxury-final-cta, .site-footer)::after {
  opacity: 0.18 !important;
}

/* Panels feel architectural; pills remain reserved for compact actions. */
:is(
    .premium-surface,
    .luxury-room-copy,
    .luxury-review-card,
    .luxury-card,
    .contact-care-card,
    .luxury-contact-overview,
    .checkin-step-card,
    .checkin-arrival-bar,
    .ssg-card
  ) {
  border-radius: var(--fine-radius-md) !important;
  box-shadow: var(--fine-shadow-resting) !important;
}

.luxury-review-card {
  background: linear-gradient(145deg, rgb(247 241 230 / 9%), transparent),
    #17342f !important;
}

@media (hover: hover) and (pointer: fine) {
  :is(.luxury-review-card, .luxury-card, .contact-care-card):hover {
    border-color: var(--fine-border-dark) !important;
    box-shadow: 0 22px 60px rgb(7 24 20 / 13%) !important;
    transform: none !important;
  }
}

/* The room galleries now behave like photographic plates, not app cards. */
.luxury-room-gallery::before,
.premium-image-panel::after {
  display: none !important;
}

.luxury-room-gallery > .group {
  border-color: rgb(154 97 45 / 18%) !important;
  border-radius: var(--fine-radius-md) !important;
  box-shadow: var(--fine-shadow-media) !important;
}

.luxury-room-gallery > .group > div[class*="top-6"][class*="left-6"],
.luxury-room-gallery > .group > div[class*="top-6"][class*="right-6"] {
  -webkit-backdrop-filter: blur(12px) saturate(105%);
  backdrop-filter: blur(12px) saturate(105%);
  background: rgb(7 24 20 / 50%) !important;
  border: 1px solid rgb(247 241 230 / 18%);
  border-radius: var(--fine-radius-xs) !important;
  box-shadow: none !important;
}

.luxury-room-gallery > .group > button {
  background: rgb(247 241 230 / 88%) !important;
  border-color: rgb(154 97 45 / 22%) !important;
  border-radius: var(--fine-radius-xs) !important;
  box-shadow: 0 10px 30px rgb(7 24 20 / 13%) !important;
}

.luxury-room-gallery > .group > button:focus-visible,
.luxury-room-gallery > .group:focus-within > button:not(:disabled) {
  opacity: 1 !important;
}

.luxury-room-gallery > .group > div[role="region"] {
  outline-offset: -4px;
  overscroll-behavior-x: contain;
  touch-action: pan-y pinch-zoom;
}

.room-gallery-progress {
  box-shadow: 0 1px rgb(7 24 20 / 14%);
}

.room-gallery-progress > span {
  box-shadow: 0 0 14px rgb(247 241 230 / 36%);
}

.luxury-room-copy {
  background: linear-gradient(
    180deg,
    rgb(255 252 247 / 82%),
    rgb(247 241 230 / 68%)
  ) !important;
  border-color: var(--fine-border-light) !important;
}

.luxury-room-copy::before {
  width: 2px !important;
}

.room-index {
  font-size: 3.8rem !important;
  letter-spacing: -0.04em;
}

:is(
    .luxury-signature-main,
    .luxury-signature-float,
    .luxury-signature-badge,
    .como-included-card
  ) {
  border-radius: var(--fine-radius-sm) !important;
}

.luxury-signature-main,
.luxury-signature-float {
  box-shadow: var(--fine-shadow-media) !important;
}

.como-included-card {
  box-shadow: var(--fine-shadow-media) !important;
}

:is(
    .como-included-image,
    .luxury-signature-main,
    .luxury-signature-float,
    .luxury-room-gallery
  ) img {
  transition-duration: 900ms !important;
}

@media (hover: hover) and (pointer: fine) {
  :is(
      .como-included-card,
      .luxury-signature-main,
      .luxury-signature-float,
      .luxury-room-row
    ):hover img {
    transform: scale(1.018) !important;
  }
}

/* Booking and actions: precise hierarchy, restrained depth. */
.luxury-booking-shell {
  border-radius: var(--fine-radius-lg) !important;
  box-shadow: 0 20px 52px rgb(16 35 31 / 16%) !important;
  padding: 4px !important;
}

.luxury-booking-form {
  border-radius: calc(var(--fine-radius-lg) - 4px) !important;
}

.booking-field {
  position: relative;
}

.booking-field:hover {
  background: rgb(26 51 47 / 3.5%) !important;
}

.booking-field:focus-visible {
  box-shadow: inset 0 0 0 1px rgb(154 97 45 / 48%) !important;
}

.booking-field > span:first-child {
  border: 1px solid rgb(247 241 230 / 20%);
  box-shadow: inset 0 1px rgb(255 255 255 / 8%);
}

:is(.luxury-cta, .booking-submit-panel button) {
  box-shadow: 0 12px 30px rgb(16 35 31 / 16%) !important;
  letter-spacing: 0.14em;
}

.luxury-cta::after {
  display: none !important;
}

@media (hover: hover) and (pointer: fine) {
  :is(.luxury-cta, .booking-submit-panel button):hover {
    box-shadow: 0 14px 34px rgb(16 35 31 / 20%) !important;
    transform: none !important;
  }
}

/* Forms feel tactile without becoming visually loud. */
:is(.contact-form-suite, [role="dialog"]) :is(input, select, textarea) {
  border-radius: var(--fine-radius-sm) !important;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

:is(.contact-form-suite, [role="dialog"])
  :is(input, select, textarea):focus {
  border-color: rgb(154 97 45 / 55%) !important;
  box-shadow: 0 0 0 3px rgb(154 97 45 / 10%) !important;
}

/* Match the server-rendered first frame to the refined React experience. */
.ssg-card {
  background: rgb(255 250 242 / 84%) !important;
}

.ssg-fact {
  background: rgb(247 241 230 / 5%) !important;
  border-radius: var(--fine-radius-sm) !important;
}

.ssg-links a {
  box-shadow: none !important;
}

@media (max-width: 767px) {
  .home-hero-shade {
    background: linear-gradient(
      180deg,
      rgb(5 16 13 / 66%),
      rgb(8 22 18 / 30%) 42%,
      rgb(5 16 13 / 76%)
    );
  }

  .luxury-booking-shell,
  .luxury-booking-form,
  .luxury-room-gallery > .group,
  .luxury-room-copy {
    border-radius: var(--fine-radius-sm) !important;
  }

  .luxury-room-gallery > .group > div[class*="top-6"] {
    top: 1rem !important;
  }

  .luxury-room-gallery > .group > div[class*="left-6"] {
    left: 1rem !important;
  }

  .luxury-room-gallery > .group > div[class*="right-6"] {
    right: 1rem !important;
  }

  .room-index {
    font-size: 3.25rem !important;
  }
}

@media (hover: none), (pointer: coarse) {
  :is(.luxury-cta, .booking-submit-panel button):active {
    transform: scale(0.985) !important;
  }
}

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

  header::after {
    animation: none !important;
    transform: none !important;
  }

  :is(
      .premium-reveal,
      .premium-surface,
      .luxury-cta,
      .booking-submit-panel button,
      .luxury-room-gallery img,
      .como-included-card img
    ) {
    transition-duration: 1ms !important;
  }

  .luxury-room-gallery [class~="scroll-smooth"] {
    scroll-behavior: auto !important;
  }
}