/* Casa Santo — private homepage
   Palette: deep ink, warm limestone, brass. */

:root {
  --ink: #12150f;
  --ink-soft: #1b1f18;
  --focus: #12150f;
  --brass-deep: #7d6240;
  --limestone: #f2ede3;
  --limestone-dim: #e4ddd0;
  --brass: #c8a97e;
  --radius: 12px;
  --brass-dim: #a98b62;
  --stone: #6f7268;
  --display: 'Julius Sans One', 'Jost', 'Helvetica Neue', Arial, sans-serif;
  /* Page width: photos run nearly edge to edge with one small gutter (16px on
     phones, up to 32px on big screens); headings and text share that gutter.
     Long text keeps its own max-width (paragraphs in ch, the form in px). */
  --inset: clamp(16px, 2vw, 32px);
  --photo-gap: clamp(8px, .9vw, 14px);
  --section-y: clamp(56px, 6.5vw, 116px);
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --gutter: clamp(22px, 6vw, 110px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* No sideways wobble on phones. Clipped on the content rather than on html,
   which would break the sticky map on the location page. */
body > main, body > footer { overflow-x: clip; }
/* Anchor landings: skip most of a section's top padding so its heading sits just
   under the fixed header instead of a blank band (negative margins scroll further). */
#villa, #suites, #gallery, #swim, #stay { scroll-margin-top: calc(124px - var(--section-y)); }

body {
  margin: 0;
  background: var(--limestone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .01em;
  overflow-x: hidden;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
i { font-style: normal; color: var(--brass); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; top: 8px; transform: translate(-50%, -200%);
  z-index: 90; background: var(--ink); color: #fff; padding: 10px 18px;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
}
.skip-link:focus { transform: translate(-50%, 0); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
/* Focus ring colour follows the surface: ink on light, white on dark. */
.skip-link, .site-header, .hero, .facts, .suite-show, .immersive, .living, .stay, .ask, .tour, footer { --focus: #fff; }
.booking-card { --focus: var(--ink); }

/* ---------- shared type ---------- */

.eyebrow {
  margin: 0 0 1.4rem;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
}
h1, h2, h3, .facts strong, .booking-title, blockquote p {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0;
}
h1 em, h2 em { font-style: normal; font-weight: 400; color: var(--brass-deep); }
.hero em, .facts em, .immersive em, .living em, .stay em, .tour em, footer em { color: var(--brass); }
.rule { display: block; width: 64px; height: 1px; background: var(--brass); }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 30px; min-height: 44px;
  border: 1px solid #ffffffb8; border-radius: var(--radius);
  font-size: .7rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .24em;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .15s var(--ease);
}
.button:active, .booking-card button:active { transform: scale(.98); }
.button:disabled, .button[aria-disabled="true"] { border-color: #ffffff59; color: #ffffff8c; background: transparent; cursor: default; transform: none; }
.button:focus-visible { background: #fff; color: var(--ink); border-color: #fff; } @media (hover: hover) { .button:hover { background: #fff; color: var(--ink); border-color: #fff; } }
.button-solid { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.button-solid:focus-visible { background: #fff; border-color: #fff; } @media (hover: hover) { .button-solid:hover { background: #fff; border-color: #fff; } }

/* ---------- header ---------- */

.site-header {
  position: fixed; z-index: 40; top: 0; left: 0; width: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 24px;
  padding: calc(24px + env(safe-area-inset-top)) var(--inset) 24px;
  color: #fff;
  transition: background .5s var(--ease), padding .5s var(--ease), color .5s var(--ease);
}
.site-header::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(#0b0d0980, transparent);
  opacity: 1; transition: opacity .5s var(--ease);
}
.site-header.scrolled {
  padding: calc(15px + env(safe-area-inset-top)) var(--inset) 15px;
  background: #0e110ef2;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 #ffffff1a;
}
.site-header.scrolled::after { opacity: 0; }

.wordmark { font-size: .95rem; letter-spacing: .22em; font-weight: 400; text-transform: uppercase; white-space: nowrap; }

.site-header nav { display: flex; gap: clamp(1.1rem, 2vw, 2.2rem); }
.site-header nav a i { color: var(--brass); }
.site-header nav .nav-enquire { display: none; }
.site-header nav a {
  position: relative; font-size: .95rem; letter-spacing: .22em; text-transform: uppercase;
}
.site-header nav a::after {
  content: ''; position: absolute; left: 0; bottom: -7px; width: 0; height: 1px;
  background: var(--brass); transition: width .35s var(--ease);
}
.site-header nav a:focus-visible::after { width: 100%; } @media (hover: hover) { .site-header nav a:hover::after { width: 100%; } }

.site-header .wordmark { justify-self: start; }
.header-tools { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 14px; }

/* The one brass action in the header (D-024 slot): Enquire. */
.header-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 0 20px; border: 1px solid var(--brass); border-radius: 12px;
  background: var(--brass); color: var(--ink);
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.header-cta:focus-visible { background: #fff; border-color: #fff; } @media (hover: hover) { .header-cta:hover { background: #fff; border-color: #fff; } }

.sound-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 44px; min-height: 44px;
  background: transparent; border: 1px solid #ffffff59; border-radius: 12px; color: #fff;
  padding: 0 12px; cursor: pointer;
  font-family: inherit; font-size: .82rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase;
  transition: border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.sound-toggle:focus-visible { border-color: #fff; } @media (hover: hover) { .sound-toggle:hover { border-color: #fff; } }
.sound-toggle .speaker { display: block; flex: none; }
.sound-toggle .wave { opacity: 0; transition: opacity .3s var(--ease); }
.sound-toggle .slash { opacity: 1; transition: opacity .3s var(--ease); }
.sound-toggle[aria-pressed="true"] .wave { opacity: 1; }
.sound-toggle[aria-pressed="true"] .slash { opacity: 0; }

.menu-button {
  display: none; flex-direction: column; gap: 6px;
  background: none; border: 0; padding: 8px; color: inherit; cursor: pointer;
}
.menu-button span[aria-hidden] { display: block; width: 26px; height: 1px; background: currentColor; transition: transform .35s var(--ease); }
.site-header.open .menu-button span[aria-hidden]:first-child { transform: translateY(3.5px) rotate(45deg); }
.site-header.open .menu-button span[aria-hidden]:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
body.menu-open .ask { visibility: hidden; }
body.enquiring .ask { visibility: hidden; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  height: 100svh; min-height: 620px;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero-media { position: absolute; inset: -6% 0 0; height: 112%; will-change: transform; }
.hero-media video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(#0b0d0973 0%, #0b0d0912 30%, #0b0d0900 48%),
    linear-gradient(0deg, #070a05a6 0%, #070a0552 30%, #070a051a 52%, transparent 70%),
    linear-gradient(#0b0d0926, #0b0d0926);
}
.grain {
  position: absolute; inset: 0; opacity: .3; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.hero-content {
  position: absolute; z-index: 3;
  left: 0; right: 0; bottom: clamp(190px, 24vh, 260px);
  transition: bottom .6s var(--ease);
  padding: 0 var(--gutter);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.hero-content .eyebrow { color: #efe9dd; letter-spacing: .42em; font-size: .7rem; }
.hero h1 {
  font-size: clamp(3.5rem, 8.6vw, 9rem);
  text-shadow: 0 6px 40px #0b0d0959;
}
.hero-wordmark { display: block; width: min(900px, 78vw); margin: 0 auto; color: #fff; filter: drop-shadow(0 6px 30px #0b0d0966); }
.wordmark-svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero .rule { margin: clamp(26px, 4vh, 44px) 0 clamp(22px, 3.4vh, 36px); }
.hero-copy {
  max-width: 44ch; margin: 0;
  font-size: clamp(.95rem, 1.15vw, 1.08rem);
  color: #ece7dd;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: clamp(30px, 4.4vh, 48px); }


/* ---------- hero: ask Casa Santo ---------- */

.ask {
  position: fixed; z-index: 45; left: 0; right: 0;
  bottom: clamp(44px, 6vh, 64px);
  width: min(860px, calc(100% - 2 * var(--gutter))); margin: 0 auto;
  color: #fff;
}
/* One box. The same frosted boundary holds the bar when closed, grows upward
   to hold the conversation, and shrinks to a small pill past the hero. */
.ask-box {
  width: 100%; margin: 0 auto;
  border: 1px solid #ffffff40; border-radius: 20px;
  background: #ffffff1a;
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 20px 60px #0000004d;
  overflow: hidden;
  transition: width .9s cubic-bezier(.22, .61, .36, 1), border-radius .9s cubic-bezier(.22, .61, .36, 1), background .9s var(--ease), border-color .9s var(--ease);
}
/* Who you are talking to: a small mark, her name, and a soft "here now" dot. */
.ask-head {
  display: flex; align-items: center; gap: 12px;
  max-height: 0; padding: 0 64px 0 22px; overflow: hidden; opacity: 0;
  transition: max-height .9s var(--ease), padding .9s var(--ease), opacity .6s var(--ease);
}
.ask:not(.mini) .ask-head { max-height: 72px; padding-top: 16px; padding-bottom: 4px; opacity: 1; }
.ask-avatar {
  position: relative; flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border: 1px solid #c8a97e8c; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #c8a97e40, #c8a97e12 70%);
  color: var(--brass); font: 400 .92rem/1 var(--display); letter-spacing: 0; padding-left: 1px;
}
.ask-online {
  position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%;
  background: #9fc49a; box-shadow: 0 0 0 2px #1b1f18;
}
.ask-online::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #9fc49a; animation: online 2.8s ease-out infinite; }
@keyframes online { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
.ask-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.2; }
.ask-who b { font-weight: 400; font-size: .98rem; letter-spacing: .02em; color: #f7f2e8; }
.ask-who small { font-size: .74rem; letter-spacing: .01em; color: #ffffff99; }
.ask-log {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0; padding: 14px 22px 10px;
  max-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  transition: max-height 1.2s cubic-bezier(.22, .61, .36, 1), padding 1.2s cubic-bezier(.22, .61, .36, 1);
  /* older lines fade as they are pushed up */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 24px);
}
.ask-log::-webkit-scrollbar { display: none; }
.ask:not(.open) .ask-log { padding-top: 0; padding-bottom: 0; }
.ask-log:empty { display: none; }
/* No boxes inside the box: the visitor's words sit plainly on the right, the
   assistant answers in brass. */
.ask-msg {
  max-width: 88%; padding: 2px 0;
  font-size: 1.06rem; font-weight: 300; line-height: 1.55; letter-spacing: .005em;
  overflow-wrap: anywhere; word-break: break-word;
  text-shadow: 0 1px 10px #0b0d0980;
  animation: rise .5s var(--ease) both;
}
.ask-msg.user { align-self: flex-end; padding: 8px 14px; border-radius: 16px 16px 4px 16px; background: #ffffff1a; color: #fff; text-align: left; text-shadow: none; }
.ask-msg.bot { align-self: flex-start; color: #f1e6d1; }
/* Three soft dots while Nené thinks. */
.ask-typing { align-self: flex-start; display: inline-flex; gap: 5px; padding: 10px 0 6px; animation: rise .4s var(--ease) both; }
.ask-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--brass); opacity: .35; animation: typing 1.3s ease-in-out infinite; }
.ask-typing i:nth-child(2) { animation-delay: .16s; }
.ask-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
/* Tap-able choices under a line. The last one is always a way out. */
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; margin: 4px 0 4px; padding: 0; animation: rise .5s var(--ease) both; }
/* Quiet suggestions: sentence case, a soft fill, a small brass arrow. */
.ask-chip {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; min-height: 36px; padding: 0 14px 0 15px;
  border: 1px solid #ffffff1f; border-radius: 999px; background: #ffffff12; color: #f2ede3;
  font: 400 .88rem/1 var(--sans); letter-spacing: .01em; text-transform: none; white-space: nowrap; cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.ask-chip::after {
  content: ''; flex: none; width: 5px; height: 5px; margin-left: 1px;
  border-top: 1.3px solid var(--brass); border-right: 1.3px solid var(--brass);
  transform: rotate(45deg); opacity: .8; transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.ask-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; background: #ffffff21; border-color: #c8a97e80; }
@media (hover: hover) { .ask-chip:hover { background: #ffffff21; border-color: #c8a97e80; color: #fff; } .ask-chip:hover::after { transform: translateX(2px) rotate(45deg); opacity: 1; } }
.ask-chip.out { background: transparent; color: #ffffffb3; }
.ask-chip.out::after { display: none; }
.ask-form {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  transition: grid-template-columns .9s cubic-bezier(.22, .61, .36, 1);
}
/* Open, the question sits in one calm inner field with a round send button. */
.ask:not(.mini) .ask-form { margin: 4px 10px 10px; border: 1px solid #ffffff1f; border-radius: 14px; background: #0b0d0926; transition: border-color .3s var(--ease), background .3s var(--ease); }
.ask:not(.mini) .ask-form:focus-within { border-color: #c8a97e73; background: #0b0d0940; }
.ask.mini .ask-box { width: 208px; border-radius: 12px; border-color: #c8a97ea6; background: #0b0d0959; box-shadow: 0 10px 30px #00000040; }
.ask.mini .ask-form { grid-template-columns: 0fr auto; }
.ask.mini .ask-form input { opacity: 0; padding-left: 0; padding-right: 0; pointer-events: none; }
.ask.mini .ask-send { margin: 0; padding: 20px 22px; min-width: 0; min-height: 0; border-radius: 12px; background: transparent; color: var(--brass); white-space: nowrap; letter-spacing: .2em; }
.ask-send-name { display: none; }
.ask.mini .ask-send-name { display: inline; }
.ask.mini .ask-form input { padding-top: 0; padding-bottom: 0; height: 0; }
.ask.mini .ask-send:focus-visible { background: var(--brass); color: var(--ink); }
@media (hover: hover) { .ask.mini .ask-send:hover { background: var(--brass); color: var(--ink); } }
.ask.mini .ask-hint { opacity: 0; }
/* A closing conversation never shows clipped half-lines inside the shrinking pill. */
.ask.mini .ask-log { visibility: hidden; }
.ask-form input {
  min-width: 0; margin: 0; padding: 17px 18px; border: 0; background: transparent;
  color: #fff; font-family: inherit; font-size: 1.08rem; font-weight: 300; letter-spacing: .01em; outline: none;
  transition: opacity .5s var(--ease), padding .9s cubic-bezier(.22, .61, .36, 1);
}
.ask-form input::placeholder { color: #ffffff99; font-style: normal; }
.ask-form input.ghosting::placeholder { color: transparent; }
/* Example questions type themselves out while the field is empty. */
.ask-ghost {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%); pointer-events: none;
  display: inline-flex; align-items: center; max-width: calc(100% - 96px); white-space: nowrap; overflow: hidden;
  color: #ffffff99; font-size: 1.08rem; font-weight: 300; font-style: normal; letter-spacing: .01em;
  transition: opacity .4s var(--ease);
}
.ask-ghost.off, .ask.mini .ask-ghost, .ask.dates .ask-ghost { opacity: 0; }
.ask-caret { display: inline-block; width: 1px; height: 1.15em; margin-left: 3px; background: #ffffffcc; animation: caret 1.6s ease-in-out infinite; }
@keyframes caret { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.ask-send {
  margin: 8px; padding: 0 32px; min-width: 160px; border: 0; border-radius: 12px; text-align: center;
  background: var(--brass); color: var(--ink);
  font-family: inherit; font-size: 1.05rem; letter-spacing: .26em; text-transform: uppercase;
  cursor: pointer;
  transition: background .4s var(--ease), color .4s var(--ease), margin .9s cubic-bezier(.22, .61, .36, 1), padding .9s cubic-bezier(.22, .61, .36, 1), border-radius .9s cubic-bezier(.22, .61, .36, 1);
}
.ask-send:focus-visible { background: #fff; } @media (hover: hover) { .ask-send:hover { background: #fff; } }
/* The question's send button: a small brass circle with an arrow (the
   "Ask Nené" words only show on the resting pill). */
.ask-send-icon { display: none; }
.ask:not(.mini) .ask-form .ask-send {
  display: grid; place-items: center; width: 44px; height: 44px; min-width: 0; min-height: 0; margin: 0 6px 0 0; padding: 0;
  border-radius: 50%; letter-spacing: 0;
}
.ask:not(.mini) .ask-form .ask-send-label { display: none; }
.ask:not(.mini) .ask-form .ask-send-icon { display: block; }
.ask:not(.mini) .ask-form .ask-send:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* While the welcome is showing, the Ask button glows softly. */
.ask-send.glow { animation: askglow 1.8s ease-in-out infinite; }
@keyframes askglow {
  0%, 100% { box-shadow: 0 0 0 0 #c8a97e00; background: var(--brass); }
  50% { box-shadow: 0 0 26px 6px #c8a97e99; background: #e3c898; }
}
@media (prefers-reduced-motion: reduce) {
  .ask-caret { animation: none; opacity: 1; } .ask-send.glow { animation: none; } }
.ask-send[disabled] { opacity: .6; cursor: wait; }
/* Date selectors: the same box, swapped in when the visitor asks about dates. */
.ask-box { transition: width .9s var(--ease), border-radius .9s var(--ease), background .9s, border-color .9s, opacity .45s var(--ease), transform .45s var(--ease); }
.ask.swap .ask-box { opacity: 0; transform: scaleY(.55); }
.ask-dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: stretch; }
.ask-dates[hidden] { display: none; }
.ask-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: stretch; }
.ask-contact[hidden] { display: none; }
.ask.contact .ask-form { display: none; }
.ask-contact input { cursor: text; }
.ask-contact input::placeholder { color: #ffffffc2; font-style: italic; }
.ask.dates .ask-form { display: none; }
.ask-date { display: flex; flex-direction: column; gap: 5px; padding: 16px 22px; border-right: 1px solid #ffffff1f; }
.ask-date span { font-size: .74rem; letter-spacing: .02em; text-transform: none; color: #ffffffa6; }
.ask-date input, .ask-date select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: #fff; font: 300 1.25rem/1.3 var(--sans); letter-spacing: .01em; color-scheme: dark; padding: 0; outline: none; cursor: pointer; }
.ask-date input::placeholder { color: #ffffff80; }
/* Date fields: slimmer side padding so the full date ("Nov 10, 2026") fits. */
.ask-dates .ask-date { padding-left: 16px; padding-right: 16px; }
/* Check and Send: a calm brass pill, not a shouting block. */
.ask-dates .ask-send, .ask-contact .ask-send { align-self: center; margin: 0 10px; min-width: 0; min-height: 44px; padding: 0 22px; border-radius: 999px; font-size: .92rem; font-weight: 500; letter-spacing: .02em; text-transform: none; }
.ask-date select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right center; padding-right: 18px; }
.ask-date select option { color: var(--ink); }
.ask-date:focus-within, .ask-date.active { background: #ffffff14; }
.ask-date:has(:focus-visible) { outline: none; box-shadow: inset 0 -2px 0 var(--brass); }
.ask-form:has(#ask-input:focus-visible) { outline: none; }
/* Calendar: the site's own picker, in the same glass as the box. */
.ask-cal {
  position: absolute; bottom: calc(100% + 12px); left: 0; width: 360px; padding: 22px 22px 18px;
  border: 1px solid #ffffff2e; border-radius: 18px; background: #12150fe6; color: #fff;
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 20px 60px #0000004d; animation: rise .4s var(--ease) both;
}
.ask-cal[hidden] { display: none; }
.ask-cal-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; margin-bottom: 14px; }
.ask-cal-title { text-align: center; font-family: var(--sans); font-weight: 400; font-size: 1rem; letter-spacing: .02em; }
.ask-cal-nav { height: 44px; border: 0; border-radius: 50%; background: transparent; color: #fff; font: 300 1.4rem/1 var(--sans); cursor: pointer; transition: background .3s, border-color .3s; }
.ask-cal-nav:focus-visible { background: #ffffff1f; border-color: #fff; } @media (hover: hover) { .ask-cal-nav:hover { background: #ffffff1f; border-color: #fff; } }
.ask-cal-nav[disabled] { opacity: .3; cursor: default; }
.ask-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ask-cal-dow { text-align: center; padding: 6px 0 10px; font-size: .72rem; letter-spacing: .04em; color: #ffffff8c; }
.ask-cal-day { height: 42px; border: 1px solid transparent; border-radius: 50%; background: transparent; color: #fff; font: 300 1rem/1 var(--sans); cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.ask-cal-day:focus-visible { background: #ffffff1f; } @media (hover: hover) { .ask-cal-day:hover { background: #ffffff1f; } }
.ask-cal-day.today { border-color: #c8a97e99; }
.ask-cal-day.range { background: #c8a97e33; border-radius: 0; }
.ask-cal-day.picked { background: var(--brass); color: var(--ink); font-weight: 400; }
.ask-cal-day.picked.in { border-radius: 999px 0 0 999px; }
.ask-cal-day.picked.out { border-radius: 0 999px 999px 0; }
.ask-cal-day.picked.in.out, .ask-cal-day.picked.alone { border-radius: 50%; }
.ask-cal-day[disabled] { color: #ffffff59; cursor: default; background: transparent; }
.ask-cal-day.blank { visibility: hidden; }
.ask-back { grid-column: 1 / -1; justify-self: start; margin: 0; padding: 12px 22px 14px; border: 0; background: transparent; color: #ffffffa6; font: 400 .82rem/1 var(--sans); letter-spacing: .01em; text-transform: none; cursor: pointer; text-align: left; transition: color .3s var(--ease); }
.ask-back::before { content: '\2190'; margin-right: .5em; color: var(--brass); }
.ask-back:focus-visible { color: #fff; } @media (hover: hover) { .ask-back:hover { color: #fff; } }
.ask-fine { grid-column: 1 / -1; margin: 0; padding: 0 22px 14px; font-size: .72rem; letter-spacing: .01em; color: #ffffff8c; }
/* The note under the box: one quiet line, with "Talk to the team" beside it. */
.ask-hint { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 14px; margin: 12px 0 0; text-align: center; font-size: .76rem; line-height: 1.45; letter-spacing: .01em; color: #ffffffa6; text-shadow: 0 1px 8px #0b0d0999; transition: opacity .6s var(--ease); }
.ask-team {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: 0; padding: 0 2px; border: 0; background: none; cursor: pointer;
  color: #e3cba6; font: 400 .76rem/1 var(--sans); letter-spacing: .01em;
  text-decoration: underline; text-decoration-color: #c8a97e66; text-underline-offset: 4px; transition: color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.ask-team:focus-visible { outline: 2px solid #fff; outline-offset: 2px; color: #fff; }
@media (hover: hover) { .ask-team:hover { color: #fff; text-decoration-color: var(--brass); } }
.ask.mini .ask-hint { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ask-online::after, .ask-typing i { animation: none; } }
/* Once a conversation starts, the copy and buttons step aside for the answers. */
.hero-copy, .hero-proof, .hero-actions, .hero .rule { transition: opacity .6s var(--ease); }
.hero.chatting .hero-copy, .hero.chatting .hero-proof, .hero.chatting .hero-actions, .hero.chatting .rule { opacity: 0 !important; pointer-events: none; }
/* With the conversation open the wordmark rises to make room for it. */
.hero.chatting .hero-content { bottom: clamp(320px, 43vh, 420px); }

.scroll-cue {
  position: absolute; z-index: 3; left: 50%; bottom: 34px; transform: translateX(-50%);
  width: 1px; height: 46px; overflow: hidden; background: #ffffff2e;
}
.scroll-cue i { position: absolute; inset: 0; display: block; background: var(--brass); animation: trickle 2.6s var(--ease) infinite; }
@keyframes trickle { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(100%); } }

.stagger { opacity: 0; transform: translateY(26px); }
.hero.ready .stagger { animation: rise 1.5s var(--ease) forwards; }
.hero.ready .stagger:nth-child(1) { animation-delay: .15s; }
.hero.ready .stagger:nth-child(2) { animation-delay: .3s; }
.hero.ready .stagger:nth-child(3) { animation-delay: .5s; }
.hero.ready .stagger:nth-child(4) { animation-delay: .62s; }
.hero.ready .stagger:nth-child(5) { animation-delay: .76s; }
/* Fades in with a backwards fill: an animation held with forwards fill stops
   Chrome drawing the frosted blur behind the box. */
.ask { animation: askin 1.4s var(--ease) .9s backwards; }
@keyframes askin { from { opacity: 0; } }
@keyframes fadein { to { opacity: 1; } }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- the tour: full-screen scenes, slow and calm ---------- */
.tour { position: fixed; inset: 0; z-index: 55; background: var(--ink); color: #fff; opacity: 0; transition: opacity 1.8s var(--ease); }
.tour[hidden] { display: none; }
.tour.on { opacity: 1; }
.tour-scenes, .tour-scene { position: absolute; inset: 0; }
.tour-scene { opacity: 0; transition: opacity 3.2s var(--ease); overflow: hidden; }
.tour-scene.on { opacity: 1; }
.tour-scene img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.tour-scene.on img { transform: scale(1.1); transition: transform 14s linear; }
/* Scene 1 (portrait): on wide screens keep the stepping stones in view, not just the wall and door. */
.tour-scene:first-child img { object-position: 50% 60%; }
.tour-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, #080b06c7, #080b0600 48%), linear-gradient(180deg, #080b0680, #080b0600 22%); }
.tour-bar { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px var(--inset); padding-top: calc(22px + env(safe-area-inset-top)); }
.tour-title { font-size: .95rem; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; }
.tour-title i { color: var(--brass); }
.tour-tools { display: flex; align-items: center; gap: 14px; }
.tour-close { padding: 10px 22px; font-size: .82rem; letter-spacing: .2em; color: #fff; background: transparent; cursor: pointer; font-family: inherit; }
.tour-close:focus-visible { background: #fff; color: var(--ink); border-color: #fff; } @media (hover: hover) { .tour-close:hover { background: #fff; color: var(--ink); border-color: #fff; } }
.tour-caption { position: absolute; z-index: 3; left: var(--inset); right: var(--inset); bottom: clamp(52px, 9vh, 110px); max-width: 760px; opacity: 0; transform: translateY(10px); transition: opacity 1.6s var(--ease), transform 1.6s var(--ease); }
.tour-caption.on { opacity: 1; transform: none; }
.tour-caption .eyebrow { color: var(--brass); font-size: .8rem; }
.tour-caption h2 { margin: 0 0 14px; font-size: clamp(1.8rem, 3.8vw, 4.2rem); color: #fff; }
.tour-caption p:last-child { margin: 0; max-width: 60ch; color: #e6e2d8; font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.6; text-shadow: 0 1px 10px #0b0d0980; }
.tour-end { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 0 var(--inset) 30vh; text-align: center; opacity: 0; transition: opacity 2.2s var(--ease); pointer-events: none; }
.tour-end.on { opacity: 1; }
.tour-end-mark { width: min(760px, 78vw); color: #fff; filter: drop-shadow(0 6px 30px #0b0d0966); }
.tour-end-mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.tour-end p { margin: 0; color: #e6e2d8; font-size: clamp(1.05rem, 1.5vw, 1.35rem); letter-spacing: .04em; }
body.touring .ask { opacity: 0 !important; pointer-events: none; }
body.tour-done .ask { opacity: 1 !important; pointer-events: auto; z-index: 60; }
body.tour-done .ask-box { background: #12150fe6; border-color: #c8a97e8c; }
/* Pages without the hero (Location) */
body.plain .site-header { position: sticky; }
.plain-page { padding-top: clamp(130px, 14vw, 210px); min-height: 60vh; }

/* The hero rests dimmed behind the chat. A click outside the chat brightens
   it; a click back into the chat dims it again. */
.hero-media video { transition: filter 1.4s cubic-bezier(.22, .61, .36, 1); }
body.intro:not(.away) .hero-media video, body.dim:not(.away) .hero-media video { filter: blur(4px) brightness(.7) saturate(.9); }
.hero-veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: #0b0d0966;
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  transition: opacity 1.4s cubic-bezier(.22, .61, .36, 1);
}
body.intro:not(.away) .hero-veil, body.dim:not(.away) .hero-veil { opacity: 1; }
/* Past the hero, an engaged chat dims the page only slightly, with no blur. */
.page-veil {
  position: fixed; inset: 0; z-index: 39; pointer-events: none; opacity: 0;
  background: #0b0d0980;
  transition: opacity .5s cubic-bezier(.22, .61, .36, 1);
}
body.away.engaged .page-veil { opacity: 1; }
/* Over the light sections the field turns to dark glass so its text reads. */
body.away .ask-box { background: #12150fe6; border-color: #c8a97e8c; }
/* The note under the box gets its own dark label so it reads on limestone. */
body.away .ask-hint { width: max-content; max-width: 100%; margin: 10px auto 0; padding: 4px 14px; border-radius: 999px; background: #12150fd9; color: #e4ddd0; text-shadow: none; }
/* Open past the hero: one solid panel, its note tucked underneath as part of it. */
body.away .ask:not(.mini) .ask-box { background: #12150f; border-color: #c8a97e59; border-radius: 20px 20px 0 0; box-shadow: none; }
body.away .ask:not(.mini) .ask-hint {
  width: auto; margin: 0; padding: 12px 24px 14px;
  border: 1px solid #c8a97e59; border-top: 1px solid #ffffff14; border-radius: 0 0 20px 20px;
  background: #12150f; color: #b9bcb2; font-size: .74rem; letter-spacing: .01em; line-height: 1.5;
}
body.away .ask:not(.mini) { filter: drop-shadow(0 24px 50px #00000059); }
body.away .ask.mini .ask-box { background: #12150fe6; }
@media (prefers-reduced-motion: reduce) { .hero-veil, .page-veil, .hero-media video { transition: none; } }

/* The pill-to-box switch: fade out, resize while hidden, fade in. */
.ask.fading .ask-box, .ask.fading .ask-hint { opacity: 0 !important; transform: translateY(8px); transition: opacity .18s var(--ease), transform .18s var(--ease) !important; }
.ask.snap .ask-box, .ask.snap .ask-hint { transition: opacity .26s var(--ease), transform .26s var(--ease) !important; }
.ask.snap .ask-box * { transition: none !important; }

/* ---------- sections ---------- */

.section { padding: var(--section-y) var(--inset); }

.intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.intro h2, .plain-page h1, .spaces h2, .living h2 { font-size: clamp(1.7rem, 3.4vw, 3.6rem); }
.intro-body { padding-top: 2.5rem; max-width: 58ch; }
.intro-body p + p { margin-bottom: 0; color: #4a4d45; }
.intro-body p + p + p { margin-top: 1rem; }
.lead { font-size: clamp(1.15rem, 1.75vw, 1.5rem); line-height: 1.55; margin-top: 0; }

figure { margin: 0; }
.feature-image { margin-top: clamp(36px, 4vw, 64px); }
.feature-image img { height: auto; }

/* Title plate: the lettering the masters carried, redrawn with open A's. */
.plate { position: relative; isolation: isolate; }
.plate::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, #070a05b8 0%, #070a0566 30%, transparent 62%);
}
.plate-text {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(24px, 5vw, 64px);
  display: flex; flex-direction: column; align-items: center; gap: 0;
  margin: 0; padding: 0 var(--gutter); text-align: center; color: #fff;
  font-size: inherit; letter-spacing: normal; text-transform: none;
}
.plate-brand { font-size: .62rem; letter-spacing: .42em; text-transform: uppercase; color: #ffffffd9; margin-bottom: clamp(14px, 2vw, 26px); }
.plate-svg { display: block; width: min(560px, 62%); height: auto; overflow: visible; color: #fff; filter: drop-shadow(0 4px 20px #0b0d0966); }
.plate-text .rule { margin: clamp(16px, 2.4vw, 30px) 0 clamp(14px, 2vw, 24px); }
.plate-line { font-size: clamp(.88rem, 1.1vw, 1.05rem); font-weight: 300; letter-spacing: .12em; color: #ece7dd; }
.plate-strip { margin-top: clamp(14px, 2vw, 26px); font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: #ffffffc4; }
@media (max-width: 560px) {
  .plate img { min-height: 440px; object-fit: cover; object-position: 40% center; }
  .plate-svg { width: 80%; }
  .plate-line { font-size: .84rem; letter-spacing: .08em; }
  .plate-strip { font-size: .5rem; letter-spacing: .16em; }
  .plate-text { bottom: 22px; }
}
figcaption {
  padding-top: 16px; font-size: .7rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--stone);
}


.section-heading { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(30px, 6vw, 90px); align-items: end; margin-bottom: clamp(28px, 3vw, 52px); }
.section-heading > p { margin: 0; max-width: 46ch; color: #4a4d45; }

.spaces { background: var(--limestone-dim); }
.ensuites-heading { margin-top: clamp(48px, 5.5vw, 96px); }
.ensuite-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--photo-gap); }
.ensuite-grid figure { margin: 0; overflow: hidden; }
.ensuite-grid img { aspect-ratio: 3 / 2; height: auto; object-fit: cover; transition: transform 1.2s var(--ease); }
@media (hover: hover) { .ensuite-grid figure:hover img { transform: scale(1.04); } }
.suite-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--photo-gap); }
.suite-card { position: relative; overflow: hidden; color: #fff; aspect-ratio: 3 / 2; }
.suite-wide { grid-column: 1 / -1; aspect-ratio: 64 / 27; }
.suite-card::after { content: ''; position: absolute; inset: 38% 0 0; background: linear-gradient(transparent, #080b06e0); }
.suite-card img { transition: transform 1.2s var(--ease); }
@media (hover: hover) { .suite-card:hover img { transform: scale(1.04); } }
.suite-card > div { position: absolute; z-index: 2; left: 32px; right: 32px; bottom: 28px; }
.suite-card span { font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--brass); }
.suite-card h3 { font-size: clamp(1.05rem, 1.4vw, 1.4rem); margin: .4rem 0 .6rem; }
.suite-card p { margin: 0; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: #dcd8d0; }
.suite-card p b { font-weight: inherit; white-space: nowrap; }
/* Suites showcase: the suite plates, one at a time in a shuffled order, crossfading. */
.suite-show { position: relative; overflow: hidden; aspect-ratio: 2400 / 1128; max-height: 84svh; margin-bottom: var(--photo-gap); background: var(--ink); }
.suite-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 2.6s cubic-bezier(.22,.61,.36,1); }
.suite-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); }
/* Phone versions of some slides (and the immersive band) sit in a <picture>; it adds no box of its own. */
.suite-slide picture, .immersive picture { display: contents; }
.suite-slide .plate-svg { width: auto; max-width: 92%; height: clamp(17px, 2.3vw, 32px); }
.suite-slide.on { opacity: 1; z-index: 1; }
.suite-slide.on img, .suite-slide.off img { transform: scale(1.06); }
.suite-slide.on img { transition: transform 11s linear; }
.suite-slide .plate-text { opacity: 0; transform: translateY(14px); transition: opacity 1.8s cubic-bezier(.22,.61,.36,1) .5s, transform 1.8s cubic-bezier(.22,.61,.36,1) .5s; }
.suite-slide.on .plate-text { opacity: 1; transform: none; }
@media (max-width: 560px) {
  .suite-show { aspect-ratio: auto; height: 440px; }
  .suite-slide img { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .suite-slide, .suite-slide img, .suite-slide .plate-text { transition: none; }
  .suite-slide.on img { transform: none; }
}
.draft-note { margin: 28px 0 0; font-size: .7rem; letter-spacing: .06em; color: #5d6058; }

.immersive { position: relative; height: 88svh; min-height: 560px; color: #fff; overflow: hidden; }
.immersive img { position: absolute; inset: 0; }
.immersive::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #080b0699, #080b0600 42%); }
.immersive > div { position: absolute; z-index: 2; left: var(--inset); right: var(--inset); bottom: clamp(52px, 9vh, 110px); }
.immersive h2 { font-size: clamp(1.8rem, 3.8vw, 4.2rem); }

.living { background: var(--ink); color: #fff; }
.living .section-heading > p { color: #b9bcb2; }
/* The gallery: an editorial mosaic of five photographs, then the house space by space. */
.gallery-mosaic { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--photo-gap); height: clamp(420px, 40vw, 86svh); }
.mosaic-tile { position: relative; margin: 0; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; isolation: isolate; background: #0b0d09; color: inherit; cursor: pointer; transition: transform .25s var(--ease); }
.mosaic-tile.is-lead { grid-row: span 2; }
.mosaic-tile img { transition: transform 1.4s var(--ease), filter .6s var(--ease); }
.mosaic-tile::after { content: ''; position: absolute; inset: 55% 0 0; z-index: 1; background: linear-gradient(transparent, #080b06b3); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.mosaic-label { position: absolute; z-index: 2; left: 16px; bottom: 14px; right: 16px; text-align: left; color: #f2ede3; font-size: .66rem; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; opacity: 0; transform: translateY(4px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.mosaic-tile:focus-visible::after, .mosaic-tile:focus-visible .mosaic-label { opacity: 1; transform: none; }
@media (hover: hover) {
  .mosaic-tile:hover img { transform: scale(1.035); }
  .mosaic-tile:hover::after, .mosaic-tile:hover .mosaic-label { opacity: 1; transform: none; }
}
.mosaic-tile:active { transform: scale(.985); }
.mosaic-all {
  position: absolute; z-index: 3; right: 18px; bottom: 18px;
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 0 20px;
  border: 0; border-radius: var(--radius); background: var(--limestone); color: var(--ink);
  font: 400 .7rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 8px 26px #0000004d; transition: background .3s var(--ease), transform .25s var(--ease);
}
.mosaic-all:focus-visible { outline-color: var(--brass); background: #fff; } @media (hover: hover) { .mosaic-all:hover { background: #fff; } }
.mosaic-all:active { transform: scale(.97); }

.gallery-spaces { margin-top: clamp(36px, 4vw, 60px); }
.gallery-spaces .eyebrow { margin-bottom: 18px; color: #b9bcb2; }
.space-list { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--photo-gap); margin: 0; padding: 0; list-style: none; }
.space-card { display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.space-card img { height: auto; aspect-ratio: 4 / 5; border-radius: var(--radius); transition: filter .4s var(--ease), transform .25s var(--ease); }
.space-name { margin-top: 12px; color: #efe9dd; font-size: .68rem; font-weight: 400; letter-spacing: .18em; line-height: 1.45; text-transform: uppercase; }
.space-count { margin-top: 2px; color: #969a8f; font-size: .76rem; letter-spacing: .04em; }
@media (hover: hover) { .space-card:hover img { filter: brightness(1.1); } .space-card:hover .space-name { color: var(--brass); } }
.space-card:active img { transform: scale(.97); }

@media (max-width: 960px) {
  /* The spaces become a row to swipe through, edge to edge. */
  .space-list { display: flex; gap: 10px; overflow-x: auto; margin: 0 calc(-1 * var(--inset)); padding: 0 var(--inset) 4px; scroll-padding: 0 var(--inset); scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .space-list::-webkit-scrollbar { display: none; }
  .space-list li { flex: 0 0 128px; scroll-snap-align: start; }
}
@media (max-width: 760px) {
  .gallery-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 6px; height: auto; }
  .mosaic-tile.is-lead { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; }
  .mosaic-tile { aspect-ratio: 1; }
  .mosaic-tile:nth-child(n+4) { display: none; }
  .mosaic-label { display: none; }
  .mosaic-all { position: static; grid-column: span 2; justify-content: center; min-height: 50px; margin-top: 6px; border: 1px solid #ffffff38; background: transparent; color: #efe9dd; box-shadow: none; }
  .mosaic-all:focus-visible { background: #ffffff14; }
}

/* The viewer: every photograph, full screen, grouped by space. */
.viewer {
  --focus: #fff;
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: var(--ink); color: #fff;
}
.viewer[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; animation: viewer-in .35s var(--ease); }
.viewer::backdrop { background: var(--ink); }
@keyframes viewer-in { from { opacity: 0; } }
.viewer-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) clamp(12px, 3vw, 32px) 8px; }
.viewer-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid #ffffff38; border-radius: var(--radius); background: transparent; color: #fff; cursor: pointer; transition: background .3s var(--ease), border-color .3s var(--ease), transform .2s var(--ease); }
.viewer-close:focus-visible { background: #ffffff1a; border-color: #fff; } @media (hover: hover) { .viewer-close:hover { background: #ffffff1a; border-color: #fff; } }
.viewer-close:active { transform: scale(.94); }
.viewer-title { margin: 0; font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; color: #e6e1d6; }
.viewer-count { margin: 0; justify-self: end; color: var(--brass); font-size: .74rem; letter-spacing: .22em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.viewer-spaces { display: flex; gap: 8px; overflow-x: auto; padding: 6px clamp(12px, 3vw, 32px) 14px; scrollbar-width: none; overscroll-behavior-x: contain; }
.viewer-spaces::-webkit-scrollbar { display: none; }
.viewer-spaces button:first-child { margin-left: auto; } .viewer-spaces button:last-child { margin-right: auto; }
.viewer-spaces button {
  flex: none; min-height: 40px; margin: 0; padding: 0 16px; border: 1px solid #ffffff2b; border-radius: var(--radius);
  background: transparent; color: #d9d4c8; font: 400 .66rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.viewer-spaces button:focus-visible { border-color: #fff; } @media (hover: hover) { .viewer-spaces button:hover { border-color: #ffffff8c; color: #fff; } }
.viewer-spaces button[aria-current="true"] { background: var(--limestone); border-color: var(--limestone); color: var(--ink); }
.viewer-stage { position: relative; min-height: 0; }
.viewer-track { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; transition: opacity .16s var(--ease); }
.viewer-track::-webkit-scrollbar { display: none; }
.viewer-track.cut { opacity: 0; }
.viewer-slide { position: relative; flex: 0 0 100%; display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 clamp(16px, 7vw, 104px); scroll-snap-align: center; scroll-snap-stop: always; }
.viewer-slide img { width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: var(--radius); opacity: 0; transition: opacity .5s var(--ease); }
.viewer-slide.loaded img { opacity: 1; }
.viewer-slide:not(.loaded)::before { content: ''; position: absolute; left: 50%; top: 50%; width: 36px; height: 1px; margin-left: -18px; background: var(--brass); animation: viewer-wait 1.4s ease-in-out infinite; }
@keyframes viewer-wait { 50% { opacity: .2; transform: scaleX(.4); } }
.viewer-nav {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0; padding: 0;
  border: 1px solid #ffffff38; border-radius: var(--radius); background: #0b0d0973; color: #fff; cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease), opacity .3s var(--ease);
}
.viewer-nav.prev { left: clamp(12px, 2vw, 28px); } .viewer-nav.next { right: clamp(12px, 2vw, 28px); }
.viewer-nav:focus-visible { background: var(--brass); border-color: var(--brass); color: var(--ink); } @media (hover: hover) { .viewer-nav:not(:disabled):hover { background: var(--brass); border-color: var(--brass); color: var(--ink); } }
.viewer-nav:active { transform: translateY(-50%) scale(.94); }
.viewer-nav:disabled { opacity: .2; cursor: default; }
.viewer-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; min-height: 96px; padding: 16px clamp(16px, 3vw, 32px) calc(20px + env(safe-area-inset-bottom)); }
.viewer-caption { min-width: 0; }
.viewer-where { margin: 0 0 6px; color: var(--brass); font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; }
.viewer-text { margin: 0; max-width: 60ch; color: #ece6da; font-size: 1.02rem; line-height: 1.5; }
.viewer-dots { display: flex; flex: none; gap: 6px; padding-bottom: 8px; }
.viewer-dots span { width: 6px; height: 6px; border-radius: 50%; background: #ffffff38; transition: background .3s var(--ease), transform .3s var(--ease); }
.viewer-dots span.on { background: var(--brass); transform: scale(1.25); }
@media (max-width: 760px), (hover: none) {
  .viewer-nav { display: none; }
}
@media (max-width: 760px) {
  .viewer-title { display: none; }
  .viewer-bar { grid-template-columns: auto 1fr; }
  .viewer-spaces button { min-height: 44px; }
  .viewer-slide { padding: 0; }
  .viewer-slide img { border-radius: 0; }
  .viewer-foot { flex-direction: column-reverse; align-items: flex-start; gap: 14px; min-height: 120px; }
  .viewer-text { font-size: .96rem; }
}
/* While the viewer is open the page stays still and the chat and bottom bar step away. */
html:has(> body.viewing) { overflow: hidden; }
body.viewing .ask, body.viewing .app-bar { visibility: hidden !important; }
@media (prefers-reduced-motion: reduce) {
  .viewer[open] { animation: none; }
  .viewer-track, .viewer-slide img, .mosaic-tile, .mosaic-tile img, .space-card img { transition: none !important; }
  .mosaic-tile:hover img { transform: none; }
  .viewer-slide:not(.loaded)::before { animation: none; }
}

.quote { padding: clamp(64px, 8vw, 128px) var(--inset); background: var(--brass); color: var(--ink); text-align: center; }
.quote blockquote { margin: 0 auto; max-width: min(100%, 760px); }
.quote p { font-size: clamp(1.1rem, 2.1vw, 2.1rem); line-height: 1.4; margin: 0; max-width: none; }

.swim { display: grid; grid-template-columns: 1.35fr .65fr; align-items: center; gap: clamp(32px, 4.5vw, 88px); padding: var(--section-y) var(--inset); }
.swim-media img { height: auto; aspect-ratio: 4 / 3; object-position: 34% center; }
.swim h2 { font-size: clamp(1.5rem, 2.6vw, 2.7rem); margin-bottom: 1.6rem; }
.swim-copy p:not(.eyebrow) { max-width: 46ch; color: #4a4d45; }
.swim-copy .button { margin-top: 1.4rem; }

.stay { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(44px, 7vw, 110px); padding: var(--section-y) var(--inset); background: var(--ink-soft); color: #fff; }
.stay h2 { font-size: clamp(1.7rem, 3.2vw, 3.4rem); }
.stay-copy > p:not(.eyebrow) { max-width: 46ch; margin-top: 2rem; color: #b9bcb2; }
.booking-card { align-self: center; width: 100%; border-radius: var(--radius); background: var(--limestone); color: var(--ink); padding: clamp(28px, 3vw, 42px); box-shadow: 0 30px 80px #00000059; }
.booking-title { font-size: 1.1rem; margin-bottom: 1.4rem; }
.enquiry { display: grid; gap: 0; }
.enq-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; }
.enq-field { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid #25271f24; min-width: 0; }
.enq-field span { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }
.enq-field input, .enq-field select, .enq-field textarea {
  width: 100%; min-width: 0; min-height: 44px; padding: 8px 0; border: 0; border-radius: 0;
  background: transparent; color: var(--ink); font: 300 1rem/1.4 var(--sans);
}
.enq-field textarea { resize: vertical; min-height: 72px; }
.enq-field input::placeholder, .enq-field textarea::placeholder { color: #6b6e66; }
.enq-field:focus-within { border-bottom-color: var(--ink); }
.enq-field input:focus-visible, .enq-field select:focus-visible, .enq-field textarea:focus-visible { outline-offset: 2px; }
.enq-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.booking-card button {
  width: 100%; margin-top: 24px; padding: 18px; border: 0; border-radius: var(--radius); min-height: 52px;
  background: var(--ink); color: #fff; font-family: inherit; font-size: .78rem;
  letter-spacing: .22em; text-transform: uppercase; cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), transform .15s var(--ease);
}
.booking-card button:focus-visible { background: var(--brass); color: var(--ink); } @media (hover: hover) { .booking-card button:hover { background: var(--brass); color: var(--ink); } }
.booking-card button:disabled { background: #3a3d36; color: #e6e2d8; cursor: progress; transform: none; }
.enq-status { margin: 14px 0 0; min-height: 1.4em; font-size: .9rem; }
.enq-status:empty { display: none; }
.enq-status.ok { color: #2f5a2c; }
.enq-status.error { color: #8a2f1c; }
.booking-card small { display: block; margin-top: 14px; text-align: center; font-size: .75rem; color: #5d6058; }

footer { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 28px clamp(32px, 5vw, 80px); padding: clamp(56px, 6vw, 84px) var(--inset); background: var(--ink); color: #fff; }
footer .wordmark { justify-self: start; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px clamp(18px, 2.4vw, 36px); }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: #dcdcd4; }
@media (hover: hover) { .footer-nav a:hover { color: var(--brass); } }
/* Plain pages: the footer sits at the bottom of the window; the current page is underlined. */
body.plain { min-height: 100svh; display: flex; flex-direction: column; }
body.plain main { flex: 1; }
.site-header nav a[aria-current="page"]::after { width: 100%; }
footer p { margin: 0; color: #a7aaa0; }
.footer-note { text-align: right; font-size: .68rem; letter-spacing: .08em; }
.footer-mail { color: #dcdcd4; white-space: nowrap; }
@media (hover: hover) { .footer-mail:hover { color: var(--brass); } }
/* Small privacy links inside the chat and enquiry notes. */
.ask-hint a, .ask-fine a, .booking-card small a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: currentColor; }

.reveal { opacity: 0; transform: translateY(34px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- reasons to book ---------- */

/* Hero buttons: one set, in the same dark frosted glass and brass lettering
   as the Ask Nené pill; they fill with brass on hover. */
.hero-actions .button {
  background: #0b0d0980; border-color: var(--brass); color: #ecd3a6; font-weight: 500;
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px #00000040;
}
.hero-actions .button:focus-visible { background: var(--brass); border-color: var(--brass); color: var(--ink); } @media (hover: hover) { .hero-actions .button:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); } }

/* Photos sit in soft rounded frames, like the chat and the cards; full-width
   background pictures (hero, the pool band) stay edge to edge. */
.feature-image, .swim-media, .suite-show, .suite-card, .ensuite-grid figure {
  border-radius: 14px; overflow: hidden; isolation: isolate;
}

/* "Talk to the team" details: quieter than the question bar. Smaller type,
   no white focus box, a soft "no thanks", and one privacy note (the hint
   under the box already says chats are kept for twelve months). */
.ask-contact .ask-date { padding: 16px 24px; gap: 4px; }
.ask-contact .ask-date span { font-size: .74rem; letter-spacing: .02em; color: #ffffffa6; }
.ask-contact input { font-size: 1.1rem; font-style: normal; }
.ask-contact input::placeholder { font-style: normal; color: #ffffff73; }
.ask-contact .ask-date:focus-within, .ask-contact .ask-date.active { background: #ffffff08; }
.ask-contact .ask-date:has(:focus-visible) { outline: none; box-shadow: inset 0 -1px 0 var(--brass); }
.ask-contact .ask-send { min-width: 0; padding: 0 22px; font-size: .92rem; letter-spacing: .02em; }
.ask-contact .ask-back { padding: 10px 22px 14px; font-size: .8rem; letter-spacing: .01em; text-transform: none; color: #ffffff8c; }
.ask-contact .ask-back:focus-visible { color: var(--brass); } @media (hover: hover) { .ask-contact .ask-back:hover { color: var(--brass); } }
.ask-contact .ask-fine { display: none; }

/* Opening: the description and rating show over the dimmed picture, then fade
   as it brightens, so no light text sits on the bright video. */
.hero-intro { display: flex; flex-direction: column; align-items: center; transition: opacity 1.4s cubic-bezier(.22, .61, .36, 1), visibility 0s linear 1.4s; }
body.intro .hero-intro { transition: opacity .6s var(--ease); }
body:not(.intro) .hero-intro { opacity: 0; visibility: hidden; }
.hero.ready .hero-intro .stagger:nth-child(1) { animation-delay: .5s; }
.hero.ready .hero-intro .stagger:nth-child(2) { animation-delay: .62s; }

.stars { color: var(--brass); letter-spacing: .08em; }
.hero-proof {
  display: inline-block; padding: 12px 4px; margin-top: .4rem; white-space: nowrap;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: #f4efe6;
  text-shadow: 0 2px 16px #0b0d09b3;
}
.hero-proof i { font-style: normal; margin: 0 .35em; color: #ffffffa6; }
.hero-proof .stars { font-size: 1.25em; margin-right: .25em; vertical-align: -.06em; }
.hero-proof:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 6px; } @media (hover: hover) { .hero-proof:hover { color: #fff; text-decoration: underline; text-underline-offset: 6px; } }


.intro-quote { margin: 2.2rem 0 0; padding-top: 1.6rem; border-top: 1px solid #12150f26; }
.intro-quote blockquote { margin: 0; }
.intro-quote p { margin: 0; font-family: var(--sans); font-size: 1.15rem; font-style: italic; letter-spacing: 0; text-transform: none; line-height: 1.55; color: var(--ink); }
.intro-quote figcaption { margin-top: .8rem; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: #4a4d45; }
.intro-quote .stars { margin-right: .6em; color: var(--brass-deep); }


.stay-reasons { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.stay-reasons li { position: relative; padding-left: 30px; color: #ece7dd; }
.stay-reasons li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 12px; height: 6px; border-left: 1.5px solid var(--brass); border-bottom: 1.5px solid var(--brass); transform: rotate(-45deg); }
.stay-quote { margin: 2.6rem 0 0; padding-top: 1.6rem; border-top: 1px solid #ffffff26; max-width: 46ch; }
.stay-quote blockquote { margin: 0; }
.stay-quote p { margin: 0; font-family: var(--sans); font-size: 1.05rem; font-style: italic; letter-spacing: 0; text-transform: none; line-height: 1.6; color: #ece7dd; }
.stay-quote figcaption { margin-top: .8rem; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: #b9bcb2; }

@media (max-width: 560px) {
  .hero-proof { font-size: .72rem; letter-spacing: .12em; }
  .hero-proof-extra { display: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  /* Phones and tablets: the menu is a panel that slides in from the right,
     with the pages listed down it; the rest of the page stays visible behind a soft shade. */
  .site-header nav {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1;
    width: min(82vw, 340px);
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: calc(96px + env(safe-area-inset-top)) 28px calc(28px + env(safe-area-inset-bottom));
    background: #0e1110f7; border-left: 1px solid #c8a97e2e;
    box-shadow: -24px 0 60px #00000059;
    transform: translateX(100%); visibility: hidden;
    transition: transform .28s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .28s;
    overflow-y: auto; overscroll-behavior: contain;
  }
  .site-header.open nav { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.32, .72, 0, 1), visibility 0s; }
  .site-header nav a {
    display: block; position: relative; padding: 20px 28px 20px 2px; border-bottom: 1px solid #ffffff14;
    font-size: .9rem; line-height: 1.2; letter-spacing: .24em; color: #ece6da;
  }
  .site-header nav a:first-child { border-top: 1px solid #ffffff14; }
  .site-header nav a::after, .site-header nav a[aria-current="page"]::after {
    left: auto; right: 6px; top: 50%; bottom: auto; width: 7px; height: 7px; margin-top: -4px; background: none;
    border-top: 1px solid var(--brass); border-right: 1px solid var(--brass); transform: rotate(45deg);
    opacity: .7; transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .site-header nav a:focus-visible::after { width: 7px; opacity: 1; transform: translateX(3px) rotate(45deg); } @media (hover: hover) { .site-header nav a:hover::after { width: 7px; opacity: 1; transform: translateX(3px) rotate(45deg); } }
  /* The menu has its own Enquire, so the header's steps aside while it is open. */
  .site-header .header-cta { transition: opacity .3s var(--ease), background .35s var(--ease), border-color .35s var(--ease); }
  .site-header.open .header-cta { opacity: 0; pointer-events: none; }
  .site-header nav a[aria-current="page"] { color: var(--brass); }
  .site-header nav .nav-enquire {
    display: block; text-align: center; padding: 18px 0; margin-top: 28px; border: 0;
    border-radius: 12px; background: var(--brass); color: var(--ink); font-size: .78rem; letter-spacing: .24em;
  }
  .site-header nav .nav-enquire::after { display: none; }
  /* The shade over the page; tapping it closes the menu. */
  .site-header::before {
    content: ''; position: fixed; inset: 0; z-index: 0; background: #05060499;
    opacity: 0; visibility: hidden; transition: opacity .28s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .28s;
  }
  .site-header.open::before { opacity: 1; visibility: visible; transition: opacity .28s cubic-bezier(.32, .72, 0, 1), visibility 0s; }
  /* A blurred header would trap the fixed panel inside its own box. */
  .site-header.open { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .menu-button { display: flex; }
  .header-tools { position: relative; z-index: 2; gap: 8px; }
  @media (prefers-reduced-motion: reduce) { .site-header nav, .site-header::before { transition: none !important; } }
  .site-header .wordmark { position: relative; z-index: 2; }
  .menu-button { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .header-cta { padding: 0 14px; font-size: .7rem; letter-spacing: .18em; }

  .intro-grid, .section-heading, .stay, .swim { grid-template-columns: 1fr; }
  .section-heading { align-items: start; }
  .suite-grid { grid-template-columns: 1fr; }
  .suite-grid { grid-template-columns: 1fr; }
  .suite-card, .suite-wide { grid-column: auto; aspect-ratio: 3 / 2; }
  .ensuite-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tour-bar { padding: 16px var(--gutter); padding-top: calc(16px + env(safe-area-inset-top)); }
  .tour-title { font-size: .7rem; letter-spacing: .18em; }
  .tour-close { padding: 9px 14px; font-size: .7rem; }
  .tour-caption h2 { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .tour-end { padding-bottom: 38vh; }
  footer { grid-template-columns: 1fr; }
  .footer-nav { justify-content: flex-start; }
  .footer-note { text-align: left; }
}

@media (max-width: 560px) {
  .hero-content { bottom: clamp(180px, 25vh, 230px); }
  .hero.chatting .hero-content { bottom: clamp(300px, 42vh, 360px); }
  .hero h1 { font-size: clamp(2.6rem, 11.5vw, 4rem); }
  .hero-content { padding: 0 18px; }
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .scroll-cue { display: none; }
  .ask { bottom: 36px; }
  .ask-form input { font-size: 1rem; padding: 15px 16px; }
  .ask-ghost { left: 16px; font-size: 1rem; max-width: calc(100% - 84px); }
  .ask-send { padding: 0 18px; min-width: 112px; min-height: 50px; font-size: .95rem; margin: 6px; }
  .ask-msg { font-size: .98rem; line-height: 1.5; }
  .ask-log { padding: 10px 16px 8px; }
  .ask-head { padding-left: 16px; }
  .ask:not(.mini) .ask-form { margin: 2px 8px 8px; }
  /* Suggestions: one row that scrolls sideways, like an app. */
  .ask-chips { flex-wrap: nowrap; flex-shrink: 0; align-self: stretch; gap: 8px; margin: 4px -16px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent); }
  .ask-chips::-webkit-scrollbar { display: none; }
  .ask-chip { flex: none; font-size: .86rem; }
  .ask-hint { display: block; font-size: .72rem; padding: 0 6px; }
  .ask-team { display: inline; min-height: 0; margin-left: 6px; padding: 6px 0; font-size: .72rem; }
  .ask.mini .ask-box { width: 168px; }
  .ask.mini .ask-send { padding: 14px 18px; font-size: .9rem; letter-spacing: .16em; }
  .ask-dates { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ask-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ask-contact .ask-date:nth-child(2) { border-right: 0; }
  .ask-contact .ask-send { grid-column: 1 / -1; margin: 6px; padding: 0 18px; justify-self: center; align-self: center; }
  .ask-date { padding: 10px 16px; }
  .ask-date span { font-size: .72rem; }
  .ask-back { padding: 10px 16px 12px; font-size: .8rem; }
  .ask-date input, .ask-date select { font-size: 1.08rem; }
  .ask-date:nth-child(2) { border-right: 0; }
  .ask-date:nth-child(3) { border-top: 1px solid #ffffff33; }
  .ask-dates .ask-send { margin: 6px; padding: 0 18px; justify-self: center; align-self: center; }
  .ask-cal { left: 0; right: 0; width: auto; padding: 16px 14px 12px; background: #0b0d09f7; }
  .ask-cal-day { height: 38px; font-size: 1rem; }
  .wordmark { font-size: .7rem; letter-spacing: .18em; }
  .site-header { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .stagger { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .suite-card img, .hero-media { transition: none !important; transform: none !important; }
  .scroll-cue i { animation: none !important; }
  .tour, .tour-scene, .tour-scene img, .tour-caption, .tour-end { transition: none !important; transform: none !important; }
}

/* Phone tap targets: every control at least 44px in both directions. */
@media (max-width: 960px) {
  a.wordmark { display: inline-flex; align-items: center; min-height: 44px; }
  .ask-chip { min-height: 44px; }
  .ask-cal-day { min-height: 44px; }
  .sound-toggle { min-width: 44px; min-height: 44px; }
}

/* Guest reviews (scores from the live Airbnb listing) */
.button-dark { border-color: var(--ink); color: var(--ink); }
.button-dark:focus-visible { background: var(--ink); border-color: var(--ink); color: #fff; } @media (hover: hover) { .button-dark:hover { background: var(--ink); border-color: var(--ink); color: #fff; } }
.reviews { background: var(--limestone); text-align: center; }
.reviews-top { max-width: 760px; margin: 0 auto; }
.reviews-score { margin: 0; font-family: var(--display); font-size: clamp(5rem, 11vw, 9rem); line-height: 1; letter-spacing: .02em; color: var(--ink); }
.reviews-stars { margin: .6rem 0 1.6rem; font-size: 1.35rem; letter-spacing: .3em; color: var(--brass); }
.reviews h2 { font-size: clamp(1.3rem, 2.2vw, 2rem); }
.reviews h2 em { display: inline; }
.reviews-lede { max-width: 52ch; margin: 1.2rem auto 0; color: #4a4d45; }
.reviews-scores {
  display: grid; grid-template-columns: repeat(6, 1fr);
  max-width: 1040px; margin: clamp(48px, 6vw, 80px) auto 0; padding: 28px 0;
  border-top: 1px solid #12150f1f; border-bottom: 1px solid #12150f1f;
}
.reviews-scores div { display: flex; flex-direction: column-reverse; gap: .5rem; border-right: 1px solid #12150f1a; }
.reviews-scores div:last-child { border-right: 0; }
.reviews-scores dt { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #4a4d45; }
.reviews-scores dd { margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 2.1rem); color: var(--brass-deep); }
.reviews-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: clamp(48px, 6vw, 80px); text-align: left; }
.reviews-quotes figure {
  display: flex; flex-direction: column; margin: 0; padding: clamp(26px, 2.6vw, 38px);
  background: #fbf9f4; border: 1px solid #12150f12; border-radius: 14px; box-shadow: 0 18px 40px #12150f0f;
}
.reviews-quotes .stars { font-size: .95rem; letter-spacing: .22em; }
.reviews-quotes blockquote { flex: 1; margin: 1rem 0 0; }
.reviews-quotes p { margin: 0; font-family: var(--sans); font-size: 1.08rem; font-weight: 300; font-style: italic; line-height: 1.65; letter-spacing: 0; text-transform: none; color: var(--ink); }
.reviews-quotes figcaption { margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid #12150f14; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.reviews-quotes figcaption span { display: block; margin-top: .35rem; letter-spacing: .04em; text-transform: none; color: #5c5f57; }
.reviews-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(40px, 5vw, 64px); }
.reviews-note { margin: 1.4rem 0 0; font-size: .8rem; color: #5c5f57; }
@media (max-width: 960px) {
  .reviews-scores { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
  .reviews-scores div:nth-child(3) { border-right: 0; }
  /* Quotes become a swipeable row, so the section stays short on a phone. */
  .reviews-quotes {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-left: calc(-1 * var(--inset)); margin-right: calc(-1 * var(--inset)); padding: 4px var(--inset) 24px;
    scroll-padding: 0 var(--inset); scrollbar-width: none;
  }
  .reviews-quotes::-webkit-scrollbar { display: none; }
  .reviews-quotes figure { flex: 0 0 min(82%, 420px); scroll-snap-align: start; }
}
@media (max-width: 560px) {
  .reviews-actions { flex-direction: column; align-items: stretch; }
}

/* Example questions read as examples, not as typed text */
.ask-ghost-try { margin-right: .45em; color: var(--brass); font-style: normal; letter-spacing: .08em; }

/* Moving between pages (home and Location) crossfades softly; the header stays put. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- hero actions: one clear invitation, the picture left open ----------
   "Plan your stay" is the only button. "Discover the villa" is a quiet text
   link, and on phones and tablets Ask Nené rests as a small chip in the
   bottom corner instead of a bar across the pool. */
.hero-actions { align-items: center; gap: 10px 26px; }
.hero-link {
  display: inline-flex; align-items: center; gap: .7em; min-height: 44px; padding: 0 6px;
  font-size: .7rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: #f4efe6; text-shadow: 0 1px 3px #0b0d09e6, 0 2px 16px #0b0d09cc;
  transition: color .3s var(--ease);
}
.hero-link::after {   /* a small down arrow: the villa is just below */
  content: ''; width: 7px; height: 7px; margin-top: -4px;
  border-right: 1.5px solid var(--brass); border-bottom: 1.5px solid var(--brass);
  transform: rotate(45deg); transition: transform .3s var(--ease);
}
.hero-link:focus-visible { color: #fff; text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 7px; } @media (hover: hover) { .hero-link:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 7px; } }
@media (hover: hover) { .hero-link:hover::after { transform: translateY(3px) rotate(45deg); } }

/* On wide screens the resting Ask Nené pill stays centred (hovering it opens
   the field in place) but drops to the same scale as the hero button, so
   "Plan your stay" reads as the one main action. */
@media (min-width: 961px) {
  .ask.mini .ask-box { width: 176px; }
  .ask.mini .ask-send { padding: 15px 18px; font-size: .78rem; letter-spacing: .24em; }
}

@media (max-width: 960px) {
  /* Ask Nené at rest: a compact chip in the bottom-right corner. Opening it
     still fades into the full-width field (the .mini class is swapped while
     the box is faded out), so the open conversation is unchanged. */
  .ask.mini {
    left: auto; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
    width: auto; margin: 0;
  }
  .ask.mini .ask-box { width: auto; border-radius: 999px; }
  .ask.mini .ask-hint { display: none; }
  .ask.mini .ask-form input { width: 0; min-width: 0; }
  .ask.mini .ask-send {
    display: inline-flex; align-items: center; gap: 9px;
    min-height: 46px; padding: 0 18px 0 16px; border-radius: 999px;
    font-size: .74rem; letter-spacing: .18em;
  }
  .ask.mini .ask-send::before {   /* speech-bubble mark, drawn in the text colour */
    content: ''; flex: none; width: 16px; height: 16px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 3.2h11v7.6H6.4L3.6 13.4v-2.6H2.5z' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 3.2h11v7.6H6.4L3.6 13.4v-2.6H2.5z' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

@media (max-width: 560px) {
  /* The wordmark and the one button sit in the sky above the stone door; the
     opening description shows beneath them while the picture is dimmed, then
     fades, leaving the door and the pool clear. */
  .hero-content { bottom: clamp(150px, calc(100% - 470px), 44%); }
  .hero-actions { flex-direction: column; width: auto; max-width: none; gap: 4px; margin-top: 0; }
  .hero .rule { margin: 22px 0 24px; }
  .hero-actions .button { padding: 0 30px; min-height: 48px; }
  .hero-intro { order: 1; margin-top: 18px; }
}

/* ==========================================================================
   Go-live polish: an app feel on phones, safe areas, press states
   ========================================================================== */

/* Taps never flash grey; controls press in slightly instead. */
a, button, label, select, input, textarea, [role="button"] { -webkit-tap-highlight-color: transparent; }
.button:active, .header-cta:active, .menu-button:active, .sound-toggle:active, .ask-send:active, .ask-chip:active,
.site-header nav a:active, .nav-sound:active, .app-bar-enquire:active, .ask-close:active, .hero-link:active { transform: scale(.97); }
.journey-cue:active .sc-pill { transform: scale(.97); }

/* The page stays put while the phone menu or the tour covers it. */
html:has(> body.menu-open:not(.location-page)), html:has(> body.touring) { overflow: hidden; }
/* The location page's sticky map stops painting if the whole page's overflow
   changes, so there the shade simply refuses to be dragged. */
.site-header.open::before { touch-action: none; }
.location-page.menu-open { overscroll-behavior: none; }
/* Phones and tablets: a blurred header would make the hidden slide-out menu
   hang off its right edge (the page then scrolls sideways) and jump while
   closing. The bar is near solid there anyway, so it goes without the blur. */
@media (max-width: 960px) {
  .site-header.scrolled { background: #0e110ef7; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Repeat visits in the same session skip the long opening (set before paint). */
html.seen body.intro .hero-intro { opacity: 0; visibility: hidden; }
html.seen body.intro:not(.dim) .hero-media video { filter: none; }
html.seen body.intro:not(.dim) .hero-veil { opacity: 0; }

/* Touch screens have no arrow keys to mention. */

/* The scroll line steps aside while the conversation is open. */
.scroll-cue { transition: opacity .4s var(--ease); }
.hero.chatting .scroll-cue { opacity: 0; pointer-events: none; }

/* Suite cards: the name and label stay legible on bright photographs. */
.suite-card::after { inset: 30% 0 0; background: linear-gradient(transparent, #080b0699 45%, #080b06eb); }
.suite-card span { font-weight: 500; text-shadow: 0 1px 10px #000000b3; }
.suite-card h3, .suite-card p { text-shadow: 0 1px 12px #00000080; }
@media (max-width: 600px) {
  .suite-card { aspect-ratio: 4 / 3; }
  .suite-card::after { inset: 0; background: linear-gradient(180deg, transparent 28%, #080b0699 56%, #080b06f2 100%); }
  .suite-card > div { left: 20px; right: 20px; bottom: 20px; }
  /* The features read as a clean wrapping list, no stray dots. */
  .suite-card p { display: flex; flex-wrap: wrap; gap: 3px 14px; letter-spacing: .14em; line-height: 1.5; }
  .suite-card p b i { display: none; }
}

/* ---------- the tour ---------- */
.tour { cursor: pointer; }
.tour-bar { cursor: default; }
.tour-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tour-tools { flex-shrink: 0; }
@media (max-width: 600px) {
  .tour-bar { gap: 10px; }
  .tour-title-extra { display: none; }
  .tour-tools { gap: 8px; }
  .tour-bar .sound-label { display: none; }
  .tour-bar .sound-toggle { width: 44px; padding: 0; }
}

/* ---------- the chat ---------- */
.ask-cal-note { margin: 12px 0 0; text-align: center; font-size: .74rem; letter-spacing: .01em; color: #ffffff99; }
/* A quiet way out of the open chat (it replaces "Just browsing"): a small ×
   in the name line, top right of the panel, on every screen size. */
.ask-close {
  position: absolute; z-index: 3; top: 9px; right: 9px;
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: transparent; color: #ffffffb3;
  cursor: pointer; transition: opacity .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.ask:not(.mini) .ask-close { display: inline-flex; }
.ask-close:focus-visible { outline: 2px solid #fff; outline-offset: -4px; color: #fff; }
@media (hover: hover) { .ask-close:hover { background: #ffffff14; color: #fff; } }
.ask.mini .ask-close, .ask.cal-open .ask-close { display: none; }
.ask.fading .ask-close, .ask.swap .ask-close { opacity: 0; }

/* Desktop: past the hero the Ask Nené pill docks bottom right, clear of the
   page; hovering it opens the panel from that corner. */
@media (min-width: 961px) {
  body.away .ask { left: auto; right: max(32px, env(safe-area-inset-right)); bottom: 32px; width: min(600px, calc(100% - 64px)); margin: 0; }
  body.away .ask.mini { width: auto; }
  body.away .ask.mini .ask-hint { display: none; }
  body.away.tour-done .ask { left: 0; right: 0; bottom: clamp(44px, 6vh, 64px); width: min(860px, calc(100% - 2 * var(--gutter))); margin: 0 auto; }
}

/* ---------- phones: header, menu and the bottom action bar ---------- */
.app-bar, .nav-sound { display: none; }
@media (max-width: 760px) {
  /* The home header is just the wordmark and the menu. */
  body:not(.plain) .header-cta, .header-tools > .sound-toggle { display: none; }

  /* Sound lives in the menu, as a row like the pages. */
  .site-header nav .nav-sound {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    margin: 0; padding: 20px 6px 20px 2px; border: 0; border-bottom: 1px solid #ffffff14; border-radius: 0;
    background: none; color: #ece6da; cursor: pointer; text-align: left;
    font: 300 .9rem/1.2 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  }
  .nav-sound span {
    min-width: 52px; padding: 5px 10px; border: 1px solid #c8a97e8c; border-radius: 999px;
    font-size: .68rem; letter-spacing: .18em; text-align: center; color: var(--brass);
    transition: background .2s var(--ease), color .2s var(--ease);
  }
  .nav-sound[aria-pressed="true"] span { background: var(--brass); color: var(--ink); }
  .nav-sound:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

  /* A slim glass bar once the hero has scrolled away: Enquire, and Ask Nené beside it. */
  .app-bar {
    position: fixed; z-index: 44; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center;
    height: calc(64px + env(safe-area-inset-bottom));
    padding: 0 calc(16px + 148px + 10px) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-left));
    background: #12150fe6; border-top: 1px solid #ffffff1f;
    -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
    transform: translateY(100%); visibility: hidden;
    transition: transform .28s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .28s;
  }
  body.away .app-bar { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.32, .72, 0, 1), visibility 0s; }
  body.away.menu-open .app-bar, body.away.enquiring .app-bar, body.away.touring .app-bar, body.away.chat-open .app-bar {
    transform: translateY(100%); visibility: hidden;
    transition: transform .28s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .28s;
  }
  .app-bar-enquire {
    flex: 1; display: flex; align-items: center; justify-content: center; height: 46px;
    border-radius: var(--radius); background: var(--brass); color: var(--ink);
    font-size: .74rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  }
  .app-bar-enquire:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  /* The Ask Nené chip takes the bar's right slot. */
  body.away .ask.mini { right: max(16px, env(safe-area-inset-right)); bottom: calc(9px + env(safe-area-inset-bottom)); }
  body.away .ask.mini .ask-box { width: 148px; border-radius: var(--radius); background: transparent; border-color: #c8a97ea6; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.away .ask.mini .ask-form { grid-template-columns: 0 1fr; }
  body.away .ask.mini .ask-send { justify-content: center; min-height: 44px; border-radius: var(--radius); }
  /* Nothing on the page ends up behind the bar. */
  body:not(.plain) footer { padding-bottom: calc(56px + 64px + env(safe-area-inset-bottom)); }
}
/* Location and 404 pages: serif headlines with a brass italic second line,
   and the numbered menu (the home page keeps its own look). */
body.plain { --serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif; --brass-lg: #9a7a4f; }
body.plain main h1, body.plain main h2, body.plain main h3 {
  font-family: var(--serif); font-weight: 400; font-style: normal;
  text-transform: none; letter-spacing: -.01em; line-height: 1.02; text-wrap: balance;
}
body.plain main h1 em, body.plain main h2 em { font-style: italic; font-weight: 400; color: var(--brass-lg); }
body.plain .journey .chapter-card h2 em { color: var(--brass-deep); }
body.plain .loc-title { font-size: clamp(2.7rem, 6vw, 6rem); }
body.plain .journey .chapter-card h2 { font-size: clamp(2.1rem, 2.9vw, 2.75rem); line-height: 1.02; }
@media (max-width: 960px) { body.plain .journey .chapter-card h2 { font-size: 1.75rem; } }
body.plain .chapter-num { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }

/* Villa intro: the lounge and the kitchen side by side (stacked on phones). */
.feature-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--photo-gap); margin-top: clamp(36px, 4vw, 64px); }
.feature-pair .feature-image { margin-top: 0; }
.feature-pair .feature-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 640px) { .feature-pair { grid-template-columns: 1fr; } }

/* ---------- photo-forward widths ----------
   Photos fill the page to the small --inset gutter. A few text-led blocks keep
   a comfortable measure on very wide screens so lines never run too long. */
@media (min-width: 961px) {
  .reviews-quotes { max-width: 1680px; margin-left: auto; margin-right: auto; }
  .swim-media img { aspect-ratio: 3 / 2; }
}

/* Pool band: keep the water and deck in frame on wide screens. */
.immersive img.immersive-deck { object-position: 50% 62%; }

/* Calm moves between sections and pages: a soft fade, never a race. */
main { transition: opacity .6s var(--ease); }
body.veiling main { opacity: .15; transition: opacity .4s var(--ease); }
html.arriving main { animation: arrive-fade .9s var(--ease) both; }
@keyframes arrive-fade { from { opacity: 0; } to { opacity: 1; } }
@view-transition { navigation: auto; }
/* A pure dissolve: the old view stays solid while the new one fades in
   over it, so the background never shows through mid-way. */
::view-transition-old(root) { animation: .9s linear both vt-hold; }
@keyframes vt-hold { from, to { opacity: 1; } }
::view-transition-new(root) { animation: .9s var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  main, body.veiling main { transition: none; }
  html.arriving main { animation: none; }
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Plan your stay: photo panel and enquiry card ----------
   The dark panel opens with the portrait photo of the stepping-stone path to
   the open front door. On phones it sits above the copy as a 4:5 picture; from
   600px up it becomes a tall column down the panel's left edge, so the whole
   arrival (path, door, walls, palms) is visible. The copy always sits on solid
   dark. The form card beside the panel matches its height; fields are soft
   cream wells with the label tucked inside, so each one is a large, easy target. */
.stay { align-items: stretch; gap: clamp(16px, 1.8vw, 28px); }
.stay-copy {
  --pad: clamp(24px, 3.2vw, 56px);
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: var(--pad); border-radius: 14px; overflow: hidden;
  background: var(--ink);
}
.stay-photo {
  display: block; width: calc(100% + 2 * var(--pad)); max-width: none; height: auto; aspect-ratio: 4 / 5;
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0;
  object-fit: cover; object-position: 50% 62%; background: #2a2b26;
}
.stay-text { position: relative; display: grid; gap: clamp(26px, 2.6vw, 40px); margin-top: var(--pad); container: stay-text / inline-size; }
/* From 600px the photo becomes a full-height portrait column on the left. */
@media (min-width: 600px) {
  .stay-copy { display: grid; grid-template-columns: minmax(0, min(42%, 560px)) minmax(0, 1fr); padding: 0; }
  .stay-photo {
    width: 100%; height: 100%; aspect-ratio: auto; margin: 0; contain: size;
    object-position: 54% 60%;
  }
  .stay-text { margin: 0; padding: var(--pad); align-content: center; }
}
.stay h2 { font-size: clamp(1.9rem, 3.1vw, 3.3rem); }
.stay .stay-intro .eyebrow { color: var(--brass); }
.stay-intro > p:not(.eyebrow) { max-width: 46ch; margin: 1.2rem 0 0; color: #c9ccc2; }
.stay-proof { display: grid; gap: clamp(24px, 2.4vw, 34px); align-content: start; }
.stay-reasons { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px 28px; }
.stay-reasons li { padding-left: 34px; font-size: .95rem; line-height: 1.45; }
.stay-reasons li::before { left: 0; top: .02em; width: 20px; height: 20px; border: 1px solid #c8a97e8c; border-radius: 50%; transform: none; box-sizing: border-box; }
.stay-reasons li::after { content: ''; position: absolute; left: 7px; top: .32em; width: 6px; height: 3.5px; border-left: 1.5px solid var(--brass); border-bottom: 1.5px solid var(--brass); transform: rotate(-45deg); }
.stay-quote { position: relative; margin: 0; padding: 0 0 0 22px; border: 0; border-left: 1px solid var(--brass); max-width: 54ch; }
.stay-quote p { font-size: 1rem; line-height: 1.65; color: #ece7dd; }
.stay-quote figcaption { margin-top: .7rem; font-size: .7rem; color: var(--brass); }

.booking-card.enquiry {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  align-self: stretch; padding: clamp(24px, 2.6vw, 40px); border-radius: 14px;
  box-shadow: 0 24px 60px #0000004d;
}
.enquiry .booking-title { margin: 0 0 12px; font-family: var(--display); font-size: 1.1rem; letter-spacing: .14em; }
.enquiry .booking-title::after { content: ''; display: block; width: 36px; height: 1px; margin-top: 14px; background: var(--brass-deep); }
.enq-row { gap: 10px; }
.enq-field { position: relative; display: block; padding: 0; border: 0; }
.enq-field span {
  position: absolute; z-index: 1; top: 9px; left: 15px; right: 15px; pointer-events: none;
  font-size: .62rem; font-weight: 500; letter-spacing: .18em; color: #5d6058; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.enq-field input, .enq-field select, .enq-field textarea {
  display: block; min-height: 56px; padding: 25px 14px 8px;
  border: 1px solid #d6cdbd; border-radius: 10px; background: #faf7f1;
  font: 400 1rem/1.35 var(--sans); color: var(--ink);
  -webkit-appearance: none; appearance: none;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.enq-field input[type="date"] { min-width: 0; }
.enq-field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.enq-field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.enq-field select {
  padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237d6240' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.enq-field textarea { min-height: 104px; padding-top: 28px; resize: vertical; }
.enq-field.enq-message { flex: 1 1 auto; display: flex; }
.enq-field.enq-message textarea { flex: 1 1 auto; }
@media (hover: hover) { .enq-field:hover input, .enq-field:hover select, .enq-field:hover textarea { border-color: #b9ad97; } }
.enq-field:focus-within { border: 0; }
.enq-field input:focus, .enq-field select:focus, .enq-field textarea:focus { outline: none; }
.enq-field input:focus-visible, .enq-field select:focus-visible, .enq-field textarea:focus-visible,
.enq-field input:focus, .enq-field select:focus, .enq-field textarea:focus {
  border-color: var(--brass-deep); background-color: #fff;
  box-shadow: 0 0 0 1px var(--brass-deep), 0 0 0 5px #c8a97e38;
}
.enq-field:focus-within span { color: var(--brass-deep); }
.enq-reply { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 0; font-size: .8rem; letter-spacing: .04em; color: #4a4d45; }
.enq-reply::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #5f7f4e; box-shadow: 0 0 0 4px #5f7f4e26; }
.booking-card button { margin-top: 2px; padding: 16px; min-height: 54px; border-radius: 10px; background: var(--brass-deep); color: #fff; font-size: .76rem; box-shadow: 0 10px 24px -12px #7d624099; }
.booking-card button:focus-visible { background: var(--ink); color: #fff; }
@media (hover: hover) { .booking-card button:hover { background: var(--ink); color: #fff; } }
.booking-card button:disabled { background: #6b5a43; color: #f2ede3; }
.enq-status { margin: 4px 0 0; padding: 12px 14px; border-radius: 10px; font-size: .9rem; line-height: 1.5; }
.enq-status.ok { background: #e3e8d9; }
.enq-status.error { background: #f3e1d8; }
.booking-card small { margin: 4px auto 0; max-width: 56ch; text-wrap: balance; font-size: .7rem; line-height: 1.55; color: #5d6058; }

/* Two columns side by side from tablet landscape up; the form keeps a calm width
   so the photo panel has room for its portrait column. */
@media (min-width: 961px) {
  .stay { grid-template-columns: minmax(0, 1fr) minmax(380px, min(520px, 40%)); }
}
@media (min-width: 1800px) {
  .stay { grid-template-columns: minmax(0, 1fr) minmax(0, 620px); }
}
/* A roomy panel sets the reasons and the quote side by side; a very wide one
   puts the heading beside them, so the panel never grows taller than it needs. */
@container stay-text (min-width: 640px) {
  .stay-proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5cqi, 64px); align-items: start; }
  .stay-reasons { grid-template-columns: minmax(0, 1fr); }
}

/* Phones and tablets: photo banner, then copy, then the form, all compact. */
@media (max-width: 960px) {
  .stay { gap: 14px; }
  .booking-card.enquiry { padding: 24px 20px 22px; }
  .enq-field.enq-message { display: block; }
  .enq-field textarea { height: auto; }
}
@media (max-width: 560px) {
  .stay { padding-top: 14px; padding-bottom: 14px; }
  .stay-copy { --pad: 22px; }
  .stay-text { gap: 26px; }
  .stay h2 { font-size: clamp(1.9rem, 8.6vw, 2.4rem); }
  .stay-reasons { gap: 12px; }
  .enquiry .booking-title { font-size: 1rem; }
  .enq-field input, .enq-field select, .enq-field textarea { font-size: 16px; }
}

/* ---------- At a glance (section.facts) ----------
   Same language as the Plan your stay card: one cream panel with 20px corners,
   ink text, brass-deep accents and refined small labels. The band behind it
   splits limestone / limestone-dim, so the panel bridges the intro above and
   the suites below instead of sitting as a dark slab between them. */
.facts {
  --focus: var(--ink);
  position: relative; padding: 0 var(--inset);
  background: linear-gradient(to bottom, var(--limestone) 0 50%, var(--limestone-dim) 50% 100%);
}
.facts-panel {
  margin: 0;
  padding: clamp(28px, 3.6vw, 56px) clamp(22px, 4vw, 64px) clamp(28px, 3.8vw, 60px);
  border: 1px solid #e3d9c8; border-radius: 20px; background: #faf7f1;
  box-shadow: 0 1px 0 #ffffff inset, 0 24px 60px -28px #3b2f1f40;
}
.facts .facts-title {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin: 0 0 clamp(22px, 2.6vw, 36px); text-align: center;
  font-family: var(--sans); font-size: .72rem; font-weight: 500; letter-spacing: .3em; line-height: 1.4;
  color: var(--brass-deep);
}
.facts .facts-title::after { content: ''; width: 36px; height: 1px; background: var(--brass-deep); opacity: .7; }

/* Stats: a refined row of display numerals divided by fine hairlines. */
.facts-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0 0 clamp(26px, 3vw, 44px); border-bottom: 1px solid #e6ddcd; }
.facts-row > div { display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 12px; text-align: center; }
.facts-row > div + div { border-left: 1px solid #e6ddcd; }
.facts-row dd {
  margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: .06em; line-height: 1;
  font-size: clamp(2.2rem, 3.6vw, 3.4rem); color: var(--ink);
}
.facts-row dd small { font-size: .34em; letter-spacing: .16em; margin-left: .2em; color: var(--brass-deep); vertical-align: .15em; }
.facts-row dt { font-size: .66rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #5d6058; line-height: 1.3; }

/* Phones: 2×2 stats, then the fact sheet in one column. */
@media (max-width: 699px) {
  .facts-panel { padding: 26px 18px 22px; border-radius: 18px; }
  .facts .facts-title { margin-bottom: 18px; font-size: .66rem; }
  .facts-row { grid-template-columns: 1fr 1fr; padding-bottom: 0; border-bottom: 0; border: 1px solid #e6ddcd; border-radius: 14px; overflow: hidden; }
  .facts-row > div { padding: 18px 8px 16px; gap: 8px; }
  .facts-row > div + div { border-left: 0; }
  .facts-row > div:nth-child(even) { border-left: 1px solid #e6ddcd; }
  .facts-row > div:nth-child(n+3) { border-top: 1px solid #e6ddcd; }
  .facts-row dd { font-size: 2.1rem; }
  .facts-row dt { font-size: .6rem; letter-spacing: .16em; }
}

/* ---------- Photo sizing balance (design committee, Oct 2026) ----------
   Photos still run to the small --inset gutter (no side margins come back), but
   supporting pictures no longer swallow the screen on desktop: each one stays
   under roughly three quarters of the window's height, so a heading and its
   button can be seen together. The hero video and the pool band stay full
   screen on purpose. Phones are unchanged. Full reasoning: see DECISIONS.md
   from the sizing review. */
@media (min-width: 961px) {
  /* Swim-up terraces: photo and words closer to 57/43 instead of 67/33, and the
     photo never taller than ~72% of the window (or 860px on very big screens). */
  .swim { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .swim-media img { max-height: min(72svh, 860px); }

  /* Suites slideshow: still a wide cinematic frame, but capped at 76% of the
     window (was 84%) so it no longer fills a short laptop or desktop browser. */
  .suite-show { width: 100%; max-height: min(76svh, 980px); } /* explicit width: the cap trims height, never the width */

  /* Gallery mosaic: same layout, capped at 72% of the window (was 86%) so the
     whole mosaic and its "View all" button fit on screen with the heading. */
  .gallery-mosaic { height: clamp(420px, 40vw, 72svh); }
}
/* Suite cards on wide screens: a slightly wider frame (16:10 instead of 3:2)
   trims the 2×2 grid's height by ~6% without losing the beds or the views. */
@media (min-width: 1280px) {
  .suite-card { aspect-ratio: 16 / 10; }
}

/* Hero: booking first. "Check availability" (gold) and "Take the tour"
   (outlined) sit side by side at one width; Nené waits in the corner tab. */
.hero-actions .button { width: 230px; justify-content: center; text-align: center; }
.hero-actions .button-solid { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.hero-actions .button-solid:focus-visible { background: #fff; border-color: #fff; } @media (hover: hover) { .hero-actions .button-solid:hover { background: #fff; border-color: #fff; } }
@media (max-width: 560px) { .hero-actions { gap: 12px; } }
.ask-send-q { display: none; }
@media (min-width: 961px) {
  .ask { left: auto; right: max(32px, env(safe-area-inset-right)); bottom: 32px; width: min(600px, calc(100% - 64px)); margin: 0; }
  .ask.mini { width: auto; }
  .ask.mini .ask-box { width: auto; }
  .ask.mini .ask-hint { display: none; }
  .ask.mini .ask-send-q { display: inline; }
}

/* ---------- Hero wordmark: more presence, picture kept bright (UI team, Oct 2026) ----------
   The thin white CASA · SANTO lettering was getting lost on the bright walls and
   sky. Rather than darkening the whole photograph, the shade is kept local:
   1. a soft, feathered halo of shadow sits only behind the lettering (no edge),
   2. a close drop shadow plus a wider soft one outline each stroke,
   3. the strokes are a touch heavier (a little more on phones, where they were
      barely a pixel wide).
   The flat all-over tint in the scrim is halved, so the rest of the picture
   is brighter than before. Moves with the wordmark in every state (intro,
   chat open, rise animation) because it lives on the h1 itself. */
.hero-scrim {
  background:
    linear-gradient(#0b0d0973 0%, #0b0d0912 30%, #0b0d0900 48%),
    linear-gradient(0deg, #070a05a6 0%, #070a0552 30%, #070a051a 52%, transparent 70%),
    linear-gradient(#0b0d0912, #0b0d0912);
}
.hero-wordmark { position: relative; filter: none; }
.hero-wordmark::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -70% -14%;
  background: radial-gradient(closest-side, #080a07 0%, #080a07c4 30%, #080a0766 62%, #080a0700 100%);
  opacity: .62;
}
.hero-wordmark .wordmark-svg {
  filter: drop-shadow(0 1px 2px #080a078c) drop-shadow(0 4px 20px #080a0766);
}
.hero-wordmark .wordmark-svg g > * { stroke-width: 5.5; }
.hero-wordmark .wordmark-svg g > [stroke-width="4.9"] { stroke-width: 6.2; }
/* The heavier N would grow long pointed corners at its sharp turns; square them off. */
.hero-wordmark .wordmark-svg g > path:nth-child(8) { stroke-miterlimit: 2; }
@media (max-width: 560px) {
  .hero-wordmark::before { inset: -110% -12%; opacity: .55; }
  .hero-wordmark .wordmark-svg g > * { stroke-width: 6.6; }
  .hero-wordmark .wordmark-svg g > [stroke-width="4.9"] { stroke-width: 7.3; }
  .hero-wordmark .wordmark-svg { filter: drop-shadow(0 1px 1px #080a0780) drop-shadow(0 2px 10px #080a0766); }
}

/* ---------- Nené says hello (UI team, Oct 2026) ----------
   Once per visit, a few seconds after the opening settles, a small bubble
   rises above the Ask Nené pill: three soft dots while she "types", then a
   short hello, held a moment and let go. The pill answers with two slow
   brass ripples. The bubble is placed by script against the pill, so it
   follows it in the hero, docked bottom right, or in the phone's bottom bar. */
.ask-hi {
  position: fixed; z-index: 46; right: 16px; bottom: 96px;
  display: flex; align-items: center; gap: 12px;
  box-sizing: border-box; overflow: hidden;
  padding: 11px 16px 11px 11px;
  border: 1px solid #c8a97e59; border-radius: 18px 18px 4px 18px;
  background: #12150fe6; color: #fff;
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 14px 40px #0000004d;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  opacity: 0; transform: translateY(10px) scale(.96); transform-origin: 100% 100%;
  pointer-events: none; visibility: hidden;
  transition: opacity .55s var(--ease), transform .7s var(--ease), width .6s var(--ease), height .6s var(--ease), visibility 0s linear .7s;
}
.ask-hi.on {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: opacity .55s var(--ease), transform .7s var(--ease), width .6s var(--ease), height .6s var(--ease), visibility 0s;
}
.ask-hi .ask-avatar { width: 30px; height: 30px; font-size: .84rem; }
.ask-hi .ask-online { box-shadow: 0 0 0 2px #12150f; }
/* Dots and words share one spot; the bubble eases from one size to the other. */
.ask-hi-body { display: grid; align-items: center; }
.ask-hi-body > * { grid-area: 1 / 1; justify-self: start; }
.ask-hi-dots { display: inline-flex; gap: 5px; padding: 0 2px; transition: opacity .3s var(--ease); }
.ask-hi-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--brass); opacity: .35; animation: typing 1.3s ease-in-out infinite; }
.ask-hi-dots i:nth-child(2) { animation-delay: .16s; }
.ask-hi-dots i:nth-child(3) { animation-delay: .32s; }
.ask-hi-text { display: flex; flex-direction: column; gap: 3px; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .6s var(--ease) .15s, transform .6s var(--ease) .15s; }
.ask-hi-text b { font-weight: 400; font-size: .95rem; letter-spacing: .02em; color: #f7f2e8; }
.ask-hi-text span { font-size: .8rem; letter-spacing: .01em; color: #ffffffb3; }
.ask-hi.said .ask-hi-dots { opacity: 0; }
.ask-hi.said .ask-hi-text { opacity: 1; transform: none; }
@media (hover: hover) { .ask-hi:hover { border-color: #c8a97ea6; } }

/* The pill's answer: a thin brass ring that drifts outward and fades, twice. */
.ask.mini.hello .ask-box { animation: askhello 2.4s var(--ease) 2; }
@keyframes askhello {
  0% { outline: 1px solid #c8a97ecc; outline-offset: 0; }
  100% { outline: 1px solid #c8a97e00; outline-offset: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .ask-hi, .ask-hi.on { transform: none; transition: opacity .55s var(--ease), visibility 0s linear .55s; }
  .ask-hi.on { transition: opacity .55s var(--ease), visibility 0s; }
  .ask-hi-dots { display: none; }
  .ask-hi-text { transform: none; transition: none; opacity: 1; }
  .ask.mini.hello .ask-box { animation: none; }
}

/* Privacy page: quiet serif subheads and readable body copy. */
.policy .intro-body h2 { margin: 2.6rem 0 .7rem; font-size: clamp(1.45rem, 2vw, 1.8rem); }
.policy .intro-body p, .policy .intro-body li { color: #4a4d45; line-height: 1.65; }
.policy .intro-body .lead { color: inherit; }
.policy .intro-body p { margin: 0 0 1rem; }
.policy .intro-body ul { margin: 0 0 1rem; padding-left: 1.2em; display: grid; gap: .6rem; }
.policy .intro-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--brass); }
.policy .policy-date { margin-top: 2.6rem; font-size: .8rem; letter-spacing: .04em; color: #5d6058; }

/* Hero buttons, final: one matching pair of clear frosted glass. Both share
   the same size (the grid makes each as wide as the longer label), each label
   stays on one line, and they fill with brass on hover. */
.hero-actions { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; }
.hero-actions .button,
.hero-actions .button-solid {
  width: auto; min-width: 230px; white-space: nowrap; padding: 15px 34px; min-height: 52px;
  background: #ffffff1f; border: 1px solid #ffffff73; color: #fff; font-weight: 500;
  background-image: linear-gradient(#0b0d0924, #0b0d0924); text-shadow: 0 1px 8px #00000080;
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 #ffffff40, 0 8px 28px #0000002e;
}
.hero-actions .button:focus-visible,
.hero-actions .button-solid:focus-visible { background: var(--brass); border-color: var(--brass); color: var(--ink); }
@media (hover: hover) {
  .hero-actions .button:hover,
  .hero-actions .button-solid:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); }
}
@media (max-width: 560px) {
  .hero-actions { grid-auto-flow: row; gap: 12px; }
  .hero-actions .button, .hero-actions .button-solid { min-width: 0; min-height: 48px; padding: 0 28px; }
}

/* Ask Nené pill at rest: a gold spark travels round its border with a soft
   brass flash every few seconds, and the label alternates "Questions?" and
   "Ask Nené". Both phrases share one grid cell, so the pill never resizes. */
@property --spark { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.ask.mini .ask-box { position: relative; animation: askflash 7s ease-in-out infinite; }
.ask.mini .ask-box::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--spark), transparent 0 55%, #c8a97e 70%, #fffbe8 80%, #e3c898 88%, transparent 100%);
  filter: drop-shadow(0 0 3px #f3dcae);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: askspark 3.5s linear infinite;
}
@keyframes askspark { to { --spark: 360deg; } }
@keyframes askflash {
  0%, 100% { box-shadow: 0 10px 30px #00000040; }
  84% { box-shadow: 0 10px 30px #00000040, 0 0 0 0 #e3c89800; }
  88% { box-shadow: 0 10px 30px #00000040, 0 0 28px 6px #e3c898cc; }
  94% { box-shadow: 0 10px 30px #00000040, 0 0 0 0 #e3c89800; }
}
.ask-rot { display: inline-grid; }
.ask-rot > span { grid-area: 1 / 1; text-align: center; }
.ask-rot-a { opacity: 0; }
.ask.mini .ask-send .ask-rot { color: #ecd3a6; }
.ask.mini .ask-rot-q { animation: askrotq 8s ease-in-out infinite; }
.ask.mini .ask-rot-a { animation: askrota 8s ease-in-out infinite; }
@keyframes askrotq { 0%, 42% { opacity: 1; transform: none; } 50%, 92% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
@keyframes askrota { 0%, 42% { opacity: 0; transform: translateY(6px); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .ask.mini .ask-box, .ask.mini .ask-box::after, .ask.mini .ask-rot-q, .ask.mini .ask-rot-a { animation: none; }
  .ask.mini .ask-box::after { background: none; }
  .ask.mini .ask-rot-q { opacity: 0; }
  .ask.mini .ask-rot-a { opacity: 1; }
}

/* ---------- At a glance as a fact sheet (owner's pick, Nov 2026) ----------
   Reads like a printed villa brochure: the four numbers, then two quiet
   columns of label and phrase split by fine brass hairlines. No icons and no
   tinted boxes, so the whole panel speaks in one voice. */
.fs { display: grid; gap: clamp(28px, 3vw, 44px) clamp(40px, 6vw, 96px); margin-top: clamp(28px, 3.2vw, 48px); }
@media (min-width: 800px) { .fs { grid-template-columns: 1fr 1fr; } }
.fs-head {
  margin: 0 0 6px; font-family: var(--sans); font-size: .7rem; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--brass-deep); line-height: 1.4;
}
.fs dl { margin: 0; }
.fs dl > div { display: grid; grid-template-columns: minmax(118px, 34%) 1fr; gap: 18px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid #c8a97e59; }
.fs dt { font-size: .66rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #5d6058; line-height: 1.5; }
.fs dd { margin: 0; font-family: var(--sans); font-size: 1.02rem; font-weight: 400; line-height: 1.5; color: var(--ink); }
.fs-note { grid-column: 1 / -1; margin: 0; text-align: center; font-size: .84rem; letter-spacing: .04em; color: #5d6058; }
.fs-note i { margin: 0 .55em; font-style: normal; color: var(--brass-deep); }
@media (max-width: 699px) {
  .fs { margin-top: 22px; gap: 26px; }
  .fs dl > div { grid-template-columns: 1fr; gap: 3px; padding: 12px 0; }
  .fs dd { font-size: .98rem; }
  .fs-note { line-height: 1.8; }
}

/* ---------- Calmer scale on desktop (owner's pick, Nov 2026) ----------
   Content sits in a centred column of at most 1360px with cream margins of at
   least 5% each side, so photos are framed instead of running to the screen
   edge. The hero video and the pool band still fill the screen. The swim-up
   photo shows in full (3:2) beside its words as two even halves. Phones keep
   their own gutters. */
@media (min-width: 961px) {
  :root { --inset: max(clamp(28px, 5vw, 96px), calc((100vw - 1360px) / 2)); }
  .swim { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); }
  .swim-media img { aspect-ratio: 3 / 2; object-position: center; max-height: none; }
}

/* ---------- At a glance in the reviews style (owner's pick, Nov 2026) ----------
   Same presentation as "From our guests": no card, a centred eyebrow, one big
   display number, a heading and a short line, then a row of figures between
   hairlines, and the fact sheet beneath. */
.facts { padding: var(--section-y) var(--inset); background: var(--limestone); text-align: center; }
.facts-panel { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.facts-top { max-width: 760px; margin: 0 auto; }
.facts-score { margin: 0; font-family: var(--display); font-size: clamp(5rem, 11vw, 9rem); line-height: 1; letter-spacing: .02em; color: var(--ink); }
.facts-tag { margin: .8rem 0 1.6rem; font-size: .8rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--brass-deep); }
.facts h2 { font-size: clamp(1.3rem, 2.2vw, 2rem); }
.facts h2 em { display: inline; color: var(--brass-deep); }
.facts-lede { max-width: 52ch; margin: 1.2rem auto 0; color: #4a4d45; }
.facts .facts-row,
.facts-row {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
  max-width: 1040px; margin: clamp(48px, 6vw, 80px) auto 0; padding: 28px 0;
  border: 0; border-top: 1px solid #12150f1f; border-bottom: 1px solid #12150f1f; border-radius: 0; overflow: visible;
}
.facts-row > div { display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: .5rem; padding: 0 8px; border: 0; border-right: 1px solid #12150f1a; }
.facts-row > div + div { border-left: 0; }
.facts-row > div:last-child { border-right: 0; }
.facts-row dt { font-size: .72rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: #4a4d45; }
.facts-row dd { margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 2.1rem); letter-spacing: 0; line-height: 1.2; color: var(--brass-deep); }
.fs { max-width: 1040px; margin: clamp(40px, 5vw, 64px) auto 0; text-align: left; }
@media (max-width: 960px) {
  .facts .facts-row, .facts-row { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
  .facts-row > div:nth-child(3) { border-right: 0; }
  .facts-row > div:nth-child(n+3) { border-top: 0; }
  .facts-row > div:nth-child(even) { border-left: 0; }
}
@media (max-width: 699px) {
  .facts-row > div { padding: 0 4px; }
  .facts-row dt { font-size: .6rem; letter-spacing: .14em; }
  .facts-row dd { font-size: 1.6rem; }
}

/* ---------- Hero buttons in the Ask Nené style (owner's pick, Nov 2026) ----------
   Dark glass with a gold trim and gold lettering, the same as the Ask Nené
   pill. A gold spark runs once round each border when the page opens, left
   button first and then the right, with a soft gold flash; after that they
   rest, and the pair repeats once a minute. */
.hero-actions .button,
.hero-actions .button-solid {
  position: relative;
  background: #0b0d09b3; border: 1px solid #c8a97ea6; color: #ecd3a6; text-shadow: none;
  box-shadow: 0 10px 30px #00000040;
  animation: herobtnflash 60s ease-in-out 1.2s infinite;
}
.hero-actions .button::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--spark), transparent 0 55%, #c8a97e 70%, #fffbe8 80%, #e3c898 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 3px #f3dcae);
  opacity: 0; animation: herobtnspark 60s linear 1.2s infinite;
}
.hero-actions .button + .button,
.hero-actions .button + .button::after { animation-delay: 2.6s; }
@keyframes herobtnspark {
  0% { opacity: 0; --spark: 0deg; }
  .4% { opacity: 1; }
  2.4% { opacity: 1; --spark: 360deg; }
  3%, 100% { opacity: 0; --spark: 360deg; }
}
@keyframes herobtnflash {
  0%, 2%, 5%, 100% { box-shadow: 0 10px 30px #00000040; }
  3% { box-shadow: 0 10px 30px #00000040, 0 0 26px 5px #e3c898b3; }
}
.hero-actions .button:focus-visible,
.hero-actions .button-solid:focus-visible { background: var(--brass); border-color: var(--brass); color: var(--ink); }
@media (hover: hover) {
  .hero-actions .button:hover,
  .hero-actions .button-solid:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-actions .button, .hero-actions .button::after { animation: none; }
}

/* Swim-up terraces: a three-photo pool mosaic (one large, two stacked) so the
   section shows more of the water and less empty cream; tighter top and bottom. */
.swim { padding-top: clamp(40px, 4.5vw, 80px); padding-bottom: clamp(40px, 4.5vw, 80px); }
.swim-mosaic { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; border-radius: 0; overflow: visible; }
.swim-mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; aspect-ratio: auto; max-height: none; }
.swim-mosaic .swim-main { grid-row: 1 / span 2; object-position: 40% center; }
@media (min-width: 961px) {
  .swim { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(40px, 4.5vw, 80px); }
  .swim-mosaic { height: min(68svh, 640px); }
  .swim-mosaic img { aspect-ratio: auto; }
}
@media (max-width: 960px) {
  .swim-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .swim-mosaic .swim-main { grid-row: auto; grid-column: 1 / span 2; aspect-ratio: 4 / 3; height: auto; }
  .swim-mosaic img:not(.swim-main) { aspect-ratio: 1 / 1; height: auto; }
}

/* Enquire about your stay, compact desktop layout: the arrival photo fills the
   whole dark panel behind the copy (no narrow strip), the heading sits on two
   lines, the message box is a fixed three lines, and dates and guests share one
   row, so both panels are about two thirds of their old height. */
@media (min-width: 961px) {
  .stay { padding-top: clamp(48px, 5vw, 88px); padding-bottom: clamp(48px, 5vw, 88px); align-items: stretch; }
  .stay-copy { display: block; position: relative; padding: 0; isolation: isolate; }
  .stay-photo { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; contain: none; object-fit: cover; object-position: 50% 55%; z-index: -2; }
  .stay-copy::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, #121410f2 0%, #121410d9 48%, #12141073 100%); }
  .stay-text { height: 100%; padding: clamp(36px, 3.4vw, 56px); align-content: center; gap: clamp(22px, 2vw, 30px); }
  .stay h2 { font-size: clamp(1.8rem, 2.5vw, 2.7rem); white-space: nowrap; }
  .stay-intro > p:not(.eyebrow) { max-width: 40ch; }
  .stay-proof { gap: 22px; max-width: 520px; }
  .stay-reasons { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .stay-quote { max-width: 46ch; }
  .stay-quote p { font-size: .95rem; }
  /* Form: check in, check out and guests on one line; name and email on the next. */
  .enquiry .enq-dates { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); }
  .enq-field.enq-message { display: block; flex: none; }
  .enq-field.enq-message textarea { height: 96px; min-height: 96px; flex: none; }
  .booking-card.enquiry { justify-content: center; }
}
@media (min-width: 961px) and (max-width: 1399px) {
  .stay { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .enquiry .enq-dates > .enq-field:nth-child(3) { grid-column: 1 / -1; }
}

/* At a glance, levelled: every figure label sits on one line so all six
   numbers share one baseline; both columns use the same label width so values
   start at the same point; every value fits on one line on desktop; more air. */
.facts-row { padding-top: clamp(26px, 2.6vw, 36px); padding-bottom: clamp(26px, 2.6vw, 36px); }
.facts-row > div { justify-content: flex-start; }
.facts-row dt { white-space: nowrap; }
.fs { column-gap: clamp(56px, 7vw, 112px); }
.fs-head { margin-bottom: 6px; }
.fs dl > div { grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 17px 0; }
@media (min-width: 800px) { .fs dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
@media (max-width: 799px) { .fs dl > div { grid-template-columns: 1fr; gap: 3px; padding: 12px 0; } }
@media (max-width: 600px) { .facts-row dt { white-space: normal; } }

/* Arriving from the end of the Location story: the page opens under the same
   dark veil the story faded into, and the veil lifts onto the hero. */
html.arrive { background: #11130f; }
html.arrive::after { content: ''; position: fixed; inset: 0; z-index: 9999; background: #11130f; pointer-events: none; animation: veil-out 1.4s ease-out .15s forwards; }
@keyframes veil-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { html.arrive::after { animation-duration: .01s; } }

/* Closing the chat: the small "Questions?" pill sizes itself to its own label.
   The (hidden) conversation and header no longer count towards its width, so
   it no longer stretches wide for a moment before shrinking (Nov 2026). */
.ask.mini .ask-log { contain: inline-size; }

/* Phones: the resting Nené chip is a small, tidy "Ask" (Nov 2026).
   It reads Ask on the hero and in the bottom bar; desktop is unchanged. */
.ask-short { display: none; }
@media (max-width: 960px) {
  .ask.mini .ask-rot { display: none; }
  .ask.mini .ask-short { display: inline; }
  .ask.mini .ask-head, .ask.mini .ask-log { contain: inline-size; }
  .ask.mini .ask-send {
    gap: 7px; min-height: 40px; padding: 0 16px 0 14px;
    font-size: .72rem; letter-spacing: .22em;
  }
  .ask.mini .ask-send::before { width: 14px; height: 14px; }
  body.away .ask.mini .ask-box { width: 96px; }
  body.away .ask.mini .ask-send { min-height: 44px; padding: 0 12px; }
  .app-bar { padding-right: calc(16px + 96px + 10px); }
}

/* Phones: the title and the two buttons sit low, over the pool, leaving the
   trees, the house and the wooden door clear above them (Nov 2026). The
   opening description shows above the title while the picture is dimmed. */
@media (max-width: 560px) {
  .hero-content { bottom: calc(100% - 100svh + 96px + env(safe-area-inset-bottom)); }
  .hero-intro { order: -1; margin: 0 0 20px; }
}