/* Fonts are served from this site, not from Google: under German privacy law
   (LG München I, 3 O 17493/20) loading Google Fonts passes the visitor's IP to
   Google without consent. Files: Fontsource builds, SIL Open Font License. */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/cormorant-garamond-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/cormorant-garamond-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/jost-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/jost-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/jost-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/jost-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/noto-sans-thai-thai-400-normal.woff2') format('woff2'); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/noto-sans-thai-thai-500-normal.woff2') format('woff2'); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: 'Noto Serif Thai'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/noto-serif-thai-thai-400-normal.woff2') format('woff2'); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: 'Noto Serif Thai'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/noto-serif-thai-thai-500-normal.woff2') format('woff2'); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }


/* ==== Design tokens ============================================= */
.site {
  --paper:  #faf7f1;
  --sand:   #ede2d1;
  --ink:    #342f29;
  --muted:  #766b5e;
  --line:   #d6c9b6;
  --button: #cbb18b;
  --light:  #fffaf3;

  /* both measured in site.js once the header has laid out */
  --reservation-height: 112px;
  --opening-height: 250px;

  width: 100%;
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
  font: 14px/1.75 'Jost', Arial, sans-serif;
}
html { background: #faf7f1; scroll-behavior: auto }
body { margin: 0 }

/* ==== Base / reset ============================================== */
.site * { box-sizing: border-box }
.site [hidden] { display: none!important }
.site button { font: inherit; color: inherit; border: 0; background: none }
.site input { font: inherit; color: inherit }
.site select { font: inherit; color: inherit }
.site a { color: inherit; text-underline-offset: 5px; overflow-wrap: anywhere }
/* width/height attributes are on every <img> for layout stability; height:auto
   lets aspect-ratio and the fixed-height rules below take over again */
.site img { max-width: 100%; height: auto; display: block }

/* ==== Typography ================================================ */
.site h1 {
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-weight: 400;
  line-height: 1.15;
  font-size: 43px;
  margin: 0 0 24px;
}
.site h2 {
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-weight: 400;
  line-height: 1.15;
  font-size: 38px;
  margin: 0 0 24px;
}
.site h3 {
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-weight: 400;
  line-height: 1.15;
  font-size: 28px;
  margin: 20px 0 12px;
}
.site p { margin: 0 0 19px }
.site .eyebrow {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

/* ==== Masthead & brand ========================================== */
.site .masthead {
  display: grid;
  grid-template-columns: 1fr 430px 1fr;
  align-items: center;
  gap: 24px;
  padding: 6px 36px 0;
  justify-content: space-between;
  position: relative;
  z-index: 5;
  background: transparent;
  color: #fffaf3;
}
.site .brand {
  display: block;
  align-items: center;
  gap: 10px;
  width: 430px;
  min-width: 0;
  background: transparent;
  border-radius: 0;
  padding: 0 12px;
}
.site .brand img { width: 40px; height: 40px; object-fit: contain }
.site .brand span {
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-size: 26px;
  letter-spacing: .055em;
}
.site .language { font-size: 11px; letter-spacing: .08em }
.site .language a { text-decoration: none; opacity: .72 }
.site .language a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px }
.site .language [aria-current] { font-weight: 500 }
.site .language .lang-soon { opacity: .35; cursor: default }
.site .reviews { justify-self: end; display: flex; align-items: center; gap: 8px; font-size: 11px }
.site .reviews svg { width: 20px }
/* the wordmark keeps its own 3.46:1 proportions - contain, never crop */
.site .brand .original-brand {
  display: block;
  width: 100%;
  height: auto;
  /* the wordmark is dark on transparent and sits over the hero frame */
  filter: drop-shadow(0 0 3px rgba(255,250,243,.85)) drop-shadow(0 2px 6px rgba(0,0,0,.3));
}
/* strapline lives inside the wordmark artwork, so the text node stays off */
.site .brand-tagline { display: none }
.site .masthead-location {
  justify-self: end;
  color: #fffaf3;
  font-size: 11px;
  letter-spacing: .06em;
}
/* over the hero the rating rides on the video itself; once the bar pins to the
   top it lands on paper and the colours flip back (see .is-pinned below) */
.site .property-strip.review-band {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  min-height: 28px;
  padding: 2px 36px;
  background: none;
  color: var(--light);
  border-bottom: 0;
  text-shadow: 0 1px 5px rgba(0,0,0,.6);
}
.site .review-brand { font-size: 12px; font-weight: 500; color: inherit }
.site .review-rating { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap }
.site .review-stars {
  color: #f2bd5c;                 /* lifted for the video behind it */
  font-size: 20px;
  letter-spacing: 2px;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.site .review-score {
  color: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  opacity: 1;
}
.site .review-count {
  justify-self: end;
  color: inherit;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ==== Primary navigation ======================================== */
.site nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 28px;
  border-top: 0;
  border-bottom: 1px solid #fffaf34d;
  padding: 0 20px;
  position: relative;
  z-index: 5;
  color: #fffaf3;
  background: transparent;
}
.site nav a { padding: 5px 0; font-size: 12px; text-decoration: none; text-shadow: 0 1px 6px #0008 }
.site nav a[aria-current=page] { box-shadow: inset 0 -2px #fffaf3 }
.site .mobile-nav { display: none }

/* ==== Reservation bar =========================================== */
/* over the hero this detaches into a card with air around it; pinned to the top
   it spreads back into a full-width bar */
.site .booking {
  display: grid;
  grid-template-columns: 1fr 1fr .8fr auto;
  gap: 24px;
  align-items: center;
  position: static;
  top: 0;
  z-index: 20;
  width: calc(100% - 72px);
  margin: 6px 36px 0;
  padding: 10px 24px;
  background: rgba(250,247,241,.94);
  color: var(--ink);
  box-shadow: 0 10px 34px rgba(0,0,0,.28);
  transition: width .25s ease, margin .25s ease, box-shadow .25s ease;
}
.site .booking label {
  display: grid;
  gap: 0;
  min-width: 0;
  padding-right: 16px;
  border-right: 1px solid var(--line);
}
.site .booking label span { font-size: 10px; text-transform: uppercase; letter-spacing: .14em }
.site .booking input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  font-size: 14px;
  min-height: 30px;
}
.site .booking select {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  font-size: 14px;
  min-height: 30px;
}
.site .booking .enquire {
  background: var(--ink);
  color: var(--paper);
  padding: 11px 22px;
  font-size: 12px;
  letter-spacing: .025em;
}
.site .booking-toggle { display: none }
.site .booking-status { margin: 0; padding: 14px 30px; background: var(--sand); font-size: 12px }
.site .sticky-reservation {
  position: sticky;
  top: 0;
  z-index: 30;
  background: transparent;
  box-shadow: 0 4px 12px #342f2910;
}
.site .property-strip {
  min-height: 37px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 5px 36px;
  border-bottom: 1px solid var(--line);
  background: rgba(250,247,241,.92);
}
.site .property-name {
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-size: 21px;
  line-height: 1.2;
}
.site .property-links { display: flex; align-items: center; gap: 22px; font-size: 11px }
.site .property-links button { padding: 3px 0 }
.site .sticky-reservation.is-pinned .property-strip { background: var(--paper) }
.site .sticky-reservation.is-pinned .review-stars { color: #98713e; text-shadow: none }
.site .sticky-reservation.is-pinned .property-strip.review-band {
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid #cfbda2;
  text-shadow: none;
}
.site .sticky-reservation.is-pinned .booking {
  width: 100%;
  margin: 0;
  padding: 10px 36px;
  background: var(--sand);
  box-shadow: none;
}
.site .booking-status:not([hidden]) {
  position: fixed;
  z-index: 40;
  bottom: 16px;
  left: 16px;
  right: 16px;
  max-width: 640px;
  margin: auto;
  border: 1px solid var(--line);
  box-shadow: 0 4px 24px #342f2926;
}

/* ==== Hero ====================================================== */
.site .hero {
  position: relative;
  margin: 0;
  aspect-ratio: auto;
  background: var(--sand);
  width: 100%;
  height: 100svh;
  min-height: calc(var(--opening-height) + 180px);
}
.site .hero video { width: 100%; height: 100%; object-fit: cover; display: block }
.site .hero>img { width: 100%; height: 100%; object-fit: cover; display: block }
.site .hero-caption {
  position: absolute;
  left: 36px;
  bottom: 32px;
  color: #fffaf3;
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  background: #342f2966;
  padding: 7px 11px;
  z-index: 2;
}
.site .video-toggle {
  position: absolute;
  right: 36px;
  bottom: 32px;
  background: var(--paper);
  color: var(--ink);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 17px;
  z-index: 2;
}
.site .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,rgba(18,27,22,.6),transparent 42%,transparent 68%,rgba(18,27,22,.24));
}

/* ==== Page sections ============================================= */
.site .introduction { padding: 64px 55px 32px; text-align: center; max-width: 820px; margin: auto }
.site .introduction p { color: var(--muted); line-height: 1.9 }
.site .chapter { padding: 48px 48px 56px }
.site .chapter-head { max-width: 710px; margin: 0 auto 34px; text-align: center }
.site .chapter-head p { color: var(--muted) }
.site .rule { height: 1px; background: var(--line); width: 42%; margin: 28px auto }
.site .activities { background: #f1eadd }
.site .activity-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px }
.site .activity-photos img { width: 100%; aspect-ratio: 4/3; object-fit: cover }
.site .activity-photos img:last-child { grid-column: 1/-1; aspect-ratio: 2.1 }
.site .activity-copy { max-width: 720px; margin: 35px auto 0; text-align: center }
.site .location {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 60px;
  align-items: center;
  padding: 70px 60px;
}
.site .location img { width: 100%; max-height: 520px; object-fit: contain }
.site .location p { color: var(--muted) }
.site .page-body { padding: 22px 55px 60px }
.site .original-copy { max-width: 760px; margin: 0 auto; color: var(--muted) }
.site .original-copy h1 { color: var(--ink) }
.site .original-copy h2 { color: var(--ink) }
.site .original-copy h3 { color: var(--ink) }
.site [data-content="bungalows"]>.page-body {
  max-width: none;
  margin: auto;
  padding: 48px 0 100px;
  width: 100%;
}
.site .film-chapter>.chapter-head { padding-left: 32px; padding-right: 32px }

/* ==== Photo carousel ============================================ */
.site .garden-photos {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 24px;
  align-items: start;
  padding-top: 10px;
}
.site .garden-photos img { width: 100%; height: 365px; object-fit: cover }
.site .garden-photos img:nth-child(2) { margin-top: 65px; height: 310px }
.site .garden-photos img:nth-child(3) { margin-top: 22px }
.site .garden-drone { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 34px }
.site .garden-drone img { width: 100%; aspect-ratio: 16/9; height: auto; object-fit: cover; display: block }
.site .room-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 30px }
.site .room-card { min-width: 0 }
.site .room-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover }
.site .room-card h3 { margin: 18px 0 8px }
.site .gallery-viewport {
  position: relative;
  height: clamp(440px,68svh,820px);
  overflow: hidden;
  background: var(--sand);
  touch-action: pan-y;
}
.site .gallery-viewport img { width: 100%; height: 100%; object-fit: cover; display: block }
.site .gallery-viewport img[hidden] { display: none }
.site .gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 52px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: var(--paper);
  color: var(--ink);
  border: 0;
  cursor: pointer;
  box-shadow: 0 2px 12px #0001;
}
.site .gallery-prev { left: 18px }
.site .gallery-next { right: 18px }
.site .gallery-expand {
  position: absolute;
  right: 18px;
  top: 18px;
  background: var(--paper);
  color: var(--ink);
  border: 0;
  padding: 11px 16px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: .04em;
}
.site .gallery-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.site .gallery-footer .gallery-count { font-variant-numeric: tabular-nums; color: var(--ink) }
.site .gallery-dots { display: flex; gap: 8px; align-items: center }
.site .gallery-dot {
  padding: 10px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 38px;
}
.site .gallery-dot::after { content: ''; display: block; height: 2px; background: var(--line) }
.site .gallery-dot[aria-current="true"]::after { background: var(--ink) }
.site .film-chapter { padding-left: 0; padding-right: 0 }
.site .film-carousel { display: block; width: 100%; max-width: none; margin: 0; position: relative }
.site .room-detail>.room-gallery.film-carousel { width: 100%; max-width: none }
.site .film-viewport { width: 100%; overflow: hidden; touch-action: pan-y; cursor: grab }
.site .film-viewport:active { cursor: grabbing }
.site .film-track {
  --film-height: max(360px,calc(100svh - var(--reservation-height,150px) - 120px));
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: max-content;
  padding: 18px 0;
  will-change: transform;
}
.site .film-slide {
  --photo-ratio: 1.5;
  flex: 0 0 auto;
  width: min(calc(var(--film-height) * var(--photo-ratio)),76vw);
  transform: scaleY(.94);
  transition: transform 780ms cubic-bezier(.22,.68,.1,1);
  transform-origin: center calc(var(--film-height)/2);
  text-align: center;
}
.site .film-slide.is-active { transform: scaleY(1) }
.site .film-slide img {
  display: block;
  width: 100%;
  height: var(--film-height);
  object-fit: cover;
  margin: 0;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.site .film-slide img:nth-child(n) {
  display: block;
  width: 100%;
  height: var(--film-height);
  object-fit: cover;
  margin: 0;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.site .film-slide .room-card {
  display: block;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: center;
  border: 0;
  background: transparent;
}
.site .film-slide .room-card h3 { font-size: clamp(26px,2.5vw,38px); margin: 20px 12px 8px }
.site .film-slide .room-card .text-link { margin: 0 0 12px }
.site .film-controls {
  display: grid;
  grid-template-columns: auto minmax(90px,240px) auto;
  align-items: center;
  justify-content: center;
  column-gap: 26px;
  row-gap: 6px;
  padding: 16px 24px 24px;
}
.site .film-controls button {
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  min-height: 44px;
  padding: 8px 6px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.site .film-progress { height: 1px; background: var(--line); position: relative }
.site .film-progress span {
  height: 3px;
  position: absolute;
  top: -1px;
  left: 0;
  background: var(--ink);
  transition: transform 780ms cubic-bezier(.22,.68,.1,1);
}
.site .film-count {
  grid-column: 2;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.site .film-carousel>.gallery-footer { display: none }
.site .film-carousel>.gallery-viewport { display: none }
.site .film-carousel>.gallery-expand { right: calc(12vw + 16px); top: 34px; z-index: 2 }
.site .film-controls button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px }

/* ==== Room detail & prices ====================================== */
.site .text-link {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .13em;
  padding: 9px 0 6px;
  border-bottom: 1px solid var(--ink);
  display: inline-flex;
  gap: 22px;
  align-items: center;
  text-decoration: none;
}
.site .room-detail {
  padding: 60px 0 90px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--reservation-height,150px) + 24px);
}
.site .room-detail>h2 {
  text-align: center;
  margin-bottom: 30px;
  font-size: clamp(34px,4vw,58px);
  font-weight: 400;
  margin: 0 0 34px;
  width: calc(100% - 96px);
  max-width: 1464px;
  margin-left: auto;
  margin-right: auto;
}
.site .room-gallery {
  display: block;
  grid-template-columns: 1.35fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
  position: relative;
  margin: 0;
}
.site .room-gallery img { width: 100%; height: 320px; object-fit: cover }
.site .room-description {
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.95;
}
.site table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 20px 0 30px;
  font-size: 12px;
  line-height: 1.7;
}
.site td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  overflow-wrap: anywhere;
}
.site tr:nth-child(odd) { background: #f1eadd }
.site .feature-photo { width: 100%; height: 430px; object-fit: cover; margin: 36px 0 }
.site .photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin: 35px 0 }
.site .photo-grid img { width: 100%; height: 340px; object-fit: cover }
.site .room-info-layout {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: clamp(30px,5vw,90px);
  align-items: start;
  padding: 44px 0 60px;
}
.site .room-description hr { display: none }
.site .room-description p:first-child { margin-top: 0 }
.site .room-price-wrap {
  min-width: 0;
  overflow-x: auto;
  background: #f1e9de;
  padding: 18px 22px 8px;
  border-top: 1px solid var(--line);
}
.site .room-price-wrap table {
  margin: 0 0 14px;
  table-layout: auto;
  font-size: 13px;
  line-height: 1.75;
  min-width: 380px;
}
.site .room-price-wrap td {
  padding: 12px 8px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.site .room-price-wrap tr:first-child td { border-bottom: 0; padding-top: 0 }
.site .room-price-wrap h3 { font-size: 30px; margin: 0 0 8px }
.site .room-detail button:focus-visible { outline: 3px solid #ae8451; outline-offset: 4px }
.site .room-detail>.room-gallery {
  width: calc(100% - 96px);
  max-width: 1464px;
  margin-left: auto;
  margin-right: auto;
}
.site .room-detail>.room-info-layout {
  width: calc(100% - 96px);
  max-width: 1464px;
  margin-left: auto;
  margin-right: auto;
}
.site .room-detail>.tour {
  width: 100%;
  max-width: none;
  height: calc(100svh - var(--reservation-height,150px));
  min-height: 520px;
  margin: 0;
  padding: 56px 32px;
  scroll-margin-top: var(--reservation-height,150px);
}

/* ==== 360 tour ================================================== */
.site .tour {
  position: relative;
  margin: 0;
  background: var(--sand);
  height: clamp(430px,66svh,760px);
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 30px;
}
.site .tour>img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: none;
  position: absolute;
  inset: 0;
  z-index: -2;
}
.site .tour-launch {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  padding: 15px 25px;
  background: var(--paper);
  font-size: 13px;
  white-space: nowrap;
}
.site .tour-status {
  position: absolute;
  inset: auto 20px 18px;
  background: var(--paper);
  padding: 12px 18px;
  text-align: center;
  font-size: 12px;
  margin: 0;
}
.site .tour::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
}
.site .tour-card {
  background: var(--paper);
  text-align: center;
  width: min(620px,100%);
  padding: 64px 48px;
  box-shadow: none;
}
.site .tour-kicker {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--muted);
  margin: 0 0 12px;
  margin-bottom: 20px;
}
.site .tour-card h3 {
  font-size: clamp(36px,3.4vw,56px);
  font-weight: 400;
  line-height: 1.18;
  margin: 0 0 25px;
  margin-bottom: 34px;
}
.site .native-tour-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap }
.site .native-tour-launch {
  padding: 14px 22px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--ink);
  cursor: pointer;
  min-height: 46px;
}
.site .native-tour-launch:hover { background: #51483e }
.site .native-tour-status {
  font-size: 12px;
  line-height: 1.6;
  margin: 20px 0 0;
  color: var(--muted);
}
.site .native-tour-status[hidden] { display: none }

/* ==== Lightbox dialogs ========================================== */
.lv-media-dialog {
  --paper: #faf7f1;
  --ink: #342f29;
  width: calc(100vw - 40px);
  max-width: 1700px;
  height: calc(100dvh - 40px);
  max-height: calc(100dvh - 40px);
  padding: 0;
  border: 0;
  background: #201f1b;
  color: var(--paper);
  overflow: hidden;
  font: 14px Arial,sans-serif;
}
.lv-media-dialog::backdrop { background: #171714e6 }
.lv-dialog-header {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid #ffffff20;
  gap: 20px;
}
.lv-dialog-header p { margin: 0; font-size: 14px }
.lv-dialog-close {
  color: inherit;
  background: transparent;
  border: 0;
  padding: 10px;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
}
.lv-photo-stage {
  position: relative;
  height: calc(100% - 104px);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}
.lv-photo-stage img { display: block; width: 100%; height: 100%; object-fit: contain }
.lv-photo-step {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 52px;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 28px;
  cursor: pointer;
}
.lv-photo-step[data-step="-1"] { left: 14px }
.lv-photo-step[data-step="1"] { right: 14px }
.lv-photo-caption {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 20px;
  font-size: 12px;
}
#lv-native-tour-dialog, #tour-dialog {
  background: var(--paper);
  color: var(--ink);
  width: calc(100vw - 24px);
  max-width: none;
  height: calc(100dvh - 24px);
  max-height: calc(100dvh - 24px);
}
#lv-native-tour-dialog iframe, #tour-dialog iframe {
  display: block;
  width: 100%;
  height: calc(100% - 54px);
  border: 0;
  background: #201f1b;
}
.lv-media-dialog button:focus-visible { outline: 3px solid #ae8451; outline-offset: 4px }
.lv-media-dialog[hidden] { display: none }

/* ==== Footer ==================================================== */
.site .footer {
  padding: 40px 48px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: end;
}
.site .footer h3 { margin: 0 0 15px }
.site .footer p { font-size: 12px; color: var(--muted); margin: 0 }

/* ==== Misc ====================================================== */
.site button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px }
.site a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px }
.site input:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px }
.site select:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px }
.site main { margin-top: calc(0px - var(--opening-height)) }

/* ==== max-width:1000px ========================================== */
@media (max-width: 1000px) {
  .site .room-info-layout { grid-template-columns: 1fr; gap: 24px }
  .site .room-description { max-width: 820px }
  .site .room-price-wrap table { min-width: 100% }
}

/* ==== max-width:760px =========================================== */
@media (max-width: 760px) {
  .site .masthead { padding: 8px 20px 3px; gap: 12px; grid-template-columns: 1fr 340px 1fr }
  .site .brand span { font-size: 23px }
  .site nav { gap: 0 16px }
  .site .booking { width: calc(100% - 40px); margin: 8px 20px 0; padding: 12px 18px; gap: 12px }
  .site .sticky-reservation.is-pinned .booking { width: 100%; margin: 0; padding: 10px 20px }
  .site .chapter { padding: 40px 25px }
  .site .garden-photos { gap: 15px }
  .site .garden-photos img { height: 290px }
  .site .garden-photos img:nth-child(2) { height: 255px }
  .site .location { padding: 45px 30px; gap: 30px }
  .site .page-body { padding: 20px 28px 40px }
  .site .masthead .language { display: block }
  .site .brand { width: 340px }
  .site .masthead-location { font-size: 10px; text-align: right }
  .site .property-strip { padding: 5px 20px }
  .site .property-links { gap: 15px }
  .site .booking .enquire { padding: 11px 14px }
  .site .property-strip.review-band { padding: 5px 20px; gap: 10px }
}

/* ==== max-width:600px =========================================== */
@media (max-width: 600px) {
  .site [data-content="bungalows"]>.page-body { padding: 18px 0 55px }
  .site .room-detail { padding: 34px 0 54px }
  .site .room-detail>h2 { font-size: 35px; margin-bottom: 22px; width: calc(100% - 32px) }
  .site .gallery-viewport { height: clamp(300px,52svh,480px) }
  .site .gallery-arrow { width: 36px; height: 44px }
  .site .gallery-prev { left: 10px }
  .site .gallery-next { right: 10px }
  .site .gallery-expand { top: 10px; right: 10px; padding: 9px 12px }
  .site .room-info-layout { padding: 26px 0 34px }
  .site .room-description { font-size: 15px; line-height: 1.85 }
  .site .room-price-wrap { padding: 14px 8px 5px }
  .site .room-price-wrap table { min-width: 360px }
  .site .room-price-wrap td { font-size: 12px; padding: 10px 6px }
  .site .tour { height: clamp(390px,62svh,580px); padding: 20px }
  .site .tour-card { padding: 40px 24px }
  .site .tour-card h3 { font-size: 36px; margin-bottom: 28px }
  .lv-media-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 }
  .lv-dialog-header { padding: 0 12px }
  .lv-photo-step { width: 34px; height: 46px }
  .lv-photo-step[data-step="-1"] { left: 4px }
  .lv-photo-step[data-step="1"] { right: 4px }
  .lv-photo-caption { gap: 10px; font-size: 11px }
  .site .room-detail>.room-gallery { width: calc(100% - 32px) }
  .site .room-detail>.room-info-layout { width: calc(100% - 32px) }
  .site .room-detail>.tour {
    height: calc(100svh - var(--reservation-height,100px));
    min-height: 420px;
    padding: 36px 20px;
  }
  #lv-native-tour-dialog, #tour-dialog { width: 100vw; height: 100dvh; max-height: 100dvh }
  .site .film-track {
    --film-height: max(340px,calc(100svh - var(--reservation-height,100px) - 110px));
    gap: 8px;
    padding: 12px 0;
  }
  .site .film-slide { width: min(calc(var(--film-height) * var(--photo-ratio)),82vw) }
  .site .film-chapter>.chapter-head { padding-left: 20px; padding-right: 20px }
  .site .film-controls {
    column-gap: 16px;
    grid-template-columns: auto minmax(80px,150px) auto;
    padding-top: 8px;
  }
  .site .film-carousel>.gallery-expand { right: calc(9vw + 10px); top: 24px }
}

/* ==== max-width:540px =========================================== */
@media (max-width: 540px) {
  .site .masthead {
    grid-template-columns: 1fr auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px 8px;
    justify-content: center;
  }
  .site .language { display: block; order: -1; align-self: flex-end; font-size: 12px; letter-spacing: .1em }
  .site .brand span { font-size: 20px }
  .site .brand img { width: 30px; height: 30px }
  .site .reviews { font-size: 11px; gap: 4px; align-self: center }
  .site .reviews svg { width: 16px }
  .site nav { display: none }
  .site .mobile-nav {
    display: block;
    width: calc(100% - 32px);
    margin: 0 16px 14px;
    background: rgba(250,247,241,.94);
    border: 1px solid var(--line);
    padding: 8px 10px;
    font-size: 16px;
    margin-bottom: 8px;
    position: relative;
    z-index: 5;
    margin-top: 0;
  }
  .site .booking { grid-template-columns: 1fr 1fr; width: calc(100% - 24px); margin: 8px 12px 0; padding: 6px 14px; gap: 0 }
  .site .sticky-reservation.is-pinned .booking { width: 100%; margin: 0; padding: 6px 16px }
  .site .booking-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    grid-column: 1/-1;
    min-height: 44px;
    font-size: 16px;
  }
  .site .booking:not(.expanded) label { display: none }
  .site .booking:not(.expanded) .enquire { display: none }
  .site .booking.expanded { gap: 15px; padding-bottom: 16px }
  .site .booking input { font-size: 16px }
  .site .booking select { font-size: 16px }
  .site .booking label { border: 0; padding: 0 }
  .site .hero { margin: 0; aspect-ratio: 4/3 }
  .site .hero-caption { left: 20px; bottom: 24px; max-width: 70%; font-size: 9px }
  .site .introduction { padding: 40px 25px 15px }
  .site h1 { font-size: 34px }
  .site h2 { font-size: 33px }
  .site h3 { font-size: 27px }
  .site .chapter { padding: 35px 20px 40px }
  .site .garden-photos { grid-template-columns: 1fr; gap: 24px }
  .site .garden-photos img { height: 390px; margin: 0 }
  .site .garden-photos img:nth-child(2) { height: 390px; margin: 0 }
  .site .garden-photos img:nth-child(3) { height: 390px; margin: 0 }
  .site .garden-drone { grid-template-columns: 1fr; gap: 24px }
  .site .room-grid { grid-template-columns: 1fr; gap: 35px }
  .site .activity-photos { grid-template-columns: 1fr }
  .site .activity-photos img:last-child { aspect-ratio: 4/3 }
  .site .location { grid-template-columns: 1fr; padding: 45px 25px }
  .site .location img { max-height: 520px }
  .site .room-gallery { grid-template-columns: 1fr }
  .site .room-gallery img { height: 260px }
  .site .page-body { padding: 12px 20px 35px }
  .site td { padding: 10px 4px; font-size: 11px }
  .site .photo-grid { grid-template-columns: 1fr }
  .site .feature-photo { height: 290px }
  .site .footer { display: block; padding: 30px 25px }
  .site .footer>div+div { margin-top: 24px }
  .site .brand { width: min(320px,100%) }
  .site .masthead .language a, .site .masthead .language [aria-current] { display: inline-block; padding: 6px 4px }
  .site .masthead-location { display: none }
  .site .property-strip { display: none }
  .site .booking .enquire { min-height: 44px }
  .site .video-toggle { right: 20px; bottom: 24px }
  .site .property-strip.review-band {
    padding: 7px 16px;
    gap: 6px 12px;
    grid-template-columns: 1fr auto;
  }
  .site .review-rating { grid-column: 1/-1; grid-row: 2; justify-self: center }
  .site .review-count { grid-column: 2; grid-row: 1; font-size: 11px }
}

/* ==== prefers-reduced-motion:reduce ============================= */
@media (prefers-reduced-motion:reduce) {
  .site .film-track { transition: none!important }
  .site .film-slide { transition: none!important }
  .site .film-progress span { transition: none!important }
}

/* ==== Thai ====================================================== */
/* Jost and Cormorant carry no Thai glyphs; pair them with Noto so Latin
   brand names keep the house faces and Thai sits beside them cleanly */
html:lang(th) .site { font-family: 'Jost', 'Noto Sans Thai', Arial, sans-serif; line-height: 1.85 }
html:lang(th) .site h1, html:lang(th) .site h2, html:lang(th) .site h3 {
  font-family: 'Cormorant Garamond', 'Noto Serif Thai', Georgia, serif;
  line-height: 1.35;
}
/* tracking pulls Thai vowel and tone marks away from their consonants */
html:lang(th) .site .booking label span,
html:lang(th) .site .eyebrow,
html:lang(th) .site .tour-kicker { letter-spacing: 0; text-transform: none }

/* ==== Aerial property map (Location page) ======================= */
.site .aerial-map { margin: 10px 0 50px }
.site .aerial-map svg { display: block; width: 100%; height: auto }
.site .aerial-map a:hover rect { fill: #98713e }
.site .aerial-map-hint, .site .aerial-map-link { display: none }
@media (max-width: 680px) {
  .site .aerial-map-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch }
  .site .aerial-map svg { width: 1000px; max-width: none }
  .site .aerial-map-hint { display: block; margin: 0; padding: 12px 16px; font-size: 13px; background: #faf7f1; color: #766b5e }
  .site .aerial-map-link { display: block; text-align: center; background: #342f29; color: #faf7f1; padding: 16px; text-decoration: none }
}

/* ==== Home garden: one large grid, every photo the same shape ==== */
.site .garden-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 10px 40px 0; max-width: 1800px; margin: 0 auto }
.site .garden-grid img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; display: block }
.site .garden-grid img:first-child { grid-column: 1 / -1; aspect-ratio: 21/9 }
@media (max-width: 680px) {
  .site .garden-grid { grid-template-columns: 1fr; gap: 12px; padding: 6px 16px 0 }
  .site .garden-grid img, .site .garden-grid img:first-child { aspect-ratio: 4/3 }
}

/* ==== Phone pass (≤540px) — added last so it wins ================= */
.site .location img.home-aerial { max-height: none; object-fit: cover; aspect-ratio: 16/10; height: auto }
@media (max-width: 540px) {
  /* 1. slim header: logo + languages in one row, small menu, one-line rating */
  .site .masthead { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 10px 14px 6px; gap: 4px 10px }
  .site .masthead .language { order: 2; align-self: center; font-size: 11px }
  .site .brand { order: 1; width: 190px }
  .site .brand-tagline { display: none }
  .site .mobile-nav { width: calc(100% - 28px); margin: 0 14px 6px; padding: 6px 10px; font-size: 15px }
  .site .property-strip.review-band { padding: 3px 14px; display: flex; justify-content: space-between; align-items: center; font-size: 11px }
  .site .review-rating { grid-row: auto; font-size: 12px }
  .site .review-rating .review-stars { font-size: 12px }
  .site .review-brand { display: none }
  .site .booking { margin: 4px 12px 0; padding: 2px 12px }
  .site .booking-toggle { min-height: 38px; font-size: 15px }
  .site .hero { aspect-ratio: 3/4 }

  /* 2 + 3. price tables become simple cards: season, dates, price */
  .site .room-price-wrap { padding: 14px 16px 6px; overflow: visible }
  .site .room-price-wrap table, .site .original-copy table { min-width: 0; width: 100% }
  .site .room-price-wrap table, .site .room-price-wrap tbody, .site .room-price-wrap td,
  .site .original-copy table, .site .original-copy tbody, .site .original-copy td { display: block }
  .site .room-price-wrap tr { display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; padding: 12px 0; border-bottom: 1px solid var(--line) }
  .site .room-price-wrap tr:first-child { padding: 0 0 4px }
  .site .room-price-wrap td { padding: 0; border: 0; font-size: 14px; white-space: normal; word-break: normal; hyphens: none }
  .site .room-price-wrap td:empty, .site .original-copy td:empty { display: none }
  .site .room-price-wrap td:first-child, .site .room-price-wrap td:nth-child(2) { grid-column: 1 / -1 }
  .site .room-price-wrap td:nth-child(2) { color: var(--muted); font-size: 13px; margin-bottom: 4px }
  .site .room-price-wrap tr td:last-child:not(:first-child) { display: none }
  .site .room-price-wrap td strong { white-space: nowrap }
  .site .original-copy { padding: 0 2px }
  .site .original-copy h3 { font-size: 22px; margin: 26px 0 8px }
  .site .original-copy tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 10px 0; border-bottom: 1px solid var(--line) }
  .site .original-copy td { padding: 0; font-size: 14px }
  .site .original-copy td:first-child { color: var(--ink) }
  .site .original-copy td:last-child { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; color: var(--ink) }
  .site .original-copy td:nth-child(2):not(:last-child) { grid-column: 1; font-size: 12.5px }
  .site .original-copy td:nth-child(3):not(:last-child) { display: none }

  /* 4. shorter bungalow sections, 360 button straight after the photos */
  .site .room-detail { display: flex; flex-direction: column; padding: 28px 0 36px }
  .site .room-detail>h2 { order: 0 }
  .site .room-detail>.room-gallery { order: 1 }
  .site .room-detail>.tour { order: 2; height: auto; min-height: 0; padding: 0 16px; margin-top: 14px; background: none }
  .site .room-detail>.tour>img, .site .room-detail>.tour::before { display: none }
  .site .room-detail>.tour .tour-card { position: static; width: 100%; padding: 16px; box-shadow: none; border: 1px solid var(--line) }
  .site .room-detail>.tour .tour-card h3, .site .room-detail>.tour .tour-kicker { display: none }
  .site .room-detail>.tour .native-tour-launch { width: 100% }
  .site .room-detail>.room-info-layout { order: 3; padding: 22px 0 10px; gap: 22px }
  .site .film-track { --film-height: 62svh }

  /* 8. garden photos two per row */
  .site .garden-grid { grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 12px 0 }
  .site .garden-grid img { aspect-ratio: 1/1 }
  .site .garden-grid img:first-child { grid-column: 1 / -1; aspect-ratio: 4/3 }

  /* impressions photos two per row too */
  .site .photo-grid { grid-template-columns: 1fr 1fr; gap: 8px }
  .site .photo-grid img { height: auto; aspect-ratio: 1/1 }
}

@media (max-width: 540px) {
  .site [data-content="bungalows"] .page-body>.original-copy { padding: 0 18px }
  .site [data-content="bungalows"] .original-copy table tr:nth-child(odd) { background: transparent }
}

/* Tips page: three photos, the last one full width */
.site .tips-grid img:last-child { grid-column: 1 / -1; height: 440px }
@media (max-width: 540px) { .site .tips-grid img:last-child { height: auto; aspect-ratio: 16/10 } }
.site .tips-grid { margin-top: 0 }