/* Interaction and type pass (Owner 2026-09-24: “按钮要增加灵动和互动感，选框也是如此，不要有老式windows一般的点击感，要先进、有互动感”;
   “大小、搭配的观感一定要非常完美、非常漂亮……这里的字体明显有小了的”). Premium and quiet: soft lift on hover, a small press,
   smooth selected states, visible keyboard focus, and nothing moves for guests who ask for reduced motion.
   Ease follows the product curve used across the company, cubic-bezier(.2,.8,.2,1). */
:root{--ease:cubic-bezier(.2,.8,.2,1);--leaf:#2e5a2c;--leaf-2:#3d7338;--mist:#eaf3e2;--lagoon:#2c958b;--ring:0 0 0 3px #2c958b55}

/* ---------- type scale: fewer, closer steps; CJK never small or thinly tracked ---------- */
body{font-size:16px;line-height:1.65}
:lang(zh) body{line-height:1.75}
.micro,.section-top>p,.room-content .eyebrow,.selected-badge,.selected-badge a,.viewer-caption,label,label>span{font-size:14px}
:lang(zh) .micro,:lang(zh) .section-top>p,:lang(zh) .room-content .eyebrow,:lang(zh) label>span,:lang(zh) .features{font-size:15px}
.eyebrow{font-size:13px;letter-spacing:.16em}
:lang(zh) .eyebrow{font-size:14px;letter-spacing:.06em;font-weight:600}
.intro-text,.hero-sub{font-size:18px;line-height:1.7}
.features{font-size:14px;gap:22px}
h3{font-size:30px}
:lang(zh) h3{font-size:26px}
h2{font-size:clamp(30px,3vw,44px)}
:lang(zh) h2{font-size:clamp(28px,2.8vw,40px)}
.price,.price strong,.stage-price,.quote-result strong,#stage-price,.date-nights{font-variant-numeric:tabular-nums lining-nums}
.price{font-size:14px}
.room-select,.text-link{font-size:15px;font-weight:600}
.pill{font-size:15px;font-weight:600;letter-spacing:.01em}
:lang(zh) .pill{letter-spacing:.04em}

/* ---------- buttons: lift, press, focus ---------- */
.pill,.room-select,.text-link,.quiet-link,.sound-toggle,.oh-chat-fab,.oh-chat-send,.oh-chat-chips button,.type-tabs button,.room-chips button,.step,.kid-add,.kid-ages button,.date-field{
 transition:transform .22s var(--ease),box-shadow .22s var(--ease),background-color .22s ease,border-color .22s ease,color .2s ease}
.pill:hover{transform:translateY(-1px);box-shadow:0 10px 24px #18261b26}
.pill:active,.room-chips button:active,.step:active,.kid-ages button:active,.oh-chat-chips button:active,.date-field:active{transform:scale(.97);box-shadow:none}
:where(.pill,.room-select,.text-link,.quiet-link,.type-tabs button,.room-chips button,.step,.kid-add,.kid-ages button,.date-field,.plan-option,.check input):focus-visible{outline:none;box-shadow:var(--ring)}

/* ---------- room type tabs: an indicator that slides ---------- */
.type-tabs{position:relative}
.type-tabs button{border-bottom-color:transparent!important;color:var(--muted);font-size:15px}
.type-tabs button.active{color:var(--ink);font-weight:600}
.type-tabs::after{content:'';position:absolute;left:0;bottom:-1px;width:50%;height:2px;background:var(--leaf);border-radius:2px;transition:transform .38s var(--ease)}
.type-tabs:has(button:nth-child(2).active)::after{transform:translateX(100%)}

/* ---------- room chips ---------- */
.room-chips button{border-radius:10px;min-height:44px;min-width:46px;font-size:15px;background:#fff}
.room-chips button:hover{border-color:var(--leaf);transform:translateY(-1px)}
.room-chips button.active{box-shadow:0 6px 16px #2e5a2c40}

/* ---------- original inputs stay in the form as the data source ---------- */
.vc-source,.vc-source-inline{display:none!important}
.field-label{display:block;margin-bottom:9px;font-size:14px;color:var(--ink)}
:lang(zh) .field-label{font-size:15px}

/* ---------- dates ---------- */
.date-field-wrap{position:relative;margin-bottom:20px}
.date-field{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:0 18px;border:1px solid #c0cbb8;border-radius:12px;background:#fff;
 color:var(--ink);font:500 16px/1.2 var(--sans);text-align:left;cursor:pointer}
.date-field:hover{border-color:var(--leaf);box-shadow:0 8px 20px #18261b14}
.date-field.is-empty .date-part{color:var(--muted);font-weight:400}
.date-arrow{color:var(--muted)}
.date-nights{margin-left:auto;padding:5px 10px;border-radius:999px;background:var(--mist);color:var(--leaf);font-size:13px;font-weight:600}
.date-nights:empty{display:none}
.date-pop{position:absolute;z-index:20;top:calc(100% + 8px);right:0;width:min(660px,calc(100vw - 32px));padding:16px 18px 12px;border-radius:16px;background:#fff;
 box-shadow:0 24px 60px #18261b33;animation:pop-in .24s var(--ease)}
.date-pop[hidden]{display:none}
.date-pop-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 4px 10px;font-size:14px}
.date-close{border:0;background:none;color:var(--leaf);font:600 14px var(--sans);cursor:pointer;padding:6px 8px;border-radius:8px}
@keyframes pop-in{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:760px){
 .date-pop{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;border-radius:18px 18px 0 0;padding:18px 14px calc(16px + env(safe-area-inset-bottom));
  animation:sheet-in .28s var(--ease)}
 @keyframes sheet-in{from{transform:translateY(100%)}to{transform:none}}
}
/* vanilla-calendar-pro, themed to the site */
.date-pop [data-vc=calendar]{font-family:var(--sans);color:var(--ink);background:transparent;padding:0;border:0;box-shadow:none}
.date-pop [data-vc=grid]{display:flex;flex-wrap:nowrap;gap:28px}.date-pop [data-vc=column]{flex:1 1 0;min-width:0}
.date-pop [data-vc=month],.date-pop [data-vc=year]{font:600 15px var(--sans);color:var(--ink)}
.date-pop [data-vc-arrow]{width:32px;height:32px;border-radius:50%;transition:background-color .15s ease,transform .12s ease}
.date-pop [data-vc-arrow]:hover{background:var(--mist)}
.date-pop [data-vc-arrow]:active{transform:scale(.92)}
/* Own chevrons (the library's arrow icons live in its theme CSS, which the site does not load) and arrows on the month-title
   row, not over the weekday row (Owner 09-25: the round next button sat on 周日). */
.date-pop [data-vc=controls]{padding:0;top:0}
.date-pop [data-vc=header]{min-height:32px;align-items:center}
.date-pop [data-vc-arrow]:before{content:'';inset:0;margin:auto;width:8px;height:8px;background:none;border-right:1.8px solid var(--ink);border-bottom:1.8px solid var(--ink)}
.date-pop [data-vc-arrow=next]:before{transform:translateX(-2px) rotate(-45deg)}
.date-pop [data-vc-arrow=prev]:before{transform:translateX(2px) rotate(135deg)}
.date-pop [data-vc-arrow][disabled],.date-pop [data-vc-arrow][data-vc-arrow-disabled]{opacity:.3;cursor:default}
.date-pop [data-vc-week-day-btn],.date-pop [data-vc=week]{font-size:12px;color:var(--muted)}
.date-pop [data-vc-date-btn]{width:40px;height:40px;border:0;background:transparent;cursor:pointer;border-radius:50%;font:500 14px var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;
 transition:background-color .15s ease,color .15s ease,transform .15s var(--ease)}
.date-pop [data-vc-date-btn]:hover{background:var(--mist)}
.date-pop [data-vc-date-btn]:active{transform:scale(.94)}
.date-pop [data-vc-date-today] [data-vc-date-btn]{box-shadow:inset 0 0 0 1.5px var(--lagoon)}
.date-pop [data-vc-date-disabled] [data-vc-date-btn]{color:#b8c2b3;background:none}
.date-pop [data-vc-date-selected=middle]{background:var(--mist)}
.date-pop [data-vc-date-selected=middle] [data-vc-date-btn]{background:transparent;border-radius:0;color:var(--leaf)}
.date-pop [data-vc-date-selected=first],.date-pop [data-vc-date-selected=last],.date-pop [data-vc-date-selected=first-and-last]{background:var(--mist)}
.date-pop [data-vc-date-selected=first]{border-radius:20px 0 0 20px}
.date-pop [data-vc-date-selected=last]{border-radius:0 20px 20px 0}
.date-pop [data-vc-date-selected=first] [data-vc-date-btn],.date-pop [data-vc-date-selected=last] [data-vc-date-btn],
.date-pop [data-vc-date-selected=first-and-last] [data-vc-date-btn]{background:var(--leaf);color:#fff}
.date-pop [data-vc-date-hover] [data-vc-date-btn]{background:var(--mist)}
/* Neighbouring-month days stay in the grid for alignment, but they are not part of this month and must not carry the range bar. */
.date-pop [data-vc-date-month="prev"],
.date-pop [data-vc-date-month="next"]{min-height:40px;background:none;border-radius:0}
.date-pop [data-vc-date-month="prev"][data-vc-date-selected],
.date-pop [data-vc-date-month="next"][data-vc-date-selected]{background:none;border-radius:0}
.date-pop [data-vc-date-month="prev"] [data-vc-date-btn],
.date-pop [data-vc-date-month="next"] [data-vc-date-btn]{color:#b8c2b3;background:none;box-shadow:none;pointer-events:none;cursor:default}

/* Calendar availability and separate stays extend the original leaf/mist palette. */
#booking-form .date-status{margin:0 0 12px;color:var(--ink);font:500 14px/1.55 var(--sans)}
#booking-form .date-status:empty{display:none}
#booking-form .date-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 16px;font:500 13px/1.5 var(--sans);color:var(--muted)}
#booking-form .date-legend span{display:inline-flex;align-items:center;gap:7px}
#booking-form .date-legend span::before{content:'';width:12px;height:12px;border-radius:50%;border:1px solid var(--leaf);background:var(--mist);flex:none}
#booking-form .date-legend [data-legend-state=blocked]::before{border-color:#8c6660;background:repeating-linear-gradient(135deg,transparent,transparent 3px,#8c666066 3px,#8c666066 4px)}
#booking-form .date-legend [data-legend-state=unknown]::before{background:transparent;border-style:dotted;border-color:var(--muted)}
#booking-form .date-legend [data-legend-state=checkout]::before{background:transparent;border-style:dashed;border-color:var(--lagoon)}
#booking-form .date-pop [data-calendar-night=blocked] [data-vc-date-btn]{color:#8d3b32!important;background:repeating-linear-gradient(135deg,#fff0ed,#fff0ed 5px,#e8c9c3 5px,#e8c9c3 6px)!important;opacity:1!important;font-weight:700;text-decoration:line-through;text-decoration-thickness:2px}
#booking-form .date-pop [data-calendar-night=unknown] [data-vc-date-btn]{color:var(--muted);box-shadow:inset 0 0 0 1px #68756333}
#booking-form .date-pop [data-calendar-boundary=checkout] [data-vc-date-btn]{color:var(--lagoon);text-decoration:none;outline:1px dashed var(--lagoon);outline-offset:-4px;background:transparent}
#booking-form .date-pop [data-calendar-period=saved]{background:var(--mist);box-shadow:inset 0 -2px 0 var(--leaf)}
#booking-form .stay-periods{display:grid;gap:8px;margin-top:10px}
#booking-form .stay-periods[hidden]{display:none}
#booking-form .stay-period{display:flex;gap:4px;min-width:0;border:1px solid #c0cbb8;border-radius:10px;background:#fff}
#booking-form .stay-period-edit{flex:1;min-width:0;min-height:44px;padding:8px 12px;border:0;border-radius:9px;background:transparent;color:var(--ink);font:500 15px/1.45 var(--sans);text-align:start;cursor:pointer}
#booking-form .stay-period-edit[aria-pressed=true]{background:var(--mist);color:var(--leaf)}
#booking-form .stay-period-remove{flex:none;min-height:44px;width:44px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:400 22px/1 var(--sans);cursor:pointer}
#booking-form .stay-period-remove:hover{background:var(--mist)}
#booking-form .stay-period-add{min-height:44px;margin-top:8px;padding:8px 2px;border:0;background:transparent;color:var(--leaf);font:600 14px/1.5 var(--sans);text-align:start;cursor:pointer}
#booking-form .stay-period-add:disabled,#booking-form .stay-period button:disabled{opacity:.5;cursor:default}
#booking-form :is(.stay-period-edit,.stay-period-remove,.stay-period-add):focus-visible{outline:2px solid var(--lagoon);outline-offset:2px}
#booking-form .stay-period-note{margin:2px 0 0;color:var(--muted);font:400 13px/1.5 var(--sans)}
#booking-form .stay-period-note:empty{display:none}

/* ---------- adults stepper ---------- */
.stepper-wrap{margin-bottom:20px}
.stepper{display:inline-flex;align-items:center;gap:6px;padding:5px;border:1px solid #c0cbb8;border-radius:999px;background:#fff}
.step{width:44px;height:44px;border:0;border-radius:50%;background:var(--mist);color:var(--leaf);font:500 22px/1 var(--sans);cursor:pointer}
.step:hover:not(:disabled){background:var(--leaf);color:#fff}
.step:disabled{opacity:.35;cursor:default}
.step-value{min-width:40px;text-align:center;font:600 18px var(--sans);font-variant-numeric:tabular-nums;border-radius:8px}
.step-value.bump{animation:bump .28s var(--ease)}
@keyframes bump{40%{transform:scale(1.18)}100%{transform:none}}

/* ---------- children ages ---------- */
.kids-wrap{margin-bottom:20px}
.kid-chips{display:flex;flex-wrap:wrap;gap:8px}
.kid-chips:empty{display:none}
.kid-chips:not(:empty){margin-bottom:10px}
.kid-chip{display:inline-flex;align-items:center;gap:4px;padding:0 4px 0 14px;height:38px;border-radius:999px;background:var(--mist);color:var(--leaf);
 font-size:14px;font-weight:600;animation:pop-in .22s var(--ease)}
.kid-chip button{width:30px;height:30px;border:0;border-radius:50%;background:none;color:inherit;font-size:18px;cursor:pointer}
.kid-chip button:hover{background:#2e5a2c1f}
.kid-add{height:44px;padding:0 16px;border:1px dashed #9cae98;border-radius:999px;background:none;color:var(--leaf);font:600 14px var(--sans);cursor:pointer}
.kid-add:hover{border-style:solid;background:#fff}
.kid-ages{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;margin-top:10px;padding:10px;border-radius:12px;background:#fff;
 box-shadow:0 12px 30px #18261b1f;animation:pop-in .2s var(--ease)}
.kid-ages[hidden]{display:none}
.kid-ages button{height:44px;border:1px solid #d9e2cf;border-radius:10px;background:#fff;font:500 14px var(--sans);color:var(--ink);cursor:pointer}
.kid-ages button:hover{border-color:var(--leaf);background:var(--mist)}

/* ---------- other checkboxes and radios share the new look (.check rule in art.css) ---------- */
.addons .check{padding:12px 14px;border:1px solid #d9e2cf;border-radius:12px;background:#fff;margin-bottom:10px;transition:border-color .2s ease,background .2s ease}
.addons .check:hover{border-color:#9cae98}
.addons .check:has(input:checked){border-color:var(--leaf);background:#f6faf2}

@media(prefers-reduced-motion:reduce){
 .pill,.room-select,.text-link,.quiet-link,.type-tabs::after,.room-chips button,.step,.kid-chip,.kid-ages,.date-pop,.date-field,.step-value.bump,.date-pop [data-vc-date-btn]{transition:none!important;animation:none!important}
 .pill:hover,.room-chips button:hover{transform:none}
}

/* ---------- C09 I-002 fixes (rules already set; SITE_AESTHETIC_REVIEW_ZH.md 1, 7, 8) ---------- */
/* No small type (constitution): more specific 12px rules elsewhere win over .eyebrow{13px}, so name them here. */
.room-picker .eyebrow,.visit .micro,footer a,footer p,footer small{font-size:13px}
/* Readable accents: the ochre eyebrow and the teal link reach 4.5:1 on the green plan band (were 4.3 and 3.9). */
.plan .eyebrow{color:#93432f}
.selected-badge a{color:#1f6b62}
/* Room cards: the price sits on the title's line (desktop) and under it on phones, where the label then fits one line. */
.room-content{align-items:flex-end}
.room-content .price{margin-bottom:4px}
@media(max-width:760px){
 .room-content{flex-direction:column;align-items:flex-start;gap:6px}
 .room-content .price{text-align:left;margin:0}
}
/* Buttons feel alive (D-0372): the language switch was the one control without a hover/press response. */
.language{border-radius:20px;transition:background-color .2s ease,color .2s ease,transform .15s ease}
.language:hover{background:#2e5a2c14}
.language:active{transform:scale(.96)}
@media(max-width:760px){.mobile-book{right:calc(5% + 58px)}}
/* Two-column sections keep their left heading in view while the longer right column scrolls (I-002 item 9), so the left
   side is not a tall empty band. Desktop only; phones stack the columns. */
@media(min-width:761px){
 .faq-title{position:sticky;top:48px;align-self:start}
 .plan-heading{position:sticky;top:48px;align-self:start}
}
/* Phones: the calendar sheet sits above the round chat button and the booking bar (D-0354: buttons never cover content). */
@media(max-width:760px){
 .date-pop{z-index:95}
 html:has(.date-field-wrap.is-open) .oh-chat,html:has(.date-field-wrap.is-open) .mobile-book,html:has(.date-field-wrap.is-open) .mp-fab,html:has(.date-field-wrap.is-open) .mp-capsule{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
}
/* Hotel email (D-0360): sits right under the phone number; long address may wrap on narrow phones. */
.contact+.contact{margin-top:8px}
.contact-email,.footer-email{overflow-wrap:anywhere}
/* Book by contact (BOOKING_ONLINE off): three clear ways to reach the hotel under the price. */
.book-contact{display:grid;gap:12px;margin:18px 0 6px}
.book-contact[hidden]{display:none}
.book-contact p{margin:0}
.book-contact-actions{display:grid;gap:10px}
.book-contact .pill{justify-content:center;text-align:center;overflow-wrap:anywhere}

/* Work-B L6 (essential): controls.css loads after site.css and pins footer / visit.micro /
   room-picker eyebrow at 13px. Lift those to 14px on desktop only; leave max-width phone
   rules and positioning unchanged. */
@media (min-width: 1024px) {
  .header-actions .pill.small,
  .viewer-caption button,
  .stage-all { font-size: 14px; }
  .eyebrow { font-size: 14px; }
  .room-picker .eyebrow,
  .visit .micro,
  footer a,
  footer p,
  footer small { font-size: 14px; }
}

/* ===== Typography v2, pilot: header, first screen and booking section (C09, Owner 2026-09-29 row 61:
   「酒店网站整体字体还是不好看」). Owner sees before/after; once he agrees it is rolled out to the whole site.
   Benchmark, computed styles on the live sites (09-29): Aman sets headings in Lyon Display 300 / Lyon Text 400 and small labels in a humanist
   sans at 400 with 0.2em tracking; Four Seasons (zh) sets its headline in Noto Sans SC 200 with 0.2em tracking; Peninsula (zh) in Minion 400.
   None of them sets headlines or small labels bold. Ours had Chinese headlines at SemiBold and most small text at 500-700: heavy and crowded.
   Pairing (all OFL, self-hosted, faces in /fonts/type-v2.css): Cormorant Garamond for Latin display; WF Serif SC (Source Han Serif CN
   Medium/Regular, full character set in unicode-range slices) for Chinese display; WF Sans SC (Source Han Sans) for all body text, Latin
   included, so "3D", "WhatsApp" and "FJD" speak in the same voice as the Chinese around them. Headlines 500, body 400, small labels 400
   with open tracking, nothing under 14px on desktop, darker body ink on the sage ground. Arabic and Hindi keep their own faces. */
html:not(:lang(ar)):not(:lang(hi)){--t-display:'Cormorant Garamond','WF Serif SC',serif;--t-display-zh:'WF Serif SC','Cormorant Garamond',serif;--t-body:'Source Sans 3','WF Sans SC',sans-serif;--t-ink:#1c2a1f;--t-soft:#3a4a3d}
html:lang(zh):not(:lang(ar)):not(:lang(hi)){--t-body:'WF Sans SC','Source Sans 3',sans-serif}
/* Cormorant's default figures are old-style (B1 reads like "BI"): display text uses lining figures. */
html:not(:lang(ar)):not(:lang(hi)) :is(header:not(#_) .brand,#home .stage-copy h1,#plan h2,#plan .selected-badge strong,#plan .addons legend,#plan .quote-result :is(h3,strong:first-child)){font-variant-numeric:lining-nums}
/* body face inside the pilot areas (beats the hard-coded zh stack in art.css, which carries an id through :is()) */
html:not(:lang(ar)):not(:lang(hi)) :is(#home,#plan,header:not(#_)) :is(p,span,a,button,label,input,select,textarea,strong,small,legend,summary,li,div){font-family:var(--t-body)}
/* 'Find us': the Chinese address line shows on Chinese pages only, under the English one (Owner 09-30). */
html:not([lang^="zh"]) .addr-zh{display:none}
.addr-zh{margin-top:4px}
/* header */
/* The Tidal Heart mark (Owner 09-30) takes the old ◒ glyph's place and size: 1em of the emblem's font-size (40 / 31 / 26 px). */
header:not(#_) img.emblem{display:block;flex:none;width:1em;height:1em;object-fit:contain}
html:not(:lang(ar)):not(:lang(hi)) header:not(#_) .brand{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:22px;letter-spacing:.2em;line-height:1.2}
html:not(:lang(ar)):not(:lang(hi)) header:not(#_) .brand small{font-family:var(--t-body);font-weight:500;font-size:11px;letter-spacing:.34em}
@media (max-width:760px){html:not(:lang(ar)):not(:lang(hi)) header:not(#_) .brand{font-size:18px;letter-spacing:.12em}html:not(:lang(ar)):not(:lang(hi)) header:not(#_) .brand small{font-size:10px;letter-spacing:.24em}}
html:not(:lang(ar)):not(:lang(hi)) header:not(#_) nav a{font-size:15px;font-weight:400;letter-spacing:.04em}
html:lang(zh):not(:lang(ar)):not(:lang(hi)) header:not(#_) nav a{letter-spacing:.08em}
html:not(:lang(ar)):not(:lang(hi)) header:not(#_) :is(.pill.small,#language){font-size:14px;font-weight:500;letter-spacing:.08em}
html:lang(zh):not(:lang(ar)):not(:lang(hi)) header:not(#_) :is(.pill.small,#language){letter-spacing:.1em}
/* first screen */
html:not(:lang(ar)):not(:lang(hi)) #home .stage-copy .eyebrow{font-size:12.5px;font-weight:500;letter-spacing:.26em}
html:lang(zh):not(:lang(ar)):not(:lang(hi)) #home .stage-copy .eyebrow{font-size:14px;font-weight:400;letter-spacing:.2em}
html:not(:lang(ar)):not(:lang(hi)) #home .stage-copy h1{font-family:var(--t-display);font-weight:600;font-size:clamp(56px,6.9vw,108px);line-height:.98;letter-spacing:-.005em}
/* Home headline in Latin languages: DM Serif Display 400 (Owner 10-02 chose B: "Slow down, / closer to Fiji"); Chinese keeps WF Serif SC (next rule),
   Arabic and Hindi keep their own faces. */
html:not(:lang(zh)):not(:lang(ar)):not(:lang(hi)) #home .stage-copy h1{font-family:'DM Serif Display','Cormorant Garamond',serif;font-weight:400;letter-spacing:-.01em}
html:lang(zh):not(:lang(ar)):not(:lang(hi)) #home .stage-copy h1{font-family:var(--t-display-zh);font-weight:600;font-size:clamp(44px,5.3vw,80px);line-height:1.22;letter-spacing:.08em;font-feature-settings:'palt'}
html:not(:lang(ar)):not(:lang(hi)) #home .stage-copy .hero-sub{font-size:19px;font-weight:400;line-height:1.65;letter-spacing:.005em;color:#f3f6f0}
html:lang(zh):not(:lang(ar)):not(:lang(hi)) #home .stage-copy .hero-sub{font-size:17px;line-height:1.95;letter-spacing:.04em}
html:not(:lang(ar)):not(:lang(hi)) #home .stage-copy :is(.pill,.text-link){font-size:15px;font-weight:500;letter-spacing:.06em}
html:lang(zh):not(:lang(ar)):not(:lang(hi)) #home .stage-copy :is(.pill,.text-link){letter-spacing:.08em}
/* booking section */
html:not(:lang(ar)):not(:lang(hi)) #plan .eyebrow{font-size:12.5px;font-weight:500;letter-spacing:.26em}
html:lang(zh):not(:lang(ar)):not(:lang(hi)) #plan .eyebrow{font-size:14px;font-weight:400;letter-spacing:.2em}
html:not(:lang(ar)):not(:lang(hi)) #plan h2{font-family:var(--t-display);font-weight:600;font-size:clamp(44px,4.2vw,64px);line-height:1.02;letter-spacing:-.005em;color:var(--t-ink)}
html:lang(zh):not(:lang(ar)):not(:lang(hi)) #plan h2{font-family:var(--t-display-zh);font-size:clamp(32px,3vw,44px);line-height:1.38;letter-spacing:.08em;font-feature-settings:'palt'}
html:not(:lang(ar)):not(:lang(hi)) #plan .plan-heading>p:not(.eyebrow){font-size:17px;font-weight:400;line-height:1.8;color:var(--t-soft);max-width:400px}
html:lang(zh):not(:lang(ar)):not(:lang(hi)) #plan .plan-heading>p:not(.eyebrow){letter-spacing:.04em}
html:not(:lang(ar)):not(:lang(hi)) #plan .selected-badge>span{font-size:13px;font-weight:400;letter-spacing:.14em;color:var(--t-soft)}
/* The chosen room is the booking section's focal point, at the headline's level (Owner 09-29, row 72): heavier and leaf green. */
html:not(:lang(ar)):not(:lang(hi)) #plan .selected-badge strong{display:block;margin-top:6px;font-family:var(--t-display);font-weight:700;font-size:clamp(38px,3.6vw,54px);line-height:1.05;letter-spacing:-.005em;color:var(--leaf,#2e5a2c)}
html:lang(zh):not(:lang(ar)):not(:lang(hi)) #plan .selected-badge strong{font-family:var(--t-display-zh);font-weight:700;font-size:clamp(30px,2.8vw,42px);line-height:1.3;letter-spacing:.06em;font-feature-settings:'palt'}
html:not(:lang(ar)):not(:lang(hi)) #plan .selected-badge a{font-size:14px;font-weight:400;letter-spacing:.04em}
html:not(:lang(ar)):not(:lang(hi)) #plan :is(label>span,.field-label){font-size:14px;font-weight:400;letter-spacing:.06em;color:var(--t-ink)}
html:lang(zh):not(:lang(ar)):not(:lang(hi)) #plan :is(label>span,.field-label){font-size:15px;letter-spacing:.06em}
html:not(:lang(ar)):not(:lang(hi)) #plan label.check>span{font-size:15px;font-weight:400;letter-spacing:.02em;line-height:1.6}
html:lang(zh):not(:lang(ar)):not(:lang(hi)) #plan label.check>span{letter-spacing:.06em}
html:not(:lang(ar)):not(:lang(hi)) #plan :is(input,select,textarea){font-size:16px;font-weight:400}
html:not(:lang(ar)):not(:lang(hi)) #plan .addons legend{font-family:var(--t-display);font-weight:600;font-size:30px;letter-spacing:0;color:var(--t-ink)}
html:lang(zh):not(:lang(ar)):not(:lang(hi)) #plan .addons legend{font-family:var(--t-display-zh);font-size:24px;letter-spacing:.08em;font-feature-settings:'palt'}
html:not(:lang(ar)):not(:lang(hi)) #plan .micro{font-size:14px;font-weight:400;line-height:1.75;color:var(--t-soft)}
html:lang(zh):not(:lang(ar)):not(:lang(hi)) #plan .micro{letter-spacing:.04em}
html:not(:lang(ar)):not(:lang(hi)) #plan .pill{font-size:15px;font-weight:500;letter-spacing:.08em}
html:lang(zh):not(:lang(ar)):not(:lang(hi)) #plan .pill{letter-spacing:.1em}
html:not(:lang(ar)):not(:lang(hi)) #plan .quote-result :is(h3,strong:first-child){font-family:var(--t-display);font-weight:600;font-size:32px;letter-spacing:0;color:var(--t-ink)}
html:lang(zh):not(:lang(ar)):not(:lang(hi)) #plan .quote-result :is(h3,strong:first-child){font-family:var(--t-display-zh);font-size:26px;letter-spacing:.06em;font-feature-settings:'palt'}
html:not(:lang(ar)):not(:lang(hi)) #plan .price-line{font-size:15px;font-weight:400;letter-spacing:.02em}
html:not(:lang(ar)):not(:lang(hi)) #plan .price-line strong{font-size:15px;font-weight:500}
html:not(:lang(ar)):not(:lang(hi)) #plan .quiet-link{font-size:14px;font-weight:400;letter-spacing:.06em}
html:not(:lang(ar)):not(:lang(hi)) #plan :is(.pay-later p,#hotel-pay-panel p,#book-contact p){font-size:15px;font-weight:400;line-height:1.75;color:var(--t-ink)}

/* Mere and her parrot in the booking section. Mere opens chat; only the parrot's own bounded overlay handles pet taps. */
.oh-plan-mere-wrap,.oh-plan-mere-wrap[hidden],.oh-plan-mere,.oh-plan-mere[hidden]{display:none}
@media (min-width:1024px){
 .oh-plan-mere-wrap:not([hidden]){position:relative;display:block;margin:44px 0 0 -8px;width:300px;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
 .oh-plan-mere:not([hidden]){position:relative;display:block;margin:0;padding:0;border:0;background:none;cursor:pointer;width:300px}
 .oh-plan-mere-wrap:has(.oh-plan-mere:hover),.oh-plan-mere-wrap:has(.oh-plan-mere:focus-visible){transform:translateY(-4px)}
 /* "Chat with Mere" shows on hover and keyboard focus (Owner row 69: click her to talk to her). */
 .oh-plan-mere-tip{position:absolute;z-index:2;left:50%;top:0;transform:translate(-50%,6px);padding:7px 14px;border:1px solid var(--leaf,#2e5a2c);border-radius:999px;background:#fcfbf6;color:var(--leaf,#2e5a2c);font:600 14px/1.2 var(--t-body,system-ui,sans-serif);letter-spacing:.02em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
 .oh-plan-mere:hover .oh-plan-mere-tip,.oh-plan-mere:focus-visible .oh-plan-mere-tip{opacity:1;transform:translate(-50%,0)}
 .oh-plan-mere:focus-visible{outline:2px solid #2e5a2c;outline-offset:6px;border-radius:18px}
 .oh-plan-mere .oh-mara-portrait[data-profile="half"]{inline-size:300px;background:transparent;border-radius:0}
 .oh-plan-pet-tap{position:absolute;z-index:4;left:0;bottom:0;width:49%;height:33%;border-radius:58% 64% 48% 52%;background:transparent;cursor:pointer}
 .oh-plan-pet-tap:focus-visible{outline:2px solid var(--leaf,#2e5a2c);outline-offset:3px}
}
/* An interactive pet in the empty column under "Good to know" (faq-pet.mjs), desktop only (Owner 2026-09-29, row 74). */
.oh-faq-pet,.oh-faq-pet[hidden]{display:none}
@media (min-width:1024px){
 /* sticky in the heading's grid cell, 32 px under the sticky heading, so the heading never slides over it; the heading's bottom
    margin makes it stop early enough for the pet below it (--faq-title-h is set by faq-pet.mjs) */
 .faq-title.has-pet{margin-bottom:222px}
 #faq .faq-title{grid-area:1/1} #faq .faq-list{grid-area:1/2} /* pinned, so the pet sharing the heading's cell never pushes them around */
 .oh-faq-pet:not([hidden]){display:block;grid-column:1;grid-row:1;align-self:start;justify-self:start;position:sticky;
  top:calc(48px + var(--faq-title-h,50px) + 32px);margin-top:calc(var(--faq-title-h,50px) + 32px);width:150px;height:190px;pointer-events:none}
}
/* More interactive Mere pets in empty space, desktop and phone (section-pets.mjs; Owner 2026-09-30). */
.oh-section-pet,.oh-section-pet[hidden]{display:none}
#stay,#visit{position:relative}
.oh-section-pet:not([hidden]){display:block;position:absolute;pointer-events:none;z-index:1}

/* HOTEL-PET-TAPS-R1: the canvas remains inert outside its exact pet rectangle; the shared layer enables only that box. */
.oh-faq-pet[data-pet-tap],.oh-section-pet[data-pet-tap]{pointer-events:auto;cursor:pointer;border-radius:45%}
.oh-faq-pet[data-pet-tap]:focus-visible,.oh-section-pet[data-pet-tap]:focus-visible{outline:2px solid var(--leaf,#2e5a2c);outline-offset:4px}
.oh-pet-bubble{position:fixed;z-index:40;box-sizing:border-box;width:max-content;max-width:min(200px,calc(100vw - 16px));padding:9px 13px;border:1px solid var(--leaf,#2e5a2c);border-radius:14px;background:rgba(252,251,246,.98);color:var(--ink,#18261b);box-shadow:0 8px 22px rgba(24,38,27,.16);font:600 14px/1.35 var(--t-body,system-ui,sans-serif);letter-spacing:.01em;text-align:center;pointer-events:none;transform-origin:center}
.oh-pet-bubble[hidden]{display:none}
.oh-pet-bubble.is-showing{animation:oh-pet-bubble-show 3.5s ease both}
.oh-pet-bubble::after{content:'';position:absolute;width:10px;height:10px;background:#fcfbf6;border-right:1px solid var(--leaf,#2e5a2c);border-bottom:1px solid var(--leaf,#2e5a2c)}
.oh-pet-bubble[data-side="top"]::after{left:var(--oh-tail,50%);bottom:-6px;transform:translateX(-50%) rotate(45deg)}
.oh-pet-bubble[data-side="bottom"]::after{left:var(--oh-tail,50%);top:-6px;transform:translateX(-50%) rotate(225deg)}
.oh-pet-bubble[data-side="right"]::after{left:-6px;top:var(--oh-tail,50%);transform:translateY(-50%) rotate(135deg)}
.oh-pet-bubble[data-side="left"]::after{right:-6px;top:var(--oh-tail,50%);transform:translateY(-50%) rotate(-45deg)}
.oh-pet-live{position:fixed!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
@keyframes oh-pet-bubble-show{0%{opacity:0;transform:translateY(4px) scale(.96)}5%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-2px) scale(.98)}}
@media(prefers-reduced-motion:reduce){.oh-pet-bubble.is-showing{animation:none;opacity:1;transform:none}}
/* The hermit crab faces into the page at every width (Owner 10-01); right-to-left pages place it on the other side already. Its bubble is separate DOM and never mirrored. */
html:not([dir=rtl]) :is(.oh-faq-pet,.oh-section-pet)[data-pet-mirror]{transform:scaleX(-1)}

/* One room card / one consistent date field. Original brand fonts and palette. */
#booking-form .order-room-line{position:relative;min-width:0;padding:24px 20px 22px;border:1px solid #b9c8b0;border-radius:18px;background:#ffffff35;margin-block:20px}
#booking-form .order-room-line>legend{padding-inline:10px;color:var(--leaf);font-size:18px;font-weight:600}
#booking-form .order-first-room{margin-top:0}
#booking-form [data-room-dates-host]{min-width:0;margin-block:22px 26px}
#booking-form .room-stay-dates{position:relative;min-width:0}
#booking-form .stay-date-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:9px 14px;margin-bottom:10px}
#booking-form .stay-date-heading>.field-label{margin:0;font-weight:500}
#booking-form .stay-date-modes{display:flex;align-items:center;padding:3px;border-radius:999px;border:1px solid #bccbb5;background:#ffffff70;gap:3px}
#booking-form .stay-date-modes[hidden]{display:none}
#booking-form .stay-date-mode{border:0;border-radius:999px;padding:7px 11px;background:transparent;color:var(--muted);font:500 13px/1.3 var(--sans);cursor:pointer;transition:background .2s,color .2s}
#booking-form .stay-date-mode[aria-pressed=true]{background:var(--leaf);color:#fff}
#booking-form .stay-date-rows{display:grid;gap:10px;min-width:0}
#booking-form .stay-date-row{display:flex;align-items:stretch;gap:7px;min-width:0}
#booking-form .stay-date-edit{min-width:0;gap:10px;min-height:62px;padding:13px 15px;border-radius:13px;font-size:16px;line-height:1.5}
#booking-form .stay-date-edit[aria-expanded=true]{border-color:var(--lagoon);box-shadow:var(--ring)}
#booking-form .stay-date-edit .date-part{white-space:nowrap}
#booking-form .stay-date-remove{flex:0 0 44px;align-self:center;min-height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);font:300 27px/1 var(--sans);cursor:pointer}
#booking-form .stay-date-remove:hover{background:#fff;color:var(--leaf)}
#booking-form .stay-date-footer{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;margin-top:10px}
#booking-form .stay-date-add{min-height:42px;padding:6px 0;border:0;background:transparent;color:var(--leaf);font:600 14px/1.4 var(--sans);text-align:start;cursor:pointer}
#booking-form .stay-date-add:hover{text-decoration:underline;text-underline-offset:4px}
#booking-form .stay-date-note{margin:0;font-size:13px;line-height:1.5}
#booking-form .stay-date-note[hidden]{display:none}
#booking-form :is(.stay-date-mode,.stay-date-remove,.stay-date-add):focus-visible{outline:2px solid var(--lagoon);outline-offset:3px}
#booking-form .date-legend [data-legend-state=selected]::before{background:var(--leaf);border-color:var(--leaf)}
#booking-form .date-pop [data-calendar-night=unknown] [data-vc-date-btn]{color:var(--ink);box-shadow:none}
#booking-form .date-pop [data-calendar-boundary=checkout] [data-vc-date-btn]{background:#fff!important;color:var(--leaf)!important;text-decoration:none;outline:1px solid var(--leaf);outline-offset:-4px}
#booking-form .room-stay-dates>.date-pop{top:calc(100% + 6px);right:0}
@media(max-width:760px){
 #booking-form .order-room-line{padding:19px 14px 18px;border-radius:16px}
 #booking-form .stay-date-heading{align-items:flex-start}
 #booking-form .stay-date-modes{width:max-content;max-width:100%}
 #booking-form .stay-date-mode{padding:8px 11px;font-size:13px}
 #booking-form .stay-date-edit{padding:12px 11px;gap:8px;min-height:60px;font-size:15px}
 #booking-form .stay-date-edit .date-nights{font-size:12px;padding:4px 7px}
 #booking-form .stay-date-row{gap:2px}
 #booking-form .stay-date-remove{flex-basis:36px}
 #booking-form .room-stay-dates>.date-pop{position:fixed;top:auto;right:8px;left:8px;bottom:8px;width:auto;max-height:85dvh;overflow:auto}
}
@media(prefers-reduced-motion:reduce){#booking-form .stay-date-mode{transition:none}}