@font-face { font-family: 'LV Display'; src: url('fonts/cormorant-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'LV Text'; src: url('fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'LV Text'; src: url('fonts/inter-600.woff2') format('woff2'); font-weight: 500 800; font-style: normal; font-display: swap; }
:root { --ink: #34312e; --muted: #6b625a; --paper: #faf9f6; --line: #d9d0c6; --forest: #735a46; --accent: #735a46; --focus: #735a46; --serif: 'LV Display', Georgia, serif; --sans: 'LV Text', Arial, sans-serif; --header-offset: 92px; }
html { scrollbar-color: #a89b8d #f5f1e9; }
body { background: var(--paper); }
* { letter-spacing: 0; }
::selection { background: #ded1bc; color: #34312e; }
:is(h1,h2,h3) { font-weight: 600; }
.site-header { height: auto; min-height: var(--header-offset); background: #faf9f6; border-bottom-color: #d9d0c6; }
.brand { width: 180px; }
.brand-logo { aspect-ratio: 3 / 1; }
.brand .brand-logo { filter: brightness(0); opacity: .82; }
.footer-brand { width: 224px; }
.primary-navigation { font-weight: 500; }
.language-switch { border-color: #cfc3b5; background: #faf9f6; }
.language-switch [aria-current], .language-switch a:hover, .menu-toggle[aria-expanded="true"] { background: #e9e1d5; color: #44392f; }
.nav-cta, .button, .room-jump .room-jump-book { border-radius: 6px; }
.button-dark:hover, .nav-cta:hover, .room-jump .room-jump-book:hover { background: #584330; }
.room-jump { background: #faf9f6; border-color: var(--line); }
.stay-summary { background: #faf9f6; border-color: #b5a18d; }
.booking-page { background: #f4f3ef; }
.stay-picker, .booking-room, .language-confirm { border-color: var(--line); background: #fff; }
.booking-room.is-selected { background: #f5f1e9; }
.language-confirm::backdrop { background: #34312e80; }
.apartments { background: #edf0ed; }
.enquire { background: #e9e2d7; }
.eyebrow, .card-kicker, .quick-stay-heading .eyebrow { color: var(--forest); }
.residence-card { border-color: var(--line); }
.residence-card a { border-color: var(--line); }
footer { background: #34312e; color: #f5f1e9; }
.quick-stay { background: #faf9f6; border-block: 1px solid var(--line); }
.quick-stay input { background: #ffffffd9; border-color: #b8ab9d; }
.quick-stay-heading .eyebrow { display: none; }
.quick-stay-heading strong { font-weight: 600; }
.quick-stay-inner { padding-block: 24px; }
.contact-extra { border-color: #c4b6a5; }
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .site-header { background: #faf9f6d9; backdrop-filter: blur(18px) saturate(115%); -webkit-backdrop-filter: blur(18px) saturate(115%); }
  .room-jump { background: #faf9f6de; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .stay-summary { background: #faf9f6e0; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}
.architectural-hero { height: min(520px, calc(100svh - 340px)); min-height: 420px; max-height: none; isolation: isolate; background: #44413a; }
.architectural-hero > .hero-interior { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 57%; transform: none; }
.hero-doors { position: absolute; inset: 0; pointer-events: none; }
.hero-door { position: absolute; inset: 0; transition: transform 700ms cubic-bezier(.4,0,.2,1); }
.hero-door img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.architectural-hero > .hero-interior, .hero-door img { filter: saturate(.95) contrast(.98) brightness(1.08); }
.hero-door-left { clip-path: inset(0 50% 0 0); }
.hero-door-right { clip-path: inset(0 0 0 50%); }
.show-interior .hero-door-left { transform: translateX(-54%); }
.show-interior .hero-door-right { transform: translateX(54%); }
.architectural-hero .hero-shade { background: linear-gradient(90deg, #141413b3, #14141373 42%, #14141300 78%); }
.architectural-hero .hero-content { left: max(32px, calc((100% - 1312px)/2)); top: 50%; bottom: auto; transform: translateY(-52%); width: min(840px, calc(100% - 64px)); text-shadow: none; }
.architectural-hero h1, html[lang='th'] .architectural-hero h1 { font: 600 88px/1.05 var(--serif); max-width: none; text-wrap: nowrap; color: #faf9f6; }
.hero-signature { margin: 20px 0 0; font-size: 24px; line-height: 1.45; }
.architectural-hero .hero-copy { margin: 16px 0 0; font-size: 17px; line-height: 1.6; max-width: 40ch; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 30px; }
.hero-actions .button { display: inline-flex; gap: 28px; align-items: center; min-height: 48px; background: #faf9f6; color: #584330; }
.hero-contact { display: inline-flex; align-items: center; min-height: 48px; font-size: 14px; text-underline-offset: 5px; }
.hero-contact:hover { text-decoration: underline; }
.architectural-hero .hero-note { top: 20px; right: 32px; left: auto; bottom: auto; background: #34312eed; border-color: #ffffff4d; font-size: 11px; }
.hero-view-switch { position: absolute; z-index: 2; bottom: 10px; right: max(24px, calc((100% - 1312px)/2)); display: flex; }
.hero-view-switch[hidden] { display: none; }
.hero-view-switch button { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #fff; font: 600 12px/1.4 var(--sans); cursor: pointer; }
.hero-view-switch button::before { content: ''; width: 8px; height: 8px; border: 1px solid #fff; border-radius: 8px; background: #34312e; box-shadow: 0 1px 4px #0008; }
.hero-view-switch button[aria-pressed="true"]::before { width: 24px; background: #fff; }
.hero-view-switch button:hover::before { background: #fff; }
.hero-view-switch button:focus-visible { outline: 2px solid #fff; outline-offset: -3px; background: #34312e; }
.hero-view-label { position: absolute; right: 0; bottom: 46px; padding: 6px 10px; border-radius: 3px; background: #34312e; white-space: nowrap; opacity: 0; pointer-events: none; }
.hero-view-switch button:hover .hero-view-label, .hero-view-switch button:focus-visible .hero-view-label { opacity: 1; }
.hero-view-switch button:disabled { opacity: .5; cursor: not-allowed; }
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .hero-actions .button { background: #faf9f6df; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .architectural-hero .hero-note { background: #34312eaf; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}
.homepage .pet-friendly { position: relative; background: #f5f1e9; border: 0; padding: 0; }
.homepage .pet-friendly-inner { width: min(1312px, calc(100% - 64px)); position: relative; grid-template-columns: 1.2fr 1fr; gap: 36px; padding-block: 34px 30px; min-height: 310px; }
.homepage .pet-friendly-copy { position: relative; z-index: 1; }
.homepage .pet-friendly-copy h2 { margin: 0 0 12px; font: 600 64px/1.08 var(--serif); color: var(--forest); }
.homepage .pet-friendly-copy .pet-friendly-lead { font-weight: 600; font-size: 21px; color: var(--ink); margin-bottom: 8px; }
.homepage .pet-friendly-copy > p { font-size: 16px; line-height: 1.65; max-width: 47ch; }
.homepage .pet-friendly-copy .text-link { margin-top: 15px; min-height: 48px; font-size: 14px; }
.homepage .pet-friendly-copy .pet-policy-note { font-size: 12px; margin-top: 3px; }
.homepage .pet-friendly-photo { position: relative; align-self: end; margin-top: -76px; pointer-events: none; }
.homepage .pet-friendly-photo > img { aspect-ratio: 3/2; width: 100%; height: auto; border-radius: 0; object-fit: contain; }
.homepage .pet-friendly-photo figcaption { font-size: 11px; margin: 0; }
.homepage .intro { padding-block: 60px; }
html[lang='th'] { --sans: 'Noto Sans Thai', 'LV Text', sans-serif; --serif: 'Noto Sans Thai', sans-serif; }
html[lang='th'] .architectural-hero h1 { font-family: 'LV Display', Georgia, serif; }
html[lang='th'] .homepage .pet-friendly-copy h2 { font-size: 42px; line-height: 1.35; }
html[lang='th'] .hero-signature { font-size: 22px; }
@media (max-width: 1140px) {
  .architectural-hero h1, html[lang='th'] .architectural-hero h1 { font-size: 72px; }
  .homepage .pet-friendly-copy h2 { font-size: 52px; }
  .homepage .pet-friendly-inner { gap: 24px; }
}
@media (max-width: 1020px) {
  :root { --header-offset: 88px; }
  .has-menu .primary-navigation { background: #faf9f6; border-color: var(--line); }
  .architectural-hero .hero-note { right: 24px; }
}
@media (max-width: 720px) {
  :root { --header-offset: 78px; }
  .site-header { padding: 10px 16px; gap: 8px; }
  .brand { width: 130px; }
  .header-actions { gap: 6px; }
  .header-actions > .nav-cta { display: inline-flex; min-height: 44px; padding: 10px; font-size: 12px; }
  .language-switch a { min-width: 31px; min-height: 44px; }
  .menu-toggle.icon-button { width: 38px; min-width: 38px; }
  .architectural-hero { height: min(432px, calc(100svh - 290px)); min-height: 382px; }
  .architectural-hero > .hero-interior { object-position: 68% 57%; }
  .hero-door img { object-position: 50% 42%; }
  .architectural-hero .hero-shade { background: linear-gradient(180deg, #14141310, #14141394 52%, #141413cc); }
  .architectural-hero .hero-content { top: auto; bottom: 82px; left: 20px; transform: none; width: calc(100% - 40px); }
  .architectural-hero h1, html[lang='th'] .architectural-hero h1 { font-size: 44px; }
  .hero-signature { font-size: 18px; max-width: 24ch; margin-top: 16px; }
  html[lang='th'] .hero-signature { font-size: 18px; max-width: 27ch; }
  .architectural-hero .hero-copy { font-size: 13px; margin-top: 12px; }
  .hero-actions { margin-top: 22px; gap: 18px; }
  .hero-actions .button { font-size: 13px; padding: 12px 16px; gap: 16px; }
  .hero-contact { font-size: 12px; }
  .architectural-hero .hero-note { top: 16px; right: 20px; gap: 10px; font-size: 10px; }
  .hero-note a { font-size: 11px; }
  .hero-view-switch { right: 12px; bottom: 6px; }
  .homepage .pet-friendly-inner { width: calc(100% - 40px); display: block; padding-block: 24px 28px; min-height: 322px; }
  .homepage .pet-friendly-copy h2 { font-size: 42px; max-width: 155px; min-height: 112px; padding-top: 4px; margin: 0 0 12px; }
  .homepage .pet-friendly-copy .pet-friendly-lead { font-size: 17px; margin-bottom: 5px; }
  .homepage .pet-friendly-copy > p { font-size: 14px; }
  .homepage .pet-friendly-copy .text-link { margin-top: 12px; font-size: 14px; }
  .homepage .pet-friendly-copy .pet-policy-note { font-size: 11px; margin-top: 8px; max-width: 220px; }
  .homepage .pet-friendly-photo { position: static; margin: 0; }
  .homepage .pet-friendly-photo > img { position: absolute; right: -10px; top: -20px; width: min(239px, 65%); }
  .homepage .pet-friendly-photo figcaption { margin-top: 12px; font-size: 10px; }
  html[lang='th'] .homepage .pet-friendly-copy h2 { font-size: 30px; line-height: 1.4; max-width: 155px; }
  html[lang='th'] .homepage .pet-friendly-copy .pet-policy-note { max-width: 230px; }
  .quick-stay-inner { padding-block: 20px; }
  .homepage .intro { padding-block: 44px; }
}
@media (max-width: 360px) {
  .site-header { padding-inline: 10px; gap: 4px; }
  .brand { width: 106px; }
  .header-actions { gap: 4px; }
  .language-switch a { min-width: 28px; }
  .header-actions > .nav-cta { padding-inline: 8px; font-size: 11px; }
  .architectural-hero h1, html[lang='th'] .architectural-hero h1 { font-size: 36px; }
  .hero-contact { display: none; }
  .homepage .pet-friendly-copy h2 { font-size: 36px; max-width: 130px; }
  html[lang='th'] .homepage .pet-friendly-copy h2 { font-size: 26px; max-width: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-door { transition: none; }
}