/* Grand Hacienda Palm Beach, site-v2. All styles. Tokens on :root; seasonal overrides in themes.css
   (generated from THEMES in _build/build.py). Bleu uses the same palette (since the 2026-10-09 design picks).
   Motion is opacity/transform transitions only. No held animations. */

/* ------------------------------------------------------------------ fonts (F3, picked on /design/ 2026-10-09)
   Fraunces 300 (SOFT 0, WONK 0, optical size variable) for headings, Outfit for text (one variable file, 400 to 600; picked by Emilio 2026-10-11 over Work Sans). Self-hosted,
   latin, swap. (Newsreader and Inter stay in /assets/fonts/ only because /design/ shows them as option F1.) */
@font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces-300-opsz.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces-300-opsz-italic.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('/assets/fonts/outfit-latin.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  --font-display: 'Fraunces', Georgia, serif;
  --font-text: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display-weight: 300;
  --display-italic-weight: 300;

  /* Brand blue (Emilio, 2026-10-11: "make blue the theme color", the logo's #496A96), on the same warm paper.
     Replaces C4 Sea glass. All text pairs pass WCAG AA (accent on paper 5.2, white on buttons 5.6). */
  --paper: #FBF9F5;         /* page */
  --sand: #EAF0F6;          /* band: a pale tint of the logo blue */
  --card: #FFFFFF;
  --ink: #1C2433;           /* text */
  --ink-2: #2E3A4D;
  --muted: #505C6E;
  --line: #D5DEE9;
  --line-strong: #A9B8CC;
  --accent: #496A96;        /* the logo blue: icons, active marks, focus ring */
  --accent-ink: #3A5679;    /* links */
  --btn: #496A96;           /* button outline and fill */
  --btn-fg: #FFFFFF;
  --btn-solid: #496A96;
  --deep: #1B2A40;          /* dark bands, footer */
  --veil: #1B2A40;          /* hero overlay and hero background before the photo arrives (never grey) */
  --on-deep: #E8EEF5;
  --on-deep-accent: #A9C1E2;

  --gutter: 16px;
  --bar-h: 64px;
}
@media (min-width: 760px) { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; } }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Smooth scrolling only for in-page clicks: site.js adds html.sm on the first pointer or key press. Without the
   gate Chromium animated the load-time scroll to a deep link (#book, #inquire...) through the whole page (QA 2026-10-11). */
@media (prefers-reduced-motion: no-preference) { html.sm { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1rem/1.6 var(--font-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* <use> clones inherit from the .ic svg, not from the sprite, so the stroke style lives here. */
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ic--star { color: #E3A93C; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; }
.skip:focus { top: 12px; }
.wrap { width: min(1320px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.small { font-size: 0.8125rem; color: var(--muted); }
.todo { background: #FFF1A8; color: #4D3B00; padding: 1px 5px; border-radius: 2px; font: 500 0.82em/1.4 var(--font-text); font-style: normal; letter-spacing: 0; text-transform: none; }

/* Stay / Events views. The head script sets html[data-view] before first paint. */
.view-events { display: none; }
html[data-view="events"] .view-events { display: block; }
html[data-view="events"] .view-stay { display: none; }
html:not([data-view="events"]) .only-events:not(.swap > *),
html[data-view="events"] .only-stay:not(.swap > *) { display: none !important; }
/* In a .swap both versions share one grid cell, so the box keeps the taller one's size: nothing moves. */
.swap { display: grid; }
.swap > * { grid-area: 1 / 1; }
.swap > .only-events { visibility: hidden; }
html[data-view="events"] .swap > .only-events { visibility: visible; }
html[data-view="events"] .swap > .only-stay { visibility: hidden; }
.swap--btn { justify-items: start; }

/* ------------------------------------------------------------------ type */
.eyebrow { font: 500 0.75rem/1.3 var(--font-text); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 14px; }
h1, h2, .display { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: -0.012em; }
h1 em, h2 em, h3 em, .display em { font-style: italic; font-weight: var(--display-italic-weight); }
h2 { font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.04; }
.lead { font-size: 1.125rem; line-height: 1.6; color: var(--muted); margin: 18px 0 0; max-width: 58ch; }
.sec-header { max-width: 780px; margin-bottom: clamp(28px, 4vw, 52px); }
.sec-header--center { text-align: center; margin-inline: auto; }
.sec-header--center .lead { margin-inline: auto; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border: 1px solid var(--ink); border-radius: 999px;
  background: var(--ink); color: #fff; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 600 0.9375rem/1 var(--font-text); letter-spacing: 0.01em;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { background: #000; border-color: #000; }
.btn .ic { width: 16px; height: 16px; }
.btn--light { background: #fff; border-color: #fff; color: var(--ink); }
.btn--light:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--block { width: 100%; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--ink);
  font: 600 0.9375rem/1.3 var(--font-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.link-arrow .ic { width: 18px; height: 18px; transition: transform .25s ease; }
.link-arrow:hover .ic, a:hover > .link-arrow .ic, a:hover .link-arrow .ic { transform: translateX(4px); }

/* ------------------------------------------------------------------ header */
.site-header { position: relative; z-index: 40; color: var(--ink); background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header--overlay { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom: 0; color: #fff; }
.bar { display: flex; align-items: center; gap: 24px; height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; margin-right: auto; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-name { font: 300 1.3125rem/1 var(--font-display); letter-spacing: 0.01em; }
.brand-name span { display: block; margin-top: 5px; font: 500 0.5938rem/1 var(--font-text); letter-spacing: 0.32em; text-transform: uppercase; opacity: .85; }
.nav { display: none; gap: 30px; }
.nav a, .nav-cta { font: 500 0.75rem/1 var(--font-text); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: inherit; }
.nav a { padding: 10px 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current] { border-bottom-color: currentColor; }
.nav-cta { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid currentColor; border-radius: 999px; }
.nav-cta:hover { background: rgba(255, 255, 255, .12); }
.nav-cta .ic { width: 16px; height: 16px; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px 0 12px; background: none; border: 0; cursor: pointer;
  font: 500 0.75rem/1 var(--font-text); letter-spacing: 0.16em; text-transform: uppercase;
}
@media (min-width: 600px) { .nav-cta { display: inline-flex; } }
@media (min-width: 1000px) { .nav { display: flex; } .menu-btn { display: none; } }
@media (max-width: 759px) { .bar { height: 64px; gap: 12px; } .brand-name { font-size: 1.125rem; } .brand-mark { width: 30px; height: 30px; } }

/* Seasonal one-line banner: hidden on the default theme, shown by themes.css. */
.season-banner { display: none; background: var(--accent); color: #fff; }
.season-banner p { display: none; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 9px var(--gutter); text-align: center; font: 500 0.8125rem/1.35 var(--font-text); letter-spacing: 0.02em; }
.season-banner a { color: #fff; font-weight: 600; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; overflow: hidden; background: var(--veil); color: #fff; }
.hero-bg { position: absolute; inset: 0; }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--veil) 86%, transparent) 0%, color-mix(in srgb, var(--veil) 52%, transparent) 36%, transparent 66%),
    linear-gradient(to bottom, color-mix(in srgb, var(--veil) 60%, transparent) 0, transparent 190px);
}
.hero .eyebrow { color: rgba(255, 255, 255, .9); }
.hero--full { display: flex; align-items: flex-end; height: clamp(600px, 92svh, 960px); }
.hero--short { height: clamp(580px, 74svh, 700px); }
.hero-in { position: relative; z-index: 2; padding: 130px 0 clamp(40px, 7vh, 76px); }
.hero h1 { font-size: clamp(2.875rem, 7.2vw, 6.75rem); line-height: .98; max-width: 13.5ch; margin: 0 0 20px; }
.hero-sub { max-width: 48ch; font-size: clamp(1.0312rem, 1.35vw, 1.1875rem); line-height: 1.55; color: rgba(255, 255, 255, .92); }
.hero-sub p { margin: 0; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 30px; }
.hero-link { color: #fff; text-decoration: none; font-size: 0.9375rem; }
.hero-link span { text-decoration: underline; text-underline-offset: 4px; }
.hero-photos {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px; cursor: pointer;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .55); border-radius: 2px; color: #fff;
  font: 600 0.75rem/1 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; transition: background-color .2s ease;
}
.hero-photos:hover { background: rgba(255, 255, 255, .24); }
.hero-photos .ic { width: 16px; height: 16px; }
.hero-photos--pill { display: none; }
.rating { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; font-size: 0.9062rem; }
.rating span { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 4px; }
.rating .ic { width: 16px; height: 16px; }
.hero .rating { flex-basis: 100%; }
@media (min-width: 900px) { .hero .rating { flex-basis: auto; } }

/* hero with a form: copy left (top-aligned), form right */
.hero--form { padding: 132px 0 72px; }
.hero--form .hero-veil { background: linear-gradient(100deg, color-mix(in srgb, var(--veil) 88%, transparent) 0%, color-mix(in srgb, var(--veil) 66%, transparent) 55%, color-mix(in srgb, var(--veil) 45%, transparent) 100%); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 470px); gap: clamp(32px, 5vw, 72px); align-items: flex-start; }
.hero--form h1 { font-size: clamp(2.75rem, 5.6vw, 5.25rem); }
.hero-copy { padding-top: 8px; }
.hero-points, .contact-list { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 14px; }
.hero-points li, .contact-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9688rem; color: rgba(255, 255, 255, .92); }
.hero-points .ic, .contact-list .ic { color: var(--on-deep-accent); margin-top: 1px; }
.contact-list strong { display: block; font: 600 0.7188rem/1.4 var(--font-text); letter-spacing: 0.16em; text-transform: uppercase; color: #fff; }
@media (max-width: 899px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero--form { padding: 104px 0 40px; }
}
@media (max-width: 759px) {
  .hero--full { height: clamp(600px, 88svh, 780px); }
  .hero-in { padding-top: 110px; }
  .hero h1 { font-size: clamp(2.625rem, 11.5vw, 3.5rem); }
}

/* light hero (legal, thank-you) */
.hero--light { background: var(--sand); color: var(--ink); padding: clamp(56px, 8vw, 104px) 0; }
.hero--light .eyebrow { color: var(--accent-ink); }
.hero--light .hero-sub { color: var(--muted); }
.hero--light .hero-in { padding: 0; }
.hero-next { margin-top: 10px; }

/* ------------------------------------------------------------------ facts strip + view bar */
.facts-bar { background: var(--paper); border-bottom: 1px solid var(--line); }
.facts { list-style: none; margin: 0; padding: 22px 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; }
.facts li { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
.facts .ic { grid-row: 1 / 3; color: var(--accent); width: 22px; height: 22px; }
.f-v { font: 300 1.6875rem/1.05 var(--font-display); white-space: nowrap; }
.f-l { font: 500 0.6562rem/1.3 var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 999px) {
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 18px; }
  .facts li { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 4px; }
  .facts .ic { grid-row: auto; }
}

.viewbar-anchor { height: 0; }
.viewbar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 94%, transparent); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.viewbar-in { display: flex; align-items: center; gap: 16px; height: var(--bar-h); }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; }
.seg-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 999px;
  font: 600 0.75rem/1 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.seg-btn .ic { width: 16px; height: 16px; }
html:not([data-view="events"]) .seg-btn[data-v="stay"], html[data-view="events"] .seg-btn[data-v="events"] { background: var(--deep); color: #fff; }
.jumps { display: none; gap: 26px; margin-left: auto; }
.jumps a { font: 500 0.75rem/1 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; padding: 10px 0; color: var(--ink-2); }
.jumps a:hover { color: var(--accent-ink); }
.am-jump {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; margin-left: auto; border: 1px solid var(--ink); border-radius: 999px;
  font: 600 0.75rem/1 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--ink);
}
.am-jump .ic { width: 16px; height: 16px; }
@media (min-width: 960px) { .jumps { display: flex; } .am-jump { margin-left: 0; } }
@media (max-width: 419px) { .seg-btn { padding: 0 14px; } .seg-btn .ic { display: none; } .am-jump { padding: 0 14px; } }
[id] { scroll-margin-top: calc(var(--bar-h) + 16px); }

/* ------------------------------------------------------------------ sections */
.section { padding: clamp(64px, 9vw, 132px) 0; }
.section--sand { background: var(--sand); }
.section--deep { background: var(--deep); color: var(--on-deep); }
.section--deep .eyebrow { color: var(--on-deep-accent); }
.section--deep .link-arrow { color: var(--on-deep); }
.section--book + .section--book { padding-top: 0; }
.section--sand + .section--book.section--sand { padding-top: clamp(64px, 9vw, 132px); }

.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.intro .sec-header { margin-bottom: 0; }
.intro-p { font-size: clamp(1.0312rem, 1.3vw, 1.1562rem); line-height: 1.65; color: var(--ink-2); margin: 0; max-width: 56ch; }
@media (max-width: 859px) { .intro { grid-template-columns: minmax(0, 1fr); } }

/* photo mosaic: one large, four small */
.mosaic { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; aspect-ratio: 2.15 / 1; }
.m-cell { margin: 0; overflow: hidden; background: var(--sand); min-height: 0; }
.m-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.m-cell:hover img { transform: scale(1.035); }
.m-cell--0 { grid-row: 1 / 3; }
.m-all { position: absolute; right: 16px; bottom: 16px; min-height: 46px; padding: 0 18px; }
@media (max-width: 759px) {
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: none; aspect-ratio: auto; gap: 6px; }
  .m-cell--0 { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .m-cell:not(.m-cell--0) { aspect-ratio: 1 / 1; }
  .m-all { right: 10px; bottom: 10px; }
}

/* sideways photo rail */
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 29vw, 420px); gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin;
  margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 14px; scroll-padding-inline: var(--gutter);
}
.rail-cell { margin: 0; scroll-snap-align: start; }
.rail-cell img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--sand); }
.rail--rooms { margin-top: 36px; }
.rail--rooms .rail-cell img { aspect-ratio: 4 / 3; }
figcaption { font: 500 0.7188rem/1.4 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }
@media (max-width: 759px) { .rail { grid-auto-columns: 78%; } }

/* full-bleed photo band */
.band { position: relative; background: var(--deep); }
.band-fig { margin: 0; }
.band-fig img { width: 100%; height: clamp(340px, 60vw, 780px); object-fit: cover; display: block; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--veil) 72%, transparent), transparent 55%); pointer-events: none; }
.band-cap { position: absolute; z-index: 1; left: 0; right: 0; bottom: clamp(24px, 4vw, 56px); width: min(1320px, calc(100% - 2 * var(--gutter))); margin: 0 auto; color: #fff; font: 250 clamp(1.75rem, 3.6vw, 3.25rem)/1.1 var(--font-display); }
.band-cap em { font-style: italic; font-weight: var(--display-italic-weight); }

/* chips */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px 11px 13px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 0.9062rem; line-height: 1.3; }
.chip .ic { color: var(--accent); }

/* amenities: top row always visible, the full grouped list behind a toggle (html[data-amenities]) */
.am-more {
  display: inline-flex; align-items: center; gap: 10px; min-height: 50px; margin-top: 22px; padding: 0 22px; cursor: pointer;
  background: transparent; border: 1px solid var(--ink); border-radius: 2px; color: var(--ink);
  font: 600 0.7812rem/1 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; transition: background-color .2s ease, color .2s ease;
}
.am-more:hover { background: var(--ink); color: #fff; }
.am-more .ic { width: 16px; height: 16px; transition: transform .3s ease; }
.am-open { display: none; }
html[data-amenities="open"] .am-open { display: inline; }
html[data-amenities="open"] .am-closed { display: none; }
html[data-amenities="open"] .am-more .ic { transform: rotate(180deg); }
.am-all { display: none; margin-top: 44px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 56px; }
html[data-amenities="open"] .am-all { display: grid; }
.am-h { font: 600 0.75rem/1.3 var(--font-text); letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.am-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.am-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9375rem; line-height: 1.4; }
.am-list .ic { color: var(--accent); width: 19px; height: 19px; }
.am-list .am-off { color: var(--muted); }
.am-list .am-off .ic { color: var(--muted); }
@media (max-width: 999px) { .am-all { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .am-all { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* rooms */
.rooms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.room { display: flex; gap: 14px; align-items: flex-start; padding: 24px; background: var(--paper); }
.room .ic { color: var(--accent); margin-top: 4px; }
.room-h { font: 300 1.5rem/1.15 var(--font-display); margin: 0 0 6px; }
.room-p { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
@media (max-width: 999px) { .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .rooms { grid-template-columns: minmax(0, 1fr); } .room { padding: 18px; } }
.layout { margin-top: 36px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.layout summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 62px; cursor: pointer; font: 600 0.7812rem/1.3 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; }
.layout summary::-webkit-details-marker { display: none; }
.layout summary .ic:first-child { color: var(--accent); }
.layout summary .ic:last-child { margin-left: auto; transition: transform .3s ease; }
.layout[open] summary .ic:last-child { transform: rotate(180deg); }
.layout-body { padding: 8px 0 28px; }
.plan-img { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; background: #fff; }
.layout-body .small { text-align: center; margin-top: 10px; }

/* rules */
.rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 36px; }
.rule { display: flex; gap: 14px; align-items: flex-start; }
.rule .ic { color: var(--accent); margin-top: 2px; width: 22px; height: 22px; }
.rule-h { margin: 0 0 4px; font-weight: 600; font-size: 0.9688rem; line-height: 1.35; }
.rule-p { margin: 0; color: var(--muted); font-size: 0.9062rem; line-height: 1.5; }
@media (max-width: 999px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .rules { grid-template-columns: minmax(0, 1fr); gap: 22px; } }
.price-note { display: flex; gap: 14px; align-items: flex-start; margin-top: 40px; padding: 20px 22px; background: var(--paper); border-left: 2px solid var(--accent); }
.price-note .ic { color: var(--accent); margin-top: 2px; }
.price-note p { margin: 0; }

/* reviews placeholder */
.reviews-slot { border: 1px dashed var(--line-strong); background: var(--paper); padding: 28px; }
.reviews-slot p:last-child { margin: 0; }

.booking-slot { margin-top: 16px; min-height: 420px; display: grid; place-items: center; padding: 36px 20px; text-align: center; border: 1px dashed var(--line-strong); background: var(--paper); }
.section--sand .booking-slot { background: #fff; }
.standin-title { font: 300 1.625rem/1.2 var(--font-display); margin: 0 0 8px; }
.standin-note { color: var(--muted); max-width: 52ch; margin: 0 auto; font-size: 0.9062rem; }
.standin-cal { display: grid; grid-template-columns: repeat(7, 30px); gap: 6px; justify-content: center; margin-top: 22px; }
.standin-cal span { height: 30px; border: 1px solid var(--line); background: #fff; }

/* estate cards (group-stays landing page, /variations/ E1) and the photo closer */
.estates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.estate { display: block; color: inherit; text-decoration: none; background: #fff; }
.estate-fig { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--sand); }
.estate-fig img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.estate:hover .estate-fig img { transform: scale(1.035); }
.estate-body { padding: 28px 28px 32px; }
.estate-name { font: 250 clamp(2.25rem, 3.8vw, 3.25rem)/1 var(--font-display); margin: 0 0 10px; }
.estate-tag { font: 300 1.25rem/1.35 var(--font-display); margin: 0 0 14px; color: var(--ink-2); }
.estate-tag em { font-style: italic; }
.estate-facts { margin: 0; font: 500 0.7188rem/1.5 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 759px) { .estates { grid-template-columns: minmax(0, 1fr); } .estate-body { padding: 22px 20px 26px; } }

.closer { position: relative; display: flex; align-items: center; min-height: clamp(440px, 58vw, 660px); background: var(--deep); color: #fff; overflow: hidden; }
.closer-fig { position: absolute; inset: 0; margin: 0; }
.closer-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.closer::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--veil) 58%, transparent); }
.closer-in { position: relative; z-index: 1; text-align: center; padding: 64px 0; }
.closer .eyebrow { color: rgba(255, 255, 255, .88); }
.closer h2 { font-size: clamp(2.625rem, 5.6vw, 5rem); margin-bottom: 14px; }
.closer p:not(.eyebrow) { font-size: 1.125rem; margin: 0 0 28px; }
.closer h2 + .btn { margin-top: 16px; }

.cross { max-width: 760px; }
.cross h2 { margin-bottom: 14px; }
.cross p:not(.eyebrow) { color: var(--muted); font-size: 1.0625rem; margin: 0; }
.section--deep .cross p:not(.eyebrow) { color: var(--on-deep); }
.crosssell { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; color: inherit; text-decoration: none; }
.crosssell figure { margin: 0; overflow: hidden; aspect-ratio: 3 / 2; }
.crosssell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.crosssell:hover img { transform: scale(1.035); }
.crosssell h2 { margin-bottom: 14px; }
.crosssell p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 1.0625rem; }
@media (max-width: 759px) { .crosssell { grid-template-columns: minmax(0, 1fr); } }

/* events: spaces, split with form or media */
.spaces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.space { margin: 0; }
.space img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: var(--sand); }
.space figcaption { text-transform: none; letter-spacing: 0; font: 400 0.9062rem/1.45 var(--font-text); color: var(--muted); margin-top: 14px; }
.space-h { display: block; font: 300 1.4375rem/1.2 var(--font-display); color: var(--ink); margin-bottom: 4px; }
@media (max-width: 999px) { .spaces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .spaces { gap: 10px; } .space-h { font-size: 1.25rem; } }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 80px); align-items: flex-start; }
.split--form { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); }
.split--media { align-items: center; }
.split-fig { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; }
.split-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-copy .intro-p { margin-bottom: 28px; }
.ticks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: center; font-size: 1rem; }
.ticks .ic { color: var(--accent); }
@media (max-width: 859px) { .split, .split--form { grid-template-columns: minmax(0, 1fr); } }

/* book page */
.book-head { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-bottom: 36px; }
.book-head figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.book-head img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-head h2 { margin-bottom: 10px; }
.book-facts { font: 500 0.75rem/1.5 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.book-head .link-arrow { margin-top: 6px; }
@media (max-width: 759px) { .book-head { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ forms (stand-ins for the CRM embeds) */
.form-card { background: var(--paper); color: var(--ink); padding: clamp(22px, 3vw, 34px); border-radius: 3px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45); }
.section .form-card { box-shadow: none; border: 1px solid var(--line); background: #fff; }
.form-title { font: 250 2rem/1.1 var(--font-display); margin: 0 0 8px; }
.form-note { color: var(--muted); font-size: 0.9062rem; margin: 0 0 20px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.field { display: grid; gap: 6px; min-width: 0; }
.f-full { grid-column: 1 / -1; }
.field label { font: 500 0.8125rem/1.3 var(--font-text); color: var(--ink-2); }
.opt { color: var(--muted); font-weight: 400; }
.field input:not([type="checkbox"]), .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 3px; background: #fff; color: var(--ink);
  font: 400 1rem/1.3 var(--font-text); -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 92px; resize: vertical; }
.field select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23625950' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.field input[type="date"] { min-width: 0; }
.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.check label { font: 400 0.875rem/1.45 var(--font-text); color: var(--ink-2); }
.check--consent label { font-size: 0.7812rem; color: var(--muted); }
.form-submit { margin-top: 20px; }
@media (max-width: 420px) { .fields { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ photos dialog */
.photos-dlg { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--paper); color: var(--ink); overflow-y: auto; }
.photos-dlg::backdrop { background: rgba(0, 0, 0, .6); }
.dlg-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--gutter); background: var(--paper); border-bottom: 1px solid var(--line); }
.dlg-title { margin: 0; font: 300 1.625rem/1.1 var(--font-display); }
.dlg-title span { font: 500 0.75rem/1 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-left: 10px; }
.dlg-close { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; cursor: pointer; }
.dlg-body { max-width: 1120px; margin: 0 auto; padding: 8px var(--gutter) 72px; }
.dlg-h { font: 600 0.75rem/1.3 var(--font-text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); margin: 40px 0 14px; }
.dlg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dlg-cell { margin: 0; background: var(--sand); }
.dlg-cell:nth-child(3n+1):not(.dlg-cell--tall) { grid-column: 1 / -1; }
.dlg-cell img { width: 100%; height: auto; display: block; }
@media (max-width: 599px) { .dlg-grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ legal */
.legal-body { max-width: 760px; }
.legal-body h2 { font-size: clamp(1.625rem, 3vw, 2.125rem); margin: 40px 0 14px; }
.legal-item:first-child h2 { margin-top: 0; }
.legal-body p, .legal-body li { color: var(--ink-2); }
.legal-body ul { padding-left: 20px; }

/* ------------------------------------------------------------------ footer */
.site-footer { background: var(--deep); color: var(--on-deep); padding: clamp(56px, 7vw, 96px) 0 36px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.footer-brand { font: 300 1.875rem/1.1 var(--font-display); margin: 0 0 12px; }
.footer-brand em { font-style: italic; }
.footer-text { opacity: .8; max-width: 38ch; margin: 0; }
.footer-title { font: 600 0.7188rem/1 var(--font-text); letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-deep-accent); margin: 6px 0 16px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer-links a { display: inline-block; padding: 6px 0; text-decoration: none; opacity: .9; }
.footer-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 0.8125rem; opacity: .75; }
.legal a { text-decoration: none; }
.legal .credit { margin-left: auto; }
.legal .credit a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 759px) { .legal .credit { margin-left: 0; flex-basis: 100%; } }
.site-footer--lp .legal { margin-top: 0; border-top: 0; padding-top: 0; }
.site-footer--lp { padding: 32px 0; }
@media (max-width: 759px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* ------------------------------------------------------------------ phone sticky bar */
.sticky-bar { display: none; }
@media (max-width: 759px) {
  .sticky-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; gap: 10px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper) 96%, transparent);
    border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .35s ease; visibility: hidden;
  }
  .sticky-bar.is-on { transform: none; visibility: visible; }
  .sticky-bar .btn { flex: 1; min-width: 0; }
  .sticky-call { display: grid; place-items: center; width: 52px; flex: none; border: 1px solid var(--ink); border-radius: 2px; color: var(--ink); }
  /* room for the bar inside the footer, so the page always ends on the footer colour (no paper strip below it) */
  body.sticky-room.sticky-on .site-footer::after { content: ""; display: block; height: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------------ promoted sections (picked on /variations/, 2026-10-08)
   Built by _build/sections.py, run by assets/js/sections.js. Every stage is a fixed box (two image layers that
   cross-fade), so nothing moves when a photo, tab or moment changes. */
.pal-bleu { }   /* Bleu shares the base palette */
.stg { position: relative; overflow: hidden; background: var(--veil); }
.stg-l { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; z-index: 1; transition: opacity .6s ease; }
.stg-l.is-on { opacity: 1; }
.stg-l.is-top { z-index: 2; }

/* W6 tour: the stay plays on the left, the itinerary (its own scroll) on the right; phones: a sideways strip */
.section--tour .intro { margin-bottom: clamp(24px, 3vw, 40px); }
.tour { outline: none; }
.tour-grid { display: grid; grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); gap: clamp(14px, 1.6vw, 24px); }
.tour-stage { aspect-ratio: 4 / 3; width: 100%; }
.tour .stg-l { transform-origin: 50% 60%; transition: opacity .9s ease; }
.tour-shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background:
  linear-gradient(to top, color-mix(in srgb, var(--veil) 86%, transparent) 0%, color-mix(in srgb, var(--veil) 30%, transparent) 40%, transparent 62%),
  linear-gradient(to bottom, color-mix(in srgb, var(--veil) 42%, transparent), transparent 90px); }
.tour-segs { position: absolute; z-index: 4; top: 16px; left: 18px; right: 18px; display: flex; gap: 5px; }
.tour-seg { flex: 1; height: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.tour-seg i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.tour-cap { position: absolute; z-index: 4; left: clamp(18px, 2.4vw, 36px); right: 190px; bottom: clamp(18px, 2.4vw, 34px); color: #fff; }
.tour-when { margin: 0 0 8px; font: 600 0.7188rem/1.3 var(--font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--on-deep-accent); }
.tour-t { margin: 0 0 6px; font: 220 clamp(1.875rem, 3.2vw, 3.125rem)/1.02 var(--font-display); }
.tour-c { margin: 0; max-width: 56ch; font-size: 0.9375rem; line-height: 1.45; color: rgba(255, 255, 255, .88); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tour-ctl { position: absolute; z-index: 4; right: clamp(14px, 2.4vw, 34px); bottom: clamp(18px, 2.4vw, 34px); display: flex; gap: 8px; }
.tour-btn { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.tour-btn:hover { background: #fff; color: var(--ink); }
.tour-btn .ic { width: 18px; height: 18px; }
.tour-flip { transform: scaleX(-1); }
.tour-play { width: 56px; height: 56px; background: #fff; color: var(--ink); border-color: #fff; }
.tour-play .ic { width: 20px; height: 20px; }
.tour-play .tour-ic-play path { fill: currentColor; stroke: none; }
.tour-ic-play { display: none; }
.tour-play[aria-pressed="true"] .tour-ic-pause { display: none; }
.tour-play[aria-pressed="true"] .tour-ic-play { display: block; }
.tour-side { position: relative; min-height: 0; }
.tour-list { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0 6px 0 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.tour-list li + li { margin-top: 4px; }
.tour-stop { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; width: 100%; padding: 12px 14px 12px 10px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--ink-2); cursor: pointer; text-align: left; font: inherit; transition: background-color .25s ease, border-color .25s ease; }
.tour-stop:hover { background: color-mix(in srgb, var(--sand) 70%, transparent); }
.tour-stop[aria-current="true"] { background: #fff; border-color: var(--line-strong); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
.tour-n { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--paper); font: 250 1.1875rem/1 var(--font-display); color: var(--ink); }
.tour-stop[aria-current="true"] .tour-n { background: var(--accent); border-color: var(--accent); color: #fff; }
.tour-sw { display: grid; gap: 3px; min-width: 0; }
.tour-sw-when { font: 600 0.6875rem/1.3 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.tour-sw-t { font: 250 1.4375rem/1.1 var(--font-display); color: var(--ink); }
.tour-sw-t em { font-style: italic; font-weight: var(--display-italic-weight); }
.tour-sw-p { font-size: 0.875rem; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tour-dots { display: flex; gap: 4px; margin-top: 4px; }
.tour-dots i { width: 14px; height: 3px; border-radius: 2px; background: var(--line); transition: background-color .3s ease; }
.tour-stop[aria-current="true"] .tour-dots i.is-on { background: var(--accent); }
@media (max-width: 899px) {
  .tour-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tour-stage { aspect-ratio: 4 / 5; }
  .tour-cap { right: 18px; bottom: 90px; }
  .tour-c { -webkit-line-clamp: 3; font-size: 0.9062rem; }
  .tour-ctl { left: 18px; right: auto; bottom: 20px; }
  .tour-side { position: static; }
  .tour-list { position: relative; inset: auto; display: flex; gap: 6px; padding: 0 0 4px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .tour-list::-webkit-scrollbar { display: none; }
  .tour-list li { flex: none; width: 66%; max-width: 280px; }
  .tour-list li + li { margin-top: 0; }
  .tour-stop { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; height: 76px; padding: 10px 12px 10px 8px; border-color: var(--line); background: #fff; align-items: center; }
  .tour-n { width: 36px; height: 36px; font-size: 1rem; }
  .tour-sw-t { font-size: 1.1875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tour-sw-p, .tour-dots { display: none; }
}

/* home section 2: one photo panel per estate, each into its own page */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.duo-p { position: relative; overflow: hidden; height: clamp(520px, 64vw, 760px); background: var(--veil); color: #fff; }
.duo-fig { position: absolute; inset: 0; display: block; }
.duo-fig img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.duo-p:hover .duo-fig img { transform: scale(1.035); }
.duo-p::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--veil) 88%, transparent) 0%, color-mix(in srgb, var(--veil) 40%, transparent) 45%, transparent 70%); }
.duo-txt { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: clamp(22px, 3vw, 44px); }
.duo-txt .eyebrow { color: rgba(255, 255, 255, .9); }
.duo-name { margin: 0 0 10px; font: 220 clamp(2.625rem, 4.6vw, 4.5rem)/1 var(--font-display); }
.duo-name a { color: inherit; text-decoration: none; }
.duo-hook { margin: 0 0 12px; font: 300 clamp(1.1875rem, 1.6vw, 1.4375rem)/1.3 var(--font-display); }
.duo-hook em { font-style: italic; }
.duo-facts { margin: 0 0 22px; font: 500 0.7188rem/1.5 var(--font-text); letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.duo .btn .ic { transition: transform .25s ease; }
.duo .btn:hover .ic { transform: translateX(4px); }
@media (max-width: 759px) { .duo { grid-template-columns: minmax(0, 1fr); } .duo-p { height: 480px; } }

/* A3 amenity tiles */
.amt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.amt--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.amt-t { position: relative; display: block; aspect-ratio: 4 / 3; padding: 0; border: 0; overflow: hidden; background: var(--deep); color: #fff; cursor: pointer; text-align: left; }
.amt-fig { position: absolute; inset: 0; }
.amt-fig img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.amt-t:hover .amt-fig img { transform: scale(1.04); }
.amt-t:not(.amt-t--plain)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--veil) 85%, transparent), transparent 62%); }
.amt-n { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 46px; font: 250 clamp(1.375rem, 2.1vw, 1.875rem)/1.08 var(--font-display); }
.amt-c { position: absolute; z-index: 1; left: 20px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; font: 600 0.6875rem/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; opacity: .92; }
.amt-c .ic { width: 16px; height: 16px; }
.amt-icons { position: absolute; left: 20px; top: 22px; display: flex; gap: 14px; color: var(--on-deep-accent); }
.amt-icons .ic { width: 28px; height: 28px; }
.amt-dlg { width: min(560px, 100%); max-height: min(86svh, 760px); margin: auto; padding: 0; border: 0; border-radius: 3px; background: var(--paper); color: var(--ink); }
.amt-dlg::backdrop { background: rgba(0, 0, 0, .55); }
.amt-dbar { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; background: var(--paper); border-bottom: 1px solid var(--line); }
.amt-dt { margin: 0; font: 300 1.625rem/1.1 var(--font-display); }
.amt-dt span { display: block; margin-top: 4px; font: 600 0.6875rem/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.amt-db { padding: 8px 24px 28px; }
.amt-dh { margin: 22px 0 12px; font: 600 0.75rem/1.3 var(--font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
.section--amen .amt { margin-bottom: 4px; }
@media (max-width: 999px) { .amt--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .amt, .amt--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .amt-t { aspect-ratio: 1 / 1; }
  .amt--9 .amt-t:last-child { grid-column: 1 / -1; aspect-ratio: auto; min-height: 120px; }
  .amt-n { left: 14px; right: 14px; bottom: 40px; font-size: 1.25rem; }
  .amt-c { left: 14px; bottom: 14px; font-size: 0.625rem; }
}
.est-pick { display: grid; gap: 22px; }
.est-sw { display: inline-flex; justify-self: start; padding: 3px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; }
.est-sw-b { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font: 600 0.75rem/1 var(--font-text); letter-spacing: .12em; text-transform: uppercase; transition: background-color .2s ease, color .2s ease; }
.est-sw-b:hover { color: var(--ink); }
.est-sw-b[aria-checked="true"] { background: var(--deep); color: #fff; }
.est-panes { display: grid; }
.est-pane { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility 0s linear .35s; }
.est-pane.is-on { visibility: visible; opacity: 1; transition: opacity .35s ease, visibility 0s; }
.est-pane .link-arrow { margin-top: 22px; }

/* V3 occasion picker */
.occ { display: grid; gap: 18px; }
.occ-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.occ-tab { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 3px; background: #fff; color: var(--ink); cursor: pointer; text-align: left; font: 300 1.125rem/1.15 var(--font-display); transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.occ-tab .ic { color: var(--accent); flex: none; }
.occ-tab:hover { border-color: var(--ink); }
.occ-tab[aria-selected="true"] { background: var(--deep); border-color: var(--deep); color: #fff; }
.occ-tab[aria-selected="true"] .ic { color: var(--on-deep-accent); }
.occ-show { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: flex-start; }
.occ-stage { aspect-ratio: 3 / 2; }
.occ-txts { display: grid; }
.occ-txt { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility 0s linear .35s; }
.occ-txt.is-on { visibility: visible; opacity: 1; transition: opacity .35s ease, visibility 0s; }
.occ-h { margin: 0 0 10px; font: 220 clamp(2.125rem, 3.4vw, 3.25rem)/1.02 var(--font-display); }
.occ-p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }
.occ-side .ticks { margin-top: 18px; }
.occ-side .btn { margin-top: 26px; }
@media (max-width: 999px) { .occ-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .occ-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .occ-tab { font-size: 1rem; min-height: 52px; padding: 8px 10px; gap: 8px; }
  .occ-show { grid-template-columns: minmax(0, 1fr); }
}

/* B2 booking menu: Book direct first, then thin Airbnb / VRBO rows */
.bm { display: grid; gap: clamp(16px, 3vw, 40px); align-items: start; }
.bm--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bm-col { display: grid; gap: 8px; }
.bm-head { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.bm-head figure { margin: 0; width: 96px; aspect-ratio: 1 / 1; overflow: hidden; flex: none; }
.bm-head img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bm-est { margin: 0; font: 250 clamp(1.875rem, 3vw, 2.5rem)/1 var(--font-display); }
.bm-sl { margin: 6px 0 0; font: 500 0.7188rem/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bm-direct { position: relative; display: grid; gap: 6px; padding: 24px; background: var(--deep); color: var(--on-deep); text-decoration: none; transition: background-color .2s ease; }
.bm-direct:hover { background: color-mix(in srgb, var(--deep) 88%, #000); }
.bm-k { font: 600 0.6875rem/1 var(--font-text); letter-spacing: .18em; text-transform: uppercase; color: var(--on-deep-accent); }
.bm-n { font: 250 2.125rem/1.05 var(--font-display); }
.bm-perks { font-size: 0.9062rem; opacity: .88; }
.bm-go { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font: 600 0.75rem/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; }
.bm-go .ic { width: 18px; height: 18px; transition: transform .25s ease; }
.bm-direct:hover .bm-go .ic { transform: translateX(4px); }
.bm-badge { position: absolute; top: -12px; right: 20px; padding: 6px 10px; background: var(--accent); color: #fff; font: 600 0.6875rem/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; }
.bm-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 60px; padding: 0 20px; border: 1px solid var(--line-strong); background: #fff; text-decoration: none; color: var(--ink); transition: border-color .2s ease; }
.bm-row:hover { border-color: var(--ink); }
.bm-n2 { font: 600 0.8125rem/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; }
.bm-r { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9062rem; color: var(--muted); }
.bm-r .ic { width: 15px; height: 15px; flex: none; }
.bm-row > .ic { width: 16px; height: 16px; color: var(--muted); }
.bm-single { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.bm-single .booking-slot { margin-top: 0; }
.section--sand .bm-row { background: #fff; }
@media (max-width: 859px) { .bm--2, .bm-single { grid-template-columns: minmax(0, 1fr); } .bm--2 { gap: 36px; } }
@media (max-width: 420px) { .bm-row { padding: 10px 14px; gap: 10px; } .bm-r { font-size: 0.8438rem; } }

/* R1 big numbers */
.stats { list-style: none; margin: 0 0 clamp(28px, 4vw, 44px); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats li { padding: 28px 0; }
.stats li + li { border-left: 1px solid var(--line); padding-left: clamp(16px, 2.4vw, 32px); }
.stats a { display: block; color: inherit; text-decoration: none; }
.stats a:hover .stats-l { color: var(--accent-ink); }
.stats-v { display: block; font: 220 clamp(2.75rem, 4.6vw, 4.25rem)/1 var(--font-display); }
.stats-l { display: block; margin-top: 10px; font-size: 0.8438rem; line-height: 1.45; color: var(--muted); transition: color .2s ease; }
.stats-band { background: var(--paper); padding: clamp(28px, 4vw, 48px) 0; }
.stats-band .stats { margin: 0; }
@media (max-width: 859px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats li { padding: 22px 0; }
  .stats li:nth-child(3) { border-left: 0; padding-left: 0; }
  .stats li:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* F2 doors: stay or celebrate */
.doors { display: grid; grid-template-columns: 1fr 1fr; }
.doors-p { position: relative; display: block; height: clamp(420px, 52vw, 620px); overflow: hidden; color: #fff; text-decoration: none; background: var(--veil); }
.doors-p figure { position: absolute; inset: 0; margin: 0; }
.doors-p img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.doors-p:hover img { transform: scale(1.04); }
.doors-p::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--veil) 85%, transparent), transparent 60%); }
.doors-t { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: clamp(22px, 3.4vw, 52px); }
.doors-t .eyebrow { color: rgba(255, 255, 255, .88); }
.doors-h { margin: 0; font: 220 clamp(2.5rem, 4.6vw, 4.375rem)/1 var(--font-display); }
.doors-h em { font-style: italic; font-weight: var(--display-italic-weight); }
.doors-t .link-arrow { color: #fff; }
@media (max-width: 759px) { .doors { grid-template-columns: minmax(0, 1fr); } .doors-p { height: 380px; } }


/* ------------------------------------------------------------------ phone-first pass (2026-10-09)
   Design language after Emilio's reference (Riviera Maya Haciendas, Hacienda Corazon): warm white pages, warm
   charcoal ink, taupe accents, pill buttons, sentence-case links, quiet dividers, photos first. Their button
   density and text volume are NOT copied: one main action per screen, the phone sticky bar as the one persistent
   action, detail behind panels and "More". */

/* headline key phrase in the accent ink (taupe here; teal on Bleu; seasonal on themed days) */
.sec-header h2 em, .intro h2 em, .cross h2 em, .crosssell h2 em, .legal-body h2 em { color: var(--accent-ink); }
.section--deep .sec-header h2 em, .var-sec--deep .sec-header h2 em { color: inherit; }

/* "More": the first sentence shows, the rest folds behind a quiet button on phones */
.more-btn { display: none; }
@media (max-width: 759px) {
  .more .more-x { display: none; }
  .more.is-open .more-x { display: inline; }
  .more-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 56px; padding: 0 6px; border: 0; background: none; color: var(--ink);
    font: 600 0.9375rem/1 var(--font-text); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; cursor: pointer; }
  .more.is-open .more-btn { display: none; }
}

/* sleeping: photos first, then the rooms as quiet rows with dividers */
.rail--rooms { margin-top: 0; margin-bottom: 28px; }
.rooms { gap: 0 40px; background: none; border: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.room { padding: 18px 0; background: none; border-bottom: 1px solid var(--line); gap: 14px; }
.room-h { font-size: 1.375rem; margin-bottom: 2px; }
.room-p { font-size: 0.9062rem; }
@media (max-width: 599px) { .rooms { grid-template-columns: minmax(0, 1fr); } .room { padding: 14px 0; } .room-h { font-size: 1.25rem; } }
.layout { margin-top: 24px; border: 0; }
.layout summary { display: inline-flex; min-height: 50px; padding: 0 22px 0 18px; border: 1px solid var(--ink); border-radius: 999px; font: 600 0.9375rem/1 var(--font-text); letter-spacing: 0; text-transform: none; }
.layout summary .ic:last-child { margin-left: 4px; }
.layout-body { padding: 18px 0 8px; }

/* the fine print: panels, closed by default */
.panels { border-top: 1px solid var(--ink); }
.panel { border-bottom: 1px solid var(--line-strong); }
.panel summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 64px; cursor: pointer; }
.panel summary::-webkit-details-marker { display: none; }
.panel-t { font: 600 1rem/1.3 var(--font-text); }
.panel-n { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--sand); font: 600 0.7188rem/1 var(--font-text); color: var(--muted); }
.panel summary .ic { margin-left: auto; transition: transform .3s ease; }
.panel[open] summary .ic { transform: rotate(180deg); }
.panel-body { padding: 4px 0 26px; }
.panel .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 599px) { .panel .rules { grid-template-columns: minmax(0, 1fr); } }

/* bottom sheets (amenities on phones, amenity categories, the menu) */
.sheet { width: 100%; max-width: 640px; max-height: 86svh; margin: auto auto 0; padding: 0; border: 0; border-radius: 18px 18px 0 0; background: var(--paper); color: var(--ink); overscroll-behavior: contain; }
.sheet::backdrop { background: rgba(20, 16, 14, .5); }
.sheet-grab { display: grid; place-items: center; height: 26px; touch-action: none; cursor: grab; }
.sheet-grab span { width: 44px; height: 4px; border-radius: 4px; background: var(--line-strong); }
.sheet-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 16px 12px 20px; background: var(--paper); border-bottom: 1px solid var(--line); }
.sheet-t { margin: 0; font: 300 1.625rem/1.1 var(--font-display); }
.sheet-t span { display: block; margin-top: 4px; font: 600 0.6875rem/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sheet-x { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; }
.sheet-body { padding: 6px 20px calc(28px + env(safe-area-inset-bottom)); }
.sheet-h { margin: 20px 0 4px; font: 600 0.75rem/1.3 var(--font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
.sheet-list { list-style: none; margin: 0; padding: 0; }
.sheet-list li { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 1rem; line-height: 1.35; }
.sheet-list .ic { color: var(--accent); width: 20px; height: 20px; }
.sheet-list .am-off, .sheet-list .am-off .ic { color: var(--muted); }
.sheet, .amt-dlg, .menu-sheet { transition: transform .3s cubic-bezier(.2,.8,.2,1); }

/* menu: a bottom sheet on phones and tablets */
.menu { position: fixed; inset: 0; z-index: 60; background: none; color: var(--ink); overflow: hidden; }
.menu-backdrop { position: absolute; inset: 0; background: rgba(20, 16, 14, .5); opacity: 0; transition: opacity .3s ease; }
.menu-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; max-height: 92svh; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom)); background: var(--paper); border-radius: 18px 18px 0 0; transform: translateY(100%); }
.menu.is-open .menu-backdrop { opacity: 1; }
.menu.is-open .menu-sheet { transform: none; }
.menu-top { display: flex; align-items: center; justify-content: space-between; padding: 0 0 8px 4px; }
.menu-t { margin: 0; font: 300 1.625rem/1 var(--font-display); }
.menu-close { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; background: #fff; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink); cursor: pointer; }
.menu-nav { display: grid; gap: 6px; margin: 4px 0 14px; }
.menu-row { position: relative; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 14px 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); text-decoration: none; }
.menu-row--est { min-height: 76px; }
.menu-img { width: 56px; height: 56px; object-fit: cover; flex: none; }
.menu-txt { display: grid; gap: 3px; min-width: 0; }
.menu-txt strong { font: 300 1.375rem/1.1 var(--font-display); }
.menu-txt small { font-size: 0.8438rem; color: var(--muted); }
.menu-row > .ic { margin-left: auto; width: 18px; height: 18px; color: var(--muted); }
.menu-row[aria-current="page"] { border-color: var(--ink); box-shadow: inset 4px 0 0 var(--accent); }
.menu-row[aria-current="page"] small::after { content: " · You are here"; color: var(--accent-ink); font-weight: 600; }
.menu-book { min-height: 56px; }
html.is-locked, html.is-locked body { overflow: hidden; }

/* the phone sticky bar: one action, a one-line summary beside it */
@media (max-width: 759px) {
  .sticky-bar { align-items: center; gap: 12px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper) 97%, transparent); box-shadow: 0 -10px 24px -18px rgba(0, 0, 0, .45); }
  .sticky-note { flex: 1 1 auto; min-width: 0; margin: 0; font: 500 0.8438rem/1.3 var(--font-text); color: var(--ink-2); }
  .sticky-bar .btn { flex: none; min-width: 0; padding: 0 24px; }
  .sticky-call { width: 52px; height: 52px; border-radius: 50%; }
  body.sticky-room.sticky-on .site-footer::after { height: 84px; }
  .sticky-bar.is-held { transform: translateY(110%) !important; visibility: hidden !important; }
}

/* tap targets: every link or button a thumb can hit is at least 44px tall on phones */
@media (max-width: 759px) {
  .brand, .hero-link, .rating, .footer-links a, .legal a, .season-banner a, .link-arrow, .reviews-link .rating { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-links { gap: 0; }
  .footer-links a, .legal a { min-width: 44px; }
  .legal { gap: 0 22px; }
  .check { min-height: 44px; align-items: center; }
  .check--consent { align-items: start; }
}

/* the property pages on phones: photo first, then the name and facts on the page (no text over the photo) */
@media (max-width: 759px) {
  .hero--prop { display: block; height: auto; background: var(--paper); color: var(--ink); }
  .hero--prop .hero-bg { position: relative; height: clamp(340px, 58svh, 520px); background: var(--veil); }
  .hero--prop .hero-veil { background: linear-gradient(to bottom, color-mix(in srgb, var(--veil) 60%, transparent) 0, transparent 130px); }
  .hero--prop .hero-in { padding: 22px 0 6px; }
  .hero--prop .eyebrow { color: var(--accent-ink); }
  .hero--prop h1 { font-size: clamp(2.25rem, 10vw, 2.75rem); margin-bottom: 12px; color: var(--ink); }
  .hero--prop h1 em { color: var(--accent-ink); }
  .hero--prop .hero-sub { color: var(--ink-2); font-size: 1.0312rem; }
  .hero--prop .hero-meta { margin-top: 20px; gap: 6px 18px; }
  .hero--prop .swap--btn .btn--light { background: var(--ink); border-color: var(--ink); color: #fff; }
  .hero--prop .hero-meta .hero-photos { display: none; }
  .hero--prop .hero-photos--pill { position: absolute; z-index: 3; right: 14px; bottom: 14px; display: inline-flex; min-height: 44px; padding: 0 16px;
    background: rgba(20, 16, 14, .6); border-color: rgba(255, 255, 255, .75); border-radius: 999px; font: 600 0.875rem/1 var(--font-text); letter-spacing: .01em; text-transform: none; }
  .hero--prop .rating { color: var(--ink); flex-basis: auto; }
  /* the facts: a 2 x 2 of big numbers with quiet dividers; the rest stay on bigger screens */
  .facts-bar { border-bottom: 0; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0 0 8px; border-top: 1px solid var(--line-strong); }
  .facts li { grid-template-columns: 1fr; justify-items: start; text-align: left; row-gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .facts li:not(.f-more) ~ li:not(.f-more):nth-of-type(2n) { padding-left: 0; }
  .facts .ic, .facts .f-more { display: none; }
  .f-v { font-size: 2.125rem; }
  .f-l { font-size: 0.6875rem; }
  /* the view bar: no more than 56px, labels whole */
  :root { --bar-h: 56px; }
  .viewbar-in { gap: 10px; }
  .seg { padding: 2px; }
  .seg-btn { min-height: 44px; padding: 0 16px; }
  .am-jump { min-height: 44px; padding: 0 16px; }
  /* amenity category lists open as bottom sheets */
  .amt-dlg { margin: auto auto 0; width: 100%; max-height: 86svh; border-radius: 18px 18px 0 0; }
  .amt-dlg .am-list li { min-height: 44px; align-items: center; font-size: 1rem; }
  /* type scale */
  h2 { font-size: clamp(1.875rem, 8.4vw, 2.25rem); }
  .sec-header { margin-bottom: 24px; }
  .lead { font-size: 1.0312rem; }
  .section { padding: 56px 0; }
}
@media (max-width: 380px) { .seg-btn { padding: 0 13px; } .am-jump { padding: 0 13px; } .sticky-bar .btn { padding: 0 18px; } }

/* the tour on phones: photo with its controls, the caption under it (never over the subject), the itinerary strip */
@media (max-width: 899px) {
  .tour-main { display: grid; }
  .tour-stage { aspect-ratio: 3 / 2; touch-action: pan-y; }
  .tour-shade { background: linear-gradient(to top, color-mix(in srgb, var(--veil) 55%, transparent) 0%, transparent 34%), linear-gradient(to bottom, color-mix(in srgb, var(--veil) 40%, transparent), transparent 70px); }
  .tour-cap { position: static; height: 132px; overflow: hidden; padding: 14px 0 0; color: var(--ink); }
  .tour-when { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; margin: 0 0 8px; border-radius: 999px; background: var(--deep); color: var(--on-deep-accent); font-size: 0.7812rem; letter-spacing: .1em; }
  .tour-t { font-size: 1.6875rem; color: var(--ink); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tour-c { color: var(--muted); -webkit-line-clamp: 2; font-size: 0.9062rem; }
  .tour-ctl { left: auto; right: 12px; bottom: 12px; gap: 6px; }
  .tour-btn { width: 48px; height: 48px; }
  .tour-play { width: 52px; height: 52px; }
}
@media (min-width: 900px) { .tour-main { position: relative; } }

/* forms: inline errors under the field */
.field-err { margin: 2px 0 0; font: 500 0.875rem/1.35 var(--font-text); color: #A1301F; }
.field [aria-invalid="true"] { border-color: #A1301F; outline-color: #A1301F; }

/* ------------------------------------------------------------------ hand-made pass (2026-10-09)
   Emilio: "this feels very AI generated ... smoother round corners, mobile first". Decided at 390, desktop
   follows. Plain section labels at varied sizes, almost no eyebrows, facts as plain text, no icon rows, sections
   with different rhythm (tight, full-bleed, photo pairs, no heading at all). */

/* one radius scale, used everywhere */
:root { --r-img: 12px; --r-card: 20px; --r-input: 12px; --r-pill: 999px; --img-radius: var(--r-img); }
@media (min-width: 760px) { :root { --r-img: 16px; } }

/* headings: one default size, a small label size and a big one, so the page doesn't repeat one rhythm */
h2 { font-size: clamp(1.875rem, 3.6vw, 3rem); line-height: 1.08; }
.sec-header { margin-bottom: clamp(18px, 2.4vw, 32px); }
.sec-header .lead { margin-top: 10px; font-size: 1.0625rem; max-width: 46ch; }
.sec-header--s h2, .h-s { font-size: clamp(1.5rem, 2.2vw, 1.875rem); line-height: 1.15; }
.sec-header--s { margin-bottom: 18px; }
.sec-header--l h2 { font-size: clamp(2.5rem, 5.4vw, 4.75rem); line-height: 1; }
.section--tight { padding: clamp(36px, 5vw, 64px) 0; }
.section--tour { padding-top: clamp(32px, 5vw, 72px); }
.section--duo { padding: 12px 0 clamp(40px, 6vw, 80px); }
@media (max-width: 759px) {
  h2 { font-size: 1.875rem; }
  .sec-header--s h2, .h-s { font-size: 1.5rem; }
  .sec-header--l h2 { font-size: 2.625rem; }
  .section { padding: 44px 0; }
  .section--tight { padding: 30px 0; }
  .section--duo { padding: 12px 0 36px; }
}

/* facts: one line of plain text */
.facts { display: flex; flex-wrap: wrap; gap: 4px 0; padding: 18px 0; border: 0; font: 500 0.9375rem/1.5 var(--font-text); color: var(--ink-2); }
.facts li { display: inline; padding: 0; border: 0; }
.facts li + li::before { content: "·"; margin: 0 10px; color: var(--line-strong); }
@media (max-width: 759px) {
  .facts { padding: 4px 0 18px; font-size: 0.9375rem; grid-template-columns: none; }
  .facts li { display: inline; padding: 0; border: 0; }
  .facts .f-more { display: none; }
}

/* rules and rooms: label and line, no icons */
.rules { gap: 18px 40px; }
.rule { display: block; }
.rule-h { font-size: 1rem; }
.rooms .room { display: block; }
.room-h { font-size: 1.25rem; }
.panel .rules { gap: 14px 32px; }
.price-note { display: block; margin-top: 28px; padding: 18px 20px; border: 0; border-radius: var(--r-card); background: var(--paper); }
.hero-points { margin: 18px 0 0; font-size: 0.9375rem; color: rgba(255, 255, 255, .88); }
.contact-list { display: grid; gap: 14px; margin: 26px 0 0; }
.contact-list dt { font: 600 0.8125rem/1.4 var(--font-text); color: #fff; }
.contact-list dd { margin: 2px 0 0; color: rgba(255, 255, 255, .88); }
.layout summary span { font-weight: 600; }

/* the estate panels on home: name, one line, one button */
.duo-name { font: 220 clamp(2.5rem, 4.4vw, 4rem)/1 var(--font-display); margin: 0 0 10px; color: #fff; }
.duo-facts { text-transform: none; letter-spacing: 0; font: 500 0.9375rem/1.4 var(--font-text); margin: 0 0 20px; }
.doors-l { display: block; margin-top: 10px; font: 500 0.9375rem/1.4 var(--font-text); opacity: .9; }
.doors-h { font-size: clamp(2.375rem, 4.2vw, 3.75rem); }

/* occasion tabs without icons; a photo pair for the event spaces */
.occ-tab { justify-content: center; text-align: center; min-height: 52px; border-radius: var(--r-pill); font: 500 0.9375rem/1.2 var(--font-text); }
.occ-tabs { gap: 6px; }
.spaces--pair { grid-template-columns: 1.3fr 1fr; align-items: end; }
.spaces--pair .space:last-child img { aspect-ratio: 4 / 5; }
.spaces--pair .space:first-child img { aspect-ratio: 4 / 3; }
.space figcaption { font-size: 0.9062rem; }
@media (max-width: 759px) { .spaces--pair { grid-template-columns: minmax(0, 1fr); } .occ-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the booking menu: plain, softer */
.bm-direct { border-radius: var(--r-card); padding: 22px 24px; }
.bm-n { font-size: 1.875rem; }
.bm-go { text-transform: none; letter-spacing: 0; font: 600 0.9375rem/1 var(--font-text); text-decoration: underline; text-underline-offset: 5px; }
.bm-row { border-radius: var(--r-card); border-color: var(--line); }
.booking-slot { border-radius: var(--r-card); }

/* the tour: no 01/02 numbers, quiet labels */
.tour-stop { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; border-radius: 14px; }
.tour-stop[aria-current="true"] { box-shadow: none; border-color: var(--ink); }
.tour-sw-when { text-transform: none; letter-spacing: 0; font: 500 0.8125rem/1.3 var(--font-text); color: var(--muted); }
.tour-sw-t { font-size: 1.375rem; }
.tour-when { text-transform: none; letter-spacing: .01em; font: 500 0.875rem/1.3 var(--font-text); }
.tour-segs { gap: 3px; }
.tour-seg { height: 2px; }
@media (max-width: 899px) {
  .tour-when { min-height: 0; padding: 0; background: none; color: var(--muted); font-size: 0.875rem; }
  .tour-cap { height: 104px; padding-top: 12px; }
  .tour-t { font-size: 1.5rem; }
  .tour-c { -webkit-line-clamp: 1; }
  .tour-stop { height: 64px; padding: 10px 14px; }
  .tour-list li { width: auto; max-width: 220px; }
  .tour-sw-t { font-size: 1.125rem; }
}

/* radii: photos, cards, sheets, menus, inputs from the one scale */
.form-card, .reviews-slot, .menu-row, .amt-t, .duo-p, .estate, .crosssell figure, .book-head figure, .panel-body .rules { border-radius: var(--r-card); }
.amt-t, .duo-p, .estate { overflow: hidden; }
.estate-fig { border-radius: 0; }
.sheet, .amt-dlg, .menu-sheet, .photos-dlg { border-radius: var(--r-card) var(--r-card) 0 0; }
@media (min-width: 760px) { .amt-dlg { border-radius: var(--r-card); } }
.field input:not([type="checkbox"]), .field select, .field textarea { border-radius: var(--r-input); }
.tour-stage, .occ-stage { border-radius: var(--r-img); }
.menu-img { border-radius: 10px; }
.seg, .am-jump, .est-sw { border-radius: var(--r-pill); }

/* ------------------------------------------------------------------ design system (Emilio's /design/ picks, 2026-10-09)
   C4 Sea glass · F3 Fraunces 300 + Outfit (was Work Sans) · R3 corners · B3 outline pill · M3 fade and rise 28px · T1 plain facts
   · P3 framed photos · S2 compact spacing · H1 plain labels · slow tour. Tokens taken from design/design.css. */

/* H1: no italic accent phrase anywhere, the hero included */
h1 em, h2 em, h3 em, .display em, .band-cap em, .doors-h em, .tour-sw-t em, .footer-brand em, .estate-tag em, .duo-hook em { font-style: normal; font-weight: inherit; color: inherit; }
h1, h2, .display, .brand-name, .footer-brand { letter-spacing: -0.022em; }

/* B3: outline pills that fill on hover and focus. The button colour carries the main action. */
.btn { background: transparent; color: var(--btn); border: 1.5px solid var(--btn); }
.btn:hover, .btn:focus-visible { background: var(--btn); border-color: var(--btn); color: var(--btn-fg); }
.btn--light { background: transparent; border-color: #fff; color: #fff; }
.btn--light:hover, .btn--light:focus-visible { background: #fff; border-color: #fff; color: var(--ink); }
.btn--ghost { color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* On the framed hero the page is light, so the property hero's main button uses the palette's button colour */
.choice--direct .btn, .bm-direct { --btn: #fff; --btn-fg: var(--ink); }
.menu-book { --btn: var(--btn-solid); }

/* M3: blocks fade and rise 28px as they come into view. The hero keeps smooth-load's own short rise, so it never
   moves more than that while it fades in. Transitions only; reduced motion turns it off (smooth-load.css). */
html.sl-js main > :not(.hero) .sl-in, html.sl-js main .view .sl-in, html.sl-js footer .sl-in { transform: translate3d(0, 28px, 0); }
html.sl-js main .sl-in.sl-on, html.sl-js footer .sl-in.sl-on {
  transition: opacity .8s cubic-bezier(.22, .61, .36, 1) var(--sl-d, 0s), transform .8s cubic-bezier(.22, .61, .36, 1) var(--sl-d, 0s); }
html.sl-js main .sl-in.sl-on:not(.x) { transform: none; }
/* the tour (Emilio, 2026-10-11: "swipe faster", then "make it 2.2 seconds"): on its own a new photo every 2.2s
   (data-dur) with a 0.6s cross-fade; a swipe, a tap on a thumbnail or an arrow key changes it in 0.3s (.stg.is-quick) */
.tour .stg-l { transition: opacity .6s ease; }
.tour .stg.is-quick .stg-l { transition: opacity .3s ease; }

/* P3: framed photos. The header sits on the page above the photo; the hero, the bands and the closing photos are
   inset to the text column with the photo radius. Fixed heights, so nothing moves as photos arrive. */
.site-header--overlay { position: relative; background: var(--paper); color: var(--ink); border-bottom: 0; }
.site-header--overlay .menu-btn, .site-header--overlay .nav-cta { color: var(--ink); }
.hero--full, .hero--form, .band, .doors, .closer { width: min(1320px, calc(100% - 2 * var(--gutter))); margin-inline: auto; border-radius: var(--img-radius); overflow: hidden; }
.hero--full { height: clamp(480px, calc(86svh - 76px), 804px); }
.hero--short { height: clamp(440px, calc(66svh - 76px), 620px); }
.hero-in { padding-top: 48px; }
.hero--form { padding: 56px 0 48px; }
.hero--form .hero-grid { width: calc(100% - 2 * clamp(20px, 3vw, 48px)); }
.hero .hero-veil { background: linear-gradient(to top, color-mix(in srgb, var(--veil) 82%, transparent) 0%, color-mix(in srgb, var(--veil) 46%, transparent) 40%, color-mix(in srgb, var(--veil) 12%, transparent) 62%, transparent 78%); }
.hero--form .hero-veil { background: linear-gradient(100deg, color-mix(in srgb, var(--veil) 86%, transparent) 0%, color-mix(in srgb, var(--veil) 60%, transparent) 55%, color-mix(in srgb, var(--veil) 40%, transparent) 100%); }
.hero-in, .band-cap { padding-inline: clamp(20px, 3vw, 48px); }
.band-cap { width: 100%; }
.band { margin-block: clamp(10px, 1.6vw, 20px); }
.band-fig img { height: clamp(300px, 48vw, 640px); }
.doors { gap: 12px; background: none; margin-bottom: clamp(32px, 4vw, 56px); }
.doors-p { border-radius: var(--img-radius); }
.hero-bg img, .band-fig img, .closer-fig img, .doors-p img { border-radius: 0; }
@media (max-width: 759px) {
  .hero--full { height: clamp(460px, calc(84svh - 64px), 680px); }
  .hero-in { padding-top: 36px; }
  .hero--form { padding: 28px 0 24px; }
  .hero--form .hero-grid { width: calc(100% - 32px); }
  /* property pages on phones: the photo framed in the column, the copy below on the page */
  .hero--prop { width: 100%; border-radius: 0; overflow: visible; }
  .hero--prop .hero-bg { width: calc(100% - 2 * var(--gutter)); margin-inline: auto; border-radius: var(--img-radius); overflow: hidden; }
  .hero--prop .hero-in { padding-inline: 0; }
  .doors { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* S2: compact spacing */
.section { padding: clamp(44px, 5.5vw, 76px) 0; }
/* one rhythm (Emilio, 2026-10-11: "the padding isn't congruent"): tight sections use the same space as the rest */
.section--tight { padding: clamp(44px, 5.5vw, 76px) 0; }
.sec-header { margin-bottom: clamp(18px, 2.4vw, 30px); }
.sec-header--s { margin-bottom: 16px; }
.amt, .bm, .spaces, .estates, .duo { gap: clamp(10px, 1.4vw, 16px); }
@media (max-width: 759px) { .section { padding: 40px 0; } .section--tight { padding: 40px 0; } }

/* Bleu shares the base palette: the two estates differ by their photos, not by their accents */

/* Image corners (Emilio, 2026-10-09; rounder after the hand-made pass): every photo gets the --img-radius
   from the scale above (12px phones, 16px desktop) except the ones that run edge to edge across the screen
   (hero, full-width bands, the closing photos), where a rounded corner at the screen edge reads as a mistake.
   Containers that clip a hover zoom or stack crossfading photos carry the same radius, or the corners go square
   mid-zoom. */
img:not(.hero-media) { border-radius: var(--img-radius); }
.m-cell, .estate-fig, .duo-fig, .crosssell, .split-fig, .book-head, .amt-fig, .stg, .rail-cell, .space, .dlg-cell {
  border-radius: var(--img-radius); overflow: hidden;
}
.band-fig img, .closer-fig img, .hero-bg img, .doors-p img { border-radius: 0; }
.duo-fig img, .amt-fig img, .estate-fig img { border-radius: 0; }

/* hand-made pass, round 2 (after looking at 390) */
.amt-c { left: auto; right: 16px; bottom: auto; top: 14px; min-width: 30px; height: 30px; justify-content: center; padding: 0 9px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .9); color: var(--ink); font: 600 0.8125rem/1 var(--font-text); letter-spacing: 0; text-transform: none; opacity: 1; }
.amt-n { bottom: 18px; }
.amt-t--plain .amt-c { background: rgba(255, 255, 255, .14); color: #fff; }
.bm-n2 { text-transform: none; letter-spacing: 0; font: 600 1rem/1 var(--font-text); }
.seg-btn, .am-jump { text-transform: none; letter-spacing: 0; font: 500 0.9375rem/1 var(--font-text); }
.seg-btn .ic, .am-jump .ic { display: none; }
@media (max-width: 899px) {
  .tour-cap .tour-t { display: none; }
  .tour-cap { height: 76px; }
  .tour-c { font: 300 1.375rem/1.25 var(--font-display); color: var(--ink); -webkit-line-clamp: 2; }
  .tour-sw-when { display: none; }
  .tour-stop { height: 52px; }
}
@media (max-width: 759px) { .amt-n { bottom: 14px; } .amt-c { top: 10px; right: 10px; } }
.est-sw-b { text-transform: none; letter-spacing: 0; font: 500 0.9375rem/1 var(--font-text); }
@media (max-width: 759px) {
  .facts li:not(.f-ph) { display: none; }
  .facts li::before { content: none; }
  .facts li.f-ph + li.f-ph::before, .facts li.f-ph ~ li.f-ph::before { content: "·"; margin: 0 10px; color: var(--line-strong); }
}
.hero-photos, .am-more, figcaption, .layout summary { text-transform: none; letter-spacing: 0; }
.hero-photos, .am-more { font: 500 0.9375rem/1 var(--font-text); border-radius: var(--r-pill); }
figcaption { font: 400 0.9062rem/1.4 var(--font-text); color: var(--muted); }
@media (max-width: 759px) { .hero-link { min-width: 44px; justify-content: center; } }
.jumps a { text-transform: none; letter-spacing: 0; font: 500 0.9375rem/1 var(--font-text); }
@media (max-width: 759px) { .hero--prop { height: auto; } }
/* B3 on the phone property hero (copy on the page, not the photo): outline pill in the button colour */
@media (max-width: 759px) {
  .hero--prop .swap--btn .btn--light { background: transparent; border-color: var(--btn); color: var(--btn); }
  .hero--prop .swap--btn .btn--light:hover, .hero--prop .swap--btn .btn--light:focus-visible { background: var(--btn); color: var(--btn-fg); }
}

/* The view bar: just the Stay | Events switch and Amenities, quiet (no divider lines, no second header). */
.viewbar { background: color-mix(in srgb, var(--paper) 92%, transparent); border-bottom: 0; box-shadow: none; }
.viewbar .am-jump { margin-left: auto; }
@media (min-width: 760px) { .section--tour { padding-top: 24px; } }

/* Photo rails (Emilio, 2026-10-09): no scrollbar. Swipe, drag with the mouse or use the arrow keys (site.js); a soft
   fade at each end says there is more; two actions under each rail (Check dates, See all photos). */
.rail { scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 0; }
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.rail img { -webkit-user-drag: none; user-select: none; }
@media (hover: hover) and (pointer: fine) {
  .rail { cursor: grab; user-select: none; }
  .rail.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
  .rail[data-photos] .rail-cell img { transition: opacity .2s ease; }
}
.rail-wrap { position: relative; --rail-bg: var(--paper); }
.section--sand .rail-wrap { --rail-bg: var(--sand); }
.rail-wrap::before, .rail-wrap::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; width: clamp(40px, 6vw, 96px); pointer-events: none; transition: opacity .3s ease; }
.rail-wrap::before { left: calc(-1 * var(--gutter)); background: linear-gradient(to right, var(--rail-bg), color-mix(in srgb, var(--rail-bg) 0%, transparent)); }
.rail-wrap::after { right: calc(-1 * var(--gutter)); background: linear-gradient(to left, var(--rail-bg), color-mix(in srgb, var(--rail-bg) 0%, transparent)); }
.rail-wrap.is-start::before, .rail-wrap.is-end::after { opacity: 0; }
.rail--rooms { margin-top: 0; margin-bottom: 0; }
.rail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.rail-actions .btn { min-height: 48px; }
#rooms .rail-actions { margin-bottom: 32px; }
@media (max-width: 759px) {
  .rail-actions .btn { flex: 1 1 140px; padding: 0 16px; }
}
.dlg-est { margin: 32px 0 0; font-size: 1.875rem; }
.rail { position: relative; }

/* Photo views (Emilio, 2026-10-09): an amenity category or a bedroom opens its photos, large, captions under them.
   A bottom sheet on phones (swipe down, X), a dialog on desktop; a tap opens the photo full screen (#lb). */
.pv { width: min(980px, 94vw); }
.pv .sheet-grab { display: none; }
.pv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; padding-top: 14px; }
.pv-fig { margin: 0; }
.pv-open { display: block; width: 100%; padding: 0; border: 0; background: var(--sand); border-radius: var(--img-radius); overflow: hidden; cursor: zoom-in; }
.pv-open img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.pv-fig figcaption { margin-top: 10px; font: 400 0.9375rem/1.4 var(--font-text); color: var(--ink); }
.pv-items, .pv-beds { margin: 24px 0 4px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.55; color: var(--muted); }
.pv-beds { color: var(--ink); font-size: 1rem; }
@media (max-width: 759px) {
  .pv { width: 100%; }
  .pv .sheet-grab { display: grid; }
  .pv-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
/* bedroom rows that open the room's photos */
.room-btn { display: grid; gap: 2px; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.room-btn .room-h { display: block; }
.room-btn .room-p { display: block; }
.room-n { display: inline-block; margin-top: 6px; font: 600 0.875rem/1.3 var(--font-text); color: var(--accent-ink); text-decoration: underline; text-underline-offset: 4px; }
.room-btn:hover .room-h { color: var(--accent-ink); }
.rooms .room { padding: 14px 0; }
@media (max-width: 759px) { .room-btn { min-height: 44px; } }
/* the quiet link to the full text list of amenities */
.am-more { min-height: 44px; padding: 0; border: 0; background: none; color: var(--accent-ink); font: 600 0.9375rem/1 var(--font-text); text-decoration: underline; text-underline-offset: 5px; }
.am-more:hover { background: none; color: var(--ink); }
/* full-screen viewer */
.lb { width: 100%; max-width: none; height: 100svh; max-height: none; margin: 0; padding: 0; border: 0; background: #0E1416; color: #fff; overflow: hidden; }
.lb::backdrop { background: #0E1416; }
.lb-stage { position: absolute; inset: 64px 0 96px; display: grid; place-items: center; touch-action: pan-y; }
.lb-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 0 !important; user-select: none; -webkit-user-drag: none; }
.lb-cap { position: absolute; left: 16px; right: 16px; bottom: 44px; margin: 0; text-align: center; font: 400 1rem/1.4 var(--font-text); }
.lb-n { position: absolute; left: 0; right: 0; bottom: 16px; margin: 0; text-align: center; font-size: 0.8125rem; color: rgba(255, 255, 255, .7); }
.lb-btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; background: rgba(0, 0, 0, .35); color: #fff; cursor: pointer; }
.lb-btn:hover, .lb-btn:focus-visible { background: #fff; color: #0E1416; }
.lb-x { top: 10px; right: 12px; }
.lb-prev { left: 12px; top: 50%; margin-top: -24px; }
.lb-next { right: 12px; top: 50%; margin-top: -24px; }
@media (max-width: 759px) { .lb-prev, .lb-next { top: auto; bottom: 36px; margin: 0; } .lb-cap { bottom: 96px; } .lb-stage { bottom: 140px; } }

/* ------------------------------------------------------------------ QA fixes (2026-10-09) */
/* 1. full-screen viewer: the photo always fits between the top bar and the caption, centred in every engine */
.lb-stage { display: block; }
.lb-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; transition: opacity .25s ease; }
.lb-img.is-loading { opacity: .35; }
@media (max-height: 500px) and (min-width: 600px) {   /* phone landscape: buttons at the sides, slimmer bars */
  .lb-stage { inset: 56px 72px 64px; }
  .lb-cap { bottom: 30px; font-size: .9375rem; }
  .lb-n { bottom: 8px; }
  .lb-prev, .lb-next { top: 50%; bottom: auto; margin-top: -24px; }
}
/* 5. the phone property hero: short enough that "Check dates" is on the first screen of an iPhone SE in Safari */
@media (max-width: 759px) {
  .hero--prop .hero-bg { height: clamp(190px, 30svh, 300px); }
  .hero--prop .hero-in { padding-top: 16px; }
  .hero--prop .hero-meta { margin-top: 16px; }
  .hero--prop h1 { margin-bottom: 8px; }
}
/* full-screen viewer controls: the same inset from every edge, and clear of the page scrollbar (the viewer is
   100% wide, not 100vw, so it ends where the scrollbar starts). Emilio, 2026-10-11: "the padding here is messed up" */
.lb-x { top: 16px; right: 16px; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
@media (min-width: 760px) { .lb-x { top: 24px; right: 24px; } .lb-prev { left: 24px; } .lb-next { right: 24px; } .lb-stage { top: 88px; } }
/* 7. nothing scrolls behind an open dialog or sheet */
/* (the lock itself is in site.js: overflow: hidden on the root would unstick the view bar) */
dialog { overscroll-behavior: contain; }
/* 13. keyboard focus never lands under the sticky bars: site.js (wireFocusClear) nudges the page after a Tab.
   Not scroll-padding: Chrome then scrolls the page when a button INSIDE the stuck bar takes focus (the bar jumps),
   and WebKit ignores scroll-padding for focus. Anchors keep their scroll-margin-top. */
/* 14. without JS the photo galleries show in the page (the "photos" links lead to them) */
html:not(.js) dialog.photos-dlg { display: block; position: static; width: auto; height: auto; overflow: visible; }
html:not(.js) dialog.photos-dlg .dlg-close { display: none; }
@media (max-width: 759px) and (min-height: 501px) { .lb-stage { bottom: 156px; } }
@media (max-width: 759px) {
  .hero--prop .hero-bg { height: clamp(160px, 28svh, 300px); }
  .hero--prop .eyebrow { display: none; }
}

/* ------------------------------------------------------------------ home: the two estates only (2026-10-10)
   Two equal framed photo panels, each one link to its estate's page. Fixed heights: nothing moves as photos load. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.brand-name--duo { font-size: 1.25rem; letter-spacing: 0; }
.home-duo { padding: 0 0 clamp(20px, 3vw, 36px); }
.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); }
.home-p { position: relative; display: block; height: clamp(500px, calc(100svh - 76px - 116px), 880px); overflow: hidden; border-radius: var(--img-radius); background: var(--veil); color: #fff; text-decoration: none; }
.home-fig { position: absolute; inset: 0; }
.home-fig img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.home-p:hover .home-fig img { transform: scale(1.03); }
.home-p::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--veil) 84%, transparent) 0%, color-mix(in srgb, var(--veil) 36%, transparent) 38%, transparent 62%); }
.home-txt { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: grid; gap: 8px; padding: clamp(22px, 3vw, 44px); }
.home-name { font: 300 clamp(2.75rem, 5vw, 4.75rem)/1 var(--font-display); letter-spacing: -0.022em; }
.home-facts { font: 400 1rem/1.4 var(--font-text); opacity: .92; }
.home-go { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 10px; padding: 0 22px; border: 1.5px solid #fff; border-radius: 999px;
  font: 600 0.9375rem/1 var(--font-text); transition: background-color .2s ease, color .2s ease; }
.home-go .ic { width: 18px; height: 18px; }
.home-p:hover .home-go, .home-p:focus-visible .home-go { background: #fff; color: var(--ink); }
.home-p:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.home-note { margin-top: 18px; text-align: center; font-size: 0.9375rem; }
.home-note a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 5px; }
.site-footer--min { padding: 28px 0; }
.site-footer--min .legal { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 759px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .home-p { height: clamp(360px, calc(50svh - 40px), 520px); }
  .brand-name--duo { font-size: 1.0625rem; }
}
.menu-btn { text-decoration: none; }
.site-footer--min .legal { align-items: center; }
@media (max-width: 759px) { .site-footer--min .legal { gap: 0 20px; } .site-footer--min .legal span { flex-basis: 100%; } }
.hero-photos, .hero-photos:hover { text-decoration: none; color: #fff; }

/* ------------------------------------------------------------------ Round 1 revisions, live part (2026-10-10)
   R1-01: the framed photos never touch the header: 40px of paper under it (24px on phones), on home and on the
   framed heroes (Emilio picked R1-01b).
   R1-03: no Stay / Events switch, so anchors only need a little air above them. */
:root { --frame-top: 40px; }   /* R1-01b (picked): 40px under the header, 24px on phones; no rule under the header on home */
@media (max-width: 759px) { :root { --frame-top: 24px; } }
.home-duo { padding-top: var(--frame-top); }
.home-p { height: clamp(480px, calc(100svh - 76px - var(--frame-top) - 116px), 880px); }
.hero--full, .hero--form { margin-top: var(--frame-top); }
.hero--full { height: clamp(460px, calc(86svh - 76px - var(--frame-top)), 780px); }
@media (max-width: 759px) {
  .hero--prop { height: auto; }
  .home-p { height: clamp(340px, calc(50svh - 40px), 520px); }
  .hero--prop { margin-top: 0; }
  .hero--prop .hero-bg { margin-top: var(--frame-top); }
  .hero--full:not(.hero--prop) { height: clamp(440px, calc(84svh - 64px - var(--frame-top)), 660px); }
  /* B3 on the phone property hero (copy on the page, not the photo): outline pill in the button colour */
  .hero--prop .hero-meta > .btn--light { background: transparent; border-color: var(--btn); color: var(--btn); }
  .hero--prop .hero-meta > .btn--light:hover, .hero--prop .hero-meta > .btn--light:focus-visible { background: var(--btn); color: var(--btn-fg); }
}
[id] { scroll-margin-top: 16px; }

/* ------------------------------------------------------------------ the tour goes through every house photo (Round 1, 2026-10-10)
   A new photo every 4.5s (data-dur), stop by stop. The photo's caption and "3 / 7" sit under the photo, then a strip
   of the current stop's photos (it scrolls itself, never the page). The active stop shows the count and a thin
   progress bar. Fixed heights throughout, so nothing moves as photos and captions change. */
.tour-cap .tour-c { display: none; }
.tour-under { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; height: 26px; margin-top: 10px; }
.tour-under .tour-c { display: block; margin: 0; min-width: 0; max-width: none; color: var(--ink-2); font: 400 0.9375rem/26px var(--font-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
.tour-photo { position: relative; }
.tour-count { flex: none; margin: 0; font: 600 0.8125rem/26px var(--font-text); color: var(--muted); font-variant-numeric: tabular-nums; }
.tour-thumbs { position: relative; height: 62px; margin-top: 8px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.tour-thumbs::-webkit-scrollbar { display: none; }
.tour-tg { display: flex; gap: 6px; height: 100%; }
.tour-tg[hidden] { display: none; }
.tour-th { position: relative; flex: none; width: 84px; height: 100%; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--sand); cursor: pointer; opacity: .62; transition: opacity .2s ease; }
.tour-th img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.tour-th:hover, .tour-th[aria-current="true"] { opacity: 1; }
.tour-th[aria-current="true"]::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--ink); border-radius: 8px; }
.tour-th:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tour-prog { display: none; }
.tour-stop[aria-current="true"] .tour-prog { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.tour-cnt { flex: none; font: 600 0.75rem/1 var(--font-text); color: var(--muted); font-variant-numeric: tabular-nums; }
.tour-bar { flex: 1; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.tour-bar i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 899px) {
  .tour-cap { height: 64px; padding-top: 8px; overflow: hidden; }
  .tour-cap .tour-when { line-height: 20px; margin: 0; }
  .tour-cap .tour-t { display: block; margin: 2px 0 0; font: 300 1.375rem/32px var(--font-display); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tour-under { margin-top: 2px; }
  .tour-thumbs { height: 54px; }
  .tour-th { width: 72px; }
  .tour-stop[aria-current="true"] .tour-prog { display: none; }
}

/* ================================================================== Round 1 picks (Emilio, 2026-10-10), live on both estates
   R1-02a hero · R1-04b tour by time of day · R1-06a outside mosaic · R1-07b windows · R1-09b room cards
   · R1-10b rating card and featured review · R1-11a events gallery by moment. Built by _build/revisions.py
   (the same builders make the /revisions/r1/ picker, which also shows the options he did not pick). */
/* a filled pill in the button colour (the one main action of a block) */
.rv-solid, .rvh-main { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--btn); color: var(--btn-fg); cursor: pointer; text-decoration: none; white-space: nowrap; font: 600 0.9688rem/1 var(--font-text);
  transition: background-color .2s ease, color .2s ease; }
.rv-solid:hover, .rvh-main:hover { background: color-mix(in srgb, var(--btn) 82%, #000); }
.rv-solid:focus-visible, .rvh-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ------------------------------------------------------------ R1-02 hero */
.rvh-photos { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 6px; font: 500 0.9688rem/1 var(--font-text); }
.rvh-photos .ic { width: 18px; height: 18px; }
.rvh-rate { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; font: 500 0.9375rem/1.2 var(--font-text); }
.rvh-rate span { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 4px; }
.rvh-rate .ic { width: 16px; height: 16px; fill: currentColor; }
.rvh .ic--star { color: #E3A93C; }
.rvh-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
/* a: the courtyard, one filled button and a plain photos link; the rating above the name */
.rvh--a .rvh-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 0 14px; color: rgba(255, 255, 255, .92); }
.rvh--a .rvh-place { font: 500 0.9375rem/1.2 var(--font-text); }
.rvh--a .rvh-place::before { content: "·"; margin-right: 14px; opacity: .6; }
.rvh--a .rvh-acts { margin-top: 28px; }
.rvh--a .rvh-main { --btn: #fff; --btn-fg: var(--ink); }
.rvh--a .rvh-main:hover { background: var(--paper); }
@media (max-width: 759px) {
  .rvh--a .rvh-top { color: var(--ink-2); margin-bottom: 8px; }
  .rvh--a .rvh-main { --btn: var(--btn-solid); --btn-fg: #fff; }
  .rvh--a .rvh-acts { margin-top: 18px; gap: 8px 22px; }
  .rvh--a .rvh-photos { display: none; }
}
/* b: words on the page, the photo framed beside them */
.hero.rvh--b { background: var(--paper); color: var(--ink); overflow: visible; }
.rvh-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-top: var(--frame-top); }
.rvh-eyebrow { margin: 0 0 12px; font: 500 0.9375rem/1.2 var(--font-text); color: var(--muted); }
.rvh--b h1 { color: var(--ink); font-size: clamp(2.75rem, 5.6vw, 5.5rem); max-width: 10ch; }
.rvh-sub { max-width: 44ch; margin: 0; font-size: clamp(1.0312rem, 1.25vw, 1.1562rem); line-height: 1.6; color: var(--ink-2); }
.rvh--b .rvh-acts { margin-top: 30px; }
.rvh-proof { display: flex; align-items: center; gap: 6px; margin: 22px 0 0; font-size: 0.9375rem; color: var(--muted); }
.rvh-proof .rvh-rate { color: var(--ink); }
.rvh-fig { position: relative; margin: 0; height: clamp(420px, calc(80svh - 76px - var(--frame-top)), 720px); border-radius: var(--img-radius); overflow: hidden; background: var(--veil); }
.rvh-fig img, .rvh--c .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
@media (max-width: 759px) {
  .rvh-split { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .rvh-fig { order: -1; height: clamp(180px, 30svh, 300px); }
  .rvh--b h1 { font-size: clamp(2.25rem, 10vw, 2.75rem); margin-bottom: 10px; }
  .rvh--b .rvh-acts { margin-top: 18px; }
  .rvh--b .rvh-photos { display: none; }
  .rvh-proof { margin-top: 14px; }
}
/* c: the courtyard full width, a light card over its corner */
.rvh--c { align-items: flex-end; }
.rvh-c-veil { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--veil) 40%, transparent), transparent 45%); }
.rvh-cardwrap { position: relative; z-index: 2; padding-bottom: clamp(20px, 3vw, 40px); }
.rvh-card { max-width: 560px; padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r-card); background: var(--paper); color: var(--ink);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .55); }
.rvh--c h1 { color: var(--ink); font-size: clamp(2.5rem, 4.4vw, 4.25rem); margin-bottom: 12px; }
.rvh-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 0; margin: 16px 0 0; padding: 0; font: 500 0.9375rem/1.3 var(--font-text); color: var(--ink); }
.rvh-facts li + li::before { content: "·"; margin: 0 10px; color: var(--line-strong); }
.rvh--c .rvh-acts { margin-top: 22px; }
.rvh--c .rvh-proof { margin-top: 16px; }
@media (max-width: 759px) {
  .rvh--c { display: block; height: auto; width: 100%; border-radius: 0; overflow: visible; background: var(--paper); margin-top: 0; }
  .rvh--c .hero-bg { position: relative; height: clamp(180px, 30svh, 300px); width: calc(100% - 2 * var(--gutter)); margin: var(--frame-top) auto 0; border-radius: var(--img-radius); overflow: hidden; }
  .rvh-cardwrap { padding: 0; }
  .rvh-card { max-width: none; padding: 18px 0 0; background: none; box-shadow: none; border-radius: 0; }
  .rvh--c h1 { font-size: clamp(2.25rem, 10vw, 2.75rem); }
  .rvh--c .rvh-photos { display: none; }
}
/* the photo count pill on the photo, phones only (b and c; a has it from the live hero) */
@media (max-width: 759px) {
  .rvh--b .hero-photos--pill, .rvh--c .hero-photos--pill { position: absolute; z-index: 3; right: 14px; bottom: 14px; display: inline-flex; min-height: 44px; padding: 0 16px;
    background: rgba(20, 16, 14, .6); border-color: rgba(255, 255, 255, .75); border-radius: 999px; font: 600 0.875rem/1 var(--font-text); }
  .rvh--a .rvh-main, .rvh--b .rvh-main, .rvh--c .rvh-main { flex: 1 1 auto; }
}

/* ------------------------------------------------------------ R1-04 tour: every stop in view, no scrolling in the list (b "groups" is live) */
@media (min-width: 900px) {
  .tour--compact .tour-grid { grid-template-columns: minmax(0, 64fr) minmax(0, 36fr); }
  .tour--compact .tour-list, .tour--groups .tour-list { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
  .tour--compact .tour-list li, .tour--groups .tour-list li { flex: 1 1 0; min-height: 0; display: flex; }
  .tour--compact .tour-list li + li, .tour--groups .tour-list li + li { margin-top: 2px; }
  .tour--compact .tour-stop, .tour--groups .tour-stop { height: 100%; max-height: 64px; padding: 6px 14px; align-content: center; border-radius: 12px; }
  .tour--compact .tour-stop[aria-current="true"], .tour--groups .tour-stop[aria-current="true"] { max-height: 96px; }
  .tour--compact .tour-list li:has(.tour-stop[aria-current="true"]), .tour--groups .tour-list li:has(.tour-stop[aria-current="true"]) { flex-grow: 1.8; }
  .tour--compact .tour-sw { grid-template-columns: 78px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: baseline; }
  .tour--compact .tour-sw-when { grid-column: 1; grid-row: 1; font-size: 0.8125rem; }
  .tour--compact .tour-sw-t { grid-column: 2; grid-row: 1; font-size: 1.1875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tour--compact .tour-sw-p, .tour--groups .tour-sw-p { grid-column: 2; display: none; -webkit-line-clamp: 1; font-size: 0.8438rem; }
  .tour--compact .tour-dots, .tour--groups .tour-dots { display: none; }
  .tour--compact .tour-stop[aria-current="true"] .tour-sw-p, .tour--groups .tour-stop[aria-current="true"] .tour-sw-p { display: -webkit-box; }
  .tour--groups .tour-sw-when { display: none; }
  .tour--groups .tour-sw { padding-left: 4px; }
  .tour--groups .tour-sw-t { font-size: 1.125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tour--groups .tour-sw-p { grid-column: 1; }
  .tour--groups .tour-list li.tour-grp { flex: 0 0 auto; align-items: flex-end; padding: 10px 14px 2px; font: 600 0.75rem/1 var(--font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
  .tour--groups .tour-list li.tour-grp:first-child { padding-top: 0; }
  /* c: the photo full width, every stop in a grid under it */
  .tour--below .tour-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tour--below .tour-stage { aspect-ratio: auto; height: clamp(320px, calc(100svh - 420px), 520px); }
  .tour--below .tour-side { position: static; }
  .tour--below .tour-list { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; overflow: visible; padding: 0; }
  .tour--below .tour-list li + li { margin-top: 0; }
  .tour--below .tour-stop { height: 100%; padding: 8px 14px; border: 1px solid var(--line); background: #fff; border-radius: 12px; }
  .tour--below .tour-sw-t { font-size: 1.0625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tour--below .tour-sw-when { font-size: 0.75rem; }
  .tour--below .tour-sw-p { display: none; }
  .tour--below .tour-dots { margin-top: 2px; }
}
/* phones: every stop as a wrapped chip under the photo (no sideways strip) */
@media (max-width: 899px) {
  .tour--compact .tour-list, .tour--groups .tour-list, .tour--below .tour-list { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 0; gap: 6px; }
  .tour--compact .tour-list li, .tour--groups .tour-list li, .tour--below .tour-list li { width: auto; max-width: none; }
  .tour--compact .tour-stop, .tour--groups .tour-stop, .tour--below .tour-stop { height: 40px; padding: 0 14px; border-radius: 999px; }
  .tour--compact .tour-sw-t, .tour--groups .tour-sw-t, .tour--below .tour-sw-t { font: 500 0.9375rem/1 var(--font-text); }
  .tour--groups .tour-list li.tour-grp { flex-basis: 100%; padding: 8px 0 0; font: 600 0.75rem/1 var(--font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
  .tour--below .tour-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tour--below .tour-stop { border-radius: 12px; }
}

/* ------------------------------------------------------------ R1-06 outside: photos in view, captions */
.ro-mosaic figure, .ro-grid figure, .ro-list figure { margin: 0; }
.ro-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 230px); gap: clamp(8px, 1vw, 14px); }
.ro-mosaic .pv-fig { position: relative; min-height: 0; }
.ro-mosaic .pv-open { height: 100%; position: relative; }
.ro-mosaic .pv-open img { height: 100%; aspect-ratio: auto; }
.ro-mosaic .pv-open::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 20, 22, .62), transparent 52%); border-radius: inherit; }
.ro-mosaic figcaption { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px; margin: 0; color: #fff; font: 500 0.9688rem/1.3 var(--font-text); pointer-events: none; }
.ro-mosaic .ro-big { grid-column: span 2; grid-row: span 2; }
.ro-mosaic .ro-big figcaption { font: 300 1.625rem/1.15 var(--font-display); }
.ro-mosaic .ro-s2 { grid-column: span 2; }
.ro-mosaic .ro-s4 { grid-column: span 4; }
.ro-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 16px; }
.ro-grid figcaption, .ro-list figcaption { margin-top: 10px; font: 400 0.9688rem/1.35 var(--font-text); color: var(--ink); }
.ro-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
.ro-list .pv-fig { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ro-list figcaption { margin: 0; font: 300 1.375rem/1.2 var(--font-display); }
@media (max-width: 759px) {
  .ro-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 132px; }
  .ro-mosaic .ro-big { grid-column: span 2; grid-row: span 2; }
  .ro-mosaic .ro-s4 { grid-column: span 2; }
  .ro-mosaic .ro-s2:not(:last-child), .ro-mosaic .ro-s1 { grid-column: span 1; }
  .ro-mosaic > .pv-fig:last-child:nth-child(even) { grid-column: span 2; }
  .ro-mosaic > .pv-fig:last-child:nth-child(odd):not(.ro-big) { grid-column: span 1; }
  .ro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .ro-grid figcaption { font-size: 0.9062rem; margin-top: 6px; }
  .ro-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ro-list .pv-fig { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding-bottom: 10px; }
  .ro-list figcaption { font-size: 1.125rem; }
}

/* ------------------------------------------------------------ R1-07 photo windows: b is live (photos left, list right; phones: photos then list).
   a and c only on /revisions/r1/ (html[data-r-07]). */
.pvr { padding: 0; }
.pvr-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px 14px 24px;
  background: var(--paper); border-bottom: 1px solid var(--line); }
.pvr-ht { min-width: 0; }
.pvr-sub { margin: 0 0 4px; font: 500 0.8438rem/1.2 var(--font-text); color: var(--muted); }
.pvr-t { margin: 0; font: 300 clamp(1.625rem, 2.4vw, 2.125rem)/1.1 var(--font-display); color: var(--ink); }
.pvr-x { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: #fff; color: var(--ink); cursor: pointer; font: 600 0.875rem/1 var(--font-text); }
.pvr-x:hover, .pvr-x:focus-visible { background: var(--ink); border-color: var(--ink); color: #fff; }
.pvr-x .ic { width: 18px; height: 18px; }
.pvr-body { padding: 20px 24px 28px; }
.pvr-lh { margin: 0 0 10px; font: 600 0.75rem/1 var(--font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.pvr-items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pvr-items li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
  font-size: 0.9062rem; line-height: 1.3; }
.pvr-items .ic { width: 18px; height: 18px; color: var(--accent); }
.pvr .pv-grid { padding-top: 0; }
.pvr-list + .pv-grid { margin-top: 22px; }
.pvr--text .pvr-body { padding-top: 12px; }
/* a: gallery. A big first photo, the rest two across, the list as chips on top */
html[data-r-07="a"] .pvr { width: min(1040px, 94vw); }
html[data-r-07="a"] .pvr .pv-fig:first-child { grid-column: 1 / -1; }
html[data-r-07="a"] .pvr .pv-fig:first-child .pv-open img { aspect-ratio: 16 / 9; }
/* b: photos left, the list right (sticky) */
html:not([data-r-07="a"]):not([data-r-07="c"]) .pvr { width: min(1180px, 96vw); }
html:not([data-r-07="a"]):not([data-r-07="c"]) .pvr-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
html:not([data-r-07="a"]):not([data-r-07="c"]) .pvr-list { grid-column: 2; grid-row: 1; position: sticky; top: 96px; padding: 18px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); }
html:not([data-r-07="a"]):not([data-r-07="c"]) .pvr .pv-grid { grid-column: 1; grid-row: 1; margin-top: 0; }
html:not([data-r-07="a"]):not([data-r-07="c"]) .pvr-items { display: grid; gap: 2px; }
html:not([data-r-07="a"]):not([data-r-07="c"]) .pvr-items li { border: 0; background: none; padding: 6px 0; min-height: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
html:not([data-r-07="a"]):not([data-r-07="c"]) .pvr-items li:last-child { border-bottom: 0; }
html:not([data-r-07="a"]):not([data-r-07="c"]) .pvr--text .pvr-body { display: block; }
/* c: the list first, then small photos three across */
html[data-r-07="c"] .pvr { width: min(820px, 94vw); }
html[data-r-07="c"] .pvr-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
html[data-r-07="c"] .pvr-items li { border: 0; background: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 10px 0; min-height: 0; font-size: 1rem; }
html[data-r-07="c"] .pvr .pv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
html[data-r-07="c"] .pvr .pv-fig figcaption { font-size: 0.8438rem; margin-top: 6px; color: var(--muted); }
@media (max-width: 759px) {
  .pvr { width: 100% !important; }
  .pvr-head { padding: 4px 12px 12px 18px; }
  .pvr-x { padding: 0 12px; }
  .pvr-x span { display: none; }
  .pvr-body { padding: 16px 16px 28px; }
  html:not([data-r-07="a"]):not([data-r-07="c"]) .pvr-body { display: block; }
  html:not([data-r-07="a"]):not([data-r-07="c"]) .pvr-list { position: static; margin-bottom: 18px; }
  html[data-r-07="c"] .pvr-items { grid-template-columns: minmax(0, 1fr); }
  html[data-r-07="c"] .pvr .pv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ R1-09 bedrooms */
.rmt { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 0; margin: 0 0 clamp(22px, 3vw, 34px); padding: 0; }
.rmt li { display: grid; gap: 4px; padding: 0 clamp(18px, 2.6vw, 36px); border-left: 1px solid var(--line-strong); }
.rmt li:first-child { padding-left: 0; border-left: 0; }
.rmt-v { font: 300 clamp(2.125rem, 3.4vw, 2.875rem)/1 var(--font-display); color: var(--ink); }
.rmt-l { font-size: 0.9062rem; color: var(--muted); }
.rb-more { min-height: 44px; padding: 0; border: 0; background: none; color: var(--accent-ink); cursor: pointer; font: 600 0.9062rem/1.2 var(--font-text); text-decoration: underline; text-underline-offset: 4px; text-align: left; }
.rb-more:hover { color: var(--ink); }
.rb-fig, .rbt-fig { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--paper); border-radius: var(--img-radius); overflow: hidden; cursor: zoom-in; }
.rb-fig img, .rbt-fig img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.rb-n { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink); font: 600 0.8125rem/1 var(--font-text); }
.rb-fig--none { display: grid; place-items: center; align-content: center; gap: 6px; cursor: default; color: var(--muted); font-size: 0.8438rem; background: color-mix(in srgb, var(--paper) 60%, var(--sand)); }
.rb-fig--none .ic { width: 26px; height: 26px; }
/* a: table */
.rbt { list-style: none; margin: 0; padding: 0; }
.rbt-row { display: grid; grid-template-columns: 132px minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line-strong); }
.rbt-head { padding: 0 0 10px; border-top: 0; font: 600 0.75rem/1 var(--font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rbt-fig { height: 92px; }
.rbt-h { margin: 0; font: 300 1.375rem/1.15 var(--font-display); }
.rbt-name .rb-more { min-height: 32px; }
.rbt-c { margin: 0; font-size: 0.9688rem; line-height: 1.4; }
.rbt-k { display: none; }
/* b: cards */
.rbcs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rbc { display: flex; flex-direction: column; border-radius: var(--r-card); background: var(--paper); overflow: hidden; }
.rbc .rb-fig { aspect-ratio: 4 / 3; border-radius: 0; }
.rbc-body { display: grid; gap: 8px; padding: 16px 18px 12px; }
.rbc-h { margin: 0; font: 300 1.5rem/1.15 var(--font-display); }
.rbc-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rbc-lines li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9688rem; line-height: 1.4; }
.rbc-lines .ic { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: 1px; }
.rbc-chips { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rbc-texts { grid-column: 1 / -1; }
.rbc-texts > ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rbc-t { display: grid; gap: 8px; align-content: start; padding: 16px 18px; border-radius: var(--r-card); border: 1px dashed var(--line-strong); }
.rbc-chips li { padding: 5px 11px; border-radius: 999px; background: var(--sand); font-size: 0.8438rem; line-height: 1.2; color: var(--ink-2); }
/* c: chart */
.rch { width: 100%; border-collapse: collapse; font-size: 0.9688rem; background: var(--paper); border-radius: var(--r-card); overflow: hidden; }
.rch th, .rch td { padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--line); }
.rch thead th { font: 600 0.75rem/1.2 var(--font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: #fff; }
.rch tbody th, .rch tfoot th { text-align: left; font-weight: 400; }
.rch-name { display: block; font: 300 1.25rem/1.2 var(--font-display); }
.rch tbody th .rb-more { min-height: 28px; font-size: 0.8125rem; }
.rch td { font: 300 1.5rem/1 var(--font-display); color: var(--ink); }
.rch td.rch-0 { color: var(--line-strong); font-size: 1rem; }
.rch td.rch-bath { font: 500 0.875rem/1.3 var(--font-text); color: var(--ink-2); }
.rch tfoot th, .rch tfoot td { border-bottom: 0; background: #fff; font-weight: 600; }
.rchp { display: none; }
@media (max-width: 1099px) { .rbcs, .rbc-texts > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .rmt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .rmt li { padding: 0; border-left: 0; }
  .rbt-head { display: none; }
  .rbt-row { grid-template-columns: 96px minmax(0, 1fr); gap: 4px 14px; align-items: start; }
  .rbt-fig { grid-row: 1 / span 4; height: 96px; }
  .rbt-k { display: inline; margin-right: 6px; font-weight: 600; color: var(--muted); }
  .rbt-c { font-size: 0.9062rem; }
  .rbcs { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rbc { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
  .rbc .rb-fig { aspect-ratio: auto; height: 100%; min-height: 128px; }
  .rbc-texts > ul { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rbc-body { padding: 12px 14px 6px; gap: 6px; }
  .rbc-h { font-size: 1.25rem; }
  .rbc-lines li { font-size: 0.9062rem; }
  .rch { display: none; }
  .rchp { display: grid; list-style: none; margin: 0; padding: 0; }
  .rchp li { padding: 12px 0; border-top: 1px solid var(--line-strong); }
  .rchp-h { margin: 0; font: 300 1.25rem/1.2 var(--font-display); }
  .rchp-p { margin: 2px 0 0; font-size: 0.9375rem; color: var(--ink-2); }
}

/* ------------------------------------------------------------ R1-10 reviews */
.rvw { margin: 0; display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2.2vw, 28px); border-radius: var(--r-card); background: var(--paper); }
.rvw-stars { display: inline-flex; gap: 2px; color: #E3A93C; }
.rvw-stars .ic { width: 16px; height: 16px; fill: currentColor; }
.rvw-q { margin: 0; }
.rvw-q p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.rvw figcaption { margin-top: auto; display: grid; gap: 2px; font-size: 0.875rem; color: var(--muted); }
.rvw figcaption strong { font-weight: 600; color: var(--ink); font-size: 0.9688rem; }
.rvw-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(22px, 3vw, 36px); }
.rvw-all { margin: 18px 0 0; }
.rvw-more { align-self: flex-start; min-height: 40px; padding: 0; border: 0; background: none; color: var(--accent-ink); cursor: pointer; font: 600 0.9062rem/1 var(--font-text); text-decoration: underline; text-underline-offset: 4px; }
.rvw--clamp .rvw-q p { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.rvw--clamp.is-open .rvw-q p { display: block; -webkit-line-clamp: unset; }
.rvb { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.rvs { padding: 26px 24px; border-radius: var(--r-card); background: var(--paper); }
.rvs-v { margin: 0; font: 300 4.25rem/1 var(--font-display); color: var(--ink); }
.rvs .rvw-stars { margin-top: 10px; }
.rvs-n { margin: 8px 0 18px; font-size: 0.9375rem; color: var(--muted); }
.rvs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rvs-list li { display: grid; grid-template-columns: 112px minmax(0, 1fr) 28px; gap: 10px; align-items: center; font-size: 0.875rem; }
.rvs-list b { font-weight: 600; text-align: right; }
.rvs-bar { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.rvs-bar i { display: block; height: 100%; background: var(--ink); border-radius: 4px; }
.rvw--big .rvw-q p { font: 300 clamp(1.25rem, 1.7vw, 1.5rem)/1.45 var(--font-display); color: var(--ink); }
.rvb-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.rvw-cols { columns: 3 300px; column-gap: 16px; margin-top: 8px; }
.rvw-cols .rvw { break-inside: avoid; margin-bottom: 16px; }
@media (max-width: 899px) { .rvw-3 { grid-template-columns: minmax(0, 1fr); } .rvb { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 759px) { .rvb-two { grid-template-columns: minmax(0, 1fr); } .rvs-v { font-size: 3.5rem; } }

/* ------------------------------------------------------------ R1-11 events gallery */
.rv-events .sec-header { margin-bottom: 18px; }
.evf { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.evf-b { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--ink-2); cursor: pointer;
  font: 500 0.9375rem/1 var(--font-text); transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.evf-b span { font-size: 0.8125rem; color: var(--muted); }
.evf-b:hover { border-color: var(--ink); color: var(--ink); }
.evf-b[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: #fff; }
.evf-b[aria-pressed="true"] span { color: var(--on-deep-accent); }
.evg-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 14px; }
.evg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.evg-i { margin: 0; }
.evg-i.is-off { display: none; }
.evg-i .pv-fig { margin: 0; }
.evg-i .pv-open img { aspect-ratio: 4 / 5; }
.evg-grid--3 .pv-open img { aspect-ratio: 4 / 3; }
.evg-i figcaption { margin-top: 8px; font-size: 0.9375rem; color: var(--ink); }
.evg-tag { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--muted); }
.evg-pls { min-height: 0; }
.evg-pl { margin: -6px 0 16px; color: var(--ink-2); }
.evv-stage { margin-bottom: 12px; }
.evv-fig { margin: 0; }
.evv-fig .pv-open { height: clamp(320px, 42vw, 560px); }
.evv-fig .pv-open img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transition: opacity .35s ease; }
.evv-fig .pv-open img.is-swap { opacity: 0; }
.evv-fig figcaption { margin-top: 10px; font-size: 1rem; color: var(--ink); }
.evv-thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.evv-t { display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--sand); outline-offset: 2px; }
.evv-t img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; opacity: .78; transition: opacity .2s ease; }
.evv-t:hover img, .evv-t[aria-pressed="true"] img { opacity: 1; }
.evv-t[aria-pressed="true"] { outline: 2px solid var(--ink); }
.ev-ask-wrap { margin-top: clamp(26px, 3vw, 40px); }
.ev-ask > summary { list-style: none; width: max-content; max-width: 100%; }
.ev-ask > summary::-webkit-details-marker { display: none; }
.ev-ask > summary .ic { width: 18px; height: 18px; transition: transform .25s ease; }
.ev-ask[open] > summary .ic { transform: rotate(180deg); }
.ev-ask-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 24px; }
.ev-ask-h { margin: 0 0 12px; font: 300 1.5rem/1.2 var(--font-display); }
@media (max-width: 899px) { .evg-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ev-ask-body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 759px) {
  .evg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .evg-i figcaption { font-size: 0.875rem; }
  .evf { flex-wrap: wrap; }
  .evf-b { padding: 0 14px; font-size: 0.9375rem; }
  .evv-fig .pv-open { height: 260px; }
  .evv-thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .ev-ask > summary { width: 100%; }
}

.tour--below .tour-stop[aria-current="true"] { border-color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--ink); }

/* R1-10b: the rest of the picked reviews behind "More reviews" */
.rvw-rest { margin-top: 16px; }
.rvw-rest > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; color: var(--accent-ink);
  font: 600 0.9375rem/1 var(--font-text); text-decoration: underline; text-underline-offset: 5px; }
.rvw-rest > summary::-webkit-details-marker { display: none; }
.rvw-rest > summary .ic { width: 16px; height: 16px; transition: transform .25s ease; }
.rvw-rest[open] > summary .ic { transform: rotate(180deg); }
.rvw-rest .rvb-two { margin-top: 8px; }
/* the tour column never grows with a long caption or a long strip (nowrap text and thumbnails stay inside it) */
.tour-main, .tour-photo, .tour-under, .tour-thumbs { min-width: 0; }
@media (max-width: 899px) { .tour-main { grid-template-columns: minmax(0, 1fr); } }
/* tap targets: 44px on phones for the rating link, the itinerary chips and "Read more" */
.rvw-more { min-height: 44px; }
@media (max-width: 899px) {
  .tour--compact .tour-stop, .tour--groups .tour-stop, .tour--below .tour-stop { height: 44px; }
}
@media (max-width: 759px) {
  .rvh-rate { min-height: 44px; }
}
/* R1-07b on phones: the bottom sheet shows the photos first, then what is included */
@media (max-width: 759px) {
  html:not([data-r-07="a"]):not([data-r-07="c"]) .pvr:not(.pvr--text) .pvr-body { display: flex; flex-direction: column; }
  html:not([data-r-07="a"]):not([data-r-07="c"]) .pvr:not(.pvr--text) .pvr-list { order: 2; margin: 22px 0 0; }
  html:not([data-r-07="a"]):not([data-r-07="c"]) .pvr:not(.pvr--text) .pv-grid { order: 1; margin-top: 0; }
}

/* Enquiry forms post to lead-notify (2026-10-11): the honeypot is off screen, the failure note sits under the button */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.hp input { font-size: 16px; }   /* the honeypot follows the 16px field rule too */
.form-fail { margin-top: 14px; padding: 14px 16px; border-radius: var(--r-input); background: #FBEDEA; color: #7A2416; font-size: 0.9375rem; line-height: 1.45; }
.form-fail p { margin: 0 0 10px; }
.form-fail .btn { min-height: 44px; }
.form-submit:disabled { opacity: .7; cursor: progress; }

/* ================================================================== Motion: open/close (2026-10-11)
   Everything that opens also closes with motion, in both directions (Emilio: "make everything open in and out very
   smoothly"). Driven by site.js (GHMotion). Opening eases out over --mo-in, closing eases in over --mo-out.
   Motion is opacity, transform and grid-template-rows (0fr to 1fr) only; prefers-reduced-motion makes it instant.
   1. Folds: every <details> (house rules, floor plan, More reviews, Ask about a date) and the amenities list get a
      runtime wrapper .dz > .dz-in. The rows animate 0fr to 1fr, the content fades and drops 10px into place.
      While a fold moves its content is clipped; once open (.is-done) nothing is clipped (focus rings, shadows).
   2. Dialogs (.mo): photo windows and bedroom windows pop on desktop, slide up as sheets on phones; the photos
      gallery rises; the full-screen viewer fades; every backdrop fades. close() waits for the motion.
   3. The menu sheet: slides and fades, backdrop fades. */
:root {
  --mo-in: 340ms;
  --mo-out: 280ms;
  --mo-open-ease: cubic-bezier(.22, .8, .24, 1);    /* ease-out: opening */
  --mo-close-ease: cubic-bezier(.55, 0, .75, .3);   /* ease-in: closing */
}
/* 1. folds */
.dz { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--mo-out) var(--mo-close-ease); }
.dz > .dz-in { min-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
  transition: opacity var(--mo-out) var(--mo-close-ease), visibility 0s linear var(--mo-out); }
.dz > .dz-in > * { transform: translateY(-10px); transition: transform var(--mo-out) var(--mo-close-ease); }
.dz.is-open { grid-template-rows: 1fr; transition: grid-template-rows var(--mo-in) var(--mo-open-ease); }
.dz.is-open > .dz-in { opacity: 1; visibility: visible; transition: opacity var(--mo-in) var(--mo-open-ease), visibility 0s linear 0s; }
.dz.is-open > .dz-in > * { transform: none; transition: transform var(--mo-in) var(--mo-open-ease); }
.dz.is-done > .dz-in { overflow: visible; }
.dz.no-mo, .dz.no-mo > .dz-in, .dz.no-mo > .dz-in > * { transition: none !important; }
/* the amenities list: shown whenever its fold is open (html[data-amenities] still swaps the button label) */
.dz > .dz-in > .am-all { display: grid; }
/* chevrons turn with the fold, both ways (doubled class: beats the older [open] rules) */
details.fold.fold > summary .ic:last-child { transform: none; transition: transform var(--mo-out) var(--mo-close-ease); }
details.fold.fold.is-open > summary .ic:last-child { transform: rotate(180deg); transition: transform var(--mo-in) var(--mo-open-ease); }
html .am-more .ic { transition: transform var(--mo-out) var(--mo-close-ease); }
html[data-amenities="open"] .am-more .ic { transition: transform var(--mo-in) var(--mo-open-ease); }
/* 2. dialogs and sheets */
dialog.mo { opacity: 0; transition: opacity var(--mo-out) var(--mo-close-ease), transform var(--mo-out) var(--mo-close-ease); }
dialog.mo::backdrop { opacity: 0; transition: opacity var(--mo-out) var(--mo-close-ease); }
dialog.mo.is-in { opacity: 1; transform: none; transition: opacity var(--mo-in) var(--mo-open-ease), transform var(--mo-in) var(--mo-open-ease); }
dialog.mo.is-in::backdrop { opacity: 1; transition: opacity var(--mo-in) var(--mo-open-ease); }
dialog.mo.is-out { pointer-events: none; }
dialog.mo:not(.is-in) { transform: translateY(18px) scale(.97); }          /* desktop windows pop */
dialog.mo.sheet:not(.is-in) { transform: translateY(100%); }               /* bottom sheets slide */
dialog.mo.photos-dlg:not(.is-in) { transform: translateY(28px); }          /* the gallery rises */
dialog.mo.lb:not(.is-in) { transform: scale(.985); }                       /* the viewer fades */
@media (max-width: 759px) { dialog.mo.amt-dlg:not(.is-in) { transform: translateY(100%); } }
/* 3. the menu sheet */
.menu .menu-backdrop { transition: opacity var(--mo-out) var(--mo-close-ease); }
.menu.is-open .menu-backdrop { transition: opacity var(--mo-in) var(--mo-open-ease); }
.menu .menu-sheet { opacity: 0; transition: transform var(--mo-out) var(--mo-close-ease), opacity var(--mo-out) var(--mo-close-ease); }
.menu.is-open .menu-sheet { opacity: 1; transition: transform var(--mo-in) var(--mo-open-ease), opacity var(--mo-in) var(--mo-open-ease); }
@media (prefers-reduced-motion: reduce) {
  .dz, .dz > .dz-in, .dz > .dz-in > *, details.fold.fold > summary .ic:last-child, html .am-more .ic,
  dialog.mo, dialog.mo::backdrop, .menu .menu-backdrop, .menu .menu-sheet { transition: none !important; }
}
/* ================================================================== end Motion: open/close */

/* ================================================================== Design audit r1 (2026-10-11)
   _qa/design-audit-r1.md, items 1 to 15, both estates. Built by build.py / sections.py / revisions.py. */
/* 1. Book: "Check dates" (hero and sticky bar) lands on the booking slot (#book-direct). A quiet Book direct card
   with its one perk, the slot (a photo until the OwnerRez widget is in), then one quiet line for Airbnb or VRBO. */
.bk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 860px) { .bk { grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr); gap: 24px; } }
.bk-card { position: relative; padding: 22px 24px; border-radius: var(--r-card); background: var(--deep); color: var(--on-deep); }
.bk-t { margin: 0; font: 300 1.875rem/1.05 var(--font-display); }
.bk-p { margin: 8px 0 0; font-size: 0.9375rem; opacity: .9; }
.bk-card .bm-badge { top: -12px; right: 20px; border-radius: var(--r-pill); }
.bk-main { min-width: 0; }
.booking-slot.bk-slot { display: block; place-items: normal; min-height: 0; margin: 0; padding: 0; border: 0; background: none; text-align: left; scroll-margin-top: 24px; }
@media (max-width: 859px) { .booking-slot.bk-slot { scroll-margin-top: 132px; } }   /* the Book direct card stays in view above it */
/* example calendar (2026-10-14): stands where the OwnerRez widget goes; static, tagged "Example" */
.cal { padding: clamp(18px, 2.4vw, 28px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
.cal-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cal-fs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1; border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden; }
.cal-f { display: grid; gap: 2px; padding: 10px 14px; min-width: 0; }
.cal-f + .cal-f { border-left: 1px solid var(--line); }
.cal-fl { font: 600 0.6875rem/1.2 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.cal-fv { font-size: 0.9375rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-tag { flex: none; padding: 5px 10px; border-radius: var(--r-pill); background: var(--sand); color: var(--accent-ink); font: 600 0.75rem/1 var(--font-text); letter-spacing: 0.04em; }
.cal-ms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: 22px; }
.cal-mt { margin: 0 0 10px; text-align: center; font: 600 1rem/1.2 var(--font-text); color: var(--ink); }
.cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; }
.cal-w { padding: 6px 0; text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.cal-d { display: grid; place-items: center; aspect-ratio: 1; max-height: 44px; margin: 0 auto; width: 100%; max-width: 44px; border-radius: 50%;
  font-size: 0.875rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.cal-d--past { color: var(--line-strong); }
.cal-d--booked { color: var(--line-strong); text-decoration: line-through; text-decoration-thickness: 1px; }
.cal-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.cal-key { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--muted); }
.cal-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); }
.cal-dot--b { border-color: var(--line-strong); background: var(--line); }
.cal-btn { margin-left: auto; cursor: default; background: var(--btn-solid); border-color: var(--btn-solid); color: var(--btn-fg); }
@media (max-width: 759px) {
  .cal-top { flex-direction: column-reverse; }
  .cal-tag { align-self: flex-end; }
  .cal-fs { width: 100%; grid-template-columns: 1fr 1fr; }
  .cal-f:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
  .cal-ms { grid-template-columns: minmax(0, 1fr); }
  .cal-m--2 { display: none; }
  .cal-btn { width: 100%; margin-left: 0; }
}
/* Airbnb and Vrbo buttons with their logos (2026-10-14) */
.bk-alt { margin: 18px 0 0; }
.bk-alt-t { margin: 0 0 10px; font-size: 0.9375rem; color: var(--muted); }
.ch-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ch-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--card); color: var(--ink); text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease; }
.ch-btn:hover, .ch-btn:focus-visible { border-color: var(--ink); box-shadow: 0 2px 10px rgba(20, 30, 50, .08); }
.ch-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ch-pre { font-size: 0.875rem; color: var(--muted); }
.ch-ic { display: block; width: 20px; height: 20px; margin-right: -4px; }
.ch-name--airbnb { font: 700 1.0625rem/1 var(--font-text); letter-spacing: -0.02em; color: #FF385C; }
.ch-vrbo { display: block; width: 66px; height: 21px; }
@media (max-width: 759px) { .ch-row { display: grid; grid-template-columns: minmax(0, 1fr); } .ch-btn { justify-content: center; } }
/* the phone sticky bar: a solid bar, a solid button in the button colour, "★ 4.82 · Sleeps 32" beside it */
@media (max-width: 759px) {
  .sticky-bar { background: var(--paper); }
  .sticky-bar .btn { background: var(--btn-solid); border-color: var(--btn-solid); color: #fff; }
  .sticky-bar .btn:hover, .sticky-bar .btn:focus-visible { background: color-mix(in srgb, var(--btn-solid) 82%, #000); border-color: color-mix(in srgb, var(--btn-solid) 82%, #000); color: #fff; }
  .sticky-note { display: flex; align-items: center; gap: 6px; font-size: 0.9375rem; color: var(--ink); }
  .sticky-note .ic { width: 16px; height: 16px; flex: none; fill: currentColor; color: #E3A93C; stroke: none; }
}
/* 4. No teal fog: a neutral dark shade only where text sits on a photo (the bottom of the estate heroes and /book/,
   the left of /events/). Teal is for buttons. The hero background before the photo arrives is that shade. */
:root { --shade: 12, 15, 16; }
.hero { background: rgb(var(--shade)); }
.hero .hero-veil { background: linear-gradient(to top, rgba(var(--shade), .74) 0%, rgba(var(--shade), .5) 24%, rgba(var(--shade), .16) 46%, transparent 60%); }
.hero--form .hero-veil { background: linear-gradient(90deg, rgba(var(--shade), .78) 0%, rgba(var(--shade), .56) 34%, rgba(var(--shade), .12) 62%, transparent 76%); }
.home-p::after, .duo-p::after, .doors-p::after, .band::after { background: linear-gradient(to top, rgba(var(--shade), .72) 0%, rgba(var(--shade), .3) 34%, transparent 58%); }
.amt-t:not(.amt-t--plain)::after { background: linear-gradient(to top, rgba(var(--shade), .7), transparent 58%); }
.stg { background: rgb(var(--shade)); }
@media (max-width: 759px) {
  .hero.hero--prop { background: var(--paper); }   /* the phone property hero: words on the page, the photo framed */
  .hero--prop .hero-veil { background: none; }
  /* /events/ on phones: the photo is its own 4:3 block above the headline, with no overlay; the words sit on the page */
  .hero.hero--events { background: var(--paper); color: var(--ink); padding-top: 0; overflow: visible; border-radius: 0; width: 100%; }
  .hero--events .hero-bg { position: relative; inset: auto; width: calc(100% - 2 * var(--gutter)); margin: 0 auto 20px; aspect-ratio: 4 / 3; border-radius: var(--img-radius); overflow: hidden; background: rgb(var(--shade)); }
  .hero--events .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
  .hero--events .hero-veil { display: none; }
  .hero--events .hero-grid { width: calc(100% - 2 * var(--gutter)); }
  .hero--events .eyebrow { color: var(--accent-ink); }
  .hero--events h1 { color: var(--ink); }
  .hero--events .hero-sub { color: var(--ink-2); }
}
/* 5. the estate hero's one line of facts stays one line on desktop */
@media (min-width: 760px) { .rvh--a .hero-sub { max-width: none; } }
/* 6. one heading style for every section: Fraunces 300, 34px to 44px, the same 24px gap below (Book included).
   The stat numbers (room totals, the rating) stay under the heading size: 40px. */
.section .sec-header h2, .rv-events .sec-header h2, .section .sec-header--s h2, .section .sec-header--l h2, .section .h-s {
  font: 300 clamp(2.125rem, 1.6vw + 1.125rem, 2.75rem)/1.1 var(--font-display); letter-spacing: -0.018em; }
.section .sec-header, .section .sec-header--s, .section .sec-header--l, .rv-events .sec-header { margin-bottom: 24px; }
.sec-header .lead { margin-top: 10px; }
.rmt-v { font-size: 2.5rem; }
@media (max-width: 759px) { .rmt-v { font-size: 2rem; } }   /* never above the 34px phone heading */
/* Fix 13 was turned down (Emilio, 2026-10-11: "I like the old one"), so the reviews rating keeps its original
   size (.rvs-v 4.25rem, 3.5rem on phones, earlier in this file) rather than the fix 6 stat size. */
/* 7. no photo-less amenity tile: Grand Hacienda is a clean 4 x 2, Bleu a 3 x 2 (2 across on phones). The categories
   with no photo are in the full list ("See all amenities"); the "Everything else" row came out on 2026-10-14. */
/* 8. the estate hero on phones: the photo fills about 58% of the screen, with the rating and the name over its bottom
   edge (as on desktop); only the one line of facts and "Check dates" sit below it; the photo count is top right.
   The photo box has a fixed height, so the name never moves while the photo loads. */
@media (max-width: 759px) {
  .hero.rvh--a { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--paper); }
  .rvh--a .hero-bg { grid-row: 1; grid-column: 1; height: clamp(300px, 58svh, 560px); }
  .rvh--a .hero-in { display: contents; }
  .rvh--a .rvh-head { grid-row: 1; grid-column: 1; align-self: end; position: relative; z-index: 2; padding: 0 calc(var(--gutter) + 18px) 18px; color: #fff; pointer-events: none; }
  .rvh--a .rvh-head a { pointer-events: auto; }
  .rvh--a .rvh-top { color: rgba(255, 255, 255, .94); margin-bottom: 6px; }
  .rvh--a.hero--prop h1 { color: #fff; margin: 0; }
  .rvh--a .hero-sub { grid-row: 2; padding: 16px var(--gutter) 0; }
  .rvh--a .hero-meta { grid-row: 3; margin: 14px var(--gutter) 0; }
  .rvh--a .hero-veil { background: linear-gradient(to top, rgba(var(--shade), .72) 0%, rgba(var(--shade), .4) 26%, transparent 48%); }
  .rvh--a .hero-photos--pill { top: 14px; bottom: auto; right: 14px; }
}
/* 9. the tour: more photo, fewer controls. Kept: the progress bar on the photo and the thumbnails. Gone: the "1 / 4"
   counters, the dark border on the current stop and the title over the photo (the itinerary already names the stop).
   Phones: a 4:5 photo that swipes, one small pause button, the thumbnails, and no arrows or stop chips. */
.tour .tour-count, .tour .tour-cnt { display: none; }
.tour .tour-stop[aria-current="true"] { border-color: transparent; box-shadow: none; background: var(--card); }
@media (min-width: 760px) { .tour .tour-cap { display: none; } }
@media (max-width: 759px) {
  .tour .tour-stage, .tour--groups .tour-stage { aspect-ratio: 4 / 5; }
  .tour .tour-btn[data-dir] { display: none; }
  .tour .tour-ctl { right: 12px; bottom: 12px; }
  .tour .tour-play { width: 40px; height: 40px; min-height: 40px; padding: 0; }
  .tour .tour-play .ic { width: 16px; height: 16px; }
  .tour .tour-side { display: none; }
  .tour .tour-under { justify-content: flex-start; }
}
.tour-shade { background: linear-gradient(to top, rgba(var(--shade), .5) 0%, transparent 30%), linear-gradient(to bottom, rgba(var(--shade), .32), transparent 70px); }
/* 10. Bedrooms: each card is one button (photo on top, name and beds below). Desktop: 4 across from 1100px.
   Phones: one sideways row (swipe, snap). No photo-count badge; rooms with no photo are one "Also sleeps" line;
   the totals sit on one row. */
.rb-n { display: none; }
.rbcs--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .rbcs--row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rbc.rbc--btn { display: block; background: none; overflow: visible; }
.rbc--btn .rbc-body { padding: 14px 18px 16px; }
.rbc-btn { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--r-card); background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; overflow: hidden; transition: box-shadow .25s ease; }
.rbc-btn:hover { box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .35); }
.rbc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rbc-fig { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.rbc-fig img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .5s ease; }
.rbc-btn:hover .rbc-fig img { transform: scale(1.03); }
.rbc-btn .rbc-body { display: grid; gap: 4px; padding: 14px 18px 16px; }
.rbc-btn .rbc-h { display: block; font: 300 1.375rem/1.15 var(--font-display); }
.rbc-beds { font-size: 0.9375rem; line-height: 1.4; color: var(--ink-2); }
.rbc-also { margin: 16px 0 0; font-size: 0.9375rem; color: var(--ink-2); }
.rmt { flex-wrap: nowrap; }
@media (max-width: 759px) {
  .rbcs--row { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 80%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .rbcs--row::-webkit-scrollbar { display: none; }
  .rbcs--row > li { scroll-snap-align: start; }
  .rmt { display: flex; gap: 0; }
  .rmt li { flex: 1 1 0; min-width: 0; padding: 0 10px; border-left: 1px solid var(--line-strong); }
  .rmt li:first-child { padding-left: 0; border-left: 0; }
  .rmt-l { font-size: 0.8125rem; line-height: 1.3; }
}
/* 11. Events on Grand Hacienda: six photos, each in its own shape (rows of equal height, widths follow each photo's
   proportions), four on phones; "See all 14 photos" opens a window with every photo and the filter chips. */
.evp { display: grid; gap: 12px; }
.evp-row { display: flex; gap: 12px; }
.evp-c { flex: var(--ar) 1 0; min-width: 0; aspect-ratio: var(--ar); }
.evp-c .pv-fig, .evp-c .pv-open { height: 100%; margin: 0; }
.evp-c .pv-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--img-radius); overflow: hidden; }
.evp-c img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.evp-c figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evp-c .pv-fig { position: relative; }
.evp-all { margin-top: 16px; }
.evp-more { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer;
  font: 600 0.9688rem/1.2 var(--font-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.evp-more .ic { width: 18px; height: 18px; transition: transform .25s ease; }
.evp-more:hover .ic { transform: translateX(4px); }
.evg--dlg .evg-grid { display: block; columns: 3 220px; column-gap: 12px; }
.evg--dlg .evg-i { break-inside: avoid; margin: 0 0 14px; }
.evg--dlg .evg-i .pv-open img { aspect-ratio: auto; }
@media (min-width: 760px) { .ev-dlg { width: min(1100px, calc(100% - 64px)); max-width: none; } }
@media (max-width: 759px) {
  .evp, .evp-row { gap: 8px; }
  .evp-row { flex-wrap: wrap; }
  .evp-c--lead, .evp-c--wide-ph { flex: 1 1 100%; }
  .evp-c--desk { display: none; }
  .evg--dlg .evg-grid { columns: 2; column-gap: 8px; }
}
/* 13. Reviews: turned down (2026-10-11), R1-10b stays as it was (rules above, "R1-10b" and the .rv* block). */
/* 14. one caption style in the Outside mosaic (the lead no longer switches to the display font) */
.ro-mosaic .ro-big figcaption { font: 500 0.9688rem/1.3 var(--font-text); }
/* 15. small consistencies.
   Corners: three sizes only. 20px for photos, cards, sheets and windows (12px for photos on phones), 12px for fields
   and thumbnails, fully round for buttons and pills. */
:root { --r-img: 12px; }
@media (min-width: 760px) { :root { --r-img: 20px; } }
.tour-th, .tour-th img { border-radius: 12px; }
/* one close button everywhere: 44px, round, the X only (its name stays in aria-label) */
.dlg-close, .sheet-x, .menu-close, .pvr-x, .lb-btn.lb-x { display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; gap: 0;
  border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; }
.pvr-x span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dlg-close .ic, .sheet-x .ic, .menu-close .ic, .pvr-x .ic, .lb-x .ic { width: 18px; height: 18px; }
.dlg-close:hover, .sheet-x:hover, .menu-close:hover, .pvr-x:hover, .dlg-close:focus-visible, .sheet-x:focus-visible, .menu-close:focus-visible, .pvr-x:focus-visible { background: var(--ink); border-color: var(--ink); color: #fff; }
.lb-btn.lb-x { border-color: rgba(255, 255, 255, .5); background: rgba(0, 0, 0, .35); color: #fff; }
/* house rules: clear headings (Fraunces 22px) with light dividers */
.panels { border-top: 1px solid var(--line); }
.panel { border-bottom: 1px solid var(--line); }
.panel-t { font: 300 1.375rem/1.2 var(--font-display); color: var(--ink); }
/* windows on phones: the photos are one sideways row, and what's included comes right after it */
@media (max-width: 759px) {
  html:not([data-r-07="a"]):not([data-r-07="c"]) .pvr:not(.pvr--text) .pv-grid { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; gap: 10px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin-inline: -16px; padding: 0 16px 4px; scrollbar-width: none;
    align-self: stretch; box-sizing: border-box; width: calc(100% + 32px); min-width: 0; }
  html:not([data-r-07="a"]):not([data-r-07="c"]) .pvr:not(.pvr--text) .pv-grid::-webkit-scrollbar { display: none; }
  html:not([data-r-07="a"]):not([data-r-07="c"]) .pvr:not(.pvr--text) .pv-fig { scroll-snap-align: start; margin: 0; }
  html:not([data-r-07="a"]):not([data-r-07="c"]) .pvr:not(.pvr--text) .pv-fig .pv-open img { aspect-ratio: 4 / 3; object-fit: cover; }
  html:not([data-r-07="a"]):not([data-r-07="c"]) .pvr:not(.pvr--text) .pvr-list { margin-top: 18px; }
}
/* /book/: the two estate buttons are equal */
.hero--short .hero-meta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero--short .hero-meta .btn { min-width: 180px; }
/* tap targets on phones (full test run, 2026-10-11): every link or button a thumb hits is at least 44px */
.contact-list dd a { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; color: #fff; text-underline-offset: 4px; }
@media (max-width: 759px) { .tour .tour-play { width: 44px; height: 44px; min-height: 44px; } }
/* one Contact form (2026-10-11): the event fields open under "What is it about?"; Grand Hacienda's events line */
.topic-grp { display: contents; border: 0; margin: 0; padding: 0; min-width: 0; }
.topic-grp[hidden] { display: none; }
.ev-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ev-cta-p { margin: 0; font-size: 1.0625rem; color: var(--ink); }
.ev-cta-btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.ev-cta-btn .ic { width: 18px; height: 18px; }
@media (max-width: 759px) { .ev-cta { flex-direction: column; align-items: stretch; } .ev-cta-btn { justify-content: center; } }
/* Contact (Emilio, 2026-10-11: "the padding is messed up"): the photo card no longer sits flush on the sand band,
   and the two "Ready to book?" links have room between them */
.hero--contact { margin-bottom: clamp(32px, 5vw, 64px); }
.cross-links { display: flex; flex-wrap: wrap; gap: 12px 36px; }
/* five rules (How events work): one row of five on wide screens, 3 + 2 on tablets, never a lone last item
   (Emilio, 2026-10-11: spacing on the Contact page) */
@media (min-width: 1100px) { .rules--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 32px; } }
@media (min-width: 600px) and (max-width: 1099px) { .rules--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* /contact/?about=event#message (Grand Hacienda's "Contact us"): the form card ends 16px below the screen top, not
   flush. The browser lands while the hero is still 18px low in its fade-in (smooth-load), then it rises: 16 + 18. */
#message { scroll-margin-top: 34px; }

/* ------------------------------------------------------------------ audit r2 (2026-10-11): confirmed bugs */
/* thank-you, Privacy, Terms: the light hero is sand with dark ink again (".hero { background: shade }" above won) */
.hero.hero--light { background: var(--sand); color: var(--ink); }
/* phones and narrow tablets (the copy spans the width until 900px): words over a form hero photo (Contact, the
   weddings ad page) sit on a top-to-bottom shade, never bare sky */
@media (max-width: 899px) {
  .hero--form .hero-veil { background: linear-gradient(to bottom, rgba(var(--shade), .74) 0%, rgba(var(--shade), .62) 55%, rgba(var(--shade), .4) 100%); }
  .hero--form .hero-media { object-position: 50% 70%; }
}
/* captioned rail photos (/lp/group-stays/): the corner rounds the photo, not the caption's first letter */
.rail-cell { overflow: visible; border-radius: 0; }
/* phones: the footer's legal row breaks after the copyright, so "Terms of Service" never sits alone */
@media (max-width: 759px) { .legal span { flex-basis: 100%; } }
/* 320px: the rating and the place stack cleanly, with no dangling dot */
@media (max-width: 359px) { .rvh--a .rvh-place { flex-basis: 100%; } .rvh--a .rvh-place::before { display: none; } }
/* tablets: an odd last bedroom card spans the row (photo beside the words), never alone in a half row */
@media (min-width: 760px) and (max-width: 1099px) {
  .rbcs--row > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .rbcs--row > li:last-child:nth-child(odd) .rbc-btn { flex-direction: row; }
  .rbcs--row > li:last-child:nth-child(odd) .rbc-fig { flex: 0 0 50%; aspect-ratio: auto; min-height: 220px; }
  .rbcs--row > li:last-child:nth-child(odd) .rbc-body { align-content: center; }
}
/* a double tap never zooms or lands a second tap on what the first one opened */
button, a, .pv-open, summary { touch-action: manipulation; }
/* the ad pages' forms: a fresh #inquire link ends 16px below the top once the hero's 18px rise is done (as #message) */
#inquire { scroll-margin-top: 34px; }
/* "See all photos": every photo opens full screen */
.photos-dlg .pv-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.photos-dlg .pv-open img { display: block; width: 100%; }
/* a deep link (#book, #message...): the page shows once it is at its spot, never the hero first then a jump */
html.sl-deep main, html.sl-deep footer { visibility: hidden; }
/* the 404 page's links each keep their own arrow; a phone number never breaks in the middle */
.hero-next { display: flex; flex-wrap: wrap; gap: 12px 32px; }
a[href^="tel:"] { white-space: nowrap; }
/* phones: the tour's stops show again, all of them, grouped by time of day (Emilio, 2026-10-11: "all of the sections
   for the house section should be visible on mobile"; audit r1 fix 9 had hidden them) */
@media (max-width: 759px) { .tour .tour-side { display: block; margin-top: 16px; } }
@media (max-width: 759px) {
  .tour .tour-stop[aria-current="true"] { background: var(--btn); border-color: var(--btn); color: #fff; }
  .tour .tour-stop[aria-current="true"] .tour-sw-t, .tour .tour-stop[aria-current="true"] .tour-sw-when { color: #fff; }
}
/* phones: the tour's stops sit above the photo, so they are seen first (Emilio, 2026-10-11: "where does it show the
   sections?" They were under the thumbnails, below the fold) */
@media (max-width: 759px) {
  .tour .tour-side { order: -1; margin: 0 0 14px; }
  .tour .tour-grid { display: flex; flex-direction: column; }
}
/* section CTAs (2026-10-12): the page's main action again at a decision point, with one quiet line beside it.
   Desktop and tablet only: on phones the sticky bar is that action, and it never shows twice on one screen. */
.sec-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: clamp(28px, 3vw, 40px); }
.sec-cta-note { margin: 0; font-size: 0.9375rem; color: var(--muted); }
@media (max-width: 759px) { .sec-cta { display: none; } }
.sec-cta .btn { background: var(--btn-solid); border-color: var(--btn-solid); color: var(--btn-fg); }
.sec-cta .btn:hover, .sec-cta .btn:focus-visible { background: var(--ink); border-color: var(--ink); color: #fff; }
/* reviews (2026-10-14): Check dates sits under the rating card, full card width */
.rvs-cta { margin-top: 16px; }
@media (min-width: 900px) { .rvs-cta .btn { flex: 1 1 auto; } }

/* ------------------------------------------------------------------ the tour's area switch on phones (2026-10-12)
   Emilio picked tryout B (Entrance | Inside | Outside) without the stop chips under it: on phones the itinerary is the
   switch alone; the caption under the photo names the stop. Desktop keeps the full list beside the photo. */
.tour-areas { display: none; }
@media (max-width: 759px) {
  .tour .tour-areas { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--sand); }
  .tour .tour-area { flex: 1; min-height: 44px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 600 0.9375rem/1 var(--font-text); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
  .tour .tour-area[aria-pressed="true"] { background: var(--btn); color: #fff; }
  .tour .tour-area:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .tour .tour-list { display: none; }
}
/* the room-named tour variation (/<estate>/rooms/): 16 to 23 stops, so the list runs as tall as it needs beside the
   photo, one comfortable row per room, instead of squeezing into the photo's height */
@media (min-width: 900px) {
  .tour--rooms .tour-list { position: static; inset: auto; overflow: visible; }
  .tour--rooms .tour-list li { flex: none; }
  .tour--rooms .tour-list li:has(.tour-stop[aria-current="true"]) { flex-grow: 0; }
  .tour--rooms .tour-stop { height: auto; min-height: 40px; max-height: none; padding: 9px 14px; }
  .tour--rooms .tour-stop[aria-current="true"] { max-height: none; }
}
/* the category variation (/<estate>/categories/): 7 or 8 groups, so on phones the switch is a sideways row of pills */
@media (max-width: 759px) {
  .tour--cats .tour-areas { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 999px; }
  .tour--cats .tour-areas::-webkit-scrollbar { display: none; }
  .tour--cats .tour-area { flex: none; padding: 0 16px; white-space: nowrap; }
}
/* the live tour menu (by category, 2026-10-12): only the categories, never the full list of stops ("not a wall of text").
   Desktop: a short vertical list beside the photo. Tablets and phones: a row of pills that scrolls sideways. */
.tour--cats .tour-list { display: none; }
@media (min-width: 760px) and (max-width: 899px) {
  .tour--cats .tour-areas { display: flex; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 999px; background: var(--sand);
    overflow-x: auto; scrollbar-width: none; }
  .tour--cats .tour-areas::-webkit-scrollbar { display: none; }
  .tour--cats .tour-area { flex: none; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none; white-space: nowrap;
    color: var(--ink-2); font: 600 0.9375rem/1 var(--font-text); cursor: pointer; }
  .tour--cats .tour-area[aria-pressed="true"] { background: var(--btn); color: #fff; }
}
@media (min-width: 900px) {
  .tour--cats .tour-areas { display: flex; flex-direction: column; gap: 4px; }
  .tour--cats .tour-area { display: flex; align-items: center; min-height: 52px; padding: 10px 18px; border: 0; border-radius: var(--r-card);
    background: none; color: var(--ink-2); text-align: left; font: 300 1.375rem/1.2 var(--font-display); cursor: pointer;
    transition: background-color .2s ease, color .2s ease; }
  .tour--cats .tour-area:hover { background: var(--sand); color: var(--ink); }
  .tour--cats .tour-area[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: inset 3px 0 0 var(--btn); }
  .tour--cats .tour-area:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}
/* the rooms of the current category, by name only, under it on desktop (2026-10-12). They fold open and shut with the
   site's fold motion as the tour moves on; the whole menu stays within the photo's height, so nothing below moves. */
.tour-subs { display: none; }
@media (max-width: 899px) { .tour--cats .tour-cat { display: contents; } }
@media (min-width: 900px) {
  .tour--cats .tour-areas { gap: 2px; }
  .tour--cats .tour-area { min-height: 46px; padding: 8px 18px; }
  .tour--cats .tour-subs { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--mo-out) var(--mo-close-ease); }
  .tour--cats .tour-cat.is-open .tour-subs { grid-template-rows: 1fr; transition: grid-template-rows var(--mo-in) var(--mo-open-ease); }
  .tour--cats .tour-subs-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding-left: 18px; opacity: 0; transition: opacity var(--mo-out) var(--mo-close-ease); }
  .tour--cats .tour-cat.is-open .tour-subs-in { opacity: 1; transition: opacity var(--mo-in) var(--mo-open-ease); }
  .tour--cats .tour-sub { display: flex; align-items: center; min-height: 34px; padding: 0 18px; border: 0; background: none; text-align: left;
    color: var(--muted); font: 500 0.9375rem/1.2 var(--font-text); cursor: pointer; border-left: 1px solid var(--line); }
  .tour--cats .tour-sub:first-child { margin-top: 4px; }
  .tour--cats .tour-sub:last-child { margin-bottom: 8px; }
  .tour--cats .tour-sub:hover { color: var(--ink); }
  .tour--cats .tour-sub[aria-current="true"] { color: var(--btn); font-weight: 600; border-left: 2px solid var(--btn); padding-left: 17px; }
  .tour--cats .tour-sub:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) { .tour--cats .tour-subs, .tour--cats .tour-subs-in { transition: none !important; } }
@media (min-width: 900px) {
  /* a folded category's rooms are out of the Tab order too */
  .tour--cats .tour-subs-in { visibility: hidden; transition: opacity var(--mo-out) var(--mo-close-ease), visibility 0s linear var(--mo-out); }
  .tour--cats .tour-cat.is-open .tour-subs-in { visibility: visible; transition: opacity var(--mo-in) var(--mo-open-ease), visibility 0s linear 0s; }
}
@media (min-width: 900px) { .tour--cats .tour-area { width: 100%; } }
/* the category's rooms open and close more smoothly (Emilio, 2026-10-12): the closing list and the opening one share
   one duration and one curve, so their heights trade off and the categories below glide instead of wobbling; the
   rooms then fade and settle in one after another. */
@media (min-width: 900px) {
  .tour--cats .tour-subs,
  .tour--cats .tour-cat.is-open .tour-subs { transition: grid-template-rows .56s cubic-bezier(.45, 0, .2, 1); }
  .tour--cats .tour-subs-in,
  .tour--cats .tour-cat.is-open .tour-subs-in { opacity: 1; transition: visibility 0s linear .56s; }
  .tour--cats .tour-cat.is-open .tour-subs-in { transition: visibility 0s linear 0s; }
  .tour--cats .tour-sub { opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, color .2s ease, border-color .2s ease; }
  .tour--cats .tour-cat.is-open .tour-sub { opacity: 1; transform: none;
    transition: opacity .38s ease calc(.12s + var(--i, 0) * .04s), transform .46s cubic-bezier(.2, .7, .2, 1) calc(.12s + var(--i, 0) * .04s), color .2s ease, border-color .2s ease; }
  .tour--cats .tour-area { transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
}
@media (prefers-reduced-motion: reduce) { .tour--cats .tour-sub, .tour--cats .tour-cat.is-open .tour-sub { transition: none !important; opacity: 1; transform: none; } }
/* reviews (Emilio, 2026-10-12): one text size for every review (the large one was in the display font), and the
   phrase that carries each review underlined in brand blue */
.rvw .rvw-q p, .rvw--big .rvw-q p, .rvw--small .rvw-q p { font: 400 1.0625rem/1.65 var(--font-text); color: var(--ink-2); }
.rvw-hl { background: none; color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--btn);
  text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-skip-ink: none; }

/* footer on phones (Emilio, 2026-10-14: "needs to look better on mobile"). One column; every link is a full-width
   row with a hairline and an arrow, so the estates and the contact link line up and read as links. The arrow is
   desktop-hidden. Comes after the 44px tap-target block on purpose (same specificity, later wins). */
.footer-links .ic { display: none; }
@media (max-width: 759px) {
  .site-footer:not(.site-footer--min):not(.site-footer--lp) { padding: 48px 0 calc(28px + env(safe-area-inset-bottom)); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .footer-grid > :first-child { grid-column: auto; }
  .footer-brand { font-size: 1.75rem; margin-bottom: 10px; }
  .footer-text { font-size: 0.9375rem; }
  .footer-title { margin: 0 0 6px; }
  .footer-links { border-top: 1px solid rgba(255, 255, 255, .12); }
  .footer-links a { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; min-height: 54px; padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12); opacity: 1; }
  .footer-links a:hover { text-decoration: none; }
  .footer-links .ic { display: block; width: 18px; height: 18px; flex: none; opacity: .7; }
  .footer-grid + .legal { margin-top: 36px; padding-top: 0; border-top: 0; }
}

/* ------------------------------------------------------------------ José's version at /hacienda/ (2026-10-18)
   Grand Hacienda as the brand: home, Weddings, Packages, Layouts, Questions, Tour and Other properties pages, built by
   _build/hacienda.py, with body.v-gh. Everything that could touch Emilio's pages is scoped to .v-gh; the rest are new
   class names. Phones: everything stacks; nothing swipes sideways. */
.v-gh .brand-name span { letter-spacing: 0.2em; }
.v-gh .nav { gap: 26px; }
.nav-cta--solid { background: var(--btn-solid); border-color: var(--btn-solid); color: #fff; }
.nav-cta--solid:hover { background: var(--ink); border-color: var(--ink); }
.site-header--overlay .nav-cta--solid { color: #fff; }
/* the bar holds four links plus the button from 1200px; below that, the Menu sheet */
@media (min-width: 1000px) and (max-width: 1199px) { .v-gh .nav { display: none; } .v-gh .menu-btn { display: inline-flex; } }
.menu-cta { margin-top: 8px; min-height: 52px; }

/* hero: the name, the positioning line, one sentence, the facts, then the two other actions as quiet links */
.hero-tag { font: 300 clamp(1.25rem, 1.9vw, 1.625rem)/1.25 var(--font-display); margin: -6px 0 18px; color: #fff; letter-spacing: -0.01em; }
.v-gh .hero--home h1 { margin-bottom: 14px; }
.hero-links { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 22px 0 0; }
.hero-links .link-arrow { color: #fff; font-size: 0.9688rem; }

/* tbc: a value José still owes us (price, inclusion, drawing). Quiet, not a highlighter. */
.tbc { display: inline-flex; align-items: center; padding: 1px 10px; border: 1px dashed var(--line-strong); border-radius: 999px;
       font: 500 0.75rem/1.6 var(--font-text); color: var(--muted); letter-spacing: 0.02em; white-space: nowrap; }

/* the wedding and the stay, together: four photo tiles; phones = photo left, words right, one under the other */
.vt { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.vt-fig { margin: 0 0 16px; }
.vt-fig img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--sand); }
.vt-h { font: 300 1.5rem/1.2 var(--font-display); margin: 0 0 6px; }
.vt-p { margin: 0; color: var(--muted); font-size: 0.9688rem; line-height: 1.55; }
@media (max-width: 999px) { .vt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .vt { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .vt-i { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; }
  .vt-fig { margin: 0; }
  .vt-fig img { aspect-ratio: 1 / 1; }
  .vt-h { font-size: 1.25rem; }
  .vt-p { font-size: 0.9375rem; }
}

/* wedding photo strip (home): four portraits, 2 x 2 on phones */
.ws { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ws img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
@media (max-width: 759px) { .ws { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.ws-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 22px; }
.ws-acts .evp-all { margin: 0; }

/* packages */
.pks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: start; }
.pk { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; scroll-margin-top: 96px; }
.pk-fig { margin: 0; }
.pk-fig img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 0; }
.pk-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.pk-name { font: 300 1.75rem/1.1 var(--font-display); margin: 0; }
.pk-line { margin: -6px 0 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.pk-dl { margin: 0; display: grid; }
.pk-dl > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.pk-dl dt { font-size: 0.9062rem; color: var(--ink-2); }
.pk-dl dd { margin: 0; font-weight: 600; font-size: 0.9062rem; text-align: right; }
.pk-go { align-self: flex-start; margin-top: auto; }
.pk .btn.pk-go { align-self: stretch; }
.pk-inc { border-top: 1px solid var(--line); }
.pk-inc summary { min-height: 52px; }
.pk-inc .panel-body { padding: 0 0 6px; }
.pk-inc .pk-dl > div:first-child { border-top: 0; }
.pks-more { margin: 26px 0 0; }
@media (min-width: 760px) { .pk-inc { display: none; } }   /* the comparison table carries it there */
@media (max-width: 999px) { .pks { grid-template-columns: minmax(0, 1fr); max-width: 560px; } }

/* comparison: a table from 760px; phones read each card's "What's included" instead */
.cmp-wrap { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
.cmp { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.cmp th, .cmp td { padding: 14px 18px; text-align: left; border-top: 1px solid var(--line); vertical-align: middle; }
.cmp thead th { border-top: 0; font: 300 1.375rem/1.2 var(--font-display); }
.cmp thead td { border-top: 0; }
.cmp tbody th { font-weight: 500; color: var(--ink-2); width: 30%; }
.cmp tbody tr:nth-child(odd) { background: var(--paper); }
@media (max-width: 759px) { .section--cmp { display: none; } }

/* enhancements */
.enh { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.enh-i { display: flex; gap: 14px; align-items: flex-start; padding: 20px; background: #fff; border-radius: var(--r-card); }
.enh-i > .ic { color: var(--accent); width: 22px; height: 22px; margin-top: 2px; }
.enh-h { margin: 0 0 4px; font-weight: 600; }
.enh-p { margin: 0 0 10px; color: var(--muted); font-size: 0.9062rem; line-height: 1.5; }
.enh-v { margin: 0; font-weight: 600; font-size: 0.9062rem; }
@media (max-width: 999px) { .enh { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .enh { grid-template-columns: minmax(0, 1fr); gap: 10px; } .enh-i { padding: 16px; } }

/* weddings sub-navigation (Overview, Packages, Layouts, Questions): one row at every width */
.wnav { border-bottom: 1px solid var(--line); background: var(--paper); }
.wnav-in { display: grid; grid-template-columns: repeat(4, max-content); gap: 0 34px; }
.wnav a { display: inline-flex; align-items: center; min-height: 56px; font: 500 0.875rem/1 var(--font-text); color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.wnav a:hover { color: var(--ink); }
.wnav a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
@media (max-width: 599px) { .wnav-in { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } .wnav a { justify-content: center; font-size: 0.8125rem; min-height: 52px; } }
.hero--form + .wnav { margin-top: clamp(16px, 2vw, 28px); }

/* a weekend here: three steps */
.rules--steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rules--steps .rule-h { font: 300 1.5rem/1.2 var(--font-display); }
@media (max-width: 759px) { .rules--steps { grid-template-columns: minmax(0, 1fr); } }

/* places on the estate: 3 x 2, phones 2 x 3 */
.spaces--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spaces--3 .space img { aspect-ratio: 4 / 3; }
@media (max-width: 759px) {
  .spaces--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
  .spaces--3 .space img { aspect-ratio: 1 / 1; }
  .spaces--3 .space figcaption { font-size: 0.8438rem; margin-top: 8px; }
  .spaces--3 .space-h { font-size: 1.125rem; }
}

/* stay with everyone */
.chips--group { margin-top: 22px; }
.grp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 26px; }
@media (max-width: 759px) { .grp-acts .btn { width: 100%; } }

/* come see it */
.tourband { display: flex; align-items: center; justify-content: space-between; gap: 18px 40px; flex-wrap: wrap; }
.tourband h2 { margin: 0 0 8px; }
.tourband p { margin: 0; max-width: 52ch; color: var(--on-deep); opacity: .9; }
@media (max-width: 759px) { .tourband .btn { width: 100%; } }

/* questions */
.faq { max-width: 860px; }
.faq-g { font: 300 1.5rem/1.2 var(--font-display); margin: 40px 0 12px; }
.faq-g:first-child { margin-top: 0; }
.faq-a { margin: 0; color: var(--ink-2); max-width: 62ch; }
.faq-a a { color: var(--accent-ink); }
.faq-more { margin: 18px 0 0; }

/* sample layouts */
.lays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.lay { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.lay-fig { margin: 0; }
.lay-fig img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 0; }
.lay-body { padding: 22px; display: grid; gap: 12px; }
.lay-h { font: 300 1.625rem/1.15 var(--font-display); }
.lay-p { margin: 0; color: var(--muted); }
.lay-draw { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 12px 16px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--muted); font-size: 0.9062rem; }
.lay-draw .ic { color: var(--accent); }
.lay-draw .tbc { margin-left: auto; }
@media (max-width: 759px) { .lays { grid-template-columns: minmax(0, 1fr); } .lay-body { padding: 18px; } }

/* other properties */
.op { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.op-fig { display: block; }
.op-fig img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.op-name { font: 300 clamp(2.25rem, 4vw, 3.25rem)/1 var(--font-display); margin: 0 0 12px; }
.op-line { color: var(--ink-2); font-size: 1.0625rem; margin: 0 0 12px; }
.op-facts { margin: 0 0 8px; color: var(--muted); }
.op-rate { display: flex; align-items: center; gap: 8px; margin: 0 0 22px; font-size: 0.9375rem; }
.op-rate .ic { width: 16px; height: 16px; }
.op-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.op-ch { margin-top: 18px; }
@media (max-width: 759px) { .op { grid-template-columns: minmax(0, 1fr); } .op-acts .btn { width: 100%; } }

/* light heroes with two actions; the packages form's side links; the estate's events link */
.hero-next--btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 24px; }
.split-links { margin: 18px 0 0; }
.ev-cta-more { margin-left: 18px; }
@media (max-width: 759px) { .ev-cta-more { margin: 10px 0 0; } }

/* footer: brand + three columns, contact under the brand */
.footer-grid--4 { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
.footer-contact { margin-top: 14px; }
.footer-contact a { color: inherit; }
@media (max-width: 999px) { .v-gh .footer-grid--4 { grid-template-columns: 1fr 1fr 1fr; } .footer-grid--4 > :first-child { grid-column: 1 / -1; } }
@media (max-width: 759px) { .v-gh .footer-grid--4 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 759px) {
  .hero--pricing .hero-tag { color: var(--ink-2); }
  .hero--pricing .hero-points { color: var(--muted); }
  .hero--pricing .hero-links .link-arrow { color: var(--accent-ink); }
  .hero--pricing .hero-links { margin-top: 12px; }
  .hero--pricing .hero-action { margin-top: 8px; }
  .hero--pricing .form-card { border: 1px solid var(--line); box-shadow: none; }
}

/* The phone sticky bar steps aside while the menu sheet is open: it sat above the sheet and covered its last row
   (found 2026-10-18; on the original site that row is Contact & Events). */
html:has(.menu.is-open) .sticky-bar { opacity: 0; pointer-events: none; transform: translateY(100%); }

/* ------------------------------------------------------------------ occasion themes on each property (2026-10-18, occasions.py)
   The lens bar under the hero: the same house, for each occasion. Wraps on phones (no sideways rows). */
.lens { border-bottom: 1px solid var(--line); }
.lens-in { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; padding: 14px 0; }
.lens-t { font: 500 0.75rem/1 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.lens-l { display: flex; flex-wrap: wrap; gap: 6px; }
.lens-l a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px;
  font: 500 0.875rem/1 var(--font-text); color: var(--ink-2); text-decoration: none; background: var(--card); }
.lens-l a:hover { border-color: var(--btn); color: var(--ink); }
.lens-l a[aria-current] { background: var(--btn); border-color: var(--btn); color: #fff; }
@media (max-width: 759px) { .lens-in { padding: 12px 0 14px; } .lens-t { width: 100%; } .lens-l a { min-height: 44px; padding: 0 14px; } }
.hero--full + .lens, .hero--form + .lens { margin-top: clamp(12px, 1.6vw, 20px); }
.pk-cmp { margin-top: 28px; }
@media (max-width: 759px) { .pk-cmp { display: none; } }

/* ------------------------------------------------------------------ two-slide forms (2026-10-18, site.js wireSteps)
   Name, email and phone first; Next opens the rest. Only under html.js (set in the head before first paint), so the
   first paint already shows slide one and nothing jumps; without JS the whole form shows and sends. */
.fstep-nav { display: none; }
.fstep-q { margin: 0 0 2px; font: 300 1.375rem/1.2 var(--font-display); color: var(--ink); }
html.js form[data-steps] .fstep--2 { display: none; }
html.js form[data-steps].at2 .fstep--1 { display: none; }
html.js form[data-steps].at2 .fstep--2 { display: grid; }
html.js form[data-steps]:not(.at2) .form-submit { display: none; }
html.js form[data-steps] .fstep-nav { display: grid; gap: 6px; margin-top: 20px; }
html.js form[data-steps]:not(.at2) .fstep-back { display: none; }
html.js form[data-steps].at2 .fstep-next { display: none; }
html.js form[data-steps].at2 .fstep-nav { margin-top: 6px; }
.fstep-back { justify-self: center; min-height: 44px; padding: 0 14px; border: 0; background: none; color: var(--muted);
  font: 500 0.9062rem/1 var(--font-text); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.fstep-back:hover { color: var(--ink); }

/* the occasion lens bar is ours to show, not the guest's: hidden unless the page was opened with ?themes=1 */
.lens { display: none; }
html.show-lens .lens { display: block; }

/* occasion stay heroes (occasions.date_hero): their daytime photos are brighter than the property heroes, so the words
   get a soft shade from the left as well as from below (desktop; on phones the words sit under the photo's own shade) */
@media (min-width: 760px) {
  .rvh--theme .hero-veil { background: linear-gradient(90deg, rgba(var(--shade), .62) 0%, rgba(var(--shade), .38) 42%, transparent 72%),
                                       linear-gradient(to top, rgba(var(--shade), .72) 0%, rgba(var(--shade), .3) 34%, transparent 60%); }
}

/* occasion pages: enhancements and sample layouts under the packages (2026-10-18) */
.pk-extra { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; margin-top: 36px; }
.pk-extra-h { font: 300 1.5rem/1.2 var(--font-display); margin: 0 0 14px; }
.pk-extra .enh { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lay-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lay-i { padding: 14px 16px; background: #fff; border-radius: var(--r-card); }
.lay-i-t { margin: 0 0 2px; font-weight: 600; }
.lay-i-p { margin: 0 0 6px; color: var(--muted); font-size: 0.9062rem; }
.lay-i-v { margin: 0; font-size: 0.875rem; color: var(--ink-2); }
@media (max-width: 999px) { .pk-extra { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .pk-extra .enh { grid-template-columns: minmax(0, 1fr); } }

/* QA fixes (2026-10-19) */
/* 3. "Places at the hacienda": the rounded clip sat on the whole figure and cut the caption's first letter; the corner
   goes on the photo only */
.spaces--3 .space { overflow: visible; border-radius: 0; }
/* 5. phones: the stay heroes' rating and eyebrow sit on bright daytime photos; a deeper shade under the words */
@media (max-width: 759px) {
  .rvh--theme .hero-veil { background: linear-gradient(to top, rgba(var(--shade), .82) 0%, rgba(var(--shade), .55) 30%, rgba(var(--shade), .12) 60%, transparent 75%); }
}
/* 6. "See the house" lands with the tour's heading in view (the id sits on the player, below the heading) */
main:has(.hero--pricing, .rvh--theme) .section--tour #tour { scroll-margin-top: 96px; }   /* occasion pages only; the property pages keep their landing */
/* 7. each hero point stays whole when the line wraps */
/* the hero facts as small pills (Emilio, 2026-10-20: "we should style this part"): they wrap between pills, never
   mid-fact, with no stray separator at a line start. On the photo they are frosted; on phones (words on the page) outlined. */
.hero-points--row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.hero-points--row .pt { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; white-space: nowrap;
  font: 500 0.875rem/1 var(--font-text); color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .38);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 759px) {
  .hero--pricing .hero-points--row .pt { color: var(--ink-2); background: var(--card); border-color: var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* the stay request on the stay pages lands with its heading in view on phones */
.section--book #book-direct { scroll-margin-top: 24px; }
.stay-req { max-width: 600px; margin-inline: auto; }

/* OwnerRez widgets in the Book section (2026-10-20): the live calendar, then Book Now. The widgets draw their own
   iframes; these only space them. */
.bk-slot--live { display: grid; gap: 20px; }
.bk-slot--live .orz-cal, .bk-slot--live .orz-book { min-width: 0; }
.bk-slot--live iframe { max-width: 100%; }

/* Book (Emilio, 2026-10-20, after launch): the choices only. The Book direct card carries the one button that opens
   the OwnerRez widgets in a window (a bottom sheet on phones, centred on desktop); Airbnb / Vrbo sit beside it on
   desktop and under it on phones. */
.bk { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .bk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } }
.bk--solo { max-width: 560px; }
@media (min-width: 860px) { .bk--solo { grid-template-columns: minmax(0, 1fr); } }
.bk-card { display: flex; flex-direction: column; }
.bk-open { margin-top: 20px; width: 100%; min-height: 52px; justify-content: center; background: #fff; border-color: #fff; color: var(--ink); font-weight: 600; }
.bk-open:hover, .bk-open:focus-visible { background: var(--on-deep); border-color: var(--on-deep); color: var(--ink); }
.bk-open:focus-visible { outline-color: #fff; }
.bk .bk-alt { margin: 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); display: flex; flex-direction: column; justify-content: center; }
.bk-dlg { overflow-y: auto; }
.bk-dlg .sheet-body { padding-top: 16px; }
.bk-dlg .bk-slot--live { gap: 16px; }
@media (min-width: 860px) {
  .bk-dlg { max-width: 760px; max-height: 90vh; margin: auto; border-radius: 18px; }
  .bk-dlg .sheet-grab { display: none; }
  .bk-dlg .sheet-bar { padding-top: 16px; }
}

/* ------------------------------------------------------------------ guest arrival pages (guest.py, 2026-10-20) */
.guest .site-header--funnel .bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gs-call { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-weight: 500; white-space: nowrap; }
.gs-call .ic { width: 18px; height: 18px; }
.gs-times { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 20px; }
.gs-times span { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: 0.9375rem; }
.gs-times b { font-weight: 600; margin-right: 6px; }
.gs-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.gs-actions .btn:first-child { background: var(--btn-solid); border-color: var(--btn-solid); color: var(--btn-fg); }
.gs-actions .btn:first-child:hover, .gs-actions .btn:first-child:focus-visible { background: color-mix(in srgb, var(--btn-solid) 82%, #000); border-color: color-mix(in srgb, var(--btn-solid) 82%, #000); color: #fff; }
.gs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gs-block { display: flex; gap: 16px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.gs-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sand); color: var(--accent); }
.section--sand .gs-ic { background: var(--paper); }
.gs-ic .ic { width: 20px; height: 20px; }
.gs-block h3 { font-family: var(--font-text); font-size: 1.0625rem; font-weight: 600; margin: 8px 0 6px; }
.gs-block p { margin: 0 0 8px; color: var(--ink-2); }
.gs-block p:last-child { margin-bottom: 0; }
.gs-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-width: 760px; }
.gs-list li { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; color: var(--ink-2); }
.gs-list .ic { flex: none; width: 20px; height: 20px; color: var(--accent); margin-top: 2px; }
.gs-note { margin-top: 20px; color: var(--muted); }
@media (max-width: 760px) {
  .gs-grid { grid-template-columns: 1fr; }
  .gs-call span { display: none; }
  .gs-call { width: 44px; height: 44px; justify-content: center; border: 1.5px solid currentColor; border-radius: 50%; }
  .gs-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ------------------------------------------------------------------ desktop sticky bar (2026-10-21)
   Emilio: on desktop the call to action was hard to find while scrolling. The phone bar's twin: a slim bar along the
   top, in once the hero's action has scrolled away and aside while a form or the Book section is on screen (same
   wireSticky logic). House name, the one-line summary, the page's one action. */
.sticky-name { display: none; }
@media (min-width: 760px) {
  .sticky-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; gap: 20px;
    padding: 10px max(var(--gutter), calc((100% - 1320px) / 2)); background: var(--paper);
    border-bottom: 1px solid var(--line); box-shadow: 0 10px 24px -20px rgba(0, 0, 0, .45);
    transform: translateY(-110%); visibility: hidden; transition: transform .35s ease, visibility 0s linear .35s;
  }
  .sticky-bar.is-on { transform: none; visibility: visible; transition: transform .35s ease; }
  .sticky-name { display: block; margin: 0; font: 300 1.375rem/1.1 var(--font-display); color: var(--ink); white-space: nowrap; }
  .sticky-note { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; margin: 0; font: 500 0.9375rem/1.3 var(--font-text); color: var(--muted); }
  .sticky-note .ic--star { width: 15px; height: 15px; color: var(--accent); }
  .sticky-bar .btn { flex: none; min-height: 44px; padding: 0 26px; background: var(--btn-solid); border-color: var(--btn-solid); color: #fff; }
  .sticky-bar .btn:hover, .sticky-bar .btn:focus-visible { background: color-mix(in srgb, var(--btn-solid) 82%, #000); border-color: color-mix(in srgb, var(--btn-solid) 82%, #000); color: #fff; }
  .sticky-call { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid var(--ink); border-radius: 50%; color: var(--ink); }
}

/* "Ready to book?" under every enquiry form (2026-10-26) */
.form-book { margin: 14px 0 0; text-align: center; font-size: 0.9062rem; color: var(--muted); }
.form-book a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.form-book a:hover { color: var(--ink, inherit); }

/* Header "Book direct" (2026-10-26): the solid button at every width, after Contact & Events */
.nav-book { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border-radius: 999px; background: var(--btn-solid); border: 1px solid var(--btn-solid); color: #fff;
  font: 500 0.75rem/1 var(--font-text); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.nav-book:hover { background: var(--ink); border-color: var(--ink); }
.site-header--overlay .nav-book { color: #fff; }
.menu-sheet .nav-book, .nav-book.menu-cta { display: flex; width: 100%; min-height: 52px; margin-top: 8px; }
.site-header--lp .bar { justify-content: space-between; }
@media (max-width: 759px) { .nav-book { min-height: 40px; padding: 0 14px; letter-spacing: 0.12em; } }
@media (max-width: 359px) { .nav-book { padding: 0 10px; letter-spacing: 0.06em; } }
.book-pick .menu-nav { display: grid; gap: 10px; }
/* Phones: room for the brand beside Book direct. The menu button is its icon (its label stays for screen readers). */
@media (max-width: 599px) {
  .menu-btn { padding: 0 2px; gap: 0; }
  .menu-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav-book { padding: 0 12px; letter-spacing: 0.08em; }
  .brand-name { font-size: 1rem; }
  .brand-name span { letter-spacing: 0.22em; }
}
/* Book: "Avoid the fees, book direct" and the Airbnb / Vrbo buttons sit on one line (Emilio, 2026-10-26).
   Both cards stretch to the same height and pin their buttons to the bottom; same padding, same 52px buttons. */
.bk-card .bk-p { margin-bottom: 20px; }
.bk-card .bk-open { margin-top: auto; }
.bk .bk-alt { justify-content: flex-start; padding: 21px 23px; }   /* 21/23px: its 1px border, so it matches the dark card */
/* The Airbnb / Vrbo card mirrors Book direct (2026-10-26, "too much empty space"): same heading type, a ratings line,
   and the two buttons filling the row, pinned to the bottom. */
.bk-alt-h { margin: 0; font: 300 1.875rem/1.05 var(--font-display); color: var(--ink); }
.bk .bk-alt-t { margin: 8px 0 20px; }
.bk .ch-row { margin-top: auto; }
@media (min-width: 860px) {
  .bk .ch-row { flex-wrap: nowrap; }
  .bk .ch-btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 12px; gap: 8px; }
}