:root {
  --cream: #f4f0e6;
  --cream-deep: #e9e2cf;
  --ink: #23241d;
  --ink-soft: #4a4c40;
  --sage: #5f6f5c;
  --sage-deep: #3d4a3a;
  --gold: #ab8a5a;
  --line: rgba(35, 36, 29, 0.14);
  --shadow: 0 18px 40px -20px rgba(35, 36, 29, 0.35);
  --radius: 2px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.eyebrow {
  font-family: 'Jost', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--gold);
  margin-bottom: 0.9rem;
}

.section-lede {
  max-width: 52ch;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

/* Brand mark */

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.brand-mark {
  width: 34px;
  height: auto;
  overflow: visible;
}

.brand-mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-logo {
  height: 40px;
  width: auto;
  display: block;
}

.brand-word {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.9rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--sage-deep);
  color: var(--cream);
}

.btn-primary:hover {
  background: var(--sage);
}

.btn-ghost {
  border-color: rgba(244, 240, 230, 0.6);
  color: var(--cream);
}

.btn-ghost:hover {
  background: rgba(244, 240, 230, 0.14);
  border-color: var(--cream);
}

.btn-nav {
  border-color: var(--line);
  color: var(--ink);
  padding: 0.6rem 1.4rem;
}

.btn-nav:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

.btn:focus-visible {
  outline: 2px solid var(--sage-deep);
  outline-offset: 2px;
}

/* Language */

body.lang-lo {
  font-family: 'Noto Sans Lao', 'Jost', sans-serif;
}

body.lang-lo h1,
body.lang-lo h2,
body.lang-lo h3,
body.lang-lo .brand-word,
body.lang-lo .intro-quote {
  font-family: 'Noto Serif Lao', 'Playfair Display', serif;
}

body.lang-lo .eyebrow {
  letter-spacing: 0.06em;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-right: 0.5rem;
}

.lang-switch a {
  padding: 0.2rem 0.15rem;
  color: var(--ink-soft);
}

.lang-switch a.is-active {
  color: var(--ink);
  font-weight: 600;
}

.lang-switch a:hover {
  color: var(--ink);
}

.lang-switch--mobile {
  padding: 1rem clamp(1.25rem, 4vw, 3.5rem) 0;
  margin-right: 0;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.1rem clamp(1.25rem, 4vw, 3.5rem);
  background: rgba(244, 240, 230, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-nav {
  display: flex;
  gap: 2rem;
  margin-right: auto;
  margin-left: 2.5rem;
}

.site-nav a {
  font-size: 0.95rem;
  color: var(--ink-soft);
  position: relative;
  padding-bottom: 0.2rem;
}

.site-nav a:hover {
  color: var(--ink);
}

.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--sage-deep);
  transition: right 0.3s var(--ease);
}

.site-nav a:hover::after {
  right: 0;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 0;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s var(--ease);
}

.mobile-nav.is-open {
  max-height: 22rem;
}

.mobile-nav a {
  padding: 1rem clamp(1.25rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}

.mobile-nav .btn {
  margin: 1rem clamp(1.25rem, 4vw, 3.5rem);
}

.mobile-nav a.btn-primary {
  color: var(--cream);
}

.mobile-nav a.btn-primary:hover {
  color: var(--cream);
}

/* Hero */

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

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  animation: hero-settle 1.8s var(--ease) forwards;
}

@keyframes hero-settle {
  to { transform: scale(1); }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  /* Two layers: a left-to-right wash so the left-aligned headline always has
     a dark backing (the hero photo is bright in places), plus the original
     top-to-bottom fade into the section below. The right of the frame stays
     largely uncovered so the photo still reads as the photo. */
  background:
    linear-gradient(90deg, rgba(24, 26, 18, 0.72) 0%, rgba(24, 26, 18, 0.45) 38%, rgba(24, 26, 18, 0) 68%),
    linear-gradient(180deg, rgba(24, 26, 18, 0.15) 0%, rgba(24, 26, 18, 0.3) 55%, rgba(24, 26, 18, 0.78) 100%);
}

/* On a phone the copy spans the full width, so the sideways wash would leave
   the end of each line unbacked — fall back to an even vertical scrim. */
@media (max-width: 720px) {
  .hero-scrim {
    background: linear-gradient(180deg, rgba(24, 26, 18, 0.42) 0%, rgba(24, 26, 18, 0.68) 50%, rgba(24, 26, 18, 0.88) 100%);
  }
}

.hero-content {
  position: relative;
  color: var(--cream);
  padding: 0 clamp(1.25rem, 4vw, 3.5rem) clamp(3rem, 8vw, 6rem);
  max-width: 46rem;
  opacity: 0;
  animation: hero-rise 1s var(--ease) 0.4s forwards;
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-content .eyebrow {
  color: var(--cream-deep);
}

.hero h1 {
  color: var(--cream);
  font-size: clamp(0.95rem, 1.8vw, 1.5rem);
  line-height: 1.3;
  margin-bottom: 1.1rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.6);
}

.hero-lede {
  font-size: 1.1rem;
  max-width: 38ch;
  color: rgba(244, 240, 230, 0.88);
  margin-bottom: 2.1rem;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Intro */

.intro {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 4rem;
  align-items: end;
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3.5rem);
  max-width: 82rem;
  margin: 0 auto;
}

.intro h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  margin-bottom: 1.3rem;
}

.intro-text p {
  color: var(--ink-soft);
  max-width: 46ch;
}

.intro-quote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--sage-deep);
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
}

/* Villas / gallery */

.villas {
  background: var(--cream-deep);
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3.5rem);
}

.section-head {
  max-width: 82rem;
  margin: 0 auto 3rem;
}

.section-head h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  margin-bottom: 1rem;
}

.gallery {
  max-width: 82rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow);
}

.gallery-item--wide {
  grid-column: span 2;
  aspect-ratio: 8 / 5;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.floorplans {
  max-width: 82rem;
  margin: 3.5rem auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.floorplan-card {
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 1.5rem;
}

.floorplan-card img {
  margin-bottom: 1rem;
}

.floorplan-card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.floorplan-card--wide {
  max-width: 82rem;
  margin: 1.5rem auto 0;
}

.floorplan-card--wide img {
  width: 100%;
}

/* Location */

.location {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.location-media {
  min-height: 26rem;
}

.location-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 5rem);
}

.location-text h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  margin-bottom: 1.1rem;
}

.location-text p {
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 1.6rem;
}

.location-facts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.location-facts li {
  padding-left: 1.4rem;
  position: relative;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.location-facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 1px;
  background: var(--sage-deep);
}

.location--flip .location-media {
  order: 2;
}

.location-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

.location-meta a {
  color: var(--sage-deep);
  font-size: 0.92rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}

.location-meta a:hover {
  border-color: var(--sage-deep);
}

/* Booking */

.book {
  background: var(--sage-deep);
  color: var(--cream);
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3.5rem);
}

.book .eyebrow {
  color: var(--cream-deep);
}

.book-inner {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}

.book h2 {
  color: var(--cream);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  margin-bottom: 1rem;
}

.book .section-lede {
  color: rgba(244, 240, 230, 0.82);
  margin: 0 auto 2.5rem;
}

.book-form {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.field span {
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--cream-deep);
}

.field input,
.field select,
.field textarea {
  font-family: 'Jost', sans-serif;
  font-size: 0.98rem;
  padding: 0.75rem 0.9rem;
  background: rgba(244, 240, 230, 0.08);
  border: 1px solid rgba(244, 240, 230, 0.32);
  border-radius: var(--radius);
  color: var(--cream);
}

.field textarea {
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(244, 240, 230, 0.5);
}

.field select {
  color: var(--cream);
}

.field select option {
  color: var(--ink);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--cream);
  background: rgba(244, 240, 230, 0.14);
}

.field input:required:invalid {
  box-shadow: none;
}

.field input[type="file"] {
  padding: 0.55rem 0.9rem;
}

.field-hint {
  color: rgba(244, 240, 230, 0.55);
  font-size: 0.78rem;
}

/* Adults / children 6+ / children under 6 — three across on desktop, still
   one per row on the narrow-screen rule that already collapses .field-row. */
.field-row--3 {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* The picker stacks its rows in normal flow, so the gap between the dates and
   the guest counts has to be an explicit margin — without it the guest labels
   crowd the date inputs and the two groups read as one block. */
.availability-picked .field-row + .field-row {
  margin-top: 1.1rem;
}

/* The .field styles are written for the dark sage form; on the cream booking
   card the hint has to darken to stay readable. This measures 5.0:1 against
   the card, comfortably over the 4.5:1 small text needs. */
.availability--light .field-hint {
  color: #6b5c48;
}

.extra-guest-note {
  margin: 0.9rem 0 0;
  padding: 0.7rem 0.9rem;
  border-left: 2px solid var(--gold, #B15C3E);
  background: rgba(177, 92, 62, 0.07);
  color: #5c4832;
  font-size: 0.82rem;
  line-height: 1.55;
}

/* Standalone "check availability" section */

.availability-section {
  background: var(--cream);
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3.5rem);
}

.availability-section .availability--light {
  max-width: 40rem;
  margin: 0 auto;
}

/* Availability calendar (public booking form) */

.availability {
  background: rgba(244, 240, 230, 0.06);
  border: 1px solid rgba(244, 240, 230, 0.2);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem 1.4rem;
}

.availability-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.availability-title {
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--cream-deep);
}

.availability-legend {
  display: flex;
  gap: 1rem;
}

.availability-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: rgba(244, 240, 230, 0.75);
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.dot--booked {
  background: #c9765a;
}

.dot--available {
  background: transparent;
  border: 1px solid rgba(244, 240, 230, 0.5);
}

.availability-hint {
  font-size: 0.8rem;
  color: rgba(244, 240, 230, 0.6);
  margin-bottom: 0.9rem;
}

.availability-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.availability-nav button {
  background: none;
  border: 1px solid rgba(244, 240, 230, 0.3);
  color: var(--cream);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.availability-nav button:hover {
  background: rgba(244, 240, 230, 0.12);
}

.availability-month {
  font-size: 0.92rem;
  color: var(--cream);
}

.availability-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3rem;
}

.availability-grid .cal-dow {
  font-size: 0.7rem;
  text-align: center;
  color: rgba(244, 240, 230, 0.45);
  padding-bottom: 0.3rem;
}

.availability-grid .cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  border-radius: 50%;
  color: rgba(244, 240, 230, 0.85);
}

.availability-grid .cal-day.is-empty {
  visibility: hidden;
}

.availability-grid .cal-day.is-booked {
  background: rgba(201, 118, 90, 0.85);
  color: var(--cream);
}

.availability-grid .cal-day.is-past {
  color: rgba(244, 240, 230, 0.25);
}

.availability-grid .cal-day.is-range-start,
.availability-grid .cal-day.is-range-end {
  background: var(--gold, #c9a05a);
  color: #fff;
  font-weight: 600;
}

.availability-grid .cal-day.is-in-range {
  background: rgba(201, 160, 90, 0.28);
  border-radius: 0;
}

.availability-selection {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(244, 240, 230, 0.2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.availability-selection-dates {
  display: flex;
  gap: 1.5rem;
}

.field-mini {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.78rem;
}

.field-mini span {
  color: rgba(244, 240, 230, 0.6);
}

.field-mini strong {
  font-size: 0.95rem;
  color: var(--cream);
}

.field-mini input[type="date"] {
  font: inherit;
  font-size: 0.95rem;
  color: var(--cream);
  background: rgba(244, 240, 230, 0.06);
  border: 1px solid rgba(244, 240, 230, 0.3);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  color-scheme: dark;
}

.availability--light .field-mini input[type="date"] {
  color: var(--ink);
  background: #fff;
  border-color: var(--line);
  color-scheme: light;
}

.availability-status {
  font-size: 0.85rem;
  color: rgba(244, 240, 230, 0.75);
  margin: 0;
}

.availability-status.is-available {
  color: #7cbf8f;
  font-weight: 600;
}

.availability-status.is-unavailable {
  color: #d98a72;
  font-weight: 600;
}

.availability-reset-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
  color: rgba(244, 240, 230, 0.65);
}

.availability--light .field-mini span {
  color: var(--ink-soft);
}

.availability--light .field-mini strong {
  color: var(--ink);
}

.availability--light .availability-status {
  color: var(--ink-soft);
}

.availability--light .availability-selection {
  border-top-color: var(--line);
}

.availability--light .availability-reset-btn {
  color: var(--ink-soft);
}

/* The .field styles above are written for the dark sage booking form, so
   their cream text disappears against the light widget's cream background.
   These put readable dark brown back on white for every control inside it —
   the date inputs, their labels, and the guest selects. */
.availability--light .field span {
  color: var(--ink-soft);
}

.availability--light .field input,
.availability--light .field select {
  color: #5c4832;
  background: #fff;
  border-color: var(--line);
  color-scheme: light;
}

.availability--light .field input:focus,
.availability--light .field select:focus {
  border-color: var(--gold);
  background: #fff;
}

.availability--light .field select option {
  color: #5c4832;
}

/* Light variant — used in the standalone availability section, which sits
   on the cream background rather than the dark sage of the booking form. */

.availability--light {
  background: var(--cream-deep);
  border: 1px solid var(--line);
}

.availability--light .availability-title {
  color: var(--ink);
  font-weight: 600;
}

.availability--light .availability-legend-item,
.availability--light .availability-hint {
  color: var(--ink-soft);
}

.availability--light .dot--available {
  border-color: var(--ink-soft);
}

.availability--light .availability-nav button {
  border-color: var(--line);
  color: var(--ink);
}

.availability--light .availability-nav button:hover {
  background: rgba(0, 0, 0, 0.05);
}

.availability--light .availability-month {
  color: var(--ink);
}

.availability--light .availability-grid .cal-dow {
  color: var(--ink-soft);
  opacity: 0.7;
}

.availability--light .availability-grid .cal-day {
  color: var(--ink);
}

.availability--light .availability-grid .cal-day.is-past {
  color: var(--line);
}

.availability--light .availability-grid .cal-day.is-booked {
  color: var(--cream);
}

.btn-submit {
  align-self: flex-start;
  margin-top: 0.6rem;
}

/* Payment page (after a reservation is submitted) */

.payment-qr-single {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 1rem;
  max-width: 26rem;
  margin: 0 auto 2rem;
}

.payment-qr-single img {
  width: 100%;
  border-radius: calc(var(--radius) - 4px);
  display: block;
}

.payment-bank-details {
  max-width: 34rem;
  margin: 0 auto 2rem;
  text-align: left;
  color: rgba(244, 240, 230, 0.85);
}

.payment-bank-details summary {
  cursor: pointer;
  font-size: 0.92rem;
  text-align: center;
  color: var(--cream);
  text-decoration: underline;
  margin-bottom: 1rem;
}

.payment-bank-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.payment-bank-card {
  background: rgba(244, 240, 230, 0.06);
  border: 1px solid rgba(244, 240, 230, 0.2);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
}

.payment-bank-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 0.5rem;
}

.payment-bank-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  padding: 0.2rem 0;
}

.payment-bank-currency {
  color: rgba(244, 240, 230, 0.6);
}

.payment-bank-number {
  font-family: monospace;
  letter-spacing: 0.02em;
}

.payment-whatsapp-note {
  max-width: 34rem;
  margin: 0 auto 1.6rem;
  color: rgba(244, 240, 230, 0.85);
  font-size: 0.95rem;
}

.payment-amount-due {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--cream);
  margin: -0.5rem auto 1.2rem;
}

.payment-slip-form {
  max-width: 26rem;
  margin: 0 auto 2rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.field-checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
}

.field-checkbox input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

.field-checkbox span {
  font-size: 0.85rem;
  color: rgba(244, 240, 230, 0.85);
  line-height: 1.4;
}

/* The payment page's own background IS --sage-deep, which is exactly what
   .btn-primary paints itself — so the one button that matters most on the
   page was invisible against it. These two variants are the only buttons on
   the deposit flow that carry the action, so they get their own colours.
   #b99a68 reads 3.5:1 against the page (over the 3:1 a control needs to be
   distinguishable) and carries its label at 6.0:1. */
.btn-cta {
  background: #b99a68;
  color: #1f2412;
  border-color: #b99a68;
  padding: 1.15rem 2.2rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

.btn-cta:hover {
  background: #c8a970;
  border-color: #c8a970;
}

/* WhatsApp's own green, because at this point the guest is being sent to
   WhatsApp specifically and the brand colour says so faster than any label.
   4.7:1 against the page, 8.3:1 for the dark label on the green. */
.btn-whatsapp {
  background: #25d366;
  color: #0b2413;
  border-color: #25d366;
  padding: 1.15rem 2.2rem;
  font-size: 1.05rem;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

.btn-whatsapp:hover {
  background: #1ebe5a;
  border-color: #1ebe5a;
}

.btn-block {
  width: 100%;
}

/* Preview of the receipt the guest just picked. Seeing the actual image is
   the only way they can tell they attached the right screenshot — a filename
   like "IMG_4821.png" tells them nothing. */
.slip-preview {
  margin-top: 0.9rem;
  display: none;
}

.slip-preview.is-visible {
  display: block;
}

/* Sized to the image rather than the column: bank receipts are tall and
   narrow, and stretching one to full width would leave it framed by empty
   bars on both sides. */
.slip-preview img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 22rem;
  background: rgba(244, 240, 230, 0.06);
  border: 1px solid rgba(244, 240, 230, 0.28);
  border-radius: var(--radius);
}

.slip-preview-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: rgba(244, 240, 230, 0.75);
}

.slip-preview-change {
  background: none;
  border: none;
  padding: 0;
  color: var(--cream);
  font-family: inherit;
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
  flex-shrink: 0;
}

/* Last step after the slip lands: a full-bleed WhatsApp hand-off the guest
   can't scroll past, because a booking that never gets confirmed in chat is
   a booking staff never sees. */
.wa-handoff {
  max-width: 34rem;
  margin: 0 auto 2rem;
  padding: 1.8rem 1.6rem;
  background: rgba(37, 211, 102, 0.1);
  border: 1px solid rgba(37, 211, 102, 0.45);
  border-radius: var(--radius);
}

/* The site's default heading colour is near-black for cream pages; on this
   dark panel it measured 2.0:1. Cream reads 7.0:1. */
.wa-handoff h2 {
  margin: 0 0 0.6rem;
  color: var(--cream);
  font-size: clamp(1.25rem, 3vw, 1.6rem);
}

.wa-handoff p {
  margin: 0 0 1.2rem;
  color: rgba(244, 240, 230, 0.85);
  line-height: 1.6;
}

.wa-handoff-countdown {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: rgba(244, 240, 230, 0.7);
}

/* Invoice page (deposit breakdown, before payment) */

.invoice-card {
  max-width: 30rem;
  margin: 0 auto 1.6rem;
  text-align: left;
  background: rgba(244, 240, 230, 0.06);
  border: 1px solid rgba(244, 240, 230, 0.2);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
}

.invoice-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(244, 240, 230, 0.12);
  color: rgba(244, 240, 230, 0.85);
  font-size: 0.92rem;
}

.invoice-row:last-child {
  border-bottom: none;
}

.invoice-row strong {
  color: var(--cream);
}

.invoice-row-total {
  font-size: 1rem;
}

.invoice-row-deposit {
  color: var(--cream);
  font-size: 1.05rem;
}

.invoice-row-deposit strong {
  font-size: 1.2rem;
}

/* Map embed */

.map-section {
  background: var(--cream);
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3.5rem) 0;
}

.map-embed {
  max-width: 82rem;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 7;
}

.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 560px) {
  .map-embed {
    aspect-ratio: 4 / 5;
  }
}

/* Footer */

.site-footer {
  background: var(--ink);
  color: var(--cream-deep);
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3.5rem) 2rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--cream);
  margin-bottom: 2.5rem;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(244, 240, 230, 0.14);
}

.footer-cols h3 {
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 0.9rem;
  font-weight: 500;
}

.footer-cols p {
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
}

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

.footer-legal {
  padding-top: 1.5rem;
  font-size: 0.82rem;
  color: rgba(244, 240, 230, 0.5);
}

/* Responsive */

@media (max-width: 900px) {
  .site-nav {
    display: none;
  }

  .btn-nav {
    display: none;
  }

  .site-header .lang-switch {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .mobile-nav {
    display: flex;
  }

  .intro {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-item--wide {
    grid-column: span 2;
  }

  .floorplans {
    grid-template-columns: 1fr;
  }

  .location {
    grid-template-columns: 1fr;
  }

  .location-media {
    min-height: 20rem;
  }

  .footer-cols {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .field-row {
    grid-template-columns: 1fr;
  }

  .gallery {
    grid-template-columns: 1fr;
  }

  .gallery-item--wide {
    grid-column: span 1;
  }

  .footer-cols {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-img,
  .hero-content {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Stay page additions — rates, spec, amenities, reviews, policy, FAQ —
   and the project page. Both pages share the header/footer defined above.
   ========================================================================== */

/* Promotional pricing. The site quoted no price at all before; these carry
   the rack rate struck through beside what a guest actually pays. */
.hero-promo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-weight: 600;
  color: var(--cream);
}

.promo-flag {
  background: var(--gold);
  color: #fff;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.promo-badge {
  display: inline-block;
  margin-top: 1rem;
  background: var(--gold);
  color: #fff;
  padding: 0.45rem 1.1rem;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Spec strip: bedrooms / bathrooms / capacity, directly under the hero. */
.spec-strip,
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}

.spec-cell,
.stat-cell {
  background: var(--cream);
  padding: clamp(1.5rem, 3vw, 2.25rem) 1rem;
  text-align: center;
}

.stat-cell--accent { background: var(--cream-deep); }

.spec-n,
.stat-n {
  display: block;
  font-family: 'Playfair Display', 'Noto Serif Lao', serif;
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  color: var(--ink);
  line-height: 1.1;
}

.spec-l,
.stat-l {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Rates */
.rates-section {
  background: var(--cream);
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3.5rem);
}

.rate-cards {
  max-width: 52rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.rate-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  text-align: center;
  box-shadow: var(--shadow);
}

.rate-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}

.rate-days {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.25rem;
}

.rate-was {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.rate-was-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.rate-was s { color: #a33; opacity: 0.75; }

.rate-price {
  margin-top: 0.35rem;
  font-family: 'Playfair Display', 'Noto Serif Lao', serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--ink);
  line-height: 1.1;
}

.rate-price span {
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.rate-note {
  max-width: 52rem;
  margin: 1.75rem auto 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* Amenities */
.amenities-section {
  background: var(--cream-deep);
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3.5rem);
}

.amenity-grid {
  max-width: 62rem;
  margin: 0 auto;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem 1.5rem;
}

.amenity-grid li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.98rem;
  color: var(--ink);
}

.amenity-icon { font-size: 1.2rem; flex-shrink: 0; }

/* Breakfast band */
.breakfast-band {
  background: var(--sage-deep);
  color: var(--cream);
  padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.25rem, 4vw, 3.5rem);
}

.breakfast-inner { max-width: 46rem; margin: 0 auto; text-align: center; }
.breakfast-inner .eyebrow { color: var(--cream-deep); }
.breakfast-inner h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 1rem; }
.breakfast-inner p { color: rgba(244, 240, 230, 0.85); }


/* Guest reviews — pulled live from the same table the Manager writes to. */
.reviews-section {
  background: var(--cream);
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3.5rem);
}

.review-score {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.review-score-n {
  font-family: 'Playfair Display', 'Noto Serif Lao', serif;
  font-size: 2.2rem;
  color: var(--ink);
}

.review-score-l { font-size: 0.88rem; color: var(--ink-soft); }
.review-stars { color: var(--gold); letter-spacing: 0.1em; }

.review-grid {
  max-width: 82rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.review-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.review-card blockquote {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  flex: 1;
}

.review-card figcaption {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}

.review-meta {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}

/* Activities & getting here */
.activities-section,
.getting-here-section {
  background: var(--cream-deep);
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3.5rem);
}

.getting-here-section { background: var(--cream); }

.activity-grid {
  max-width: 82rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.activity-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.75rem;
}

.activity-icon { font-size: 1.75rem; display: block; margin-bottom: 0.75rem; }

.activity-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
  color: var(--ink);
}

.activity-card p { font-size: 0.92rem; color: var(--ink-soft); }

/* Stay policy */
.policy-section {
  background: var(--cream-deep);
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3.5rem);
}

.policy-grid {
  max-width: 62rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.policy-item {
  background: var(--cream);
  padding: 1.5rem;
}

.policy-item--wide { grid-column: 1 / -1; }

.policy-l {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.policy-v {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}

.policy-note {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* FAQ */
.faq-section {
  background: var(--cream);
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3.5rem);
}

.faq-list { max-width: 52rem; margin: 0 auto; }

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  cursor: pointer;
  padding: 1.25rem 2rem 1.25rem 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  position: relative;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--gold);
}

.faq-item[open] summary::after { content: '−'; }

.faq-item p {
  padding: 0 2rem 1.5rem 0;
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.75;
}

/* Hand-off from the stay page to the ownership page */
.project-cta {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(4rem, 8vw, 6rem) clamp(1.25rem, 4vw, 3.5rem);
}

.project-cta-inner { max-width: 46rem; margin: 0 auto; text-align: center; }
.project-cta-inner .eyebrow { color: var(--gold); }

.project-cta-inner h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  margin-bottom: 1rem;
}

.project-cta-inner p {
  color: rgba(244, 240, 230, 0.82);
  margin-bottom: 2rem;
}

/* ---------- Project page ---------- */

.hero--short { min-height: 68vh; }

.zones-section,
.plots-section,
.payplan-section {
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3.5rem);
}

.zones-section { background: var(--cream); }
.plots-section { background: var(--cream-deep); }
.payplan-section { background: var(--cream); }

.section-lede--muted { color: var(--ink-soft); text-align: center; }

.plan-figure {
  max-width: 82rem;
  margin: 0 auto 3rem;
}

.plan-figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.plan-figure figcaption {
  margin-top: 0.75rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-align: center;
}

/* Wide tables scroll inside their own container rather than pushing the
   page sideways on a phone. */
.table-wrap {
  max-width: 62rem;
  margin: 0 auto;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--line);
}

.data-table th,
.data-table td {
  padding: 1rem 1.15rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}

.data-table th {
  background: var(--cream-deep);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}

.data-table tr:last-child td { border-bottom: none; }

.cell-sub {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-weight: 400;
}

/* Plot availability chips, coloured by status */
.plot-grid {
  max-width: 82rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.9rem;
}

.plot-chip {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 4px;
  padding: 1rem 1.15rem;
}

.plot-chip--available { border-left-color: #4f7a4a; }
.plot-chip--reserved { border-left-color: var(--gold); }
.plot-chip--installment { border-left-color: #5a7fa3; }
.plot-chip--sold { border-left-color: #b0aca0; opacity: 0.68; }

.plot-code {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}

.plot-meta,
.plot-status {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.plot-status { margin-top: 0.35rem; font-weight: 600; }
.plot-chip--available .plot-status { color: #4f7a4a; }

/* Instalment path */
.step-list {
  max-width: 82rem;
  margin: 0 auto;
  list-style: none;
  counter-reset: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.step-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.75rem;
}

.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  font-weight: 700;
  margin-bottom: 1rem;
}

.step-item h3 { font-size: 1.05rem; margin-bottom: 0.4rem; color: var(--ink); }
.step-item p { font-size: 0.92rem; color: var(--ink-soft); }

/* Floating WhatsApp button — bookings and plot enquiries mostly start in
   chat, so it stays reachable at any scroll position. */
.wa-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
  transition: transform 0.18s var(--ease);
}

.wa-fab:hover { transform: scale(1.06); }
.wa-fab svg { width: 30px; height: 30px; fill: #fff; }

@media (max-width: 720px) {
  .wa-fab { width: 50px; height: 50px; right: 14px; bottom: 14px; }
  .wa-fab svg { width: 27px; height: 27px; }

  /* Card-per-row tables, matching how the Manager handles narrow screens. */
  .data-table thead { display: none; }
  .data-table,
  .data-table tbody,
  .data-table tr { display: block; width: 100%; }

  .data-table tr {
    border: 1px solid var(--line);
    border-radius: 4px;
    margin-bottom: 0.9rem;
    background: #fff;
  }

  .data-table td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    text-align: right;
    padding: 0.75rem 1rem;
  }

  .data-table td::before {
    content: attr(data-label);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-align: left;
    flex-shrink: 0;
  }

  .cell-sub { text-align: right; }
}

/* ==========================================================================
   Booking flow — step markers, the live quote card, and the mobile CTA bar.
   The calendar now sits directly under the hero and prices the stay before
   asking for any personal details.
   ========================================================================== */

.book-steps {
  max-width: 82rem;
  margin: 0 auto 2.5rem;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.book-step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  border-radius: 100px;
  background: rgba(35, 36, 29, 0.05);
}

.book-step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(35, 36, 29, 0.14);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.book-step.is-active { background: var(--gold); color: #fff; font-weight: 600; }
.book-step.is-active span { background: rgba(255, 255, 255, 0.28); color: #fff; }
.book-step.is-done { color: var(--sage); }
.book-step.is-done span { background: var(--sage); color: #fff; }
.book-step.is-done span::before { content: '✓'; }
.book-step.is-done span { font-size: 0.75rem; }

/* Calendar beside the running quote. */
.booking-layout {
  max-width: 82rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: 1.75rem;
  align-items: start;
}

.quote-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.75rem;
  box-shadow: var(--shadow);
  position: sticky;
  top: 5.5rem;
}

.quote-card[hidden] { display: none; }

.quote-dates {
  font-family: 'Playfair Display', 'Noto Serif Lao', serif;
  font-size: 1.25rem;
  color: var(--ink);
}

.quote-guests {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.quote-lines { padding: 1rem 0 0; }

.quote-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  padding: 0.35rem 0;
}

.quote-row--total {
  border-top: 1px solid var(--line);
  margin-top: 0.75rem;
  padding-top: 0.9rem;
  font-size: 1.05rem;
  color: var(--ink);
}

.quote-row--total strong { font-size: 1.3rem; }

.quote-row--deposit {
  color: var(--ink);
  font-weight: 600;
  background: var(--cream);
  margin: 0.6rem -0.75rem 0;
  padding: 0.7rem 0.75rem;
  border-radius: 4px;
}

.quote-card .btn { width: 100%; margin-top: 1.25rem; text-align: center; }

.quote-note {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--sage);
  text-align: center;
}

/* Carried-over summary on the details step. */
.book-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0 0;
}

.book-summary[hidden] { display: none; }
.book-summary-dates { font-weight: 600; color: var(--ink); }
.book-summary-total { font-weight: 700; color: var(--ink); margin-left: auto; }
.book-summary-edit { font-size: 0.85rem; color: var(--gold); text-decoration: underline; }

/* Mobile CTA bar — hidden on desktop, where the sticky quote card already
   keeps the price and the button in view. */
.sticky-book-bar { display: none; }

@media (max-width: 960px) {
  .booking-layout { grid-template-columns: 1fr; }
  .quote-card { position: static; }
}

@media (max-width: 720px) {
  .book-steps { gap: 0.35rem; }
  .book-step { font-size: 0.78rem; padding: 0.4rem 0.7rem 0.4rem 0.4rem; }

  .sticky-book-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--cream);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.12);
  }

  .sticky-book-price { display: flex; flex-direction: column; line-height: 1.25; }
  .sticky-book-price s { font-size: 0.72rem; color: #a33; opacity: 0.8; }
  .sticky-book-price strong { font-size: 0.92rem; color: var(--ink); }
  .sticky-book-bar .btn { padding: 0.7rem 1.1rem; font-size: 0.85rem; white-space: nowrap; }

  /* Clear the bar so it never covers the footer or the WhatsApp button —
     but only on the pages that actually render it. */
  .sticky-book-bar ~ .site-footer { padding-bottom: 5.5rem; }
  .sticky-book-bar ~ .wa-fab { bottom: 78px; }
}

/* Step-2 page (book.php) — a form on its own page rather than a section
   buried at the bottom of the home page. */
.step-page { padding-top: 0; }

.book--step { padding-top: clamp(2.5rem, 6vw, 4rem); }
.book--step .book-steps { justify-content: center; margin-bottom: 2rem; }
.book--step .eyebrow,
.book--step h2 { text-align: center; }

.stay-summary {
  background: rgba(244, 240, 230, 0.1);
  border: 1px solid rgba(244, 240, 230, 0.28);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}

.stay-summary-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.9rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(244, 240, 230, 0.22);
}

.stay-summary-head strong { display: block; color: var(--cream); font-size: 1.05rem; }
.stay-summary-head span { font-size: 0.85rem; color: rgba(244, 240, 230, 0.7); }
.stay-summary-head a { font-size: 0.85rem; color: var(--cream-deep); text-decoration: underline; }

/* The quote rows are styled for the light card on the home page; on this dark
   panel they need the cream palette instead. */
.stay-summary .quote-row { color: rgba(244, 240, 230, 0.78); }
.stay-summary .quote-row--total { border-top-color: rgba(244, 240, 230, 0.22); color: var(--cream); }
.stay-summary .quote-row--total strong { color: var(--cream); }

.stay-summary .quote-row--deposit {
  background: rgba(244, 240, 230, 0.14);
  color: var(--cream);
}

.stay-summary .quote-row--deposit strong { color: var(--cream); }