:root {
  color-scheme: light;
  --ink: #2d352c;
  --ink-soft: #5d6254;
  --forest: #365841;
  --forest-dark: #223b2d;
  --leaf: #728369;
  --sage: #e4e7d8;
  --cream: #f4f0e4;
  --paper: #fffdf6;
  --sand: #e9ddc8;
  --gold: #a97747;
  --brown: #76523a;
  --line: #d9d2c1;
  --serif: "Cormorant Garamond", "Noto Serif Thai", Georgia, "Times New Roman", serif;
  --sans: "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, sans-serif;
  --page-pad: clamp(1.25rem, 5.5vw, 6.5rem);
  --type-label: .78rem;
  --type-small: .88rem;
  --type-body: .98rem;
  --type-card-title: 1.2rem;
  --type-section-title: clamp(2.35rem, 4.1vw, 3.4rem);
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--cream); }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { background: #d7dfcc; color: var(--forest-dark); }

.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 50; background: var(--forest-dark); color: white; padding: .7rem 1rem; border-radius: 2rem; }
.skip-link:focus { top: 1rem; }
.site-header { height: 86px; padding: 0 var(--page-pad); display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: var(--cream); position: relative; z-index: 10; border-bottom: 1px solid rgba(38,59,46,.06); }
.brand { display: inline-flex; align-items: center; gap: .65rem; flex-shrink: 0; }
.brand-logo { width: 54px; height: 54px; flex: none; object-fit: contain; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 42px; color: var(--forest); }
.brand-mark svg { width: 100%; height: 100%; }
.brand-name { font-family: var(--serif); letter-spacing: .02em; font-size: 1.36rem; line-height: .96; }
.brand-name span { display: block; font-family: var(--sans); color: var(--leaf); font-size: .56rem; letter-spacing: .31em; text-transform: uppercase; margin-top: .3rem; }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.7vw, 2.7rem); font-size: .78rem; color: var(--ink-soft); }
.site-nav > a:not(.nav-call) { transition: color .2s ease; }
.site-nav > a:not(.nav-call):hover { color: var(--forest); }
.nav-call { display: inline-flex; align-items: center; gap: .7rem; padding: .78rem 1.12rem; background: var(--forest); color: white; border-radius: 999px; font-size: .73rem; }
.nav-call:hover, .button-dark:hover { background: #203829; }
.language-toggle { background: transparent; border: 1px solid #c9cfc1; border-radius: 50%; width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; color: var(--forest); font-size: .67rem; font-weight: 700; letter-spacing: .04em; }
.language-toggle:hover { background: var(--sage); }
.menu-toggle { display: none; }

.hero { position: relative; min-height: min(690px, calc(100svh - 86px)); padding: clamp(4rem, 8vw, 7rem) var(--page-pad) 5rem; display: grid; grid-template-columns: minmax(0, .95fr) minmax(400px, 1.05fr); align-items: center; gap: clamp(1rem, 5vw, 5rem); overflow: hidden; background: var(--cream); }
.hero-copy { position: relative; z-index: 2; max-width: 610px; padding: 1rem 0 2rem; animation: soft-arrive .9s cubic-bezier(.2,.65,.25,1) both; }
.eyebrow { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.4rem; color: #74806f; letter-spacing: .2em; font-size: .63rem; font-weight: 650; }
.eyebrow-dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(187,145,87,.14); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.035em; }
.hero h1 { font-size: clamp(3.5rem, 6.6vw, 6.8rem); line-height: .99; margin: 0 0 1.45rem; color: var(--forest-dark); }
.hero-intro { max-width: 440px; color: var(--ink-soft); font-size: clamp(.96rem, 1.25vw, 1.08rem); line-height: 1.9; margin-bottom: 1.8rem; }
.hero-actions { display: flex; align-items: center; gap: 1.65rem; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 1.4rem; padding: .95rem 1.38rem; border-radius: 999px; min-height: 48px; font-size: .78rem; font-weight: 600; transition: background .2s ease, transform .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-dark { background: var(--forest); color: white; }
.button-light { background: var(--paper); border: 1px solid #d7d9ce; color: var(--forest); }
.button-light:hover { background: #edf0e7; }
.text-link { display: inline-flex; align-items: center; gap: .75rem; color: var(--forest); font-size: .78rem; font-weight: 650; border-bottom: 1px solid rgba(54,84,62,.34); padding: .4rem 0; }
.text-link:hover { color: var(--gold); border-color: var(--gold); }
.hero-note { display: flex; align-items: center; gap: .8rem; margin-top: clamp(2.5rem, 5vw, 4.5rem); color: #7b8375; font-size: .69rem; }
.note-line { width: 32px; height: 1px; background: var(--gold); }
.hero-art { position: relative; height: min(550px, 58vw); min-height: 400px; max-height: 550px; display: grid; place-items: center; isolation: isolate; animation: art-arrive 1.25s cubic-bezier(.2,.65,.25,1) .12s both; }
.hero-art::before { content: ""; position: absolute; z-index: -2; width: min(87%, 505px); aspect-ratio: 1; border-radius: 50%; background: #e9eadd; top: 50%; left: 50%; transform: translate(-48%, -47%); }
.hero-art::after { content: ""; position: absolute; z-index: -1; width: min(73%, 422px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(73,107,83,.24); top: 50%; left: 50%; transform: translate(-45%, -51%); }
.art-sun { position: absolute; z-index: -1; width: 170px; aspect-ratio: 1; border-radius: 50%; background: #e0ca9e; opacity: .43; top: 11%; right: 14%; }
.art-orbit { position: absolute; width: 80%; aspect-ratio: .85; border: 1px solid rgba(187,145,87,.35); border-radius: 50%; transform: rotate(29deg); }
.hero-leaves { width: min(100%, 560px); height: auto; max-height: 100%; filter: drop-shadow(0 22px 18px rgba(48,70,48,.08)); animation: float-leaf 8s ease-in-out infinite; }
.art-caption { position: absolute; left: 2%; bottom: 8%; display: flex; flex-direction: column; gap: .25rem; color: #7a8974; font-size: .52rem; letter-spacing: .26em; }
.art-caption span:last-child { color: #9a9d8b; font-size: .43rem; }
.hero-bottomline { position: absolute; left: var(--page-pad); right: var(--page-pad); bottom: 1.25rem; display: flex; justify-content: space-between; color: #93998d; text-transform: uppercase; letter-spacing: .13em; font-size: .52rem; }

.intro-strip { min-height: 118px; padding: 1.2rem var(--page-pad); background: var(--forest); color: white; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 2rem; }
.strip-item { display: flex; align-items: center; gap: .95rem; justify-content: center; }
.strip-icon { color: #d8bd8f; font-family: var(--serif); font-size: 1.45rem; }
.strip-item div { display: flex; flex-direction: column; gap: .25rem; }
.strip-item small { color: #c4cebd; font-size: .54rem; letter-spacing: .17em; }
.strip-item strong { font-size: .76rem; font-weight: 500; letter-spacing: .02em; }

.section-pad { padding: clamp(4.8rem, 9vw, 8.4rem) var(--page-pad); }
.treatments { background: var(--paper); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 3rem; margin-bottom: 3.1rem; }
.section-heading .eyebrow, .visit-heading .eyebrow, .space-copy .eyebrow { margin-bottom: 1rem; }
.section-heading h2, .visit-heading h2, .space-copy h2 { font-size: var(--type-section-title); line-height: 1.16; margin: 0; }
.section-lede { max-width: 370px; color: var(--ink-soft); font-size: var(--type-body); line-height: 1.8; margin: 0 0 .32rem; }
.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.service-card { background: var(--paper); min-height: 350px; padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; transition: background .35s ease, transform .35s cubic-bezier(.2,.65,.25,1), box-shadow .35s ease; }
.service-card:hover { background: #f3f4eb; transform: translateY(-5px); box-shadow: 0 14px 30px rgba(48,65,47,.08); position: relative; z-index: 1; }
.service-featured { background: #f2f1e7; }
.service-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.45rem; }
.service-card .service-top { margin-bottom: .65rem; }
.service-image { display: block; width: 100%; aspect-ratio: 1.55 / 1; object-fit: cover; border-radius: 3px 3px 32px 3px; margin: 0 0 1rem; background: #e4e7d8; }
.service-index { color: #9b9f91; font-size: .56rem; letter-spacing: .13em; }
.service-symbol { width: 34px; height: 34px; display: grid; place-items: center; color: var(--gold); background: #f7f1e3; border-radius: 50%; font-family: var(--serif); font-size: 1.12rem; }
.service-card h3 { font-family: var(--serif); font-weight: 400; font-size: var(--type-card-title); line-height: 1.4; letter-spacing: -.015em; margin: 0 0 .58rem; color: var(--forest-dark); }
.service-card p { color: #727c70; font-size: var(--type-small); line-height: 1.8; margin: 0 0 1.15rem; }
.duration-list { display: flex; flex-wrap: wrap; gap: .38rem; margin-top: auto; }
.duration-list span { display: inline-flex; border: 1px solid #d8ddd2; border-radius: 99px; padding: .34rem .55rem; color: #687766; font-size: var(--type-label); white-space: nowrap; }
.menu-note { margin: 1.7rem 0 0; color: #788174; display: flex; justify-content: center; gap: .35rem; flex-wrap: wrap; font-size: var(--type-small); }
.menu-note a { color: var(--forest); font-weight: 700; border-bottom: 1px solid var(--gold); }

.booking-section { background: #e9e3d3; }
.booking-heading { margin-bottom: 2.3rem; }
.booking-form { max-width: 1120px; margin: 0 auto; padding: clamp(1.25rem, 3vw, 2.2rem); background: var(--paper); border: 1px solid #d4c9b4; box-shadow: 0 22px 60px rgba(58, 49, 35, .08); }
.availability-toolbar { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: .85rem; }
.availability-date { min-width: min(65vw, 260px); margin: 0; color: var(--forest-dark); text-align: center; font-family: var(--serif); font-size: clamp(1.2rem, 3vw, 1.55rem); }
.day-nav { width: 40px; height: 40px; border: 1px solid #c9bead; border-radius: 50%; background: #fffefa; color: var(--forest-dark); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.day-nav:hover, .day-nav:focus-visible { background: var(--forest); color: white; }
.booking-fields { display: grid; grid-template-columns: 1.35fr .8fr .9fr auto; align-items: end; gap: .9rem; }
.booking-field { min-width: 0; display: flex; flex-direction: column; gap: .45rem; color: var(--forest-dark); font-size: .7rem; font-weight: 650; }
.booking-field select, .booking-field input { width: 100%; min-height: 48px; padding: .75rem .8rem; border: 1px solid #cfc6b5; border-radius: 2px; background: #fffefa; color: var(--ink); font: inherit; font-size: .78rem; }
.booking-field select:disabled { color: #858477; background: #f1eee6; }
.booking-check { min-height: 48px; white-space: nowrap; }
.button-brown { background: var(--brown); color: white; }
.button-brown:hover { background: #60412f; }
.booking-status { min-height: 52px; margin: 1.3rem 0 0; padding: .85rem 1rem; background: #f3f0e8; color: var(--ink-soft); border-left: 3px solid var(--leaf); font-size: .76rem; line-height: 1.6; }
.booking-status[data-state="loading"] { border-left-color: var(--gold); }
.booking-status[data-state="error"], .booking-status[data-state="conflict"] { border-left-color: #a25238; color: #75402e; }
.booking-status[data-state="success"] { border-left-color: var(--forest); color: var(--forest-dark); background: #eaf0e5; }
.booking-contact-fallback { margin: .85rem 0 0; color: var(--ink-soft); font-size: .7rem; line-height: 1.75; }
.booking-contact-fallback a { color: var(--forest); font-weight: 700; border-bottom: 1px solid #b8aa8e; }
.availability-wrap { overflow-x: auto; margin-top: 1.1rem; border: 1px solid var(--line); }
.availability-legend { display: flex; flex-wrap: wrap; gap: .55rem 1.25rem; margin: 1.1rem 0 .7rem; color: var(--ink-soft); font-size: var(--type-small); }
.availability-legend > span { display: inline-flex; align-items: center; gap: .45rem; }
.legend-swatch { width: 10px; height: 10px; border-radius: 50%; background: #dce9d7; border: 1px solid #86a37d; }
.legend-swatch.is-busy { background: #e8e2d8; border-color: #c9bead; }
.availability-table { width: 100%; min-width: 620px; border-collapse: collapse; background: white; font-size: var(--type-small); }
.availability-table th, .availability-table td { padding: .62rem .5rem; text-align: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.availability-table thead th { position: sticky; top: 0; background: var(--forest-dark); color: white; font-weight: 600; }
.availability-table thead th:first-child, .availability-table tbody th { min-width: 82px; text-align: center; }
.availability-table tbody th { background: #f6f2e9; color: var(--brown); font-weight: 650; }
.availability-table tbody th .slot-notice { display: block; margin-top: .2rem; color: var(--ink-soft); font-size: .68rem; font-weight: 500; line-height: 1.35; white-space: normal; }
.availability-table tbody td { min-width: 130px; }
.availability-empty { padding: 1.5rem 1rem !important; color: var(--ink-soft); text-align: center; line-height: 1.7; }
.slot-count { display: inline-flex; min-width: 52px; min-height: 42px; flex-direction: column; align-items: center; justify-content: center; gap: .08rem; font-size: .9rem; font-weight: 750; }
.slot-count small { font-size: .62rem; font-weight: 550; line-height: 1.25; white-space: nowrap; }
.booking-fields-request { grid-template-columns: 1.4fr .75fr; margin-bottom: 1rem; }
.booking-fields-request .booking-field select { width: 100%; min-height: 48px; padding: .75rem .8rem; border: 1px solid #cfc6b5; border-radius: 2px; background: #fffefa; color: var(--ink); font: inherit; font-size: .78rem; }
.booking-fields-request .booking-field select:disabled { color: #858477; background: #f1eee6; }
.slot-button { width: 100%; padding: .45rem .35rem; border: 1px solid #abc0a5; border-radius: 999px; background: #eef4ea; color: #345a3d; font: inherit; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
.slot-button:hover, .slot-button.is-selected { color: white; background: var(--forest); border-color: var(--forest); }
.slot-button:disabled { cursor: not-allowed; opacity: .58; }
.slot-button:hover { transform: translateY(-1px); }
.slot-unavailable { display: inline-block; padding: .43rem .35rem; border: 1px solid #e0d9cc; border-radius: 999px; background: #f1ede5; color: #898377; font-size: .62rem; white-space: nowrap; }
.request-fields { margin: 1.5rem 0 0; padding: 1.1rem; border: 1px solid var(--line); }
.request-fields:disabled { display: none; }
.request-fields legend { padding: 0 .45rem; color: var(--forest-dark); font-family: var(--serif); font-size: 1.2rem; }
.selected-slot { margin: .25rem 0 1rem; color: var(--brown); font-size: .78rem; font-weight: 650; }
.booking-fields-contact { grid-template-columns: 1fr 1fr; }
.field-counter { min-height: 1rem; color: var(--ink-soft); font-size: .62rem; font-weight: 450; text-align: right; }
.field-counter[data-state="valid"] { color: var(--forest); }
.field-counter[data-state="invalid"] { color: #89513b; }
.modal-status { margin: .8rem 0 0; color: #89513b; font-size: .72rem; line-height: 1.55; }
.booking-disclosure { margin: 1rem 0 0; color: var(--ink-soft); font-size: .68rem; line-height: 1.7; }
.booking-form button:disabled { opacity: .6; cursor: wait; }
.booking-modal { width: min(560px, calc(100% - 2rem)); max-height: min(760px, calc(100dvh - 2rem)); overflow: auto; margin: auto; padding: clamp(1.2rem, 4vw, 2rem); border: 1px solid #d4c9b4; border-radius: 8px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 90px rgba(24,37,27,.28); }
.booking-modal::backdrop { background: rgba(25,36,27,.58); backdrop-filter: blur(3px); }
.modal-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.4rem; }
.modal-heading .eyebrow { margin-bottom: .65rem; }
.modal-heading h2 { margin: 0; color: var(--forest-dark); font-family: var(--serif); font-size: clamp(1.9rem, 6vw, 2.7rem); line-height: 1.06; }
.modal-close { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--forest); font-size: 1.45rem; line-height: 1; cursor: pointer; }
.modal-close:hover { background: var(--sage); }
.request-form .request-fields { margin: 0; padding: 0; border: 0; }
.request-form .booking-fields-contact .booking-field input { min-height: 50px; }
.modal-status { margin: 1rem 0 0; padding: .75rem .9rem; border-left: 3px solid #a25238; background: #f5ece5; color: #75402e; font-size: .75rem; line-height: 1.6; }
.booking-disclosure { padding-top: .2rem; }
.modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .65rem; margin-top: 1.2rem; }
.modal-actions .button { min-height: 46px; }

.space-section { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr); min-height: 520px; background: var(--sage); overflow: hidden; }
.space-art { min-height: 490px; position: relative; display: grid; place-items: center; overflow: hidden; background: #e5e9dc; }
.space-ring { position: absolute; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(61,88,64,.2); }
.ring-one { width: min(80%, 470px); }
.ring-two { width: min(62%, 365px); border-color: rgba(187,145,87,.45); }
.space-leaf { position: absolute; width: clamp(125px, 18vw, 225px); height: clamp(220px, 32vw, 360px); border-radius: 100% 0 100% 0; transform-origin: bottom center; background: linear-gradient(145deg, #99a98b 3%, #567158 70%); box-shadow: inset 18px -10px 30px rgba(255,255,255,.19), 15px 20px 35px rgba(40,65,44,.08); }
.space-leaf::after { content: ""; position: absolute; height: 78%; width: 1px; background: rgba(235,239,221,.65); left: 50%; top: 11%; transform: rotate(18deg); transform-origin: bottom; }
.leaf-one { transform: rotate(-42deg) translate(-27%, 4%); animation: leaf-sway 7.5s ease-in-out infinite; }
.leaf-two { transform: rotate(28deg) translate(14%, -7%) scale(.9); background: linear-gradient(145deg, #748e70, #3f6348); animation: leaf-sway 8.5s ease-in-out -2.5s infinite reverse; }
.leaf-three { transform: rotate(-9deg) translate(-14%, -18%) scale(.7); background: linear-gradient(145deg, #b1b99e, #788d72); animation: leaf-sway 9s ease-in-out -4s infinite; }
.space-moon { position: absolute; z-index: 2; font-family: var(--serif); color: #d1ac71; font-size: clamp(3rem, 6vw, 5rem); right: 19%; top: 19%; }
.space-copy { padding: clamp(3rem, 6vw, 5.8rem) clamp(2rem, 6vw, 6rem); align-self: center; }
.space-copy h2 { margin-bottom: 1.3rem; }
.space-copy > p:not(.eyebrow) { color: var(--ink-soft); max-width: 440px; font-size: var(--type-body); line-height: 1.85; margin-bottom: 1.4rem; }

.visit-section { position: relative; background: var(--cream); display: grid; grid-template-columns: 1fr .8fr; gap: 4rem; overflow: hidden; }
.visit-heading { position: relative; z-index: 2; }
.visit-details { position: relative; z-index: 2; max-width: 480px; }
.detail-row { padding: 0 0 1.25rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.detail-label { display: block; color: #84907e; font-size: var(--type-label); letter-spacing: .14em; margin-bottom: .56rem; }
.detail-row p { color: var(--ink); font-size: var(--type-body); line-height: 1.8; margin: 0; }
.detail-row .thai-address { color: var(--ink-soft); font-size: var(--type-small); margin-top: .32rem; }
.address-en, .address-th { display: none; }
html[lang="en"] .address-en, html[lang="th"] .address-th { display: block; }
.detail-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.visit-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.visit-decoration { position: absolute; right: -3rem; bottom: -11rem; width: 450px; height: 360px; opacity: .32; }
.map-pin { position: absolute; left: 40%; top: 27%; color: #b8844b; font-size: 3.8rem; text-shadow: 0 0 0 6px #fff; }
.map-path { position: absolute; left: 16%; top: 48%; width: 70%; height: 40%; border: 1px dashed #75866c; border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(-18deg); }
.map-label { position: absolute; left: 21%; top: 31%; font-size: .6rem; letter-spacing: .25em; color: var(--forest); }
.map-circle { position: absolute; right: 13%; top: 24%; width: 130px; height: 130px; border-radius: 50%; border: 1px solid #a5b19a; }

.site-footer { padding: 2.2rem var(--page-pad) 1.7rem; background: var(--forest-dark); color: #eef0e7; display: grid; grid-template-columns: 1.2fr 1fr 1.8fr; align-items: center; gap: 1.4rem; }
.footer-brand .brand-logo { width: 48px; height: 48px; }
.footer-brand .brand-name { color: white; }
.footer-brand .brand-name span { color: #c3d0ba; }
.site-footer > p { font-family: var(--serif); font-style: italic; color: #d4dfcb; font-size: .9rem; margin: 0; }
.footer-actions { justify-self: end; display: flex; flex-wrap: wrap; gap: .9rem 1.35rem; color: #d3dccd; font-size: .68rem; }
.footer-actions a:hover { color: #e7c995; }
.site-footer > small { grid-column: 1 / -1; border-top: 1px solid rgba(240,244,230,.15); padding-top: 1rem; margin-top: .65rem; color: #aebba9; font-size: .59rem; letter-spacing: .1em; }

:focus-visible { outline: 3px solid #c18d4d; outline-offset: 3px; border-radius: 4px; }
html.motion-enabled .reveal-on-scroll { opacity: 0; transform: translateY(18px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.65,.25,1); }
html.motion-enabled .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
.service-card.reveal-on-scroll:nth-child(4n + 2) { transition-delay: .07s; }
.service-card.reveal-on-scroll:nth-child(4n + 3) { transition-delay: .14s; }
.service-card.reveal-on-scroll:nth-child(4n + 4) { transition-delay: .21s; }
@keyframes float-leaf { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
@keyframes soft-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes art-arrive { from { opacity: 0; transform: translateY(14px) scale(.975); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes leaf-sway { 0%, 100% { rotate: -1.7deg; } 50% { rotate: 1.7deg; } }

@media (max-width: 1000px) {
  .site-nav { gap: 1.2rem; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(330px, .9fr); gap: 1rem; }
  .hero h1 { font-size: clamp(3.4rem, 7.5vw, 5.8rem); }
  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .site-header { height: 72px; }
  .brand-logo { width: 48px; height: 48px; }
  .menu-toggle { display: flex; width: 42px; height: 42px; border: 1px solid #d4d9ce; border-radius: 50%; background: transparent; align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer; }
  .menu-toggle span { height: 1px; width: 15px; background: var(--forest); transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .site-nav { position: absolute; top: 71px; left: 0; right: 0; padding: 0 var(--page-pad); background: var(--paper); display: flex; flex-direction: column; align-items: stretch; gap: 0; max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .25s ease, padding .25s ease, visibility .25s; border-bottom: 1px solid transparent; }
  .site-nav.is-open { max-height: 350px; padding-top: .6rem; padding-bottom: 1.2rem; visibility: visible; border-color: var(--line); }
  .site-nav > a:not(.nav-call) { padding: .82rem 0; border-bottom: 1px solid #e8e9e0; }
  .site-nav .nav-call { justify-content: center; margin-top: .9rem; }
  .site-nav .language-toggle { position: absolute; right: var(--page-pad); top: .46rem; }
  .hero { min-height: 0; grid-template-columns: 1fr; padding-top: 3.9rem; padding-bottom: 4.4rem; gap: .4rem; }
  .hero-copy { padding-bottom: 0; }
  .hero .eyebrow { font-size: .55rem; }
  .hero h1 { font-size: clamp(3.4rem, 14vw, 5.8rem); }
  .hero-intro { max-width: 450px; font-size: .92rem; }
  .hero-art { height: clamp(320px, 96vw, 470px); min-height: 0; margin: -1rem auto 0; width: min(100%, 510px); }
  .art-caption { left: 1%; bottom: 6%; }
  .hero-note { margin-top: 1.8rem; font-size: .64rem; }
  .hero-bottomline { bottom: .85rem; font-size: .43rem; }
  .intro-strip { grid-template-columns: 1fr; gap: 1.1rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .strip-item { justify-content: flex-start; max-width: 280px; width: 100%; margin: auto; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
  .section-heading h2, .visit-heading h2, .space-copy h2 { font-size: clamp(2.2rem, 8vw, 3rem); line-height: 1.2; }
  .section-lede { font-size: var(--type-body); max-width: 480px; }
  .booking-fields, .booking-fields-contact { grid-template-columns: 1fr 1fr; }
  .booking-check, .booking-fields-contact .button { grid-column: 1 / -1; width: 100%; }
  .booking-form { padding: 1rem; }
  .booking-fields-contact { gap: .8rem; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card { min-height: 230px; padding: 1rem; }
  .service-card h3 { font-size: 1.12rem; }
  .service-card p { font-size: var(--type-small); }
  .space-section { grid-template-columns: 1fr; }
  .space-art { min-height: 340px; }
  .space-copy { padding: 3.2rem var(--page-pad) 4rem; }
  .visit-section { grid-template-columns: 1fr; gap: 2rem; }
  .visit-details { max-width: none; }
  .visit-decoration { right: -9rem; bottom: -9rem; transform: scale(.8); }
  .site-footer { grid-template-columns: 1fr 1fr; gap: 1.3rem; }
  .site-footer > p { justify-self: end; text-align: right; }
  .footer-actions { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 430px) {
  .booking-fields, .booking-fields-contact { grid-template-columns: 1fr; }
  .booking-fields-request { grid-template-columns: 1fr; }
  .booking-check, .booking-fields-contact .button { grid-column: auto; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 200px; padding: 1.15rem 1.2rem; }
  .service-top { margin-bottom: 1rem; }
  .duration-list { margin-top: .4rem; }
  .detail-split { grid-template-columns: 1fr; gap: 1.15rem; }
  .hero-bottomline span:last-child { display: none; }
  .visit-actions { flex-direction: column; align-items: stretch; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer > p { justify-self: start; text-align: left; margin-top: -.5rem; }
  .footer-actions { flex-direction: column; gap: .65rem; }
  .booking-modal { padding: 1.15rem; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .button { width: 100%; }
}

/* Conceptual spa still life; it does not depict the actual shop interior. */
.spa-hero-image { position: relative; z-index: 1; display: block; width: min(94%, 570px); aspect-ratio: 3 / 2; max-height: 84%; object-fit: cover; border: 7px solid rgba(255,255,255,.72); border-radius: 18px 18px 86px 18px; box-shadow: 0 22px 46px rgba(53,55,40,.16); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Keep Thai line breaks on complete phrases and give body copy room to breathe. */
html[lang="th"] .hero h1 { font-size: clamp(3.5rem, 5vw, 4.9rem); line-height: 1.25; letter-spacing: 0; }
html[lang="th"] .hero-intro,
html[lang="th"] .section-lede,
html[lang="th"] .service-card p,
html[lang="th"] .space-copy > p:not(.eyebrow),
html[lang="th"] .booking-status,
html[lang="th"] .booking-disclosure { line-height: 1.9; text-wrap: pretty; }
.section-lede, .service-card h3, .service-card p, .detail-row p { text-wrap: pretty; }
.service-card h3 { line-height: 1.4; }
.service-card p { font-size: var(--type-small); line-height: 1.8; }
@media (max-width: 1000px) {
  html[lang="th"] .hero h1 { font-size: clamp(3.1rem, 6.2vw, 4.2rem); }
}
@media (max-width: 760px) {
  html[lang="th"] .hero h1 { font-size: clamp(2.7rem, 9.5vw, 3.7rem); line-height: 1.3; }
  .service-card p { font-size: var(--type-small); }
}