/* ==========================================================================
   Luxe Stay — design system
   Type:  Cormorant Garamond (display) / Jost (interface)
   Colour: warm neutral ground, bronze and champagne accents
   Deliberately light-only: this is a brand surface, not an app.
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */
:root {
  /* Brand palette — established in the Webflow build, derived from the logo.
     Gold fails WCAG AA for small text on ivory, so Gold Dark is the text
     accent and Gold is reserved for large marks, rules and dark grounds. */
  --ivory:       #faf6ef;   /* background          */
  --espresso:    #2a1d16;   /* primary / dark      */
  --gold:        #b99a4b;   /* accent              */
  --gold-dark:   #8c6d2f;   /* brand's declared accent-on-light          */
  --gold-text:   #8a6c2e;   /* ...which measures 4.49:1 on ivory and so
                               misses WCAG AA (4.5) by a hair. This is the
                               same hue two points darker: 4.57:1. Used for
                               all small accent text. See audit.mjs.        */
  --charcoal:    #2e2a26;   /* body text           */
  --footer-dark: #241811;   /* footer ground       */
  --white:       #ffffff;

  /* Supporting neutrals, mixed from the brand colours rather than invented. */
  --paper:      var(--ivory);
  --ink:        var(--espresso);
  --cream:      color-mix(in oklab, var(--ivory) 92%, var(--espresso));
  --sand:       color-mix(in oklab, var(--ivory) 78%, var(--espresso));
  --stone:      color-mix(in oklab, var(--ivory) 62%, var(--espresso));
  --taupe:      color-mix(in oklab, var(--charcoal) 68%, var(--ivory));
  --champagne:  color-mix(in oklab, var(--gold) 62%, var(--ivory));

  /* roles */
  --bg:            var(--ivory);
  --bg-alt:        var(--cream);
  --bg-deep:       var(--espresso);
  --text:          var(--charcoal);
  --text-muted:    var(--taupe);
  --text-invert:   var(--ivory);
  --rule:          color-mix(in oklab, var(--stone) 55%, transparent);
  --rule-strong:   color-mix(in oklab, var(--taupe) 40%, transparent);
  --accent:        var(--gold-text);
  --accent-soft:   var(--gold);

  /* type */
  --font-display: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --font-sans:    'Jost', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.115rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.34rem + 0.8vw, 2rem);
  --step-3:  clamp(1.95rem, 1.66rem + 1.45vw, 2.9rem);
  --step-4:  clamp(2.5rem, 1.98rem + 2.6vw, 4.2rem);
  --step-5:  clamp(3rem, 2.1rem + 4.5vw, 6.2rem);

  /* space */
  --sp-2xs: 0.375rem; --sp-xs: 0.625rem; --sp-s: 1rem;
  --sp-m: 1.75rem;    --sp-l: 3rem;      --sp-xl: 5rem;
  --sp-2xl: clamp(4.5rem, 3rem + 7vw, 9rem);

  /* structure */
  --measure: 68ch;
  --container: 78rem;
  --container-wide: 92rem;
  --radius: 2px;
  --radius-lg: 3px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.55s;

  --shadow-sm: 0 1px 2px rgba(26,23,20,.04), 0 4px 14px -6px rgba(26,23,20,.10);
  --shadow-md: 0 2px 4px rgba(26,23,20,.05), 0 18px 40px -18px rgba(26,23,20,.22);
  --shadow-lg: 0 4px 8px rgba(26,23,20,.06), 0 36px 70px -28px rgba(26,23,20,.30);
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:where(h1,h2,h3,h4) {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); font-weight: 400; }
p  { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}

::selection { background: var(--champagne); color: var(--espresso); }

.skip-link {
  position: absolute; left: var(--sp-s); top: -100%;
  z-index: 999; padding: var(--sp-xs) var(--sp-s);
  background: var(--ink); color: var(--paper);
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: var(--sp-s); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --- layout --------------------------------------------------------------- */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.container--wide { width: min(100% - 2.5rem, var(--container-wide)); }
.container--narrow { width: min(100% - 2.5rem, 46rem); }
@media (max-width: 40rem) { .container, .container--wide { width: calc(100% - 2rem); } }

.section { padding-block: var(--sp-2xl); }
.section--tight { padding-block: var(--sp-xl); }
.section--alt { background: var(--bg-alt); }
.section--deep { background: var(--bg-deep); color: var(--text-invert); }
.section--deep h2, .section--deep h3 { color: var(--paper); }

.stack > * + * { margin-top: var(--flow, var(--sp-s)); }
.grid { display: grid; gap: var(--sp-m); }

/* --- typographic helpers -------------------------------------------------- */
.eyebrow {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-weight: 400;
  color: var(--accent);
}
.section--deep .eyebrow { color: var(--accent-soft); }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: var(--measure);
  font-weight: 300;
}
.section--deep .lede { color: color-mix(in oklab, var(--paper) 78%, transparent); }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.15em; }
.prose p { color: var(--text-muted); }

.section-head { display: grid; gap: var(--sp-s); margin-bottom: var(--sp-l); max-width: var(--measure); }

.rule { height: 1px; background: var(--rule); border: 0; }

/* --- buttons -------------------------------------------------------------- */
.btn {
  --btn-bg: var(--espresso); --btn-fg: var(--ivory); --btn-bd: var(--espresso);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  padding: 0.95em 2em;
  font-size: var(--step--1);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  position: relative; overflow: hidden;
  transition: background .25s var(--ease-out), color .25s var(--ease-out),
              border-color .25s var(--ease-out), transform .3s var(--ease-out);
  will-change: transform;
}
.btn:hover { --btn-bg: var(--gold-dark); --btn-bd: var(--gold-dark); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--rule-strong); }
.btn--ghost:hover { --btn-bg: var(--espresso); --btn-fg: var(--ivory); --btn-bd: var(--espresso); }

.btn--light { --btn-bg: var(--ivory); --btn-fg: var(--espresso); --btn-bd: var(--ivory); }
.btn--light:hover { --btn-bg: var(--gold); --btn-bd: var(--gold); --btn-fg: var(--espresso); }

.btn--outline-light { --btn-bg: transparent; --btn-fg: var(--paper); --btn-bd: color-mix(in oklab, var(--paper) 45%, transparent); }
.btn--outline-light:hover { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-bd: var(--paper); }

.btn--block { width: 100%; }

/* underline link */
.link-u {
  display: inline-block;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .45s var(--ease-out), color .45s var(--ease-out);
}
.link-u:hover { background-size: 0% 1px; color: var(--accent); }

/* --- header --------------------------------------------------------------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: var(--sp-s);
  transition: background .5s var(--ease-out), padding .5s var(--ease-out),
              box-shadow .5s var(--ease-out), border-color .5s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-m); }

.header--over { color: var(--paper); }
.header--over .brand__mark { color: var(--paper); }

.header.is-stuck {
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--rule);
  color: var(--ink);
  padding-block: calc(var(--sp-xs) * 1.2);
}
.header.is-stuck .brand__mark { color: var(--ink); }
.header.is-stuck .nav__link { color: var(--ink); }

.brand { display: inline-flex; flex-direction: column; line-height: 1; }
.brand__mark {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem);
  letter-spacing: 0.06em;
  transition: color .5s var(--ease-out);
}
.brand__sub {
  font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.36em;
  margin-top: 0.45em; opacity: .7;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); }
.nav__link {
  font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 400; position: relative; padding-block: 0.35em;
  transition: color .35s var(--ease-out), opacity .35s var(--ease-out);
}
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: currentColor; transition: width .45s var(--ease-out);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; }
.nav__link[aria-current="page"] { color: var(--accent); }

.header__actions { display: flex; align-items: center; gap: var(--sp-s); }
.header__cta { padding: 0.7em 1.5em; }

.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav-toggle__bar { display: block; width: 22px; height: 1px; background: currentColor; position: relative; transition: background .3s; }
.nav-toggle__bar::before, .nav-toggle__bar::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 1px; background: currentColor;
  transition: transform .4s var(--ease-out);
}
.nav-toggle__bar::before { top: -7px; } .nav-toggle__bar::after { top: 7px; }
[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 62rem) {
  .nav-toggle { display: inline-flex; }
  .header__nav {
    position: fixed; inset: 0; background: var(--ink); color: var(--paper);
    flex-direction: column; align-items: center; justify-content: center;
    gap: var(--sp-m); font-size: var(--step-2);
    opacity: 0; visibility: hidden; transform: translateY(-1.5rem);
    transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), visibility .5s;
  }
  .header__nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .header__nav .nav__link { font-size: var(--step-2); font-family: var(--font-display); text-transform: none; letter-spacing: 0; color: var(--paper) !important; }
  .header__cta { display: none; }
  .nav__cta { margin-top: var(--sp-s); }
}
/* The nav CTA is only for the mobile overlay — desktop already has one. */
@media (min-width: 62.01rem) { .nav__cta { display: none; } }

/* --- hero ----------------------------------------------------------------- */
.hero { position: relative; min-height: min(100svh, 60rem); display: grid; align-items: end; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--espresso); }
.hero__media img, .hero__media .ph {
  width: 100%; height: 100%; object-fit: cover;
  animation: heroSettle 14s var(--ease-out) both;
}
/* A slow settle rather than a pan — enough to feel alive, not enough to
   notice. Neutralised by the reduced-motion block at the end of this file. */
@keyframes heroSettle { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(26,23,20,.78) 0%, rgba(26,23,20,.34) 14%, rgba(26,23,20,0) 26%),
    linear-gradient(180deg, rgba(26,23,20,.10) 0%, rgba(26,23,20,.30) 45%, rgba(26,23,20,.80) 100%),
    linear-gradient(90deg, rgba(26,23,20,.55) 0%, rgba(26,23,20,.10) 55%, rgba(26,23,20,0) 100%);
}
.hero__inner { padding-block: clamp(6rem, 14vh, 10rem) var(--sp-xl); color: var(--paper); }
.hero__title { font-size: var(--step-5); color: var(--paper); max-width: 16ch; }
.hero__title em { font-style: italic; color: var(--champagne); }
.hero__lede { color: color-mix(in oklab, var(--paper) 82%, transparent); max-width: 44ch; margin-top: var(--sp-m); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-s); margin-top: var(--sp-l); }

.hero__scroll {
  position: absolute; left: 50%; bottom: var(--sp-m); translate: -50% 0;
  display: grid; justify-items: center; gap: 0.6rem;
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.3em;
  color: color-mix(in oklab, var(--paper) 70%, transparent);
}
.hero__scroll span:last-child { display: block; width: 1px; height: 42px; background: currentColor; transform-origin: top; animation: scrollHint 2.4s var(--ease-io) infinite; }
@keyframes scrollHint { 0%,100% { transform: scaleY(.25); opacity:.4 } 50% { transform: scaleY(1); opacity:1 } }

/* page hero (interior pages) */
.page-hero { position: relative; padding-block: clamp(9rem, 18vh, 13rem) var(--sp-xl); background: var(--ink); color: var(--paper); isolation: isolate; }
.page-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.page-hero__media::after {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(26,23,20,.82) 0%, rgba(26,23,20,.55) 30%, rgba(26,23,20,.62) 100%),
    linear-gradient(90deg, rgba(26,23,20,.45), rgba(26,23,20,0) 70%);
}
.page-hero h1 { color: var(--paper); max-width: 18ch; }
.page-hero .lede { color: color-mix(in oklab, var(--paper) 80%, transparent); margin-top: var(--sp-m); }

/* --- search bar ----------------------------------------------------------- */
.searchbar {
  background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: repeat(4, 1fr) auto;
  align-items: stretch;
  border-radius: var(--radius-lg);
}
.searchbar--float { margin-top: calc(var(--sp-l) * -1); position: relative; z-index: 5; }
.searchbar__field { display: grid; gap: 0.3rem; padding: 1.1rem 1.4rem; border-right: 1px solid var(--rule); }
.searchbar__field:last-of-type { border-right: 0; }
.searchbar__field label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--taupe); }
.searchbar__field input, .searchbar__field select {
  border: 0; background: transparent; font-size: var(--step-0); font-weight: 300; width: 100%; padding: 0;
}
.searchbar__field input::-webkit-calendar-picker-indicator { opacity: .35; cursor: pointer; }
.searchbar__submit { padding-inline: 2.2rem; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
@media (max-width: 60rem) {
  .searchbar { grid-template-columns: 1fr 1fr; }
  .searchbar__field:nth-of-type(2n) { border-right: 0; }
  .searchbar__field { border-bottom: 1px solid var(--rule); }
  .searchbar__submit { grid-column: 1 / -1; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .searchbar--float { margin-top: var(--sp-m); }
}

/* --- property cards ------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr)); gap: var(--sp-m) var(--sp-s); }

.card { display: grid; grid-template-rows: auto 1fr; position: relative; isolation: isolate; }
.card__media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: linear-gradient(145deg, var(--sand), var(--stone));
  border-radius: var(--radius);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out), filter 1.1s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.05); }
.card__badge {
  position: absolute; top: var(--sp-s); left: var(--sp-s); z-index: 2;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 0.45em 0.9em; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.18em;
  border-radius: var(--radius);
}
.card__body { padding-top: var(--sp-s); display: grid; gap: 0.5rem; align-content: start; }
.card__meta { font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe); }
.card__title { font-size: var(--step-2); line-height: 1.12; font-weight: 400; }
.card__title a::after { content: ''; position: absolute; inset: 0; z-index: 3; }
.card__sub { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--taupe); margin-top: -0.35rem; }
.card__summary { color: var(--text-muted); font-size: var(--step--1); line-height: 1.6; }
.card__foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-s); margin-top: 0.35rem; padding-top: 0.75rem; border-top: 1px solid var(--rule); }
.card__price { font-family: var(--font-display); font-size: var(--step-1); }
.card__price span { font-family: var(--font-sans); font-size: var(--step--1); color: var(--taupe); letter-spacing: .1em; }
.card__cue { font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); transition: transform .4s var(--ease-out); }
.card:hover .card__cue { transform: translateX(4px); }

/* Direct booking action on every card. Sits above the card's stretched link
   so it is independently clickable. */
.card__book {
  position: relative; z-index: 4;
  font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase;
  padding: .5em 1.1em; border: 1px solid var(--espresso); border-radius: var(--radius);
  background: var(--espresso); color: var(--ivory);
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out);
  white-space: nowrap;
}
.card__book:hover { background: var(--gold-dark); border-color: var(--gold-dark); }

/* editorial feature row */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.feature--flip .feature__media { order: 2; }
.feature__media { aspect-ratio: 5 / 6; overflow: hidden; background: linear-gradient(145deg, var(--sand), var(--stone)); border-radius: var(--radius); }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 55rem) {
  .feature { grid-template-columns: 1fr; gap: var(--sp-m); }
  .feature--flip .feature__media { order: 0; }
  .feature__media { aspect-ratio: 4 / 3; }
}

/* --- stats / trust -------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--sp-m); }
.stat { display: grid; gap: 0.35rem; padding-top: var(--sp-s); border-top: 1px solid var(--rule-strong); }
.stat__n { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; }
.stat__l { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.16em; color: var(--taupe); }
.section--deep .stat { border-top-color: color-mix(in oklab, var(--paper) 25%, transparent); }
.section--deep .stat__l { color: color-mix(in oklab, var(--paper) 65%, transparent); }

/* --- property detail ------------------------------------------------------ */
.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 1fr; gap: 6px; }
.gallery > * { background: linear-gradient(145deg, var(--sand), var(--stone)); aspect-ratio: 4/3; overflow: hidden; }
.gallery > :first-child { grid-row: span 2; aspect-ratio: 4/3.05; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.gallery a:hover img { transform: scale(1.04); }
@media (max-width: 50rem) { .gallery { grid-template-columns: 1fr 1fr; } .gallery > :first-child { grid-column: 1 / -1; grid-row: auto; } }

.detail { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 62rem) { .detail { grid-template-columns: 1fr; } }

.booking-card {
  position: sticky; top: 6.5rem;
  background: var(--white); border: 1px solid var(--rule);
  padding: var(--sp-m); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: grid; gap: var(--sp-s);
}
.booking-card__price { display: flex; align-items: baseline; gap: 0.5rem; }
.booking-card__price b { font-family: var(--font-display); font-size: var(--step-3); font-weight: 400; }
.booking-card__price span { font-size: var(--step--1); color: var(--taupe); letter-spacing: .08em; }
.booking-card__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.booking-card__f { display: grid; gap: .25rem; border: 1px solid var(--rule); padding: .6rem .75rem; border-radius: var(--radius); }
.booking-card__f label { font-size: .58rem; text-transform: uppercase; letter-spacing: .18em; color: var(--taupe); }
.booking-card__f input, .booking-card__f select { border: 0; background: transparent; width: 100%; font-size: var(--step--1); }
.booking-card__note { font-size: var(--step--1); color: var(--taupe); text-align: center; line-height: 1.5; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--sp-s); padding-block: var(--sp-m); border-block: 1px solid var(--rule); }
.fact { display: grid; gap: .2rem; }
.fact__l { font-size: .6rem; text-transform: uppercase; letter-spacing: .2em; color: var(--taupe); }
.fact__v { font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; }

.amenities { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem var(--sp-m); list-style: none; padding: 0; }
.amenities li { display: flex; gap: .65rem; align-items: baseline; font-size: var(--step--1); color: var(--text-muted); }
.amenities li::before { content: ''; width: 5px; height: 5px; background: var(--accent); flex: none; transform: rotate(45deg); translate: 0 -2px; }

/* full photo gallery page */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); gap: var(--sp-m) var(--sp-s); }
.photo-grid figure { margin: 0; }
.photo-grid img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  background: linear-gradient(145deg, var(--sand), var(--stone));
  border-radius: var(--radius);
}
.photo-grid figcaption {
  margin-top: .6rem; font-size: var(--step--1); letter-spacing: .14em;
  text-transform: uppercase; color: var(--taupe);
}

/* "view all" chip on the last gallery tile */
.gallery a { position: relative; display: block; }
.gallery__more {
  position: absolute; inset: auto var(--sp-xs) var(--sp-xs) auto;
  background: color-mix(in oklab, var(--paper) 94%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--ink); padding: .55em 1em; border-radius: var(--radius);
  font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: var(--shadow-sm); transition: background .35s var(--ease-out);
}
.gallery a:hover .gallery__more { background: var(--paper); }

/* --- misc components ------------------------------------------------------ */
.pills { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.pill {
  font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase;
  padding: .55em 1.1em; border: 1px solid var(--rule-strong); border-radius: 100px;
  transition: background .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.pill:hover, .pill.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.quote { max-width: 40ch; }
.quote__text { font-family: var(--font-display); font-size: var(--step-2); font-style: italic; line-height: 1.35; }
.quote__by { margin-top: var(--sp-s); font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); }

.accordion { border-top: 1px solid var(--rule); }
.accordion details { border-bottom: 1px solid var(--rule); }
.accordion summary {
  cursor: pointer; list-style: none; padding-block: var(--sp-s);
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-s);
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 400;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: '+'; font-size: var(--step-1); color: var(--accent); transition: transform .35s var(--ease-out); }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion details > div { padding-bottom: var(--sp-m); color: var(--text-muted); max-width: var(--measure); }

.breadcrumb { font-size: var(--step--1); letter-spacing: .08em; color: var(--taupe); display: flex; gap: .5rem; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--accent); }

/* --- footer --------------------------------------------------------------- */
.footer { background: var(--footer-dark); color: color-mix(in oklab, var(--paper) 72%, transparent); padding-block: var(--sp-xl) var(--sp-m); }
.footer h2, .footer h3, .footer .brand__mark { color: var(--paper); }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--sp-l) var(--sp-m); }
@media (max-width: 55rem) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 32rem) { .footer__grid { grid-template-columns: 1fr; } }
.footer h3 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .2em; font-family: var(--font-sans); font-weight: 400; margin-bottom: var(--sp-s); }
.footer ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.footer a { transition: color .3s var(--ease-out); }
.footer a:hover { color: var(--champagne); }
.footer__bar { margin-top: var(--sp-xl); padding-top: var(--sp-m); border-top: 1px solid color-mix(in oklab, var(--paper) 16%, transparent); display: flex; flex-wrap: wrap; gap: var(--sp-s); justify-content: space-between; font-size: var(--step--1); }

/* --- review strip ---------------------------------------------------------
   A continuous marquee of guest reviews. Duplicated track for a seamless
   loop; pauses on hover and focus. Under reduced-motion it stops animating
   and becomes a normal horizontally-scrollable row. */
.reviews { overflow: hidden; padding-block: var(--sp-l); }
.reviews__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-s); margin-bottom: var(--sp-m); }
.reviews__track { display: flex; gap: var(--sp-s); width: max-content; animation: marquee 70s linear infinite; }
.reviews:hover .reviews__track,
.reviews:focus-within .reviews__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.review {
  flex: 0 0 clamp(17rem, 26vw, 22rem);
  background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: var(--sp-m);
  display: grid; gap: .75rem; align-content: start;
}
.section--deep .review { background: color-mix(in oklab, var(--paper) 8%, transparent); border-color: color-mix(in oklab, var(--paper) 18%, transparent); }
.review__stars { color: var(--accent); letter-spacing: .18em; font-size: var(--step--1); }
.section--deep .review__stars { color: var(--accent-soft); }
.review__quote { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.4; font-style: italic; }
.review__by { font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); }
.section--deep .review__by { color: color-mix(in oklab, var(--paper) 62%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .reviews__track { animation: none; width: auto; overflow-x: auto; padding-bottom: var(--sp-s); }
}

/* credential line — typography, never a reproduction of anyone's badge */
.credential {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase;
  color: var(--taupe); border: 1px solid var(--rule-strong);
  padding: .55em 1.1em; border-radius: 100px;
}
.credential::before { content: '★'; color: var(--accent); letter-spacing: 0; }

/* --- mobile booking bar ---------------------------------------------------
   On narrow screens the sticky booking card falls below the whole description
   column, so a property page has no booking action until ~4 screens down.
   This keeps price + CTA permanently in reach. Desktop keeps the sticky card. */
.book-bar { display: none; }

@media (max-width: 62rem) {
  .book-bar {
    position: fixed; inset: auto 0 0 0; z-index: 90;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-s);
    padding: .75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in oklab, var(--paper) 95%, transparent);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    border-top: 1px solid var(--rule);
    box-shadow: 0 -8px 30px -18px rgba(42, 29, 22, .35);
  }
  .book-bar__price { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.1; }
  .book-bar__price span { display: block; font-family: var(--font-sans); font-size: .62rem;
    letter-spacing: .18em; text-transform: uppercase; color: var(--taupe); margin-top: .15rem; }
  .book-bar .btn { padding: .8em 1.5em; }
  body:has(.book-bar) { padding-bottom: 5.5rem; }
}

/* --- scroll reveal -------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(1.75rem); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .09s; }
[data-reveal-delay="2"] { transition-delay: .18s; }
[data-reveal-delay="3"] { transition-delay: .27s; }
[data-reveal-delay="4"] { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .header, .footer, .booking-card, .hero__scroll { display: none !important; }
  body { background: #fff; }
}

/* --- guest assistant ------------------------------------------------------ */
/* The launcher sits above the mobile booking bar rather than over it: the
   Book Now bar is the priority action and must never be covered. */

.ga-launch {
  position: fixed; z-index: 95;
  right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem);
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.35rem;
  font-family: var(--font-sans); font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-invert); background: var(--espresso);
  border: 1px solid color-mix(in oklab, var(--gold) 55%, var(--espresso));
  border-radius: 999px; cursor: pointer;
  box-shadow: 0 18px 44px -22px rgba(42, 29, 22, .75);
  transition: transform .35s var(--ease-out), background .35s var(--ease-out);
}
.ga-launch:hover { transform: translateY(-2px); background: var(--footer-dark); }
.ga-launch svg { width: 1.05rem; height: 1.05rem; flex: none; }
.ga-launch[hidden] { display: none; }

/* The forms below set display:grid/flex on a class, which outranks the user
   agent's [hidden] { display: none } — so hiding them needs saying explicitly,
   or the verification form renders on top of the chat form. */
.ga-panel [hidden], .ga-launch[hidden] { display: none !important; }

@media (max-width: 62rem) {
  body:has(.book-bar) .ga-launch { bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); }
  .ga-launch { padding: .8rem 1.1rem; font-size: .7rem; }
}

.ga-panel {
  /* Above the site header (100), below the skip link (999). At phone widths the
     panel is full-screen, so anything painting over it lands in the middle of
     the conversation. */
  position: fixed; z-index: 101;
  right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem);
  width: min(24.5rem, calc(100vw - 2rem));
  max-height: min(38rem, calc(100dvh - 2rem));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); color: var(--text);
  border: 1px solid var(--rule); border-radius: 1.15rem;
  box-shadow: 0 32px 80px -30px rgba(42, 29, 22, .55);
}
.ga-panel[hidden] { display: none; }

@media (max-width: 34rem) {
  .ga-panel { inset: 0; width: auto; max-height: none; border-radius: 0; border: 0; }
}

.ga-panel__head {
  display: flex; align-items: flex-start; gap: var(--sp-s);
  padding: 1.1rem 1.25rem 1rem;
  background: var(--espresso); color: var(--text-invert);
}
.ga-panel__head h2 {
  font-family: var(--font-display); font-size: var(--step-1);
  font-weight: 400; line-height: 1.15; margin: 0; color: var(--text-invert);
}
.ga-panel__head p { margin: .3rem 0 0; font-size: .78rem; color: color-mix(in oklab, var(--ivory) 72%, var(--espresso)); }
.ga-close {
  margin-left: auto; flex: none; width: 2rem; height: 2rem;
  display: grid; place-items: center; cursor: pointer;
  background: none; border: 1px solid color-mix(in oklab, var(--ivory) 30%, transparent);
  border-radius: 50%; color: var(--text-invert); font-size: 1.1rem; line-height: 1;
}
.ga-close:hover { background: color-mix(in oklab, var(--ivory) 12%, transparent); }

.ga-log { flex: 1 1 auto; min-height: 8rem; overflow-y: auto; padding: 1.25rem; display: grid; gap: .85rem; align-content: start; }
.ga-msg { max-width: 88%; padding: .7rem .95rem; border-radius: .85rem; font-size: .9rem; line-height: 1.55; }
.ga-msg--bot  { background: var(--cream); border: 1px solid var(--rule); justify-self: start; border-bottom-left-radius: .25rem; }
.ga-msg--user { background: var(--espresso); color: var(--text-invert); justify-self: end; border-bottom-right-radius: .25rem; }
.ga-msg--note { background: color-mix(in oklab, var(--champagne) 45%, var(--paper)); border: 1px solid color-mix(in oklab, var(--gold) 35%, transparent); justify-self: stretch; max-width: none; font-size: .82rem; }
.ga-msg p { margin: 0 0 .5rem; }
.ga-msg p:last-child { margin-bottom: 0; }
.ga-msg a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }

.ga-dots { display: inline-flex; gap: .28rem; }
.ga-dots i { width: .32rem; height: .32rem; border-radius: 50%; background: var(--taupe); animation: ga-bounce 1.15s infinite; }
.ga-dots i:nth-child(2) { animation-delay: .16s; }
.ga-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes ga-bounce { 0%, 70%, 100% { opacity: .28; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-.18rem); } }
@media (prefers-reduced-motion: reduce) { .ga-dots i { animation: none; opacity: .5; } }

.ga-foot { flex: none; border-top: 1px solid var(--rule); padding: .85rem 1rem 1rem; background: var(--paper); }
.ga-form { display: flex; gap: .6rem; align-items: flex-end; }
.ga-form textarea {
  flex: 1 1 auto; resize: none; min-height: 2.6rem; max-height: 7rem;
  padding: .65rem .8rem; font: inherit; font-size: .9rem;
  color: var(--text); background: var(--white);
  border: 1px solid var(--rule-strong); border-radius: .6rem;
}
.ga-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ga-send {
  flex: none; width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  cursor: pointer; color: var(--text-invert); background: var(--espresso);
  border: 0; border-radius: .6rem;
}
.ga-send:disabled { opacity: .4; cursor: not-allowed; }
.ga-send svg { width: 1.05rem; height: 1.05rem; }

.ga-verify { display: grid; gap: .6rem; }
.ga-verify label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.ga-verify input {
  padding: .7rem .8rem; font: inherit; font-size: .95rem; letter-spacing: .06em;
  color: var(--text); background: var(--white);
  border: 1px solid var(--rule-strong); border-radius: .6rem;
}
.ga-verify input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ga-verify .btn { width: 100%; }
.ga-verify__back { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: .78rem; color: var(--text-muted); text-decoration: underline; text-underline-offset: .18em; }
.ga-error { font-size: .82rem; color: #9a2b18; margin: 0; }
.ga-legal { margin: .7rem 0 0; font-size: .68rem; line-height: 1.5; color: var(--text-muted); }
.ga-legal a { color: inherit; }
.ga-tabs { display: flex; gap: .4rem; padding: .7rem 1rem 0; }
.ga-tab {
  flex: 1; padding: .5rem .6rem; cursor: pointer; font: inherit; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted);
  background: none; border: 1px solid var(--rule); border-radius: .5rem;
}
.ga-tab[aria-selected="true"] { color: var(--text); border-color: var(--rule-strong); background: var(--cream); }

/* --- form status ---------------------------------------------------------- */
.form-status {
  margin: 0; padding: .7rem .9rem; font-size: .88rem; line-height: 1.5;
  border-radius: .5rem;
  color: var(--text);
  background: color-mix(in oklab, var(--champagne) 45%, var(--paper));
  border: 1px solid color-mix(in oklab, var(--gold) 35%, transparent);
}
.form-status--bad {
  color: #7d2314;
  background: color-mix(in oklab, #c0392b 8%, var(--paper));
  border-color: color-mix(in oklab, #c0392b 30%, transparent);
}