/* ==========================================================================
   The Walden Suites — v5
   A plain static rebuild of the v4 design. Same palette, same type, same
   restraint; the difference is that everything here is a real file.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Ink & brass — the house palette */
  --ink:        #09223F;   /* navy, headings and dark panels */
  --ink-deep:   #05192F;   /* the drawer, the darkest ground */
  --ink-veil:   rgba(10, 22, 38, 0.82);
  --brass:      #8A6A3B;   /* the one accent */
  --brass-dark: #6E5330;   /* brass, pressed */
  --brass-lit:  #D4B27C;   /* brass on a dark ground */

  /* Papers */
  --paper:      #F6F9FC;   /* card and panel fill */
  --paper-cool: #F0F3F7;   /* alternate band */
  --cream:      #F4F1EA;   /* warm band */
  --white:      #FFFFFF;
  --line:       #E2E8F0;

  /* Text */
  --body:       #333333;
  --muted:      #4A4A4A;
  --soft:       #6E6660;
  --dim:        #666666;
  --on-dark:    #F6F9FC;
  --on-dark-2:  #C7D2E0;
  --on-dark-3:  #B9C4D6;

  /* Type */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Rhythm */
  --gutter:   clamp(20px, 5vw, 40px);
  --band:     clamp(52px, 8vw, 92px);
  --measure:  1180px;

  /* Motion */
  --ease-out: cubic-bezier(.19, 1, .22, 1);
  --ease-soft: cubic-bezier(.2, .8, .2, 1);
}

/* --- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  color: var(--body);
  background: var(--white);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

a { color: var(--brass); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--body); }

button { font-family: inherit; }

::selection { background: var(--brass); color: #fff; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  line-height: 1.1;
}

p { margin: 0 0 16px; text-wrap: pretty; }

/* Cross-document view transitions, as in v4 */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: waldenFadeOut .3s ease both; }
::view-transition-new(root) { animation: waldenFadeIn .42s ease both; }
.nav-bar { view-transition-name: walden-nav; }

/* --- Keyframes ------------------------------------------------------------ */

@keyframes waldenFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes waldenFadeOut { from { opacity: 1; } to { opacity: 0; } }

@keyframes waldenRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* The slow drift across a still photograph */
@keyframes waldenKen {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.22) translate3d(-1.2%, -1%, 0); }
}
@keyframes waldenKenBack {
  from { transform: scale(1.2) translate3d(1%, .8%, 0); }
  to   { transform: scale(1.03) translate3d(0, 0, 0); }
}

@keyframes waldenScrollLine {
  0%, 100% { transform: scaleY(.55); opacity: .45; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

@keyframes waldenFabIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* --- Reveal on scroll ----------------------------------------------------- */

/* Elements marked [data-reveal] start displaced and settle when scrolled to.
   The .is-revealed class is added by the IntersectionObserver in walden.js;
   without JS, the :not() rule never applies and everything is simply visible. */
[data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translateY(var(--reveal-dist, 24px));
}

[data-reveal] {
  transition:
    opacity 1s var(--ease-out) var(--reveal-delay, 0s),
    transform 1.1s var(--ease-out) var(--reveal-delay, 0s);
  will-change: transform, opacity;
}

.js-off [data-reveal] { opacity: 1; transform: none; }

/* --- Layout --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.wrap--wide { max-width: 1240px; }
.wrap--narrow { max-width: 1120px; }

.band { padding-top: var(--band); padding-bottom: var(--band); }
.band--cool  { background: var(--paper-cool); }
.band--cream { background: var(--cream); }
.band--ink   { background: var(--ink); color: var(--on-dark-2); }
.band--ink h2, .band--ink h3 { color: var(--on-dark); }

/* Two columns that fold to one when there is no room for both */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.split--start { align-items: start; }

/* Swapping the two columns. Only above the point the grid is still two
   columns wide — below it the source order is the reading order. */
@media (min-width: 768px) {
  .split--flip > *:first-child { order: 2; }
}

/* --- Common type ---------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  font-size: 11.5px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--ink);
}

.eyebrow::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--brass);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.eyebrow--lit { color: var(--brass-lit); }
.eyebrow--lit::before { background: var(--brass-lit); }

.section-title {
  font-size: clamp(31px, 3.6vw, 42px);
  margin: 14px 0 22px;
}

.section-title--sm { font-size: clamp(27px, 3.2vw, 36px); }

.lede {
  color: var(--muted);
  font-size: 16.5px;
}

.note {
  font-size: 13px;
  color: var(--soft);
  margin: 0;
}

.step-no {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: rgba(51, 51, 51, .35);
}

.band--ink .step-no { color: rgba(232, 238, 245, .4); }

.step-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
}

/* --- Buttons & links ------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  padding: 17px 32px;
  border-radius: 2px;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.btn--brass { background: var(--brass); color: #fff; }
.btn--brass:hover { background: var(--brass-dark); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--on-dark);
  border: 1px solid rgba(246, 249, 252, .5);
}
.btn--ghost:hover { background: rgba(246, 249, 252, .12); color: var(--on-dark); }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid #C9D3E0;
}
.btn--outline:hover { background: #EDF1F6; color: var(--ink); }

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

.link-more {
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
}

.band--ink .link-more { color: var(--brass-lit); }

/* Filter pills, on Rooms and Gallery */
.pills {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.pill {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 11px 22px;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.pill:hover { border-color: var(--brass); color: var(--brass); }

.pill[aria-pressed="true"] {
  background: var(--brass);
  border-color: var(--brass);
  color: #fff;
}

/* --- Page header (hero) --------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  height: 56vh;
  min-height: 340px;
}

.hero--full { min-height: 100svh; height: auto; }

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  animation: waldenKen 18s ease-in-out infinite alternate;
  will-change: transform;
}

/* Frames stacked behind the first, cross-faded by JS on the home page */
.hero__frame {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 55%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.9s ease;
  animation: waldenKen 15s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.hero__frame:nth-child(even) { animation-name: waldenKenBack; animation-duration: 17s; }
.hero__frame.is-showing { opacity: 1; }

.hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--ink-veil), rgba(10, 22, 38, .18));
}

.hero--full .hero__veil {
  background: linear-gradient(to top,
    rgba(10, 22, 38, .86) 0%,
    rgba(10, 22, 38, .34) 42%,
    rgba(10, 22, 38, .30) 100%);
}

.hero__body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(34px, 6vh, 54px);
}

.hero--full .hero__body { padding-top: 120px; padding-bottom: clamp(40px, 7vh, 72px); }

.hero__eyebrow {
  display: inline-block;
  font-size: 11.5px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #E8EEF5;
  margin-bottom: 14px;
  animation: waldenRise .9s var(--ease-out) .1s both;
}

.hero__title {
  font-size: clamp(36px, 6vw, 70px);
  line-height: 1.02;
  color: var(--on-dark);
  margin: 0;
  text-wrap: balance;
  animation: waldenRise 1s var(--ease-out) .26s both;
}

.hero--full .hero__title {
  font-size: clamp(40px, 7vw, 88px);
  line-height: 1.03;
  margin-bottom: 34px;
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  text-align: center;
  z-index: 2;
  pointer-events: none;
  transition: opacity .5s ease;
}

.hero__scroll.is-gone { opacity: 0; }

.hero__scroll span:first-child {
  display: block;
  width: 1px;
  height: 34px;
  background: rgba(232, 238, 245, .5);
  margin: 0 auto 10px;
  transform-origin: top;
  animation: waldenScrollLine 2.4s ease-in-out infinite;
}

.hero__scroll span:last-child {
  font-size: 9.5px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(232, 238, 245, .6);
}

/* Reading progress hairline, home page */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--brass);
  z-index: 150;
  transition: width .08s linear;
}

/* --- Booking widget (home hero) ------------------------------------------- */

.booking {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  max-width: 940px;
  background: rgba(10, 22, 38, .46);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .16);
  animation: waldenRise 1s var(--ease-out) .5s both;
}

.booking__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px clamp(18px, 2vw, 26px);
  flex: 1 1 165px;
  cursor: pointer;
}

.booking__field + .booking__field { border-left: 1px solid rgba(255, 255, 255, .16); }

.booking__label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.booking__input {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background: transparent;
  border: 0;
  outline: none;
  padding: 0;
  width: 100%;
  color-scheme: dark;
  cursor: pointer;
  appearance: none;
}

.booking__input option { color: var(--body); }

.booking__go {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #0A1626;
  background: #fff;
  border: 0;
  padding: 20px 30px;
  min-height: 56px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .3s ease;
}

.booking__go:hover { background: #E8EEF5; }

.booking-note {
  font-size: 11.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(232, 238, 245, .66);
  margin-top: 14px;
  animation: waldenRise .9s var(--ease-out) .72s both;
}

/* --- Figures -------------------------------------------------------------- */

.figure {
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
}

.figure img {
  width: 100%;
  object-fit: cover;
  filter: brightness(.82) saturate(.93);
}

.figure--4x3 img { aspect-ratio: 4 / 3; }
.figure--3x2 img { aspect-ratio: 3 / 2; }
.figure--5x4 img { aspect-ratio: 5 / 4; }
.figure--4x5 img { aspect-ratio: 4 / 5; }

.figure figcaption {
  font-size: 13px;
  color: var(--soft);
  padding: 10px 2px 0;
}

/* The breakfast team are people, not architecture — they keep their light */
.figure--warm img { filter: brightness(.88) saturate(.97); }

/* --- Stat tiles ----------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.stat {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 24px;
  border-radius: 3px;
}

.stat__value {
  font-family: var(--serif);
  font-size: 38px;
  color: var(--brass);
  line-height: 1;
}

.stat__label {
  font-size: 12.5px;
  color: var(--soft);
  margin-top: 6px;
}

/* --- Room cards ----------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: clamp(16px, 2vw, 26px);
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--body);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

/* Same reasoning as .gallery-tile[hidden] below: the Rooms archive's own
   category pills set [hidden] on the cards they rule out, and the
   unconditional `display: flex` above would otherwise cancel that. */
.card[hidden] { display: none; }

.card:hover {
  border-color: var(--brass);
  box-shadow: 0 18px 38px rgba(9, 34, 63, .14);
  transform: translateY(-3px);
  color: var(--body);
}

.card__media {
  position: relative;
  display: block;
  overflow: hidden;
}

.card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: brightness(.82) saturate(.93);
  transition: transform .5s var(--ease-soft);
}

.card:hover .card__media img { transform: scale(1.045); }

/* The room's kind and its price, as a pair over the top-left of the
   photograph. They wrap onto a second line rather than crowd a narrow card. */
.card__badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 24px);
}

.card__tag,
.card__price {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: rgba(9, 34, 63, .92);
  color: #fff;
  padding: 5px 10px;
  border-radius: 2px;
}

/* Same pill as the tag it sits beside — the two are told apart by what they
   say, not by shouting. The figure is kept off a line of its own. */
.card__price { white-space: nowrap; }

.card__body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card__name {
  font-weight: 600;
  font-size: 24px;
  margin: 0 0 4px;
}

.card__name a { color: var(--body); }
.card__name a:hover { color: var(--brass); }

.card__meta {
  font-size: 12.5px;
  color: var(--ink);
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.card__desc {
  color: var(--muted);
  font-size: 14.5px;
  margin: 0 0 18px;
  flex: 1;
}

.card__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.chip {
  font-size: 11.5px;
  color: var(--dim);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 20px;
}

.card__cta {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--brass);
}


/* Compact variant, used for "other rooms" and the home feature row */
.card--quiet { background: var(--white); }
.card--quiet .card__body { padding: 18px 20px 22px; }
.card--quiet .card__name { font-size: 21px; }

/* --- Section heads with a link on the right ------------------------------- */

.head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 36px;
}

/* --- Quote band ----------------------------------------------------------- */

.quote-band { position: relative; overflow: hidden; }

.quote-band > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quote-band__veil { position: absolute; inset: 0; background: rgba(9, 34, 63, .72); }

.quote-band__body {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 100px) var(--gutter);
  text-align: center;
}

.quote-mark {
  display: block;
  font-family: var(--serif);
  font-size: 60px;
  line-height: 1;
  color: rgba(212, 178, 124, .55);
  margin-bottom: 6px;
}

.quote-band blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.32;
  color: var(--on-dark);
  margin: 0 0 20px;
  text-wrap: balance;
}

.quote-band__source {
  font-size: 11.5px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(232, 238, 245, .66);
}

/* --- Reviews carousel ----------------------------------------------------- */

.reviews { position: relative; padding-top: 6px; }

.reviews__mark {
  position: absolute;
  top: -34px;
  left: -8px;
  font-family: var(--serif);
  font-size: 130px;
  line-height: 1;
  color: rgba(138, 106, 59, .16);
  pointer-events: none;
  user-select: none;
}

.reviews__stage { position: relative; display: grid; }

.review {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .55s ease, transform .6s var(--ease-soft);
}

.review.is-current { opacity: 1; transform: none; pointer-events: auto; }

.review blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(23px, 2.8vw, 33px);
  line-height: 1.32;
  color: var(--ink);
  margin: 0 0 22px;
}

.review figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--soft);
}

.review figcaption::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--brass);
  flex-shrink: 0;
}

.reviews__ticks {
  display: flex;
  gap: 10px;
  margin-top: clamp(22px, 3vw, 32px);
}

.tick {
  flex: 1 1 0;
  min-width: 0;
  max-width: 48px;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.tick::after {
  content: '';
  width: 100%;
  height: 1px;
  background: rgba(9, 34, 63, .24);
  transition: background .3s ease, height .3s ease;
}

.tick[aria-current="true"]::after { height: 2px; background: var(--brass); }

.round-btn {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--ink);
  background: transparent;
  border: 1px solid rgba(9, 34, 63, .22);
  border-radius: 50%;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}

.round-btn:hover { background: var(--white); border-color: var(--brass); }

.counter {
  font-size: 11.5px;
  letter-spacing: 2.4px;
  color: var(--soft);
  margin-left: 4px;
}

/* --- Closing CTA band ----------------------------------------------------- */

.cta-band { position: relative; overflow: hidden; }

.cta-band > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-band__veil { position: absolute; inset: 0; background: rgba(10, 22, 38, .68); }

.cta-band__body {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(60px, 9vw, 110px) var(--gutter);
  text-align: center;
}

.cta-band h2 {
  font-size: clamp(30px, 4.4vw, 46px);
  margin: 0 0 16px;
  color: var(--on-dark);
}

.cta-band p {
  color: rgba(232, 238, 245, .86);
  font-size: 16px;
  margin: 0 auto 30px;
  max-width: 520px;
}

.cta-band__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Definition rows (terms, specs, timing) ------------------------------- */

.rows { display: grid; gap: 0; }

.row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid rgba(9, 34, 63, .14);
}

.row__k {
  font-size: 11.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--soft);
}

.row__v { font-size: 15.5px; color: var(--body); text-align: right; }

/* --- Tile grids (areas, facilities) --------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.tile { background: var(--white); padding: 26px 26px 28px; }

.tile--paper { background: var(--paper); padding: 34px 30px; }

.tile__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.tile h3 { font-weight: 600; font-size: 21px; margin: 0; }
.tile--paper h3 { font-size: 22px; margin-bottom: 8px; }

.tile__dist {
  font-size: 11px;
  color: var(--ink);
  white-space: nowrap;
  letter-spacing: .5px;
}

.tile__tag {
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--brass);
}

.tile p { color: var(--dim); font-size: 14px; margin: 10px 0 0; }
.tile--paper p { font-size: 14.5px; margin: 0; }

/* --- Dashed lists (included / extras / points) ---------------------------- */

.dash-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.dash-list li {
  display: flex;
  gap: 12px;
  font-size: 15px;
  color: var(--muted);
}

.dash-list li::before { content: '—'; color: var(--brass); flex-shrink: 0; }

.dash-list--ink li::before { color: var(--ink); }

.price-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.price-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
  color: var(--muted);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(9, 34, 63, .12);
}

.price-list span:last-child { color: var(--ink); white-space: nowrap; }

.dot-list { display: grid; gap: 0; }

.dot-list > div {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid rgba(138, 106, 59, .28);
  font-size: 15.5px;
}

.dot-list > div::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brass);
  flex-shrink: 0;
  transform: translateY(-3px);
}

/* --- Rates cards ---------------------------------------------------------- */

.rate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(36px, 5vw, 72px);
}

.rate-card { display: flex; flex-direction: column; }

.rate-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.rate-card__head h3 {
  font-size: clamp(26px, 3vw, 33px);
  color: #2E241B;
  margin: 0;
}

.rate-card__count {
  font-size: 10px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
}

.rate-card__rule {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(138, 106, 59, .4);
  margin: 16px 0 18px;
}

.rate-card__rooms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 11px;
  margin-bottom: 26px;
  font-size: 15px;
  color: #3B3128;
}

.rate-card__rooms span:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 13px;
  background: rgba(138, 106, 59, .5);
  margin-left: 11px;
  vertical-align: -2px;
}

.seasons { display: grid; gap: 11px; }

.season { display: flex; align-items: baseline; gap: 10px; }

.season__label {
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #6B5C4C;
  white-space: nowrap;
}

.season__lead {
  flex: 1;
  min-width: 14px;
  border-bottom: 1px dotted rgba(138, 106, 59, .5);
  transform: translateY(-4px);
}

.season__price {
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1;
  color: #2E241B;
  white-space: nowrap;
}

.season--peak .season__label,
.season--peak .season__price { color: var(--brass); }

.rate-card__foot {
  font-size: 11.5px;
  color: #6B5C4C;
  margin-top: 14px;
}

.rate-card__foot + .rate-card__foot { margin-top: 4px; }

.min-stay {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 20px;
  margin-top: clamp(34px, 4vw, 52px);
  padding-top: 20px;
  border-top: 1px solid rgba(138, 106, 59, .3);
}

.min-stay__label {
  font-size: 10px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--brass);
  flex-shrink: 0;
}

.min-stay__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  font-size: 13.5px;
  color: #6B5C4C;
}

.min-stay__items strong { color: #2E241B; font-weight: 500; }
.min-stay__items .peak { color: var(--brass); font-weight: 500; }

/* --- Forms ---------------------------------------------------------------- */

.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 36px;
}

.field-grid { display: grid; gap: 16px; }

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 16px;
}

.field label {
  display: block;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  border: 1px solid var(--line);
  background: var(--white);
  padding: 12px 14px;
  border-radius: 2px;
  font-size: 15px;
  color: var(--body);
}

.field textarea { resize: vertical; }

.form-sent { text-align: center; padding: 40px 10px; }

.form-sent__title {
  font-family: var(--serif);
  font-size: 30px;
  color: var(--brass);
  margin-bottom: 12px;
}

/* --- Contact page --------------------------------------------------------- */

.contact-lead {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(112px, 14vh, 150px) var(--gutter) 0;
  text-align: center;
}

.contact-lead h1 {
  font-size: clamp(40px, 6vw, 66px);
  line-height: 1.04;
  margin: 12px 0 14px;
  animation: waldenRise 1s var(--ease-out) .24s both;
}

.contact-lead .eyebrow { animation: waldenRise .9s var(--ease-out) .1s both; }

.contact-lead p {
  color: var(--muted);
  font-size: 17px;
  max-width: 620px;
  margin: 0 auto;
  animation: waldenRise 1s var(--ease-out) .4s both;
}

.contact-channels {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 34px;
}

.channel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-radius: 3px;
}

.channel span:first-child { font-family: var(--serif); font-size: 18px; }
.channel span:last-child { margin-left: auto; font-size: 12px; }

.channel--brass { background: var(--brass); color: #fff; }
.channel--brass:hover { background: var(--brass-dark); color: #fff; }
.channel--brass span:last-child { opacity: .85; }

.channel--quiet {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--body);
}
.channel--quiet:hover { border-color: var(--brass); color: var(--body); }
.channel--quiet span:last-child { color: var(--soft); }

.contact-facts {
  border-top: 1px solid var(--line);
  padding-top: 26px;
  display: grid;
  gap: 18px;
}

.fact__k {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 3px;
}

.fact__v { font-size: 15px; color: var(--muted); }

/* The map fills its frame at whatever height the frame is given. It is laid
   over the frame rather than sized by percentage, because Complianz wraps the
   iframe in a div of its own (to hold it back until marketing cookies are
   accepted), and a percentage height against that auto-height wrapper came to
   nothing: the frame grew, the map stayed at its minimum, and a grey block
   sat beneath it. The wrapper is laid over the frame too.

   div.map-panel rather than .map-panel for the wrapper: Complianz writes a
   fixed height for it into the page, as .cmplz-placeholder-1 { height: … },
   taken from the proportions of its placeholder picture, and a single class
   loaded after this sheet would otherwise win. */
.map-panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  min-height: 340px;
  background: #EDF1F6;
}

div.map-panel > *,
div.map-panel iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.map-panel iframe {
  border: 0;
  display: block;
}

/* Contact: how to reach us, how to find us and the gate on the left, the form
   and the map on the right. The last block in each column grows, so the two
   end level: the photograph on the left (or the directions, when there is no
   photograph), the map on the right. On a phone the columns dissolve and the
   blocks run in source order, reordered below to put the form second. */
.contact-grid {
  display: grid;
  gap: clamp(28px, 4vw, 40px);
}

.contact-grid__col { display: contents; }

/* The photograph crops to its box, however tall or wide the box becomes,
   and keeps the gate (left of centre, low in the frame) in view. */
.contact-photo {
  position: relative;
  min-height: 220px;
  border-radius: 6px;
  overflow: hidden;
  background: #EDF1F6;
}

.contact-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 35% 72%;
}

@media (max-width: 767px) {
  .contact-grid__reach { order: 1; }
  .contact-grid .form-card { order: 2; }
  .contact-grid .find-panel { order: 3; }
  .contact-grid .contact-photo { order: 4; }
  .contact-grid .map-panel { order: 5; }
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 5vw, 64px);
  }

  .contact-grid__col {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 3vw, 40px);
  }

  .contact-grid .contact-photo,
  .contact-grid .find-panel:last-child,
  .contact-grid .map-panel { flex: 1 1 auto; }

  /* The form outweighs the details beside it, so a lower floor here keeps
     the map from pushing its column further past the other. */
  .contact-grid .map-panel { min-height: 260px; }
}

.find-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(26px, 3.5vw, 40px);
}

/* --- Gallery -------------------------------------------------------------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  grid-auto-rows: clamp(150px, 20vw, 215px);
  gap: clamp(8px, 1vw, 14px);
}

.gallery-tile {
  padding: 0;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper-cool);
  cursor: zoom-in;
  display: block;
  width: 100%;
  height: 100%;
}

/* The filter buttons set the hidden attribute on the tiles they rule out, but
   an unconditional `display: block` above is an author style, and author
   styles always beat the browser's own [hidden] rule regardless of
   specificity — without this, a hidden tile stayed exactly as visible as
   before, which is why the filter pills looked like they did nothing. */
.gallery-tile[hidden] { display: none; }

.gallery-tile--tall { grid-row: span 2; }

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.82) saturate(.93);
  transition: transform .55s var(--ease-soft), filter .3s ease;
}

.gallery-tile:hover img,
.gallery-tile:focus-visible img {
  transform: scale(1.06);
  filter: brightness(.92) saturate(1);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(6, 15, 26, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 4vw, 48px);
  animation: waldenFadeIn .22s ease both;
  cursor: zoom-out;
}

.lightbox[hidden] { display: none; }

.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 3px;
}

.lightbox__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(16px, 3vh, 34px);
  text-align: center;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(232, 238, 245, .66);
  pointer-events: none;
}

.lightbox__btn {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(246, 249, 252, .28);
  background: rgba(6, 15, 26, .5);
  color: var(--on-dark);
  font-size: 20px;
  cursor: pointer;
}

.lightbox__btn--prev { left: clamp(8px, 2vw, 26px); top: 50%; transform: translateY(-50%); }
.lightbox__btn--next { right: clamp(8px, 2vw, 26px); top: 50%; transform: translateY(-50%); }

.lightbox__btn--close {
  top: clamp(12px, 2vw, 26px);
  right: clamp(12px, 2vw, 26px);
  width: 48px;
  height: 48px;
  font-size: 15px;
}

/* --- Room detail ---------------------------------------------------------- */

.crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: 18px;
}

.room-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.room-head h1 { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.06; margin: 0 0 8px; }

.room-head__meta {
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink);
}

.room-hero {
  margin: 0;
  border-radius: 5px;
  overflow: hidden;
  background: var(--paper-cool);
}

/* 2/1 keeps the hero near 580px on a 1240px page — tall enough to open the
   room, short enough to leave the thumbnail strip above the fold. */
.room-hero img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center var(--room-focus, 75%);
  filter: brightness(.82) saturate(.93);
}

.thumbs { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }

.thumb {
  width: clamp(70px, 12vw, 112px);
  aspect-ratio: 4 / 3;
  padding: 0;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: var(--paper-cool);
  opacity: .78;
  transition: opacity .2s ease, border-color .2s ease;
}

.thumb[aria-current="true"] { border: 2px solid var(--brass); opacity: 1; }

.thumb img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.82) saturate(.93); }

.specs {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: clamp(24px, 3vw, 32px);
  position: sticky;
  top: 96px;
}

.specs .row { border-top: 0; border-bottom: 1px solid var(--line); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 24px;
}

.feature-grid > div {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 15px;
  color: var(--muted);
}

.feature-grid > div::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brass);
  flex-shrink: 0;
}

/* What a night costs, under the features. Built from the same parts as .stat —
   the panel fill, the hairline, the brass serif a figure is set in — because a
   price is the one thing on a room page a guest goes looking for, and it should
   not have to be found in a paragraph. */
.room-rate {
  margin-top: clamp(26px, 3vw, 34px);
  padding: clamp(18px, 2.4vw, 26px) clamp(16px, 2vw, 24px);
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 3px;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(21px, 2.4vw, 26px);
  line-height: 1.3;
  color: var(--brass);
  text-wrap: pretty;
}

.sub-head {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 34px 0 16px;
}

/* --- Navigation ----------------------------------------------------------- */

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Held above the scrim (110) and the drawer (120) at all times. z-index is
     not an interpolatable property, so letting it change with .is-open meant
     the bar dropped to 100 the instant the drawer began closing and faded
     back in from *behind* a scrim that was still 55% navy and blurred —
     reading as muddy, then snapping clear the moment the scrim gave up its
     visibility. Nothing else on the page sits between 100 and 130, so it
     costs nothing to simply stay here. */
  z-index: 130;
  background: transparent;
  border-bottom: 1px solid transparent;
  /* The way back in. The delay holds the bar off until the drawer panel has
     largely cleared the space it is about to occupy, so the two never appear
     to cross; it then settles down into place rather than blinking on. */
  transition: background .4s ease, box-shadow .4s ease, border-color .4s ease,
              opacity .38s var(--ease-soft) .2s,
              transform .38s var(--ease-soft) .2s,
              visibility .38s ease .2s;
}

.nav-bar.is-glass {
  background: rgba(5, 25, 47, .5);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: rgba(244, 241, 234, .14);
  box-shadow: 0 1px 24px rgba(3, 14, 28, .22);
}

/* Pages that open on white rather than on a photograph */
.nav-bar.is-on-light { --nav-ink: var(--ink); }

.nav-bar.is-on-light.is-glass {
  background: rgba(255, 255, 255, .78);
  border-bottom-color: rgba(9, 34, 63, .10);
  box-shadow: 0 1px 24px rgba(9, 34, 63, .07);
}

/* With the drawer open the bar would otherwise sit on top of it — the brand,
   the telephone number and the Book button overlapping the drawer's own
   ribbon and stamp. The drawer carries every way back out on its own (the
   "Back to the page" button, the ribbon, the scrim, and Escape), so the bar
   steps aside entirely rather than competing with it. */
.nav-bar.is-open {
  --nav-ink: var(--cream);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  /* The way out. No delay, and quicker than the drawer panel's .52s slide,
     so the bar has lifted clear before the panel arrives over where it sat —
     the previous .32s fade ran on plain `ease` against the drawer's
     `--ease-soft`, which is what made the two look out of step. */
  transition: opacity .24s var(--ease-soft),
              transform .24s var(--ease-soft),
              visibility .24s ease;
}

.nav-bar__inner {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px var(--gutter);
}

.nav-brand {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  flex-shrink: 0;
}

.nav-brand__name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 3.4px;
  color: var(--nav-ink, var(--cream));
  white-space: nowrap;
  transition: color .4s ease;
}

.nav-brand__sub {
  font-size: 9px;
  letter-spacing: 2.6px;
  margin-top: 5px;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(244, 241, 234, .7);
  transition: color .4s ease;
}

.nav-bar.is-on-light:not(.is-open) .nav-brand__sub { color: #96A3B8; }

.nav-bar__side {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 26px);
  flex-shrink: 0;
}

.nav-tel {
  font-size: 11.5px;
  letter-spacing: 1.6px;
  color: var(--nav-ink, var(--cream));
  opacity: .72;
  white-space: nowrap;
  transition: color .4s ease, opacity .25s ease;
}

.nav-tel:hover { opacity: 1; color: var(--nav-ink, var(--cream)); }

.nav-book {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  background: var(--brass);
  padding: 12px 24px;
  white-space: nowrap;
  border-radius: 2px;
  transition: background .3s ease;
}

.nav-book:hover { background: var(--brass-dark); color: #fff; }

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 11px;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 -10px 0 0;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}

.nav-toggle__label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--nav-ink, var(--cream));
  transition: color .4s ease;
}

.nav-toggle__lines { position: relative; width: 26px; height: 14px; flex-shrink: 0; }

.nav-toggle__lines span {
  position: absolute;
  left: 0;
  height: 1.5px;
  background: var(--nav-ink, var(--cream));
  transition: transform .4s var(--ease-soft), width .4s ease, top .4s ease, background .4s ease;
}

.nav-toggle__lines span:first-child { top: 2px; width: 26px; }
.nav-toggle__lines span:last-child  { top: 11px; width: 17px; }

.nav-bar.is-open .nav-toggle__lines span:first-child { top: 6px; transform: rotate(45deg); }
.nav-bar.is-open .nav-toggle__lines span:last-child  { top: 6px; width: 26px; transform: rotate(-45deg); }

/* Scrim & drawer */

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(5, 25, 47, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s ease, visibility .45s ease;
}

.nav-scrim.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  visibility: hidden;
  pointer-events: none;
  transition: visibility .55s ease;
}

.drawer.is-open { visibility: visible; pointer-events: auto; }

.drawer__ribbon {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transition: opacity .55s ease;
}

.drawer.is-open .drawer__ribbon { opacity: 1; }

.drawer__ribbon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .7s ease, transform 1.4s var(--ease-soft);
}

.drawer__ribbon img.is-showing { opacity: 1; transform: scale(1); }

.drawer__ribbon-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(5, 25, 47, .88) 0%,
    rgba(5, 25, 47, .10) 46%,
    rgba(5, 25, 47, .34) 100%);
}

.drawer__stamp {
  position: absolute;
  left: clamp(26px, 4vw, 60px);
  top: clamp(28px, 4vh, 46px);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .7);
  white-space: nowrap;
}

.drawer__caption-wrap {
  position: absolute;
  left: clamp(26px, 4vw, 60px);
  right: clamp(26px, 4vw, 60px);
  bottom: clamp(30px, 5vh, 58px);
  max-width: 520px;
}

.drawer__caption-rule {
  display: block;
  width: 30px;
  height: 1px;
  background: rgba(212, 178, 124, .85);
  margin-bottom: 18px;
}

.drawer__caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.26;
  color: var(--cream);
  white-space: pre-line;
  display: block;
}

.drawer__col {
  width: min(422px, 90vw);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 100% at 100% 0%, #0d2b46 0%, var(--ink-deep) 62%);
  box-shadow: -24px 0 80px rgba(3, 14, 28, .42);
  padding: clamp(56px, 7.6vh, 70px) clamp(26px, 3.4vw, 44px) clamp(16px, 3vh, 30px);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  transform: translateX(102%);
  transition: transform .52s var(--ease-soft);
}

.drawer.is-open .drawer__col { transform: translateX(0); }

.drawer__back {
  align-self: flex-start;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .6);
  background: transparent;
  border: 0;
  min-height: 44px;
  padding: 6px 14px 4px 0;
  margin: 0 0 clamp(0px, .4vh, 6px) -2px;
  cursor: pointer;
  opacity: 0;
  transition: color .25s ease, opacity .5s ease .08s;
}

.drawer.is-open .drawer__back { opacity: 1; }
.drawer__back:hover { color: var(--cream); }

.drawer__nav {
  display: grid;
  align-content: start;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.drawer__nav::-webkit-scrollbar { display: none; }

.drawer__row + .drawer__row { border-top: 1px solid rgba(244, 241, 234, .11); }

.drawer__row {
  opacity: 0;
  transform: translateX(18px);
  transition: opacity .5s ease, transform .6s var(--ease-soft);
}

.drawer.is-open .drawer__row { opacity: 1; transform: none; }

.drawer__row-inner { display: flex; align-items: center; gap: 14px; }

.drawer__link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: clamp(6px, 1.15vh, 12px) 0;
  opacity: .88;
  transition: opacity .25s ease;
}

.drawer__link:hover { opacity: 1; }

.drawer__thumb {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
  display: none;
}

.drawer__label {
  display: block;
  font-family: var(--serif);
  font-size: clamp(20px, 2.8vh, 27px);
  line-height: 1.12;
  color: var(--cream);
  transition: color .3s ease;
}

.drawer__link:hover .drawer__label,
.drawer__row.is-lit .drawer__label { color: var(--brass-lit); }

.drawer__caption-sm {
  display: block;
  font-size: clamp(9.5px, 1.2vh, 11px);
  letter-spacing: .4px;
  color: rgba(244, 241, 234, .48);
  margin-top: 1px;
}

.drawer__chip {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  color: var(--cream);
  background: transparent;
  border: 1px solid rgba(244, 241, 234, .3);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.drawer__chip[aria-expanded="true"] {
  color: var(--ink-deep);
  background: var(--brass-lit);
  border-color: var(--brass-lit);
}

.drawer__rooms {
  flex-shrink: 1;
  min-height: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .55s var(--ease-soft), opacity .4s ease;
}

.drawer__rooms.is-open {
  max-height: min(38vh, 440px);
  opacity: 1;
  overflow-y: auto;
}

.drawer__rooms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 2px 0 18px;
}

.drawer__room { display: block; color: var(--cream); }
.drawer__room:hover { color: var(--brass-lit); }

.drawer__room img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
  margin-bottom: 8px;
  animation: waldenKen 16s ease-in-out infinite alternate;
  will-change: transform;
}

.drawer__room-name {
  display: block;
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.22;
  color: inherit;
}

.drawer__room-meta {
  display: block;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .5);
  margin-top: 3px;
}

.drawer__foot {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: clamp(14px, 2.6vh, 36px);
  border-top: 1px solid rgba(244, 241, 234, .11);
  opacity: 0;
  transition: opacity .5s ease .42s;
}

.drawer.is-open .drawer__foot { opacity: 1; }

.drawer__contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: clamp(12px, 2vh, 20px);
  font-size: 12.5px;
  color: rgba(244, 241, 234, .72);
}

.drawer__contacts a { color: rgba(244, 241, 234, .72); }
.drawer__contacts a:hover { color: var(--cream); }
.drawer__contacts .sep { color: rgba(244, 241, 234, .3); }

.drawer__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.drawer__cta {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(44px, 6vh, 52px);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--ink-deep);
  background: var(--cream);
  border-radius: 2px;
}

.drawer__cta:hover { background: #fff; color: var(--ink-deep); }

.drawer__wa {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(44px, 6vh, 52px);
  padding: 0 18px;
  font-size: 11.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--cream);
  border: 1px solid rgba(244, 241, 234, .32);
  border-radius: 2px;
}

.drawer__wa:hover { border-color: var(--cream); color: var(--cream); }

.drawer__social { display: flex; gap: 20px; margin-top: clamp(10px, 1.8vh, 20px); }

.drawer__social a {
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .55);
}

.drawer__social a:hover { color: var(--cream); }

/* Narrow: the drawer takes the whole screen and the ribbon steps aside */
@media (max-width: 859px) {
  .nav-bar__inner { padding: 13px 18px; }
  .nav-brand__name { font-size: 16px; letter-spacing: 2px; }
  .nav-brand__sub { display: none; }
  .nav-tel { display: none; }
  .nav-book { font-size: 11px; padding: 11px 15px; }
  .nav-toggle__label { display: none; }

  .drawer__ribbon { display: none; }
  .drawer__col {
    width: 100%;
    padding: clamp(48px, 6.4vh, 60px) 20px clamp(14px, 2.4vh, 24px);
  }
  .drawer__thumb { display: block; }
  .drawer__link { padding: clamp(5px, .85vh, 10px) 0; }
  .drawer__label { font-size: clamp(18px, 2.5vh, 24px); }
  .drawer__back { padding: 8px 20px 6px 0; }
}

/* --- Contact FAB ---------------------------------------------------------- */

.fab-wrap {
  position: fixed;
  right: clamp(14px, 2.5vw, 30px);
  bottom: clamp(14px, 2.5vw, 30px);
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.fab-panel {
  width: min(84vw, 300px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 18px 44px rgba(9, 34, 63, .20);
  overflow: hidden;
  animation: waldenFabIn .28s ease both;
}

.fab-panel[hidden] { display: none; }

.fab-panel__head { background: var(--ink); padding: 18px 20px 16px; }

.fab-panel__title { font-family: var(--serif); font-size: 20px; color: #fff; line-height: 1.2; }

.fab-panel__sub {
  font-size: 11.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(232, 238, 245, .6);
  margin-top: 5px;
}

.fab-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 20px;
  border-bottom: 1px solid #EDF1F6;
  color: var(--body);
  min-height: 56px;
}

.fab-row:hover { background: var(--paper); color: var(--body); }

.fab-row__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.fab-row__text { display: grid; gap: 1px; }
.fab-row__text b { font-size: 15px; font-weight: 500; }
.fab-row__text span { font-size: 12px; color: var(--soft); }

.fab-row--book {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  background: var(--paper);
  color: var(--brass);
  min-height: 52px;
  border-bottom: 0;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.fab-row--book:hover { background: #EDF1F6; color: var(--brass); }

.fab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--brass);
  color: #fff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  padding: 0 24px;
  height: 52px;
  min-width: 52px;
  box-shadow: 0 10px 26px rgba(9, 34, 63, .28);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .3s ease;
}

.fab[aria-expanded="true"] { background: var(--ink); }

/* --- Footer --------------------------------------------------------------- */

/* The bottom padding clears the floating Contact button (.fab-wrap: its
   offset from the bottom, its 52px height, and a gap), so at the foot of the
   page it no longer sits over the legal line and the links at its end. */
.site-foot {
  background: var(--ink);
  color: var(--on-dark-3);
  padding: clamp(44px, 6vw, 60px) var(--gutter) calc(clamp(14px, 2.5vw, 30px) + 52px + 22px);
}

.site-foot__top {
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
  align-items: flex-end;
}

.site-foot__brand {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: 3px;
  color: #fff;
}

.site-foot__sub {
  font-size: 11.5px;
  letter-spacing: 2px;
  margin-top: 6px;
  color: var(--soft);
}

.site-foot__links { display: flex; gap: 22px; flex-wrap: wrap; }

.site-foot__links a {
  font-size: 13px;
  color: var(--on-dark-3);
  display: inline-block;
  padding: 11px 0;
}

.site-foot__links a:hover { color: #fff; }

.site-foot__legal {
  max-width: var(--measure);
  margin: 36px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 12px;
  color: #96A3B8;
}

.site-foot__legal a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.site-foot__legal a:hover { color: #fff; }

/* ==========================================================================
   The Villa — the one page that runs warm rather than cool.
   Same structure, a brown-and-cream reading of the same palette.
   ========================================================================== */

body[data-page="villa"] {
  --ink: #8A6A3B;
  --paper: #E7D9C0;
  --paper-cool: #EFE5D4;
  --line: rgba(138, 106, 59, .28);
  --body: #3B3128;
  --muted: #4B3F33;
  --soft: #6B5C4C;
  --on-dark: #F5EBD9;
  --on-dark-2: rgba(239, 226, 204, .84);
  --brass-lit: #C8A263;

  background: #EFE5D4;
  color: #3B3128;
  line-height: 1.74;
}

body[data-page="villa"] a:hover { color: #241A12; }
body[data-page="villa"] ::selection { background: var(--brass); color: #F3E9D8; }

.villa-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #241A12;
}

.villa-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 56%;
  filter: saturate(.86) sepia(.22) brightness(.86);
  animation: waldenKen 30s ease-in-out infinite alternate;
  will-change: transform;
}

.villa-hero__veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 40%,
    rgba(36, 26, 18, .34) 0%,
    rgba(30, 21, 14, .78) 62%,
    rgba(22, 15, 10, .94) 100%);
}

.villa-hero__body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1020px;
  padding: clamp(120px, 17vh, 178px) clamp(20px, 5vw, 48px) clamp(56px, 9vh, 92px);
  text-align: center;
  animation: waldenFadeIn 1.2s ease both;
}

.villa-hero__frame {
  border: 1px solid rgba(185, 144, 85, .45);
  padding: clamp(34px, 5.2vw, 66px) clamp(20px, 4vw, 56px);
  background: rgba(36, 26, 18, .22);
}

.villa-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 26px;
  font-size: 10.5px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #C8A263;
}

.villa-rule::before,
.villa-rule::after {
  content: '';
  width: 40px;
  height: 1px;
  background: rgba(185, 144, 85, .8);
}

.villa-hero h1 {
  font-size: clamp(42px, 6.8vw, 88px);
  line-height: 1.02;
  color: #F5EBD9;
  margin: 0 0 22px;
  text-wrap: balance;
}

.villa-hero__lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 2.3vw, 28px);
  line-height: 1.45;
  color: rgba(240, 228, 208, .9);
  margin: 0 auto 32px;
  max-width: 32ch;
}

.villa-hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 9px 18px;
  padding-top: 26px;
  border-top: 1px solid rgba(185, 144, 85, .34);
  font-size: 10.5px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(240, 228, 208, .74);
}

.villa-hero__facts .sep { color: #B99055; }

.villa-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #F5EBD9;
  border: 1px solid rgba(240, 228, 208, .5);
  padding: 18px 34px;
  transition: background .3s ease, border-color .3s ease;
}

.villa-hero__cta:hover {
  background: rgba(240, 228, 208, .14);
  border-color: #C8A263;
  color: #F5EBD9;
}

/* Half text, half photograph, edge to edge */
.villa-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 0;
}

.villa-split--thirds { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.villa-split img {
  width: 100%;
  height: 100%;
  min-height: clamp(280px, 44vw, 620px);
  object-fit: cover;
  filter: saturate(.9) sepia(.14) brightness(.94);
}

.villa-split--dark img { filter: saturate(.86) sepia(.2) brightness(.84); min-height: clamp(240px, 34vw, 520px); }

/* Two photographs carrying a band on their own: wider columns, and a little
   more height, since no written column is setting the depth. Declared after
   --dark, which sets the same property at the same specificity. */
.villa-split--pair { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.villa-split--pair img { min-height: clamp(300px, 40vw, 600px); }

.villa-pane {
  padding: clamp(44px, 6.5vw, 96px) clamp(24px, 5vw, 84px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.villa-pane--dark { color: #EFE2CC; padding: clamp(44px, 6vw, 88px) clamp(24px, 4.4vw, 66px); }

.villa-eyebrow {
  font-size: 10.5px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--brass);
}

.villa-eyebrow--lit { color: #C8A263; }

.villa-pane h2 {
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.08;
  margin: 16px 0 22px;
  color: #2E241B;
}

.villa-pane--dark h2 { color: #F5EBD9; }

.villa-pane p { font-size: 16.5px; color: var(--muted); }
.villa-pane--dark p { font-size: 16px; color: rgba(239, 226, 204, .84); }

/* The last paragraph of a pane no longer carries an inline zero margin: its
   text now comes from one field, and the rule belongs here instead. */
.villa-pane p:last-child { margin-bottom: 0; }

.villa-band { padding: clamp(46px, 6.5vw, 92px) clamp(24px, 5vw, 84px); }

.villa-rows { display: grid; gap: 0; }

.villa-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-top: 1px solid rgba(200, 162, 99, .28);
  font-size: 14px;
  color: rgba(239, 226, 204, .72);
}

.villa-row:last-child { border-bottom: 1px solid rgba(200, 162, 99, .28); }

.villa-row span:last-child {
  font-family: var(--serif);
  font-size: 19px;
  color: #F5EBD9;
  text-align: right;
}

/* The light version, used on the timing panel */
.villa-rows--light .villa-row {
  border-top-color: rgba(138, 106, 59, .28);
  font-size: 14.5px;
  color: var(--soft);
}

.villa-rows--light .villa-row:last-child { border-bottom-color: rgba(138, 106, 59, .28); }

.villa-rows--light .villa-row span:last-child {
  font-family: var(--sans);
  font-size: 14.5px;
  color: #2E241B;
}

.villa-bed-table { width: 100%; }

.villa-bed-head,
.villa-bed-row {
  display: grid;
  grid-template-columns: 1.7fr .6fr 1.2fr .9fr;
  gap: 8px 20px;
}

.villa-bed-head {
  padding: 12px 0;
  border-bottom: 1px solid rgba(138, 106, 59, .32);
  font-size: 10px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--brass);
}

.villa-bed-row {
  padding: 16px 0;
  border-bottom: 1px solid rgba(138, 106, 59, .18);
  align-items: baseline;
}

.villa-bed-row span:first-child { font-family: var(--serif); font-size: 21px; color: #2E241B; }
.villa-bed-row span:not(:first-child) { font-size: 14px; color: #5A4C3E; }
.villa-bed-head span:last-child,
.villa-bed-row span:last-child { text-align: right; }

.villa-numbered { display: grid; gap: 0; }

.villa-numbered > div {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid rgba(200, 162, 99, .26);
}

.villa-numbered__n { font-family: var(--serif); font-size: 15px; letter-spacing: 1px; color: #B99055; }
.villa-numbered h3 { font-weight: 500; font-size: 22px; margin: 0 0 5px; color: #F5EBD9; }
.villa-numbered p { font-size: 14.5px; color: rgba(239, 226, 204, .76); margin: 0; }

.villa-cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 0 clamp(28px, 4vw, 60px);
}

.villa-case { padding: 20px 0; border-top: 1px solid rgba(138, 106, 59, .28); }
.villa-case__n { font-family: var(--serif); font-size: 14px; letter-spacing: 2px; color: var(--brass); }
.villa-case h3 { font-weight: 600; font-size: 23px; margin: 6px 0 7px; color: #2E241B; }
.villa-case p { font-size: 14.5px; color: #5A4C3E; margin: 0; }

/* Access: the written part beside a photograph, the facts beneath both. The
   photograph fills its column to the depth of the row, whatever its shape,
   and drops below the text once there is no room for two columns. */
.villa-access-intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(28px, 5vw, 72px);
  margin-bottom: clamp(30px, 4vw, 48px);
}

.villa-access-intro img {
  width: 100%;
  height: 100%;
  min-height: clamp(240px, 30vw, 440px);
  object-fit: cover;
  filter: saturate(.9) sepia(.14) brightness(.94);
}

.villa-channels { display: grid; gap: 0; max-width: 420px; }

.villa-channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 0;
  border-top: 1px solid rgba(200, 162, 99, .3);
  color: #F5EBD9;
}

.villa-channel:last-child { border-bottom: 1px solid rgba(200, 162, 99, .3); }
.villa-channel:hover { color: #C8A263; }
.villa-channel span:first-child { font-family: var(--serif); font-size: 20px; }
.villa-channel span:last-child { font-size: 12px; letter-spacing: 1.4px; color: rgba(239, 226, 204, .6); }

.villa-form {
  background: #E7D9C0;
  padding: clamp(34px, 4.6vw, 66px) clamp(24px, 4vw, 60px);
  color: #3B3128;
}

.villa-form h2 { font-family: var(--serif); font-size: 26px; color: #2E241B; font-weight: 400; }

.villa-form .field label { color: var(--brass); font-size: 10px; letter-spacing: 2px; margin-bottom: 7px; }

.villa-form .field input,
.villa-form .field select,
.villa-form .field textarea {
  border: 1px solid rgba(138, 106, 59, .32);
  background: #F6EFE2;
  padding: 13px 14px;
  border-radius: 0;
  color: #3B3128;
}

.villa-form button[type="submit"] {
  font-family: var(--sans);
  background: var(--brass);
  color: #F6EFE2;
  border: none;
  padding: 17px;
  font-size: 12px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease;
}

.villa-form button[type="submit"]:hover { background: var(--brass-dark); }

.villa-closer { position: relative; overflow: hidden; }

.villa-closer > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.9) sepia(.2) brightness(.88);
}

.villa-closer__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(36, 26, 18, .62), rgba(36, 26, 18, .78));
}

.villa-closer__body {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(58px, 8vw, 104px) clamp(24px, 5vw, 40px);
  text-align: center;
}

.villa-closer h2 { font-size: clamp(29px, 3.8vw, 44px); margin: 0 0 14px; color: #F5EBD9; line-height: 1.1; }
.villa-closer p { font-size: 16px; color: rgba(240, 228, 208, .84); margin: 0 auto 28px; max-width: 46ch; }

.villa-closer__cta {
  display: inline-block;
  font-size: 11.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #F5EBD9;
  border: 1px solid rgba(240, 228, 208, .5);
  padding: 17px 32px;
  transition: background .3s ease;
}

.villa-closer__cta:hover { background: rgba(240, 228, 208, .14); color: #F5EBD9; }

body[data-page="villa"] .site-foot { background: #1C140E; color: #C0AF98; }
body[data-page="villa"] .site-foot__brand { color: #F5EBD9; }
body[data-page="villa"] .site-foot__sub,
body[data-page="villa"] .site-foot__legal { color: #9A8A74; }
body[data-page="villa"] .site-foot__links a { color: #C0AF98; }
body[data-page="villa"] .site-foot__links a:hover { color: #F5EBD9; }
body[data-page="villa"] .site-foot__legal { border-top-color: rgba(200, 162, 99, .22); }

/* --- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] { opacity: 1 !important; transform: none !important; }
}


/* --- The enquiry forms ---------------------------------------------------- */

/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields they can tell are hidden, and the point is that they fill it in. */
.form-guard {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  margin: 12px 0 0;
  padding: 11px 14px;
  border-left: 3px solid #9C4E1B;
  background: rgba(156, 78, 27, .07);
  color: #7A3D15;
  font-size: 14px;
  line-height: 1.5;
}

.form-error[hidden] { display: none; }

/* The villa's form sits on a warm ground, where the plain red reads wrong. */
.villa-form .form-error {
  border-left-color: #8A6A3B;
  background: rgba(138, 106, 59, .1);
  color: #6B4A22;
}

/* A submit button mid-send. */
form[data-walden-form] button[type="submit"]:disabled {
  opacity: .65;
  cursor: progress;
}