@font-face { font-family:'ABC Solar Display'; src:url('./assets/fonts/ABCSolarDisplay-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
:root {
  color-scheme: dark;
  --ink: #080807;
  --paper: #fff;
  --font: 'ABC Solar Display', 'manop-variable', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-family: var(--font);
  background: var(--ink);
  color: var(--paper);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid white; outline-offset: 7px; }
button[hidden] { display: none !important; }

.experience {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  background: var(--ink);
}

.reveal-layer, .river-image, .image-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.reveal-layer { z-index: 0; }
.river-image { object-fit: cover; object-position: center; }
.image-shade {
  background: linear-gradient(180deg, rgb(0 0 0 / 33%), transparent 33%, rgb(0 0 0 / 8%) 70%, rgb(0 0 0 / 22%));
}

.brand-frame {
  position: absolute;
  z-index: 3;
  top: 47.5%;
  left: 50%;
  width: 78%;
  height: 76%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.frame-svg { display: block; width: 100%; height: 100%; overflow: visible; fill: white; }

.welcome {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 80%;
  text-align: center;
  visibility: hidden;
  pointer-events: none;
}
.welcome-line { display: block; overflow: hidden; }
.welcome-name { display: block; padding-left: .17em; font-size: calc((clamp(48px, 4.5vw, 76px)) * var(--desktop-font-scale, 1)); font-weight: 300; letter-spacing:0; line-height: 1.2; }
.welcome-location { display: block; margin-top: 15px; padding-left: .26em; font-size: calc((clamp(12px, 1vw, 16px)) * var(--desktop-font-scale, 1)); font-weight: 400; letter-spacing:0; line-height: 1.8; }

.site-header { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 3.85vh 3.8vw; z-index: 5; }
.wordmark { display: block; width: clamp(138px, 10vw, 200px); flex: 0 0 auto; }
.wordmark svg { display: block; width: 100%; }
.wordmark > span { display: block; text-align: center; font-size: calc((clamp(8px, .48vw, 10px)) * var(--desktop-font-scale, 1)); letter-spacing:0; font-weight: 500; margin-top: -3px; white-space: nowrap; }
.header-actions { display: flex; align-items: center; gap: 2.8vw; }
.language-switch { display: flex; align-items: center; gap: .25em; font-size: calc((clamp(14px, 1.15vw, 23px)) * var(--desktop-font-scale, 1)); font-weight: 400; }
.language-switch button { position: relative; border: 0; padding: 8px 0; color: white; background: transparent; opacity: .72; }
.language-switch button[aria-pressed='true'] { opacity: 1; }
.language-switch button::after { content: ''; position: absolute; left: 0; bottom: 3px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.language-switch button:hover::after { transform: scaleX(1); }
.button { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 18px 32px; border: 1px solid white; border-radius: 0; color: #080807; background: white; font-size: calc((clamp(16px, 1.1vw, 22px)) * var(--desktop-font-scale, 1)); font-weight: 500; letter-spacing:0; line-height: 1.2; transition: color .35s ease, background-color .35s ease, border-color .35s ease; }
.button:hover { color: white; background: rgb(8 8 7 / 25%); border-color: rgb(255 255 255 / 85%); }
.book-now { min-width: clamp(132px, 9.4vw, 190px); }

.hero-content { position: absolute; z-index: 4; top: 28.8%; left: 50%; transform: translateX(-50%); width: 78%; text-align: center; }
.eyebrow { margin: 0 0 3.5vh; padding-left: .2em; font-size: calc((clamp(14px, 1.38vw, 28px)) * var(--desktop-font-scale, 1)); font-weight: 400; line-height: 1.6; letter-spacing:0; }
h1 { margin: 0; font-size: calc((clamp(48px, 5.42vw, 110px)) * var(--desktop-font-scale, 1)); font-weight: 300; line-height: 1.035; letter-spacing:0; }
.headline-line { display: block; overflow: hidden; padding: 0 .05em .09em; margin-bottom: -.09em; }
.headline-inner { display: block; }
.hero-actions { display: flex; justify-content: center; gap: 16px; margin-top: 9.8vh; }
.hero-button { padding-inline: clamp(25px, 1.7vw, 36px); min-height: clamp(54px, 5.5vh, 68px); }

.motion-controls { position: absolute; right: 3.8vw; bottom: 22px; z-index: 6; }
.motion-button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0 8px 12px; border: 0; background: none; color: rgb(255 255 255 / 68%); font-size: calc((12px) * var(--desktop-font-scale, 1)); letter-spacing:0; transition: color .25s ease; }
.motion-button:hover { color: white; }
.motion-button svg { width: 18px; height: 18px; }

/* The default document is the finished banner, including when JavaScript is off. */
.intro-pending .reveal-layer { clip-path: circle(0px at 50% 50%); }
.intro-pending .brand-frame, .intro-pending .site-header, .intro-pending .hero-content { visibility: hidden; }
.is-animating .brand-frame, .is-animating .river-image, .is-animating .headline-inner { will-change: transform; }
.is-animating .reveal-layer { will-change: clip-path; }
.intro-lock { overflow: hidden; }

/* Two normal sections are the baseline. The shutter progressively enhances them. */
.scroll-sequence { position: relative; }
.story-section { position: relative; isolation: isolate; height: 100svh; min-height: 600px; overflow: hidden; background: var(--ink); }
.story-visual, .story-image, .story-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-visual { z-index: 0; }
.story-image { object-fit: cover; object-position: center; }
.story-shade { background: linear-gradient(180deg, rgb(0 0 0 / 2%), rgb(0 0 0 / 15%) 50%, rgb(0 0 0 / 10%)); }
.story-frame { position: absolute; left: 3%; top: 23%; width: 94%; height: 46%; z-index: 2; pointer-events: none; }
.story-frame svg { width: 100%; height: 100%; fill: white; }
.story-content { position: absolute; z-index: 1; top: 47%; left: 50%; transform: translate(-50%, -50%); width: min(50%, 1000px); text-align: center; }
.story-eyebrow { margin: 0 0 28px; font-size: calc((clamp(14px, 1.2vw, 22px)) * var(--desktop-font-scale, 1)); font-weight: 400; letter-spacing:0; line-height: 1.4; }
.story-copy { margin: 0; font-size: calc((clamp(28px, 2.82vw, 57px)) * var(--desktop-font-scale, 1)); font-weight: 300; line-height: 1.05; letter-spacing:0; text-wrap: pretty; }
.scroll-cue { position: absolute; bottom: 24px; left: 50%; z-index: 6; display: flex; align-items: center; gap: 15px; transform: translateX(-50%); padding: 10px 14px; background: none; border: 0; color: rgb(255 255 255 / 75%); font-size: calc((12px) * var(--desktop-font-scale, 1)); letter-spacing:0; }
.scroll-cue svg { width: 12px; height: 23px; }
.scroll-cue:hover { color: white; }
.shutter-enabled .scroll-sequence { height: 265svh; }
.shutter-enabled .experience { position: sticky; top: 0; }
.shutter-enabled .story-section { position: absolute; inset: 0; z-index: 1; height: 100%; min-height: 0; background: transparent; }
.shutter-enabled .story-frame { display: none; }
.shutter-moving .brand-frame, .shutter-moving .bracket, .shutter-moving .story-image { will-change: transform; }
.shutter-moving .story-visual, .shutter-moving .reveal-layer { will-change: clip-path; }
html[lang='th'] .story-copy { line-height: 1.35; font-size: calc((clamp(26px, 2.5vw, 48px)) * var(--desktop-font-scale, 1)); }

.preview-dialog { width: min(470px, calc(100% - 40px)); border: 1px solid #504539; padding: 46px 36px 36px; background: #15130f; color: white; }
.preview-dialog::backdrop { background: rgb(0 0 0 / 64%); backdrop-filter: blur(8px); }
.dialog-close { position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; border: 0; background: none; color: white; font-size: calc((28px) * var(--desktop-font-scale, 1)); }
.dialog-brand { margin: 0 0 26px; font-size: calc((12px) * var(--desktop-font-scale, 1)); letter-spacing:0; }
.preview-dialog h2 { font-size: calc((32px) * var(--desktop-font-scale, 1)); font-weight:300; margin: 0 0 18px; }
.privacy-dialog { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:#fff; color:#191918; overflow:auto; }
.privacy-dialog::backdrop { background:rgba(0,0,0,.38); backdrop-filter:blur(4px); }
.privacy-close { position:fixed; z-index:2; top:20px; right:24px; width:44px; height:44px; border:0; background:transparent; color:inherit; font-family:inherit; font-size:calc((40px) * var(--desktop-font-scale, 1)); font-weight:300; line-height:1; cursor:pointer; }
.privacy-inner { width:min(760px,calc(100% - 48px)); margin:0 auto; padding:11vh 0 12vh; }
.privacy-kicker { margin:0 0 24px; font-size:calc((14px) * var(--desktop-font-scale, 1)); }
.privacy-dialog h2 { margin:0 0 34px; font-size:calc((clamp(50px,7vw,104px)) * var(--desktop-font-scale, 1)); font-weight:300; line-height:.95; }
.privacy-intro { max-width:670px; margin:0 0 64px; font-size:calc((clamp(21px,2.1vw,31px)) * var(--desktop-font-scale, 1)); line-height:1.25; }
.privacy-sections { border-top:1px solid #aaa; }
.privacy-sections section { display:grid; grid-template-columns:180px 1fr; gap:32px; padding:26px 0; border-bottom:1px solid #aaa; text-align:left; }
.privacy-sections h3 { margin:0; font-size:calc((17px) * var(--desktop-font-scale, 1)); font-weight:300; }
.privacy-sections p { margin:0; font-family:Arial,sans-serif; font-size:calc((16px) * var(--desktop-font-scale, 1)); line-height:1.55; }
.privacy-contact { margin:42px 0 0; font-size:calc((18px) * var(--desktop-font-scale, 1)); }.privacy-contact a { color:inherit; text-decoration:underline; text-underline-offset:4px; }
@media(max-width:700px) { .privacy-close { top:10px; right:10px; }.privacy-inner { padding-top:80px; }.privacy-intro { margin-bottom:42px; }.privacy-sections section { grid-template-columns:1fr; gap:10px; }.privacy-dialog h2 { font-size:calc((52px) * var(--desktop-font-scale, 1)); } }
#dialog-description { font-size: calc((16px) * var(--desktop-font-scale, 1)); line-height: 1.7; color: #c9c4bd; }
.dialog-back { margin-top: 14px; font-size: calc((16px) * var(--desktop-font-scale, 1)); }
html[lang='th'] h1 { font-size: calc((clamp(42px, 4.6vw, 92px)) * var(--desktop-font-scale, 1)); line-height: 1.4; letter-spacing:0; }

@media (min-aspect-ratio: 2/1) and (min-width: 901px) {
  .experience { min-height: 520px; }
  .hero-content { top: 25%; }
  h1 { font-size: calc((min(5.42vw, 12vh)) * var(--desktop-font-scale, 1)); }
  .hero-actions { margin-top: 6vh; }
}

@media (max-width: 900px) {
  .experience { min-height: 580px; }
  .site-header { padding: 28px 28px; }
  .brand-frame { width: 90%; height: 70%; top: 50%; }
  .hero-content { top: 33%; width: 80%; }
  h1 { font-size: calc((6.2vw) * var(--desktop-font-scale, 1)); }
  .eyebrow { font-size: calc((13px) * var(--desktop-font-scale, 1)); letter-spacing:0; margin-bottom: 30px; }
  .hero-actions { margin-top: 7vh; gap: 12px; }
  .hero-button { padding-inline: 24px; }
  .story-content { width: 59%; }
  .story-copy { font-size: calc((clamp(27px, 3.8vw, 36px)) * var(--desktop-font-scale, 1)); }
}

@media (max-width: 600px) {
  .experience { height: 100svh; min-height: 650px; }
  .site-header { padding: 25px 22px; align-items: flex-start; }
  .wordmark { width: 124px; }
  .header-actions { gap: 15px; padding-top: 3px; }
  .language-switch { font-size: calc((12px) * var(--desktop-font-scale, 1)); gap: 3px; }
  .book-now { min-width: 96px; min-height: 40px; padding: 12px 13px; font-size: calc((12px) * var(--desktop-font-scale, 1)); letter-spacing:0; }
  .brand-frame { width: calc(100% - 24px); height: 70%; top: 51%; }
  .hero-content { top: 32%; width: 83%; }
  .eyebrow { font-size: calc((10px) * var(--desktop-font-scale, 1)); letter-spacing:0; margin-bottom: 25px; white-space: nowrap; }
  h1 { font-size: calc((clamp(36px, 8.9vw, 54px)) * var(--desktop-font-scale, 1)); line-height: 1.02; letter-spacing:0; }
  .headline-line:first-child { width: 95%; margin-inline: auto; }
  .headline-inner { text-wrap: balance; }
  .hero-actions { gap: 9px; margin-top: 5.8vh; flex-wrap: wrap; }
  .hero-button { min-height: 46px; padding: 14px 17px; font-size: calc((13px) * var(--desktop-font-scale, 1)); letter-spacing:0; }
  .river-image { object-position: 44% center; }
  .motion-controls { right: 22px; bottom: 13px; }
  .welcome-name { font-size: calc((52px) * var(--desktop-font-scale, 1)); }
  .welcome-location { font-size: calc((10px) * var(--desktop-font-scale, 1)); letter-spacing:0; margin-top: 12px; }
  html[lang='th'] h1 { font-size: calc((8.1vw) * var(--desktop-font-scale, 1)); }
  .story-section { min-height: 650px; }
  .story-content { width: 73%; top: 49%; }
  .story-copy { font-size: calc((clamp(26px, 6.9vw, 36px)) * var(--desktop-font-scale, 1)); line-height: 1.1; }
  .story-eyebrow { font-size: calc((13px) * var(--desktop-font-scale, 1)); margin-bottom: 23px; }
  .story-frame { top: 23%; height: 54%; }
  .story-image { object-position: 50% center; }
  .scroll-cue { left: 22px; bottom: 13px; transform: none; padding-left: 0; font-size: calc((11px) * var(--desktop-font-scale, 1)); gap: 10px; }
  html[lang='th'] .story-copy { font-size: calc((6.7vw) * var(--desktop-font-scale, 1)); }
}

@media (max-width: 360px) {
  .site-header { padding-inline: 17px; }
  .wordmark { width: 105px; }
  .header-actions { gap: 11px; }
  .hero-button { font-size: calc((12px) * var(--desktop-font-scale, 1)); padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
/* Motion study: temporary images establish rhythm before final assets arrive. */
.outline-content{background:#fff;color:#191918;overflow:hidden}.brand-story{position:relative;min-height:110svh;padding:120px 22vw 160px;background:linear-gradient(#191918 20%,#cd5d3c);color:white;text-align:center}.story-symbol{font-size:calc((clamp(80px,10vw,160px)) * var(--desktop-font-scale, 1));font-weight:300;margin-bottom:75px}.brand-story>p{position:relative;z-index:1;font-size:calc((clamp(23px,2.3vw,38px)) * var(--desktop-font-scale, 1));letter-spacing:0;line-height:1.18;margin:0 0 65px}.floating-photo{position:absolute;width:15vw;height:11vw;overflow:hidden}.floating-photo img{width:100%;height:100%;object-fit:cover}.float-one{left:7%;top:15%}.float-two{right:4%;top:24%}.float-three{left:3%;bottom:22%}.float-four{right:8%;bottom:9%}.float-three img{object-position:60% 30%;transform:scale(1.3)}.chapter{position:relative;min-height:90svh;isolation:isolate;overflow:hidden;background:#27211b;color:white;display:flex;align-items:center;padding:12vh 7vw}.chapter:after{content:'';position:absolute;inset:0;background:#0005;z-index:-1}.chapter-photo{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;z-index:-2}.chapter-content{width:100%}.chapter-heading{display:grid;grid-template-columns:24% 1fr;align-items:baseline;gap:20px}.chapter-heading>span{font-size:calc((clamp(14px,1.3vw,22px)) * var(--desktop-font-scale, 1))}.chapter h2{font-size:calc((clamp(28px,2.5vw,42px)) * var(--desktop-font-scale, 1));font-weight:300;letter-spacing:0;margin:0 0 24px}.chapter-rule{height:1px;background:#ffffffa0;transform-origin:left}.chapter-content>p{margin:30px 0 25px 26%;max-width:610px;font-size:calc((clamp(23px,2.2vw,34px)) * var(--desktop-font-scale, 1));line-height:1.15;letter-spacing:0}.chapter-content>.bracket-link{margin-left:26%}.bracket-link{display:inline-flex;align-items:center;gap:8px;font-size:calc((14px) * var(--desktop-font-scale, 1));min-height:44px}.bracket-link span{display:inline-block;font-size:calc((35px) * var(--desktop-font-scale, 1));font-weight:300;transition:transform .35s}.bracket-link:hover span:first-child{transform:translateX(-7px)}.bracket-link:hover span:last-child{transform:translateX(7px)}.chapter-neighbourhood .chapter-photo{object-position:80% center}.room-types{padding:120px 5vw;text-align:center}.section-label{font-size:calc((16px) * var(--desktop-font-scale, 1));margin:0 0 50px}.room-row{display:flex;align-items:center;justify-content:center;gap:20px;width:100%;border:0;background:none;color:inherit;padding:10px 0;font-size:calc((clamp(28px,4.1vw,66px)) * var(--desktop-font-scale, 1));font-weight:300;letter-spacing:0;line-height:1.1}.room-image{position:relative;display:block;flex:0 0 auto;width:10vw;height:7vw;min-height:70px;overflow:hidden;transition:width .65s cubic-bezier(.22,1,.36,1)}.room-image>img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform .8s}.room-image>span{position:absolute;inset:0;display:grid;place-items:center;background:#0003;color:white;font-size:calc((14px) * var(--desktop-font-scale, 1));letter-spacing:0;opacity:0;transition:opacity .35s}.room-row:hover .room-image,.room-row:focus-visible .room-image{width:19vw}.room-row:hover .room-image>span,.room-row:focus-visible .room-image>span{opacity:1}.room-row:hover img{transform:scale(1)}.outline-content :focus-visible{outline:2px solid #bd583c;outline-offset:6px}.gallery-section{padding:30px 0 100px}.marquee{overflow:hidden;margin-bottom:40px}.marquee>div{width:max-content;display:flex;font-size:calc((clamp(34px,4.5vw,70px)) * var(--desktop-font-scale, 1));letter-spacing:0}.marquee span{padding-right:.3em}.gallery-controls{display:flex;justify-content:flex-end;gap:14px;padding:0 8vw 24px}.gallery-controls button{border:1px solid #bbb;background:transparent;color:inherit;font-size:calc((25px) * var(--desktop-font-scale, 1));width:48px;height:48px;border-radius:50%}.gallery-track{display:flex;gap:6vw;overflow-x:auto;scroll-snap-type:x mandatory;padding:5px 15vw 30px;scrollbar-width:thin;touch-action:pan-x pan-y;cursor:grab}.gallery-track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}.gallery-track figure{flex:0 0 65vw;margin:0;scroll-snap-align:center}.gallery-track img{display:block;width:100%;height:43vw;max-height:570px;object-fit:cover;pointer-events:none}.gallery-track figcaption{font-size:calc((26px) * var(--desktop-font-scale, 1));letter-spacing:0;margin-top:20px}.gallery-track small{display:block;font-size:calc((15px) * var(--desktop-font-scale, 1));letter-spacing:0;margin-top:12px}.outline-faq{padding:80px 15vw 120px}.outline-faq>h2{font-size:calc((clamp(32px,4vw,52px)) * var(--desktop-font-scale, 1));font-weight:300;text-align:center;margin:0 0 70px;letter-spacing:0}.outline-faq details{border-bottom:1px solid #888}.outline-faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;padding:20px 0;list-style:none;font-size:calc((clamp(20px,2.1vw,32px)) * var(--desktop-font-scale, 1));letter-spacing:0}.outline-faq summary::-webkit-details-marker{display:none}.outline-faq summary span{transition:transform .3s}.outline-faq details[open] summary span{transform:rotate(45deg)}.faq-answer{overflow:hidden}.faq-answer p{font-size:calc((16px) * var(--desktop-font-scale, 1));line-height:1.7;margin:0;padding:0 0 25px;color:#555}.outline-footer{text-align:center;padding:80px 0 0}.outline-footer>p{font-size:calc((clamp(45px,7vw,110px)) * var(--desktop-font-scale, 1));font-weight:300;letter-spacing:0;line-height:1;margin:0 0 25px}.footer-wordmark{margin:100px 0 70px;font-size:calc((80px) * var(--desktop-font-scale, 1));letter-spacing:0}.footer-wordmark small{display:block;font-size:calc((12px) * var(--desktop-font-scale, 1));letter-spacing:0}.footer-pattern{white-space:nowrap;font-size:calc((clamp(60px,12vw,170px)) * var(--desktop-font-scale, 1));letter-spacing:0;color:#c85d3d;line-height:.9;transform-origin:bottom}
@media(max-width:700px){.brand-story{padding:90px 17vw;min-height:100svh}.brand-story>p{font-size:calc((23px) * var(--desktop-font-scale, 1))}.floating-photo{width:17vw;height:23vw;opacity:.65}.story-symbol{margin-bottom:70px}.chapter{min-height:85svh;padding:80px 7vw}.chapter-heading{grid-template-columns:1fr;gap:20px}.chapter-content>p,.chapter-content>.bracket-link{margin-left:0}.chapter-content>p{font-size:calc((24px) * var(--desktop-font-scale, 1))}.room-types{padding:80px 4vw}.room-row{gap:9px;font-size:calc((clamp(19px,5.2vw,34px)) * var(--desktop-font-scale, 1));padding:14px 0}.room-image{width:18vw;height:17vw;min-height:0}.room-row:hover .room-image,.room-row:focus-visible .room-image{width:24vw}.room-image>span{font-size:calc((9px) * var(--desktop-font-scale, 1))}.gallery-track{padding-inline:8vw}.gallery-track figure{flex-basis:82vw}.gallery-track img{height:65vw}.outline-faq{padding:45px 7vw 80px}.outline-faq summary{font-size:calc((20px) * var(--desktop-font-scale, 1))}.footer-wordmark{font-size:calc((65px) * var(--desktop-font-scale, 1))}.outline-footer>p{font-size:calc((15vw) * var(--desktop-font-scale, 1))}}

/* Hero → brand collage. The original river layer and curves stay on stage. */
.brand-story { box-sizing:border-box; min-height:100svh; padding:7svh 24vw 8svh; overflow:hidden; }
.story-symbol { width:260px; height:150px; margin:0 auto 5svh; color:#fff; }
.story-symbol svg { width:100%; height:100%; fill:currentColor; }
.brand-story > p { font-size:calc((clamp(20px,2.05vw,32px)) * var(--desktop-font-scale, 1)); line-height:1.22; margin:0 0 4svh; }
.brand-story .float-one { left:5%; top:12%; width:17%; height:22%; }
.brand-story .float-two { right:4%; top:22%; width:17%; height:25%; }
.brand-story .float-three { left:3%; top:62%; bottom:auto; width:18%; height:27%; }
.brand-story .float-four { right:5%; top:68%; bottom:auto; width:16%; height:21%; }
.shutter-enabled .scroll-sequence { height:260svh; }
.shutter-enabled .brand-story { position:absolute; inset:0; z-index:0; height:100%; min-height:0; }
.shutter-enabled .reveal-layer { z-index:1; overflow:hidden; right:auto; bottom:auto; }
.shutter-enabled .brand-story .float-one img,
.shutter-enabled .story-symbol svg { visibility:hidden; }
.logo-house { fill:none !important; }
@media(max-width:700px) {
  .brand-story { padding:6svh 21vw 5svh; }
  .story-symbol { width:200px; height:116px; max-width:100%; margin-bottom:4svh; }
  .brand-story > p { font-size:calc((clamp(16px,2.7vw,21px)) * var(--desktop-font-scale, 1)); line-height:1.25; margin-bottom:3svh; }
  .brand-story .floating-photo { opacity:1; }
}

/* Two reading moments, with a full background colour dissolve. */
.brand-story { background:#080807; }
.shutter-enabled .scroll-sequence { height:360svh; }
.shutter-enabled .brand-story > p { position:absolute; top:44%; left:24%; width:52%; margin:0; }
@media(max-width:700px) {
  .shutter-enabled .brand-story > p { top:40%; left:21%; width:58%; }
}

/* 01–03: one pinned reading position, with images passing behind it. */
.chapter-position { display:none; }
.chapters-enabled .chapter-stage { position:relative; height:100svh; min-height:600px; overflow:hidden; background:#171612; isolation:isolate; }
.chapters-enabled .chapter-backdrops { position:absolute; inset:0; z-index:0; }
.chapters-enabled .chapter-backdrops::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.42); z-index:3; }
.chapters-enabled .chapter-photo { position:absolute; inset:0; width:100%; height:100%; z-index:auto; object-fit:cover; }
.chapters-enabled .chapter { position:absolute; inset:0; min-height:0; padding:0; background:none; z-index:2; isolation:auto; }
.chapters-enabled .chapter::after { display:none; }
.chapters-enabled .chapter-content { position:absolute; inset:0; width:100%; text-align:center; }
.chapters-enabled .chapter-heading { position:absolute; left:8%; width:84%; bottom:calc(50% + 35px); display:block; }
.chapters-enabled .chapter-heading>span { display:block; margin-bottom:22px; font-size:calc((14px) * var(--desktop-font-scale, 1)); letter-spacing:0; }
.chapters-enabled .chapter h2 { margin:0; font-size:calc((clamp(30px,3.8vw,60px)) * var(--desktop-font-scale, 1)); line-height:1.05; }
.chapters-enabled .chapter-rule { display:none; }
.chapters-enabled .chapter-content>p { position:absolute; top:calc(50% + 35px); left:50%; transform:translateX(-50%); width:70%; max-width:660px; margin:0; font-size:calc((clamp(21px,2vw,31px)) * var(--desktop-font-scale, 1)); line-height:1.25; }
.chapters-enabled .chapter-content>.bracket-link { position:absolute; top:calc(50% + 195px); left:50%; transform:translateX(-50%); margin:0; white-space:nowrap; }
.chapters-enabled .chapter-position { display:flex; position:absolute; top:50%; left:15%; width:70%; height:3px; gap:10px; z-index:4; }
.chapter-position>span { flex:1; position:relative; background:#ffffff35; }
.chapter-position i { display:block; height:100%; background:#fff; transform-origin:left; }
.chapter-position>span.is-current { background:#ffffff65; }
@media(max-width:700px) {
 .chapters-enabled .chapter-heading { left:7%; width:86%; }
 .chapters-enabled .chapter h2 { font-size:calc((clamp(28px,7vw,42px)) * var(--desktop-font-scale, 1)); }
 .chapters-enabled .chapter-content>p { width:82%; font-size:calc((21px) * var(--desktop-font-scale, 1)); }
 .chapters-enabled .chapter-position { left:9%; width:82%; }
 .chapters-enabled .chapter-content>.bracket-link { top:calc(50% + 210px); }
}

/* Figma chapter grid: number at left, copy in the second column. */
.chapters-enabled .chapter-stage { --chapter-line:44%; }
.chapters-enabled .chapter-image-panel { position:absolute; inset:0; overflow:hidden; }
.chapters-enabled .chapter-photo { top:-12%; bottom:auto; height:124%; will-change:transform; }
.chapters-enabled .chapter-image-panel:nth-child(3) img { object-position:80% center; }
.chapters-enabled .chapter-backdrops::after { background:rgba(0,0,0,.3); }
.chapters-enabled .chapter-content { text-align:left; }
.chapters-enabled .chapter-heading { left:7%; width:86%; bottom:calc(100% - var(--chapter-line) + 25px); display:grid; grid-template-columns:26% 1fr; align-items:baseline; gap:0; }
.chapters-enabled .chapter-heading>span { margin:0; font-size:calc((clamp(14px,1.45vw,22px)) * var(--desktop-font-scale, 1)); letter-spacing:0; }
.chapters-enabled .chapter h2 { font-size:calc((clamp(25px,2.3vw,36px)) * var(--desktop-font-scale, 1)); line-height:1.1; }
.chapters-enabled .chapter-content>p { top:calc(var(--chapter-line) + 25px); left:29.36%; transform:none; width:39%; max-width:640px; font-size:calc((clamp(21px,1.95vw,30px)) * var(--desktop-font-scale, 1)); line-height:1.15; }
.chapters-enabled .chapter-content>.bracket-link { top:calc(var(--chapter-line) + 165px); left:29.36%; transform:none; }
.chapters-enabled .chapter-position { top:var(--chapter-line); left:0; width:100%; height:1px; gap:0; }
.chapter-position>span { background:#ffffff35; }
.chapter-position>span.is-current { background:#ffffff55; }
@media(max-width:700px) {
 .chapters-enabled .chapter-heading { left:7%; width:86%; grid-template-columns:1fr; gap:14px; }
 .chapters-enabled .chapter-heading>span { font-size:calc((13px) * var(--desktop-font-scale, 1)); }
 .chapters-enabled .chapter h2 { font-size:calc((clamp(25px,6vw,34px)) * var(--desktop-font-scale, 1)); }
 .chapters-enabled .chapter-content>p { left:7%; width:82%; font-size:calc((22px) * var(--desktop-font-scale, 1)); }
 .chapters-enabled .chapter-content>.bracket-link { left:7%; top:calc(var(--chapter-line) + 210px); }
 .chapters-enabled .chapter-position { left:0; width:100%; }
}

.shutter-enabled .scroll-sequence { height:390svh; }

/* More photographs enter from below as the story progresses. */
.story-extra { display:none; position:absolute; overflow:hidden; pointer-events:none; }
.shutter-enabled .story-extra { display:block; }
.story-extra img { width:100%; height:100%; object-fit:cover; }
.extra-one { left:25%; top:81%; width:15%; height:19%; }
.extra-two { right:26%; top:84%; width:12%; height:24%; }
@media(max-width:700px) {
 .extra-one { left:25%; top:80%; width:23%; height:18%; }
 .extra-two { right:24%; top:86%; width:18%; height:23%; }
}

/* Anchor the shared logo immediately above the centred story copy. */
.shutter-enabled .story-symbol {
  position:absolute;
  top:calc(44% - 190px);
  left:50%;
  transform:translateX(-50%);
  margin:0;
}
@media(max-width:700px) {
  .shutter-enabled .story-symbol { top:calc(40% - 145px); }
}

/* Figma typography, navigation and component proportions. */
@font-face { font-family:'ABC Solar Display'; src:url('./assets/fonts/ABCSolarDisplay-Medium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
body { font-weight:300; }
.site-header { padding:30px 3.5vw; }
.wordmark { width:clamp(120px,10vw,165px); }
.primary-nav { position:absolute; left:50%; transform:translateX(-50%); display:flex; gap:32px; }
.primary-nav a { padding:12px 0; font-size:calc((13px) * var(--desktop-font-scale, 1)); font-weight:500; letter-spacing:0; }
.header-actions { gap:20px; }
.language-switch { font-size:calc((13px) * var(--desktop-font-scale, 1)); gap:8px; }
.language-switch>span { display:none; }
.language-switch button[aria-pressed='true']::after { transform:scaleX(1); }
.site-header .button,.hero-actions .button { border:0; min-width:0; min-height:44px; padding:8px 20px; background:transparent; color:#fff; font-size:calc((16px) * var(--desktop-font-scale, 1)); letter-spacing:0; text-transform:uppercase; }
.site-header .button::before,.hero-actions .button::before,.site-header .button::after,.hero-actions .button::after { content:''; position:absolute; top:5px; bottom:5px; width:12px; border:3px solid currentColor; transition:transform .3s; }
.site-header .button::before,.hero-actions .button::before { left:0; border-right:0; border-radius:100% 0 0 100% / 50%; }
.site-header .button::after,.hero-actions .button::after { right:0; border-left:0; border-radius:0 100% 100% 0 / 50%; }
.site-header .button:hover::before,.hero-actions .button:hover::before { transform:translateX(-4px); }
.site-header .button:hover::after,.hero-actions .button:hover::after { transform:translateX(4px); }
.brand-frame { width:92%; height:50%; top:50%; }
.hero-content { top:34%; width:78%; }
.eyebrow { font-size:calc((16px) * var(--desktop-font-scale, 1)); letter-spacing:0; margin:0 0 28px; padding:0; }
h1 { font-size:calc((clamp(46px,5.35vw,92px)) * var(--desktop-font-scale, 1)); line-height:1.03; letter-spacing:0; }
.hero-actions { margin-top:26px; gap:20px; }
.scroll-cue { font-size:calc((10px) * var(--desktop-font-scale, 1)); text-transform:uppercase; bottom:15px; }
.scroll-cue svg { display:none; }
.motion-controls { bottom:12px; }
.motion-button { font-size:calc((10px) * var(--desktop-font-scale, 1)); }
.brand-story>p { letter-spacing:0; }
.brand-story .float-two { right:4%; top:22%; width:14%; height:22%; }
.brand-story .float-three { left:8%; top:69%; width:16%; height:19%; }
.brand-story .float-three img { transform:none; }
.brand-story .float-four { right:14%; top:66%; width:9%; height:24%; }
.room-types { padding:150px 5vw 130px; }
.section-label { font-size:calc((20px) * var(--desktop-font-scale, 1)); margin-bottom:50px; letter-spacing:0; }
.room-row { font-size:calc((clamp(35px,4.7vw,75px)) * var(--desktop-font-scale, 1)); gap:16px; padding:12px 0; }
.room-image { width:17vw; height:9vw; }
.room-image>span { opacity:0; font-weight:500; background:#0002; }
.gallery-section { padding-top:20px; }
.gallery-track { gap:5vw; padding-inline:21vw; }
.gallery-track figure { flex-basis:58vw; }
.gallery-track img { height:38vw; }
.gallery-track figcaption { text-align:center; }
.outline-faq { padding:80px 18vw 140px; }
.outline-faq>h2 { font-size:calc((42px) * var(--desktop-font-scale, 1)); }
.outline-faq summary { font-size:calc((24px) * var(--desktop-font-scale, 1)); padding:23px 0; }
.location-section { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:4vw; padding:40px 17vw 110px; text-align:center; }
.location-section>img { width:100%; aspect-ratio:1; object-fit:cover; }
.location-section h2 { font-size:calc((clamp(26px,2.7vw,44px)) * var(--desktop-font-scale, 1)); font-weight:300; line-height:1; margin:0 0 24px; }
.location-section p { font-size:calc((15px) * var(--desktop-font-scale, 1)); line-height:1.4; }
.location-section .bracket-link { font-weight:500; }
.newsletter-section { text-align:center; padding:70px 0 100px; }
.newsletter-section h2 { font-size:calc((clamp(32px,3.4vw,54px)) * var(--desktop-font-scale, 1)); font-weight:300; letter-spacing:0; margin:0 0 15px; }
.newsletter-section p { font-size:calc((15px) * var(--desktop-font-scale, 1)); line-height:1.3; }
.newsletter-form { display:flex; width:48%; margin:65px auto 0; border-bottom:1px solid #222; padding-bottom:12px; gap:20px; }
.newsletter-form input { width:100%; min-width:0; border:0; background:none; font:inherit; color:inherit; outline-offset:5px; }
.newsletter-form input::placeholder { color:#222; opacity:1; }
.newsletter-form button { white-space:nowrap; border:0; background:none; font-size:calc((14px) * var(--desktop-font-scale, 1)); color:inherit; }
.outline-footer { padding:50px 0 0; }
.footer-wordmark { margin:40px auto 60px; width:225px; }
.footer-wordmark svg { width:100%; display:block; }
.footer-wordmark small { font-weight:500; font-size:calc((12px) * var(--desktop-font-scale, 1)); margin-top:5px; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; padding:0 6vw 60px; font-size:calc((13px) * var(--desktop-font-scale, 1)); }
.footer-links button { border:0; background:none; color:inherit; padding:0; }
.footer-pattern { height:190px; font-size:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='86' viewBox='0 0 86 86'%3E%3Cg fill='none' stroke='%23de5334' stroke-width='.8'%3E%3Cpath d='M0 0H16V7L35 27V0H51V27L70 7V0H86M0 0V16L27 43 0 70V86H16V79L35 59V86H51V59L70 79V86H86V70L59 43 86 16V0M0 35H7L16 43 7 51H0M86 35H79L70 43 79 51H86M35 35L43 27 51 35V51L43 59 35 51Z'/%3E%3C/g%3E%3C/svg%3E"); background-size:86px 86px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:900px) {
 .primary-nav { gap:18px; }
 .primary-nav a { font-size:calc((11px) * var(--desktop-font-scale, 1)); }
 .site-header { padding:24px; }
 .header-actions { gap:12px; }
 .site-header .button { font-size:calc((13px) * var(--desktop-font-scale, 1)); padding-inline:16px; }
 .wordmark { width:110px; }
}
@media(max-width:700px) {
 .primary-nav { top:90px; width:100%; justify-content:center; gap:26px; }
 .brand-frame { width:94%; height:46%; top:50%; }
 .hero-content { top:36%; width:83%; }
 .eyebrow { font-size:calc((11px) * var(--desktop-font-scale, 1)); margin-bottom:22px; }
 h1 { font-size:calc((7.3vw) * var(--desktop-font-scale, 1)); }
 .hero-actions { margin-top:24px; gap:9px; }
 .hero-actions .button { font-size:calc((12px) * var(--desktop-font-scale, 1)); padding-inline:15px; }
 .site-header .button::before,.hero-actions .button::before,.site-header .button::after,.hero-actions .button::after { border-width:2px; width:9px; }
 .room-types { padding:90px 4vw; }
 .room-row { font-size:calc((5.2vw) * var(--desktop-font-scale, 1)); gap:9px; }
 .room-image { width:22vw; height:18vw; }
 .room-image>span { font-size:calc((10px) * var(--desktop-font-scale, 1)); }
 .gallery-track { padding-inline:10vw; }
 .gallery-track figure { flex-basis:80vw; }
 .gallery-track img { height:65vw; }
 .outline-faq { padding:60px 7vw 80px; }
 .outline-faq>h2 { font-size:calc((34px) * var(--desktop-font-scale, 1)); }
 .outline-faq summary { font-size:calc((20px) * var(--desktop-font-scale, 1)); }
 .location-section { grid-template-columns:1fr; padding:20px 10vw 60px; gap:35px; }
 .location-section>img { max-height:420px; }
 .location-section h2 { font-size:calc((34px) * var(--desktop-font-scale, 1)); }
 .newsletter-section { padding:50px 7vw 60px; }
 .newsletter-form { width:100%; margin-top:40px; }
 .footer-links { gap:18px; padding-bottom:40px; }
 .footer-wordmark { width:180px; }
}

/* Figma gallery: centred pool, cropped neighbours and side chevrons. */
.gallery-section { padding:15vw 0 105px; }
.marquee { position:relative; z-index:0; margin-bottom:-4.5vw; }
.marquee>div { font-size:calc((13vw) * var(--desktop-font-scale, 1)); font-weight:300; line-height:1; letter-spacing:0; }
.gallery-viewport { position:relative; z-index:1; }
.gallery-track { gap:8.5vw; padding:0 22vw 25px; scrollbar-width:none; }
.gallery-track::-webkit-scrollbar { display:none; }
.gallery-track figure { flex:0 0 56vw; }
.gallery-track img { width:100%; height:37vw; max-height:none; object-fit:cover; }
.gallery-track figcaption { text-align:left; font-size:calc((clamp(20px,2.15vw,36px)) * var(--desktop-font-scale, 1)); margin-top:14px; line-height:1.15; }
.gallery-track small { max-width:34em; font-size:calc((clamp(12px,1.05vw,16px)) * var(--desktop-font-scale, 1)); letter-spacing:0; line-height:1.45; margin-top:12px; }
.gallery-controls { position:absolute; inset:0; z-index:2; display:block; padding:0; pointer-events:none; }
.gallery-controls button { position:absolute; top:18.5vw; transform:translate(-50%,-50%); width:50px; height:60px; border:0; border-radius:0; background:transparent; pointer-events:auto; }
.gallery-controls button:first-child { left:17.75%; }
.gallery-controls button:last-child { left:82.25%; }
.gallery-controls svg, .room-popup-photo button svg { width:22px; height:36px; fill:none; stroke:currentColor; stroke-width:2.5; }
@media(max-width:700px) {
 .gallery-section { padding-bottom:65px; }
 .marquee { margin-bottom:-4.5vw; }
 .gallery-track { gap:12vw; padding-inline:13vw; }
 .gallery-track figure { flex-basis:74vw; }
 .gallery-track img { height:53vw; }
 .gallery-controls button { top:26.5vw; width:38px; height:48px; }
 .gallery-controls button:first-child { left:7%; }
 .gallery-controls button:last-child { left:93%; }
 .gallery-controls svg, .room-popup-photo button svg { width:15px; height:27px; }
 .gallery-track figcaption { font-size:calc((23px) * var(--desktop-font-scale, 1)); }
 .gallery-track small { font-size:calc((13px) * var(--desktop-font-scale, 1)); margin-top:10px; }
}

/* Original footer artwork supplied from Figma. */
.footer-pattern { height:auto; line-height:0; background:none; }
.footer-pattern img { display:block; width:100%; height:auto; }
.outline-footer { overflow:hidden; }

.story-logo-art .logo-split path { fill:white; }
.story-logo-art .logo-closed path { fill:white; }

.outline-faq > h2 { font-weight:300; }

#stay h2 { font-weight:300; }

h2 { font-weight:300; }

/* A spacious collage is already assembled for the first paragraph. */
.extra-one { left:29%; top:8%; width:11%; height:16%; }
.extra-two { right:27%; top:11%; width:10%; height:19%; }
.extra-three { left:1%; top:43%; width:10%; height:17%; }
.extra-four { right:1%; top:51%; width:10%; height:13%; }
.extra-five { left:29%; top:82%; width:11%; height:17%; }
.extra-six { right:28%; top:85%; width:12%; height:14%; }
@media(max-width:700px) {
 .extra-one { left:29%; top:6%; width:15%; height:11%; }
 .extra-two { right:25%; top:9%; width:14%; height:13%; }
 .extra-three { left:-4%; top:44%; width:15%; height:14%; }
 .extra-four { right:-4%; top:51%; width:15%; height:11%; }
 .extra-five { left:29%; top:84%; width:16%; height:13%; }
 .extra-six { right:23%; top:87%; width:17%; height:11%; }
}

.story-p2-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; pointer-events:none; z-index:1; }
.story-line-mask { display:block; overflow:hidden; }
.story-line { display:block; }
.shutter-enabled .brand-story > .reveal-copy { opacity:0; visibility:hidden; }
.shutter-enabled .story-line { opacity:0; visibility:hidden; }
.story-readable { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.brand-story .story-p2-image { transform:none; }

.welcome-name { padding:0; width:clamp(190px,22vw,290px); margin:auto; line-height:0; }
.welcome-name svg { display:block; width:100%; height:auto; color:white; }
.hotel-logo { display:block; width:100%; height:auto; }
.footer-wordmark .hotel-logo { filter:brightness(0); }
.welcome-location[hidden] { display:none; }

/* Preserve the artwork proportions on every viewport. */
.brand-frame { width:min(92%, 119.15svh); height:auto; aspect-ratio:1600 / 940; top:50%; }
@media(max-width:700px) { .brand-frame { width:min(94%, 119.15svh); height:auto; } }


.footer-pattern-row { overflow:hidden; line-height:0; }

/* Room previews expand only on hover or keyboard focus. */
.room-row .room-image { width:10vw; min-width:0; transition:width .65s cubic-bezier(.22,1,.36,1); }
.room-row:hover .room-image,.room-row:focus-visible .room-image { width:19vw; }
.room-row .room-image > img { width:19vw; max-width:none; position:absolute; left:50%; top:0; transform:translateX(-50%); }
.room-row .room-image > span { opacity:0; transition:opacity .35s ease; }
.room-row:hover .room-image > span,.room-row:focus-visible .room-image > span { opacity:1; }
@media(max-width:700px) {
 .room-row .room-image { width:14vw; }
 .room-row:hover .room-image,.room-row:focus-visible .room-image { width:24vw; }
 .room-row .room-image > img { width:24vw; }
}
@media(prefers-reduced-motion:reduce) { .room-row .room-image,.room-row .room-image > span { transition:none; } }

.room-dialog { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:white; color:#191918; overflow:auto; }
.room-dialog[open] { display:grid; grid-template-columns:1fr 1fr; }
.room-dialog::backdrop { background:rgba(0,0,0,0); transition:background-color .55s ease; }
.room-dialog.is-visible::backdrop { background:rgba(0,0,0,.44); }
.room-popup-photo { position:relative; height:100dvh; overflow:hidden; }
.room-popup-photo>img { width:100%; height:100%; object-fit:cover; display:block; }
.room-popup-photo button { position:absolute; top:50%; transform:translateY(-50%); border:0; background:none; color:white; font-size:calc((36px) * var(--desktop-font-scale, 1)); padding:15px; cursor:pointer; }
.room-prev { left:3%; }.room-next { right:3%; }
.room-popup-close { position:fixed; right:20px; top:10px; z-index:4; border:0; background:white; color:#191918; font-size:calc((40px) * var(--desktop-font-scale, 1)); line-height:1; width:44px; height:44px; cursor:pointer; }
.room-popup-copy { text-align:center; padding:13vh 5vw 7vh; }
.room-popup-copy h2 { font-family:inherit; font-size:calc((clamp(32px,4vw,72px)) * var(--desktop-font-scale, 1)); font-weight:300; line-height:1.05; margin:0 0 8vh; letter-spacing:0; }
.room-popup-book { font:inherit; font-size:calc((24px) * var(--desktop-font-scale, 1)); background:none; border:0; padding:14px; margin-bottom:22px; cursor:pointer; }
.room-popup-copy>p { font-family:Arial,sans-serif; font-size:calc((clamp(16px,1.25vw,23px)) * var(--desktop-font-scale, 1)); line-height:1.3; margin:0 auto 40px; max-width:720px; }
.room-popup-copy summary { list-style:none; cursor:pointer; font-size:calc((25px) * var(--desktop-font-scale, 1)); }.room-popup-copy summary::-webkit-details-marker { display:none; }.room-popup-copy summary span { display:inline-block; margin-left:8px; }.room-popup-copy details[open] summary span { transform:rotate(45deg); }.room-popup-copy details p { font-size:calc((18px) * var(--desktop-font-scale, 1)); line-height:1.6; }
.room-type-bar { position:fixed; z-index:4; left:50%; bottom:5vh; transform:translateX(-50%); display:flex; align-items:center; padding:3px; border:1px solid #191918; border-radius:999px; background:#fff; white-space:nowrap; }
.room-type-bar button { min-height:36px; padding:8px 18px; border:0; border-radius:999px; background:transparent; color:#191918; font:inherit; font-size:calc((13px) * var(--desktop-font-scale, 1)); cursor:pointer; transition:background-color .3s ease,color .3s ease; }
.room-type-bar button.is-active { background:#191918; color:#fff; }
.room-type-bar button:focus-visible { outline:2px solid #de5334; outline-offset:2px; }
.room-expanding-image { position:fixed; z-index:3; object-fit:cover; max-width:none; pointer-events:none; }
@media(max-width:700px) { .room-dialog[open] { grid-template-columns:1fr; }.room-popup-photo { height:48dvh; }.room-popup-copy { padding:40px 7vw 110px; }.room-popup-copy h2 { margin-bottom:25px; }.room-popup-copy>p { font-size:calc((16px) * var(--desktop-font-scale, 1)); }.room-popup-close { right:12px; top:12px; }.room-type-bar { bottom:18px; max-width:calc(100vw - 24px); overflow-x:auto; justify-content:flex-start; }.room-type-bar button { padding-inline:14px; font-size:calc((12px) * var(--desktop-font-scale, 1)); } }

/* Uniform tracking across all text, including native controls. */
*, *::before, *::after { letter-spacing:0; }

/* Responsive refinement: preserve the editorial composition without crowding
   navigation, copy or controls on compact screens. */
/* Align STAY with the last frame of the expanding collage photograph. */
.stay-linked .scroll-sequence { height:820svh; z-index:2; pointer-events:none; }
.stay-linked .experience { pointer-events:auto; }
.stay-linked .outline-content { position:relative; }
.stay-linked .extra-four img { position:absolute; left:0; top:0; }
.stay-linked .experience > .chapter-sequence { position:absolute; inset:0; z-index:8; }
.stay-linked .experience .chapter-stage { height:100%; min-height:0; background:transparent; }
.stay-linked .chapter-image-panel:first-child { visibility:hidden; }
.stay-linked .chapter-backdrops::after { background:transparent; }
.stay-linked .chapter-image-panel:not(:first-child)::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,.3); }
html { overflow-x:clip; }
body { min-width:280px; overflow-x:clip; }
img, svg { max-width:100%; }

@media (max-width:1100px) {
  .site-header { padding-inline:28px; }
  .primary-nav { gap:20px; }
  .hero-content { width:min(84%, 900px); }
  .chapters-enabled .chapter-content>p { width:50%; }
  .location-section { padding-inline:10vw; }
  .newsletter-form { width:min(620px, 64%); }
}

@media (max-width:760px) {
  .experience { min-height:620px; }
  .site-header {
    align-items:center;
    padding:20px max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left));
  }
  .wordmark { width:112px; }
  .header-actions { gap:10px; padding-top:0; }
  .language-switch { font-size:calc((12px) * var(--desktop-font-scale, 1)); gap:6px; }
  .site-header .book-now { min-height:40px; padding-inline:14px; font-size:calc((12px) * var(--desktop-font-scale, 1)); }
  .primary-nav {
    top:76px;
    width:calc(100% - 32px);
    gap:clamp(14px,5vw,28px);
    overflow-x:auto;
    justify-content:center;
    scrollbar-width:none;
  }
  .primary-nav::-webkit-scrollbar { display:none; }
  .primary-nav a { flex:0 0 auto; min-height:42px; display:grid; place-items:center; font-size:calc((11px) * var(--desktop-font-scale, 1)); }
  .hero-content { top:34%; width:calc(100% - 42px); }
  .eyebrow { font-size:calc((12px) * var(--desktop-font-scale, 1)); margin-bottom:18px; }
  h1 { font-size:calc((clamp(38px,10.4vw,64px)) * var(--desktop-font-scale, 1)); line-height:.98; }
  .hero-actions { margin-top:30px; gap:12px; }
  .hero-actions .button { min-height:46px; font-size:calc((13px) * var(--desktop-font-scale, 1)); padding-inline:18px; }
  .brand-frame { width:calc(100% - 20px); }


  .chapters-enabled .chapter-stage { min-height:560px; }
  .chapters-enabled .chapter-stage { --chapter-line:42%; }
  .chapters-enabled .chapter-heading { bottom:calc(100% - var(--chapter-line) + 20px); }
  .chapters-enabled .chapter-content>p {
    top:calc(var(--chapter-line) + 24px);
    width:86%;
    font-size:calc((clamp(19px,5.3vw,23px)) * var(--desktop-font-scale, 1));
    line-height:1.2;
  }
  .chapters-enabled .chapter-content>.bracket-link { top:calc(var(--chapter-line) + 205px); }

  .room-types { padding:82px 18px; }
  .section-label { font-size:calc((15px) * var(--desktop-font-scale, 1)); margin-bottom:34px; }
  .room-row { gap:8px; padding:12px 0; font-size:calc((clamp(19px,5.5vw,31px)) * var(--desktop-font-scale, 1)); }
  .room-row .room-image { width:16vw; height:18vw; max-height:82px; }
  .room-row:hover .room-image,.room-row:focus-visible .room-image { width:25vw; }
  .room-row .room-image>img { width:25vw; }

  .gallery-track { padding-inline:12vw; }
  .gallery-track figure { flex-basis:76vw; }
  .gallery-track img { height:56vw; min-height:190px; }
  .gallery-controls button { top:28vw; }

  .outline-faq { padding:58px 22px 76px; }
  .outline-faq>h2 { margin-bottom:42px; }
  .outline-faq summary { align-items:flex-start; padding:20px 0; font-size:calc((19px) * var(--desktop-font-scale, 1)); line-height:1.15; }
  .outline-faq summary span { flex:0 0 auto; }

  .location-section { padding:10px 22px 64px; }
  .location-section>img { width:100%; max-height:none; aspect-ratio:4/3; }
  .newsletter-section { padding:54px 22px 70px; }
  .newsletter-section p br { display:none; }
  .newsletter-form { width:100%; margin-top:36px; }
  .footer-links { flex-direction:column; align-items:center; gap:14px; padding-inline:22px; }
  .footer-pattern-row img { width:auto; max-width:none; height:42px; }

  .room-popup-photo { height:min(46dvh, 430px); }
  .room-popup-copy { padding:34px 22px 112px; }
  .room-popup-copy h2 { font-size:calc((clamp(34px,10vw,54px)) * var(--desktop-font-scale, 1)); }
  .room-popup-book { font-size:calc((20px) * var(--desktop-font-scale, 1)); }
  .room-type-bar { max-width:calc(100vw - 20px); bottom:max(10px, env(safe-area-inset-bottom)); }
}

@media (max-width:420px) {
  .site-header { padding-inline:16px; }
  .wordmark { width:96px; }
  .header-actions { gap:7px; }
  .site-header .book-now { padding-inline:11px; font-size:calc((11px) * var(--desktop-font-scale, 1)); }
  .primary-nav { top:68px; gap:14px; }
  .primary-nav a { font-size:calc((10px) * var(--desktop-font-scale, 1)); }
  .hero-content { top:33%; width:calc(100% - 30px); }
  .eyebrow { font-size:calc((10px) * var(--desktop-font-scale, 1)); }
  h1 { font-size:calc((clamp(35px,10vw,44px)) * var(--desktop-font-scale, 1)); }
  .hero-actions { flex-direction:column; align-items:center; gap:6px; margin-top:24px; }
  .hero-actions .button { width:max-content; min-height:42px; }
  .motion-controls { right:16px; }
  .scroll-cue { left:16px; }
  .room-row { font-size:calc((clamp(17px,5.2vw,22px)) * var(--desktop-font-scale, 1)); }
  .gallery-track figcaption { font-size:calc((20px) * var(--desktop-font-scale, 1)); }
  .newsletter-form { align-items:flex-end; gap:10px; }
  .newsletter-form button { font-size:calc((13px) * var(--desktop-font-scale, 1)); }
  .privacy-inner { width:calc(100% - 36px); }
}

/* Chapter layout: spacious left label, aligned heading and reading column. */
.chapters-enabled .chapter-stage { --chapter-line:46.5%; }
.chapters-enabled .chapter-content { box-sizing:border-box; display:grid; grid-template-columns:59.8% 40.2%; grid-template-rows:calc(var(--chapter-line) + 32px) auto 28px 48px 1fr; padding:0 6.6%; }
.chapters-enabled .chapter-heading { left:6.6%; width:86.8%; grid-template-columns:59.8% 40.2%; bottom:calc(100% - var(--chapter-line) + 24px); }
.chapters-enabled .chapter-heading>span { font-size:calc((clamp(16px,1.5vw,27px)) * var(--desktop-font-scale, 1)); }
.chapters-enabled .chapter h2 { font-size:calc((clamp(28px,3.1vw,56px)) * var(--desktop-font-scale, 1)); font-weight:300; line-height:1.06; }
.chapters-enabled .chapter-content>p { position:relative; grid-column:2; grid-row:2; top:auto; left:auto; transform:none; width:100%; max-width:none; margin:0; font-size:calc((clamp(20px,1.85vw,34px)) * var(--desktop-font-scale, 1)); line-height:1.23; }
.chapters-enabled .chapter-content>.bracket-link { position:relative; grid-column:2; grid-row:4; top:auto; left:auto; transform:none; margin:0; justify-self:start; align-self:start; }
.chapter .bracket-link { border:0; background:none; color:inherit; padding:0; font-family:inherit; font-weight:300; font-size:calc((clamp(15px,1.2vw,22px)) * var(--desktop-font-scale, 1)); line-height:1; gap:8px; cursor:pointer; }
.chapter .bracket-link span { font-size:calc((48px) * var(--desktop-font-scale, 1)); line-height:1; }
@media(max-width:760px) {
  .chapters-enabled .chapter-content { grid-template-columns:1fr; padding-inline:7%; grid-template-rows:calc(var(--chapter-line) + 24px) auto 24px 48px 1fr; }
  .chapters-enabled .chapter-heading { left:7%; width:86%; grid-template-columns:1fr; gap:14px; }
  .chapters-enabled .chapter h2 { font-size:calc((clamp(28px,6.5vw,38px)) * var(--desktop-font-scale, 1)); }
  .chapters-enabled .chapter-content>p { grid-column:1; font-size:calc((clamp(19px,4.7vw,23px)) * var(--desktop-font-scale, 1)); }
  .chapters-enabled .chapter-content>.bracket-link { grid-column:1; }
}

@media (max-height:650px) and (orientation:landscape) {
  .experience { min-height:520px; }
  .site-header { padding-top:14px; }
  .primary-nav { top:auto; }
  .hero-content { top:27%; }
  .hero-actions { margin-top:18px; }
  .brand-frame { width:min(78%, 119.15svh); }
  .chapters-enabled .chapter-stage { min-height:520px; }
  .room-dialog[open] { grid-template-columns:1fr 1fr; }
  .room-popup-photo { height:100dvh; }
  .room-popup-copy { padding:50px 5vw 90px; }
}

/* Room list proportions follow the supplied idle/hover reference. */
.room-types { padding:10vw 5vw 8vw; }
.room-types > .section-label { font-size:calc((clamp(18px,1.37vw,35px)) * var(--desktop-font-scale, 1)); line-height:1.2; margin:0 0 2.9vw; }
.room-types .room-row { height:12.8vw; min-height:0; padding:0; gap:1.5vw; font-size:calc((4.3vw) * var(--desktop-font-scale, 1)); font-weight:300; line-height:1; }
.room-types .room-row .room-image {
  width:9.6vw; height:6.45vw; min-height:0; max-height:none;
  transition:width .65s cubic-bezier(.22,1,.36,1),height .65s cubic-bezier(.22,1,.36,1);
}
.room-types .room-row:is(:hover,:focus-visible) .room-image { width:22vw; height:12vw; }
.room-types .room-row .room-image > img { width:100%; height:100%; max-width:none; position:absolute; inset:0; transform:none; object-fit:cover; }
.room-types .room-row .room-image > span { background:#0002; }
@media(max-width:760px) {
  .room-types { padding:80px 4vw 70px; }
  .room-types > .section-label { font-size:calc((18px) * var(--desktop-font-scale, 1)); margin-bottom:30px; }
  .room-types .room-row { height:24vw; gap:1.5vw; font-size:calc((5.2vw) * var(--desktop-font-scale, 1)); }
  .room-types .room-row .room-image { width:16vw; height:14vw; }
  .room-types .room-row:is(:hover,:focus-visible) .room-image { width:26vw; height:18vw; }
}
@media(prefers-reduced-motion:reduce) {
  .room-types .room-row .room-image { transition:none; }
}

/* One bracket treatment, shared with the banner across every action. */
.bracket-control.bracket-control {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  box-sizing:border-box; width:max-content; min-width:0; min-height:44px;
  padding:8px 20px; gap:0; border:0; border-radius:0;
  background:transparent; color:inherit; font-family:inherit; font-size:calc((16px) * var(--desktop-font-scale, 1));
  font-weight:300; line-height:1.2; text-transform:uppercase;
  text-decoration:none; white-space:nowrap; cursor:pointer;
}
.bracket-control.bracket-control::before,.bracket-control.bracket-control::after {
  content:''; position:absolute; top:5px; bottom:5px; width:12px;
  border:3px solid currentColor; pointer-events:none; transition:transform .3s ease;
}
.bracket-control.bracket-control::before { left:0; border-right:0; border-radius:100% 0 0 100% / 50%; }
.bracket-control.bracket-control::after { right:0; border-left:0; border-radius:0 100% 100% 0 / 50%; }
.bracket-control.bracket-control:is(:hover,:focus-visible)::before,.room-row:hover .room-details-label::before { transform:translateX(-4px); }
.bracket-control.bracket-control:is(:hover,:focus-visible)::after,.room-row:hover .room-details-label::after { transform:translateX(4px); }
@media(max-width:700px) {
  .bracket-control.bracket-control { font-size:calc((13px) * var(--desktop-font-scale, 1)); padding-inline:18px; }
  .bracket-control.bracket-control::before,.bracket-control.bracket-control::after { width:9px; border-width:2px; }
  .room-details-label.bracket-control { font-size:calc((10px) * var(--desktop-font-scale, 1)); padding-inline:13px; min-height:36px; }
}

/* Spacious FAQ layout from the supplied reference. */
.outline-faq { padding:10vw 16.6vw 9vw; }
.outline-faq > h2 { font-size:calc((clamp(34px,3.4vw,72px)) * var(--desktop-font-scale, 1)); font-weight:300; line-height:1.1; margin:0 0 4vw; }
.outline-faq details { border-bottom:1px solid #191918; }
.outline-faq summary { align-items:center; padding:1vw 0; font-size:calc((clamp(22px,2.05vw,44px)) * var(--desktop-font-scale, 1)); font-weight:300; line-height:1.05; }
.outline-faq summary span { position:relative; flex:0 0 1.65vw; width:1.65vw; height:1.65vw; margin-right:1.25vw; font-size:0; }
.outline-faq summary span::before,.outline-faq summary span::after { content:''; position:absolute; background:currentColor; top:50%; left:50%; transform:translate(-50%,-50%); }
.outline-faq summary span::before { width:100%; height:1.5px; }
.outline-faq summary span::after { height:100%; width:1.5px; transition:opacity .25s; }
.outline-faq details[open] summary span { transform:none; }
.outline-faq details[open] summary span::after { opacity:0; }
.outline-faq .faq-answer p { max-width:58em; padding:8px 4vw 26px 0; font-size:calc((clamp(16px,1.05vw,21px)) * var(--desktop-font-scale, 1)); line-height:1.6; color:#555; }
@media(max-width:760px) {
  .outline-faq { padding:80px 7vw; }
  .outline-faq > h2 { font-size:calc((34px) * var(--desktop-font-scale, 1)); margin-bottom:42px; }
  .outline-faq summary { font-size:calc((20px) * var(--desktop-font-scale, 1)); line-height:1.2; padding:20px 0; gap:20px; }
  .outline-faq summary span { flex-basis:22px; width:22px; height:22px; margin-right:0; }
  .outline-faq .faq-answer p { padding:0 0 24px; font-size:calc((16px) * var(--desktop-font-scale, 1)); }
}

/* Riverside address panel and open neighbourhood map. */
.location-section { display:grid; grid-template-columns:28.5% 71.5%; gap:0; padding:0; margin:0 2vw 5vw; min-height:49vw; }
.location-section .location-info { background:#ffdf88; padding:7vw 2vw; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.location-info > svg { width:3.6vw; min-width:48px; height:auto; margin-bottom:1.5vw; }
.location-section .location-info h2 { font-size:calc((clamp(30px,3.25vw,68px)) * var(--desktop-font-scale, 1)); font-weight:300; line-height:1.05; margin:0 0 1.8vw; }
.location-section .location-info p { font-size:calc((clamp(14px,1vw,21px)) * var(--desktop-font-scale, 1)); line-height:1.4; margin:0 0 3vw; }
.location-info a { color:inherit; }
.location-actions { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
.location-map-shell { position:relative; min-width:0; min-height:540px; isolation:isolate; }
#neighbourhood-map { position:absolute; inset:0; background:#f0f0ed; font-family:inherit; }
#neighbourhood-map .leaflet-tile-pane { filter:none; opacity:1; }
.map-filters { position:absolute; top:30px; left:30px; right:20px; z-index:1000; display:flex; gap:8px; flex-wrap:wrap; pointer-events:none; }
.map-filters button { pointer-events:auto; border:1px solid transparent; border-radius:30px; padding:9px 18px; font:inherit; font-size:calc((16px) * var(--desktop-font-scale, 1)); color:white; cursor:pointer; transition:opacity .2s,background .2s; background:#809fb8; }
.map-filters button[data-map-category=restaurant] { background:#ba6400; }
.map-filters button[data-map-category=attractions] { background:#6c7900; }
.map-filters button[aria-pressed=false] { background:white; color:#555; border-color:#aaa; }
.place-map-marker span { display:grid; place-items:center; width:30px; height:30px; color:white; border-radius:50%; font:calc(16px * var(--desktop-font-scale, 1)) Arial,sans-serif; box-shadow:none; }
.hotel-map-marker { background:#080808; border-radius:50%; display:grid; place-items:center; color:white; }
.hotel-map-marker svg { width:35px; height:35px; }
.place-popup { padding:8px 4px; }
.place-popup small { color:#777; font-size:calc((11px) * var(--desktop-font-scale, 1)); }
.place-popup h3 { font-family:inherit; font-size:calc((25px) * var(--desktop-font-scale, 1)); line-height:1.1; margin:10px 0; font-weight:300; }
.place-popup p { font-size:calc((14px) * var(--desktop-font-scale, 1)); line-height:1.5; margin:12px 0; }
.place-popup a { font-size:calc((12px) * var(--desktop-font-scale, 1)); color:#171717; }
.map-status { position:absolute; bottom:36px; left:16px; right:60px; z-index:1000; font-size:calc((13px) * var(--desktop-font-scale, 1)); background:#fff; padding:8px 12px; width:fit-content; }
.map-status[hidden] { display:none; }
@media(max-width:900px) {
 .location-section { grid-template-columns:1fr; margin:0 4vw 60px; }
 .location-section .location-info { padding:55px 24px; }
 .location-section .location-info h2 { font-size:calc((40px) * var(--desktop-font-scale, 1)); margin:0 0 24px; }
 .location-info > svg { margin-bottom:24px; }
 .location-section .location-info p { margin-bottom:28px; }
 .location-map-shell { min-height:65vh; }
 .map-filters { top:16px; left:16px; right:16px; gap:6px; }
 .map-filters button { font-size:calc((12px) * var(--desktop-font-scale, 1)); padding:9px 12px; }
}

/* Header returns on upward scroll, independently of the hero scene. */
.site-header { position:fixed; z-index:1200; color:#fff; translate:0 0; transition:background-color .3s ease,box-shadow .3s ease; }
.site-header.header-scrolled { background:rgba(20,20,18,.96); box-shadow:0 1px 0 #ffffff12; }
.site-header.header-hidden { translate:0 -110%; pointer-events:none; transition:translate .25s ease,background-color .3s ease,box-shadow .3s ease; }
@media(prefers-reduced-motion:reduce) { .site-header { transition:none; } }

.location-actions .bracket-control { font-weight:500; }

/* Duplicate each strip so the water-like drift repeats without a gap. */
.footer-wave-track { display:flex; width:200%; animation:footer-water-drift 110s linear infinite; }
.footer-wave-track > img { flex:0 0 50%; width:50%; height:auto; max-width:none; }
.footer-pattern-row:nth-child(2) .footer-wave-track { animation-duration:90s; animation-delay:-24s; }
.footer-pattern-row:nth-child(3) .footer-wave-track { animation-duration:70s; animation-delay:-38s; }
.footer-pattern-row:nth-child(4) .footer-wave-track { animation-duration:50s; animation-delay:-12s; }
@keyframes footer-water-drift { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media(max-width:760px) {
 .footer-wave-track { width:2198.666667px; }
 .footer-wave-track > img { width:1099.333333px; height:42px; }
}
@media(prefers-reduced-motion:reduce) { .footer-wave-track { animation:none; } }

.footer-wave-reveal { width:100%; }
.footer-wave-track { flex-wrap:nowrap; gap:0; will-change:transform; }

/* Brackets open before the room invitation rises into view. */
.room-types .room-row .room-details-label::before,
.room-types .room-row .room-details-label::after {
  transform:none; transition:left .65s cubic-bezier(.22,1,.36,1),right .65s cubic-bezier(.22,1,.36,1);
}
.room-types .room-row .room-details-label::before { left:calc(50% - 16px); }
.room-types .room-row .room-details-label::after { right:calc(50% - 16px); }
.room-types .room-row:is(:hover,:focus-visible) .room-details-label::before { left:0; }
.room-types .room-row:is(:hover,:focus-visible) .room-details-label::after { right:0; }
.room-label-mask { display:block; overflow:hidden; padding:2px 0; }
.room-label-text { display:block; transform:translateY(115%); opacity:0; transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .25s ease; }
.room-row:is(:hover,:focus-visible) .room-label-text { transform:translateY(0); opacity:1; transition-delay:.16s; }
@media(prefers-reduced-motion:reduce) {
 .room-types .room-row .room-details-label::before,.room-types .room-row .room-details-label::after,.room-label-text { transition:none; }
}

#neighbourhood-map button.hotel-map-marker { width:58px; height:58px; padding:0; border:0; }
#neighbourhood-map button.place-map-marker { width:30px; height:30px; padding:0; border:0; background:none; }
#neighbourhood-map .maplibregl-popup { font-family:inherit; }
#neighbourhood-map .maplibregl-popup-content { padding:16px; border-radius:5px; }
#neighbourhood-map .maplibregl-popup-close-button { padding:4px 9px; font-size:calc((22px) * var(--desktop-font-scale, 1)); }

/* Compact header when returning over the page. */
.site-header.header-scrolled { padding-top:12px; padding-bottom:12px; }
.site-header.header-scrolled .wordmark { width:clamp(110px,8vw,135px); }
@media(max-width:760px) {
 .site-header.header-scrolled { padding-top:10px; padding-bottom:36px; }
 .site-header.header-scrolled .wordmark { width:96px; }
 .site-header.header-scrolled .primary-nav { top:auto; bottom:3px; }
 .site-header.header-scrolled .primary-nav a { padding:6px 0; }
}

/* Full-width map with the address floating above it. */
.location-section { position:relative; display:block; min-height:max(760px,55vw); margin:0 0 5vw; padding:0; isolation:isolate; }
.location-section .location-map-shell { position:absolute; inset:0; min-height:0; z-index:0; }
.location-section .location-info { position:relative; z-index:2; top:0; margin:0; margin-left:4.7%; width:26%; box-sizing:border-box; background:#fff; padding:4vw 2vw 1.8vw; transform:translateY(7vw); }
.location-info > svg { width:3.6vw; margin-bottom:1.5vw; }
.location-section .location-info h2 { font-size:calc((clamp(34px,3.3vw,64px)) * var(--desktop-font-scale, 1)); line-height:1.05; margin-bottom:2.3vw; }
.location-section .location-info p { font-size:calc((clamp(13px,1vw,19px)) * var(--desktop-font-scale, 1)); margin-bottom:2vw; }
.location-section .location-actions { flex-direction:column; align-items:center; gap:0; }
.location-section .location-actions .bracket-control { font-size:calc((clamp(13px,1vw,18px)) * var(--desktop-font-scale, 1)); }
.location-section .location-actions a[href*="google"] { text-transform:none; }
.location-info .map-filters { position:static; margin-top:3.5vw; display:flex; flex-wrap:nowrap; justify-content:center; gap:8px; width:100%; }
.location-info .map-filters button { font-size:calc((clamp(10px,.9vw,16px)) * var(--desktop-font-scale, 1)); padding:8px 12px; white-space:nowrap; }
@media(max-width:900px) {
 .location-section { min-height:0; padding:24px 0 0; margin-bottom:60px; background:#f5f5f3; }
 .location-section .location-info { width:calc(100% - 40px); margin:0 20px; padding:32px 20px 26px; transform:none; }
 .location-info > svg { width:48px; margin-bottom:20px; }
 .location-section .location-info h2 { font-size:calc((38px) * var(--desktop-font-scale, 1)); margin-bottom:24px; }
 .location-section .location-info p { margin-bottom:20px; }
 .location-info .map-filters { margin-top:24px; gap:6px; }
 .location-info .map-filters button { font-size:calc((12px) * var(--desktop-font-scale, 1)); padding:9px 12px; }
 .location-section .location-map-shell { position:relative; height:65vh; min-height:420px; margin-top:-1px; }
}

/* Scale typography only; retain the existing layout and mobile type sizes. */
:root { --desktop-font-scale:1; }
@media(min-width:901px) {
 :root { --desktop-font-scale:.9; font-size:14.4px; }
}

#neighbourhood-map .place-map-marker { z-index:1; }
#neighbourhood-map .hotel-map-marker { z-index:3; }
#neighbourhood-map .maplibregl-popup { z-index:4; }

/* Consistent uppercase map actions at the site's normal text weight. */
.location-section .location-actions .bracket-control,
.location-section .location-info .map-filters button,
#neighbourhood-map .place-popup a {
  font-weight:300;
  text-transform:uppercase;
}

.location-info .map-filters { flex-wrap:wrap; }
.map-filter-count { display:inline-block; font-variant-numeric:tabular-nums; opacity:.8; }

.place-popup-photo { margin:0 0 14px; }
.place-popup-photo img { display:block; width:100%; height:145px; object-fit:cover; border-radius:3px; }
.place-popup-photo a { display:block; margin-top:5px; font-size:9px; color:#777; }
.place-popup .place-travel { border-top:1px solid #ddd; padding-top:12px; margin-bottom:6px; color:#191918; }
.place-popup .place-travel-note { display:block; font-size:11px; line-height:1.4; margin-bottom:14px; text-transform:none; }
#neighbourhood-map .maplibregl-popup-content { max-height: min(520px,70vh); overflow-y:auto; }

/* Minimal place cards and unboxed direction links. */
#neighbourhood-map .maplibregl-popup-content {
  border:0; border-radius:2px; padding:24px;
  box-shadow:0 5px 22px rgba(0,0,0,.09); text-align:left;
  color:#191918; font-weight:300;
}
#neighbourhood-map .place-popup { padding:0; }
#neighbourhood-map .place-popup > small { font-weight:300; }
#neighbourhood-map .place-popup h3 { margin:12px 0; font-size:calc(25px * var(--desktop-font-scale,1)); font-weight:300; }
#neighbourhood-map .place-popup p { font-size:calc(14px * var(--desktop-font-scale,1)); font-weight:300; color:#666; line-height:1.5; }
#neighbourhood-map .place-popup > a {
  display:inline-block; margin-top:6px; padding:4px 0; border:0;
  border-radius:0; background:none; box-shadow:none; outline:none;
  color:#191918; font-weight:300; text-decoration:none;
}
#neighbourhood-map .place-popup > a:focus-visible { outline:none; text-decoration:underline; text-underline-offset:5px; }
#neighbourhood-map .place-popup > a:hover { text-decoration:underline; text-underline-offset:5px; }
#neighbourhood-map .maplibregl-popup-close-button { top:5px; right:5px; font-weight:300; color:#777; background:none; border:0; }

@font-face {
 font-family:'Noto Sans Thai Looped'; src:url('./assets/fonts/NotoSansThaiLooped-Light.ttf') format('truetype');
 font-weight:300; font-style:normal; font-display:swap;
}
:root { --body-font:'Noto Sans Thai Looped',sans-serif; }
body { font-family:var(--body-font); font-weight:300; }
h1,h2,h3,.room-row,.marquee,.brand-story>p,.chapter-content>p,.outline-footer>p { font-family:var(--font); }
.place-popup p,.place-popup small,.place-popup a,
.location-info p,.gallery-track small,.faq-answer p,
.room-popup-copy p,.privacy-inner p,.footer-links,
input,textarea,.room-label-text { font-family:var(--body-font); font-weight:300; }
.gallery-track figcaption { font-family:var(--font); }
#neighbourhood-map .place-map-marker span { font-family:var(--body-font); font-weight:300; }

@media(min-width:901px) and (prefers-reduced-motion:no-preference) {
 .location-section { height:100svh; min-height:0; }
 .location-section .location-info { transform:none; top:50%; translate:0 -50%; max-height:calc(100svh - 48px); overflow-y:auto; padding-top:clamp(20px,3vw,55px); }
}

/* Brand typography: display, headings, pullouts, and reading text. */
@font-face { font-family:'Noto Sans Thai Looped'; src:url('./assets/fonts/NotoSansThaiLooped-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
:root { --heading-font:'manop-variable','Noto Sans Thai Looped',sans-serif; }
h2,h3,.gallery-track figcaption,.outline-faq summary,
#neighbourhood-map .place-popup h3 {
 font-family:var(--heading-font); font-weight:400; font-variation-settings:'wdth' 140; letter-spacing:0;
}
h1,.room-row,.marquee,.outline-faq>h2,.newsletter-section>h2,.location-info>h2 {
 font-family:var(--font); font-weight:300; font-variation-settings:normal;
 text-transform:uppercase; letter-spacing:.025em;
}
.eyebrow,.section-label,.chapter-heading>span,.privacy-kicker {
 font-family:var(--font); font-weight:300; font-variation-settings:normal;
 text-transform:uppercase; letter-spacing:.245em;
}
.room-types>.section-label { letter-spacing:.245em; }
.chapter-content>p,.brand-story>p,.gallery-track small,
.room-popup-copy>p,.faq-answer p,.privacy-inner p {
 font-family:var(--body-font); font-weight:300; font-variation-settings:normal;
}
.privacy-sections h3,.room-popup-copy details summary {
 font-family:var(--body-font); font-weight:500; font-variation-settings:normal;
}
:lang(th) h1,:lang(th) h2,:lang(th) h3 {
 font-family:var(--heading-font); font-weight:400; font-variation-settings:'wdth' 140; letter-spacing:0; text-transform:none;
}
:lang(th) .section-label,:lang(th) .eyebrow {
 font-family:var(--heading-font); font-variation-settings:'wdth' 140;
 display:block; scale:.88 1; letter-spacing:0; text-transform:none;
}

/* Medium weight for action labels; room names remain display typography. */
button:not(.room-row),
.bracket-control.bracket-control,
.room-label-text,
.location-section .location-actions .bracket-control,
.location-section .location-info .map-filters button,
#neighbourhood-map .place-popup a,
.newsletter-form button,
.room-popup-copy .room-popup-book,
#neighbourhood-map .place-map-marker span {
 font-weight:500;
}

.newsletter-form input:focus, .newsletter-form input:focus-visible { outline:none; box-shadow:none; }

.room-popup-copy #room-popup-title {
 font-family:var(--font); font-weight:300; font-variation-settings:normal;
 letter-spacing:.025em; margin-bottom:24px;
}

/* Keep all six room choices accessible on narrower desktop screens. */
.room-type-bar { max-width:calc(100vw - 24px); overflow-x:auto; }
.room-type-bar button { flex-shrink:0; }

/* Leave room for Noto descenders inside the animated line masks. */
.brand-story > p { line-height:1.4; }
.story-line-mask { padding-block:.12em; margin-block:-.12em; }

/* Explicit editorial line breaks keep chapter titles on two lines. */
.chapter-heading h2 { text-wrap:balance; }

.chapter-heading h2 { text-transform:uppercase; }

.room-popup-photo button svg { display:block; }

/* Social placeholders, ready for the hotel's official account links. */
.footer-social { display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(22px,3vw,48px); padding:0 24px; margin:-30px 0 40px; }
.footer-social button,.footer-social a { padding:8px 0; border:0; background:none; color:inherit; font-family:var(--body-font); font-weight:500; font-size:calc(14px * var(--desktop-font-scale,1)); line-height:1.5; letter-spacing:0; text-decoration:none; }
.footer-social a { cursor:pointer; }
@media(max-width:700px) { .footer-social { margin-top:-20px; gap:24px; } }

.mobile-menu-toggle,.mobile-title-break { display:none; }
@media(max-width:700px) {
  .experience { height:100svh; min-height:520px; }
  .site-header { padding:max(22px,env(safe-area-inset-top)) 5vw 12px; align-items:center; gap:12px; }
  .site-header .wordmark { width:24vw; max-width:139px; min-width:0; }
  .site-header .header-actions { margin-left:auto; padding:0; }
  .site-header .language-switch { display:none; }
  .site-header .book-now { min-width:0; min-height:44px; padding-inline:18px; font-size:clamp(12px,3.2vw,17px); }
  .mobile-menu-toggle { display:flex; flex-direction:column; justify-content:center; gap:5px; width:32px; height:44px; padding:4px; background:none; border:0; color:white; flex-shrink:0; }
  .mobile-menu-toggle span { display:block; width:100%; height:2px; background:currentColor; transition:transform .25s; }
  .mobile-menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(3.5px) rotate(45deg); }
  .mobile-menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
  .site-header .primary-nav { display:none; top:100%; bottom:auto; left:0; width:100%; transform:none; padding:18px 5vw; background:#191918; }
  .site-header.mobile-menu-open .primary-nav { display:flex; }
  .site-header.header-scrolled { padding:8px 5vw; }
  .site-header.header-scrolled .primary-nav { top:100%; bottom:auto; }
  .hero-content { top:38%; width:100%; height:62%; }
  .hero-content .eyebrow { font-size:clamp(10px,2.6vw,16px); letter-spacing:.05em; margin-bottom:16px; line-height:1.4; }
  .hero-content h1 { width:78%; margin:auto; font-size:clamp(30px,9.5vw,64px); line-height:1.06; letter-spacing:0; }
  .hero-content .headline-line:first-child { width:100%; }
  .hero-content .headline-inner { text-wrap:initial; }
  .mobile-title-break { display:inline; }
  .hero-actions { position:absolute; top:auto; bottom:17%; left:0; width:100%; margin:0; flex-direction:column; align-items:center; gap:10px; }
  .hero-actions .button { min-height:44px; padding-inline:22px; font-size:clamp(14px,3.7vw,23px); text-transform:uppercase; }
  .brand-frame { top:49%; width:97%; height:auto; aspect-ratio:1600 / 940; }
  .scroll-cue { left:50%; transform:translateX(-50%); bottom:max(18px,env(safe-area-inset-bottom)); font-size:10px; letter-spacing:.08em; white-space:nowrap; }
  .motion-controls { right:10px; bottom:55px; }
  .replay-intro { font-size:10px; }
  .river-image { object-position:50% center; }
}

/* Keep mobile button brackets proportional, independent of tap-target height. */
@media(max-width:700px) {
  .bracket-control.bracket-control::before,
  .bracket-control.bracket-control::after {
    top:50%; bottom:auto;
    width:.75em; height:2.125em; margin-top:-1.0625em;
    border-width:2px;
  }
}

/* Keep collage tile proportions consistent at every viewport size. */
  .brand-story .floating-photo, .brand-story .story-extra { height:auto; }
  .brand-story .float-one { aspect-ratio:272 / 198; }
  .brand-story .float-two { aspect-ratio:224 / 198; }
  .brand-story .float-three { aspect-ratio:256 / 171; }
  .brand-story .float-four { aspect-ratio:144 / 216; }
  .brand-story .extra-one { aspect-ratio:176 / 144; }
  .brand-story .extra-two { aspect-ratio:160 / 171; }
  .brand-story .extra-three { aspect-ratio:160 / 153; }
  .brand-story .extra-four { aspect-ratio:160 / 117; }
  .brand-story .extra-five { aspect-ratio:176 / 153; }
  .brand-story .extra-six { aspect-ratio:192 / 126; }

/* A roomier mobile collage: six larger photos frame the reading area. */
@media(max-width:700px) {
  .brand-story .float-one { left:-5%; right:auto; top:5%; width:35%; }
  .brand-story .float-two { right:-6%; left:auto; top:9%; width:33%; }
  .brand-story .float-three { left:-7%; right:auto; top:72%; width:35%; }
  .brand-story .float-four,
  .brand-story .extra-one,
  .brand-story .extra-two,
  .brand-story .extra-three { display:none; }
  .brand-story .extra-four { right:-8%; left:auto; top:73%; width:39%; }
  .brand-story .extra-five { left:14%; right:auto; top:91%; width:27%; }
  .brand-story .extra-six { right:10%; left:auto; top:94%; width:30%; }
}

/* Spread the mobile collage across staggered upper, side and lower positions. */
@media(max-width:700px) {
  .brand-story .float-one { left:-7%; right:auto; top:7%; width:34%; }
  .brand-story .float-two { right:-8%; left:auto; top:14%; width:32%; }
  .brand-story .float-three { left:-21%; right:auto; top:46%; width:34%; }
  .brand-story .extra-six { right:-23%; left:auto; top:51%; width:34%; }
  .brand-story .extra-five { left:0; right:auto; top:78%; width:29%; }
  .brand-story .extra-four { right:-3%; left:auto; top:81%; width:36%; }
}

/* Vary mobile tile scale for a lighter, asymmetric collage. */
@media(max-width:700px) {
  .brand-story .float-one { left:-6%; top:6%; width:40%; }
  .brand-story .float-two { right:-2%; top:17%; width:25%; }
  .brand-story .float-three { left:-13%; top:45%; width:23%; }
  .brand-story .extra-six { right:-17%; top:55%; width:28%; }
  .brand-story .extra-five { left:5%; top:80%; width:21%; }
  .brand-story .extra-four { right:-4%; top:77%; width:34%; }
}

@media(max-width:700px) {
  .stay-linked .scroll-sequence { height:820svh; }
}

/* Smaller mobile chapter body copy leaves more of the image visible. */
@media(max-width:700px) {
  .chapter-content > p,
  .chapters-enabled .chapter-content > p {
    font-size:clamp(17px,4.2vw,20px);
    line-height:1.4;
  }
}

/* Alternating photo/name room list on every screen size. */
.room-types .room-row { width:100%; height:auto; min-height:13vw; gap:2.4vw; padding:1.4vw 0; font-size:calc(4.3vw * var(--desktop-font-scale,1)); }
.room-types .room-row .room-name { display:block; text-align:left; line-height:1.08; }
.room-types .room-row:nth-of-type(even) .room-image { order:-1; }
.room-types .room-row:nth-of-type(3n + 1) { padding-right:6vw; }
.room-types .room-row:nth-of-type(3n + 2) { padding-left:5vw; }
.room-types .room-row .room-image { width:14vw; height:9.4vw; }
.room-types .room-row:is(:hover,:focus-visible) .room-image { width:19vw; height:10.5vw; }
.room-types .room-row[data-room*="Riverview"] { font-size:calc(3.6vw * var(--desktop-font-scale,1)); }
@media(max-width:760px) {
  .room-types { padding:70px 5vw; }
  .room-types .room-row,
  .room-types .room-row[data-room*="Riverview"] { min-height:29vw; padding:3vw 0; gap:4vw; font-size:clamp(23px,6.4vw,45px); }
  .room-types .room-row:nth-of-type(3n + 1),
  .room-types .room-row:nth-of-type(3n + 2) { padding-inline:0; }
  .room-types .room-row .room-name { flex:1; min-width:0; text-wrap:balance; }
  .room-types .room-row .room-view { display:block; }
  .room-types .room-row .room-image,
  .room-types .room-row:is(:hover,:focus-visible) .room-image { width:29vw; height:19.5vw; }
  .room-types .room-row[data-room*="Riverview"] .room-name { font-size:clamp(20px,5.45vw,38px); }
}

/* Preserve the original desktop room composition; mobile keeps alternating photos. */
@media(min-width:761px) {
  .room-types .room-row,
  .room-types .room-row[data-room*="Riverview"] { height:12.8vw; min-height:0; padding:0; gap:1.5vw; font-size:calc(4.3vw * var(--desktop-font-scale,1)); line-height:1; }
  .room-types .room-row:nth-of-type(3n + 1),
  .room-types .room-row:nth-of-type(3n + 2) { padding-inline:0; }
  .room-types .room-row .room-name-first { order:0; }
  .room-types .room-row .room-image,
  .room-types .room-row:nth-of-type(even) .room-image { order:1; width:12.5vw; height:8.4vw; }
  .room-types .room-row .room-name-last { order:2; }
  .room-types .room-row:is(:hover,:focus-visible) .room-image { width:22vw; height:12vw; }
}
@media(max-width:760px) {
  .room-types .room-row { display:grid; grid-template-columns:1fr 29vw; grid-template-rows:auto auto; column-gap:4vw; row-gap:0; padding-block:6vw; }
  .room-types .room-row + .room-row { border-top:1px solid #19191826; }
  .room-types .room-row .room-name-first { grid-column:1; grid-row:1; align-self:end; }
  .room-types .room-row .room-name-last { grid-column:1; grid-row:2; align-self:start; }
  .room-types .room-row .room-image { grid-column:2; grid-row:1 / 3; }
  .room-types .room-row:nth-of-type(even) { grid-template-columns:29vw 1fr; }
  .room-types .room-row:nth-of-type(even) .room-image { grid-column:1; }
  .room-types .room-row:nth-of-type(even) .room-name { grid-column:2; }
}

/* All mobile room names share one type size, including Riverview rooms. */
@media(max-width:760px) {
  .room-types .room-row .room-name,
  .room-types .room-row[data-room*="Riverview"] .room-name {
    font-size:clamp(23px,6.4vw,45px);
  }
}

@media(max-width:760px) {
  .room-types .room-row .room-name,
  .room-types .room-row[data-room*="Riverview"] .room-name {
    line-height:1.15;
    margin:0;
    padding:0;
  }
}

/* Keep the room title's two lines together rather than stretching grid rows. */
.room-name-group { display:contents; }
@media(max-width:760px) {
  .room-types .room-row { grid-template-rows:auto; }
  .room-types .room-row .room-name-group { display:block; grid-column:1; grid-row:1; align-self:center; min-width:0; }
  .room-types .room-row:nth-of-type(even) .room-name-group { grid-column:2; }
  .room-types .room-row .room-image { grid-row:1; }
  .room-types .room-row .room-name { display:block; line-height:1.15; margin:0; padding:0; }
}

/* Show neighbouring slides on mobile, with arrows in the gaps. */
@media(max-width:760px) {
  .gallery-track { gap:7vw; padding-inline:15vw; }
  .gallery-track figure { flex:0 0 70vw; }
  .gallery-track img { height:50vw; min-height:0; }
  .gallery-controls button { top:25vw; width:7vw; min-width:24px; height:44px; padding:0; display:grid; place-items:center; }
  .gallery-controls button:first-child { left:11.5%; }
  .gallery-controls button:last-child { left:88.5%; }
}

@media(max-width:760px) {
  .outline-faq summary { font-size:17px; line-height:1.3; }
}

.room-popup-close svg { display:block; width:24px; height:24px; margin:auto; fill:none; stroke:currentColor; stroke-width:1.6; }
@media(max-width:700px) {
  .room-dialog[open] { display:block; }
  .room-popup-photo { height:auto; aspect-ratio:4 / 3; }
  .room-popup-close { top:max(12px, env(safe-area-inset-top)); right:12px; width:44px; height:44px; padding:10px; border-radius:50%; background:rgba(255,255,255,.94); box-shadow:0 2px 12px #00000012; }
  .room-popup-close svg { width:22px; height:22px; }
  .room-popup-copy { padding:28px 24px calc(100px + env(safe-area-inset-bottom)); }
  .room-popup-copy #room-popup-title { font-size:clamp(28px,7.4vw,38px); line-height:1.1; letter-spacing:0; text-wrap:balance; margin:0 auto 16px; max-width:340px; }
  .room-popup-copy .room-popup-book { font-size:14px; min-height:44px; margin:0 0 20px; }
  .room-popup-copy > p { font-size:15px; line-height:1.55; margin:0 auto 24px; }
  .room-popup-copy details { border-top:1px solid #19191826; border-bottom:1px solid #19191826; text-align:left; }
  .room-popup-copy details summary { display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:12px 0; font-size:16px; line-height:1.4; }
  .room-popup-copy details summary span { font-size:22px; font-weight:300; }
  .room-popup-copy details p { font-size:14px; line-height:1.65; margin:0; padding:0 0 16px; }
  .room-popup-copy summary:focus:not(:focus-visible) { outline:none; }
  .room-type-bar { bottom:max(12px,env(safe-area-inset-bottom)); max-width:calc(100vw - 24px); border-color:#19191833; padding:4px; box-shadow:0 4px 20px #0000000d; }
  .room-type-bar button { font-size:11px; min-height:36px; padding:8px 12px; }
}

/* Desktop room popup typography hierarchy. */
@media(min-width:701px) {
  .room-popup-copy #room-popup-title { font-size:clamp(32px,3.2vw,56px); line-height:1.12; margin-bottom:22px; text-wrap:balance; }
  .room-popup-copy .room-popup-book { font-size:16px; margin-bottom:26px; }
  .room-popup-copy > p { font-size:clamp(16px,1.05vw,18px); line-height:1.55; max-width:560px; margin-bottom:28px; }
  .room-popup-copy details summary { font-size:18px; line-height:1.4; }
  .room-popup-copy details summary span { font-size:22px; font-weight:300; }
  .room-popup-copy details p { font-size:16px; line-height:1.65; max-width:540px; margin:20px auto 0; }
}

/* Fixed SVG geometry: mobile brackets never stretch with button height. */
@media(max-width:700px) {
  .bracket-control.bracket-control { padding-inline:24px; }
  .bracket-control.bracket-control::before,
  .bracket-control.bracket-control::after {
    top:50%; bottom:auto; width:18px; height:36px; margin-top:-18px;
    border:0; border-radius:0; background:currentColor;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:contain; mask-size:contain;
  }
  .bracket-control.bracket-control::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2040%22%3E%3Cpath%20d%3D%22M19%202A18%2018%200%200%200%2019%2038%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2040%22%3E%3Cpath%20d%3D%22M19%202A18%2018%200%200%200%2019%2038%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%2F%3E%3C%2Fsvg%3E"); }
  .bracket-control.bracket-control::after { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2040%22%3E%3Cpath%20d%3D%22M1%202A18%2018%200%200%201%201%2038%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2040%22%3E%3Cpath%20d%3D%22M1%202A18%2018%200%200%201%201%2038%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%2F%3E%3C%2Fsvg%3E"); }
}

.floating-book { position:fixed; right:24px; bottom:24px; z-index:20; border:1px solid #191918; border-radius:999px; padding:15px 24px; min-height:48px; background:#191918; color:#fff; font-family:var(--body-font); font-size:14px; font-weight:500; line-height:1.2; letter-spacing:0; box-shadow:0 4px 18px #0002; }
.floating-book:hover { background:#de5334; border-color:#de5334; }
body:has(dialog[open]) .floating-book { display:none; }
@media(max-width:700px) { .floating-book { right:16px; bottom:max(16px,env(safe-area-inset-bottom)); font-size:12px; padding:13px 19px; min-height:44px; } }

/* Thai copy uses the brand's Thai typefaces with space for tone marks. */
html[lang='th'] .hero-content h1, html[lang='th'] .chapter h2 { font-family:var(--heading-font); line-height:1.3; letter-spacing:0; }
html[lang='th'] .eyebrow, html[lang='th'] .section-label, html[lang='th'] .chapter-heading>span { letter-spacing:0; transform:none; }
html[lang='th'] .brand-story>p { line-height:1.65; }
html[lang='th'] .story-line-mask { padding-block:.18em; margin-block:-.18em; }
html[lang='th'] .chapter-content>p,html[lang='th'] .faq-answer p { line-height:1.65; }
html[lang='th'] .outline-faq summary { line-height:1.45; }
html[lang='th'] .room-popup-copy #room-popup-title { font-family:var(--font); }
@media(max-width:700px) {
 .site-header .language-switch { display:flex; font-size:11px; gap:3px; }
 .site-header .header-actions { gap:8px; }
 html[lang='th'] .hero-content h1 { font-size:clamp(30px,8vw,48px); }
 html[lang='th'] .chapter h2 { font-size:clamp(26px,6vw,36px); }
 html[lang='th'] .brand-story>p { font-size:16px; }
}

/* Full-screen mobile navigation. */
@media (max-width:700px) {
  body.mobile-navigation-open { overflow:hidden; }
  .site-header.mobile-menu-open {
    height:100dvh; height:100svh; align-items:flex-start;
    padding-top:max(16px,env(safe-area-inset-top));
    background:#191918; translate:0 0; overflow-y:auto;
  }
  .site-header.mobile-menu-open .wordmark,
  .site-header.mobile-menu-open .header-actions,
  .site-header.mobile-menu-open .mobile-menu-toggle { position:relative; z-index:2; }
  .site-header.mobile-menu-open .primary-nav {
    position:absolute; inset:0; width:100%; height:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:18px; padding:100px 6vw 60px; overflow-y:auto; transform:none;
  }
  .site-header.mobile-menu-open .primary-nav a {
    font-family:var(--font); font-weight:500; font-variation-settings:normal;
    font-size:clamp(28px,7.5vw,42px); line-height:1.3; padding:8px 0;
    flex:0 0 auto; text-align:center; white-space:normal;
  }
}

@keyframes menu-line-reveal {
  from { transform:translateY(115%); opacity:0; }
  to { transform:translateY(0); opacity:1; }
}
@media (max-width:700px) {
  .site-header.mobile-menu-open .primary-nav a { overflow:hidden; }
  .site-header.mobile-menu-open .mobile-menu-label {
    display:block;
    animation:menu-line-reveal .65s cubic-bezier(.22,1,.36,1) both;
    animation-delay:var(--menu-delay, 120ms);
  }
}
@media (prefers-reduced-motion:reduce) {
  .site-header.mobile-menu-open .mobile-menu-label { animation:none; }
}

@media (max-width:700px) {
  .site-header .language-switch { margin-right:8px; }
}

@media (min-width:901px) {
  .site-header .primary-nav a { font-size:calc(15px * var(--desktop-font-scale, 1)); }
}

@media (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
  .room-types .room-row { height:12vw; }
  .room-types .room-row .room-image,
  .room-types .room-row:is(:hover,:focus-visible) .room-image { width:14vw; height:9.4vw; }
}

/* Keep scroll-scene geometry stable while covering Safari's largest viewport. */
@supports (height:100lvh) {
  @media (hover:none) and (pointer:coarse) {
    .experience, .chapters-enabled .chapter-stage { height:100lvh; }
    .experience .scroll-cue { bottom:calc((100lvh - 100dvh) / 2 + max(18px, env(safe-area-inset-bottom))); }
    .site-header.mobile-menu-open { height:100dvh; }
  }
}

@supports (height:100lvh) {
  @media (hover:none) and (pointer:coarse) {
    /* Centre the fixed-size scene without resizing its animated geometry. */
    .experience { translate:0 calc((100dvh - 100lvh) / 2); }
    html:not(.stay-linked) .chapter-stage { translate:0 calc((100dvh - 100lvh) / 2); }
  }
}

@media (max-width:700px) {
  .hero-content .hero-actions { bottom:max(22%, 100px); }
  @supports (height:100lvh) {
    .hero-content .hero-actions {
      bottom:max(22%, calc((100lvh - 100dvh) / 2 + max(18px, env(safe-area-inset-bottom)) + 80px));
    }
  }
}

/* Close the layout space left by centring the oversized iOS scene. */
@supports (height:100lvh) {
  @media (hover:none) and (pointer:coarse) {
    .stay-linked .scroll-sequence,
    html:not(.stay-linked) .chapter-sequence {
      margin-bottom:calc((100dvh - 100lvh) / 2);
    }
  }
}
.footer-social button,.footer-social a { display:inline-flex; align-items:center; gap:6px; }
.footer-social svg { width:14px; height:14px; flex:none; }

.room-row[hidden] { display:none !important; }

/* Rounded action buttons replace the bracket decoration across both languages. */
.bracket-control.bracket-control {
  border:1px solid currentColor;
  border-radius:999px;
  padding:10px 24px;
  transition:background-color .25s ease, box-shadow .25s ease;
}
.bracket-control.bracket-control::before,
.bracket-control.bracket-control::after { content:none; display:none; }
@media (hover:hover) {
  .bracket-control.bracket-control:hover { background-color:color-mix(in srgb, currentColor 10%, transparent); }
}
.location-section .location-actions { gap:10px; }
@media (max-width:700px) {
  .bracket-control.bracket-control { padding:10px 20px; }
  .site-header .book-now { padding-inline:16px; }
  .room-details-label.bracket-control { padding:8px 14px; }
}

@media (max-width:700px) {
  html[lang='th'] .hero-heading-group {
    position:absolute; left:0; top:calc(11 / 62 * 100%); width:100%;
    transform:translateY(-50%);
  }
}

.room-popup-copy .room-amenities h3 {
  font-family:var(--body-font); font-weight:500; font-variation-settings:normal;
  font-size:18px; line-height:1.4; margin:0 0 20px;
}
.room-popup-copy .room-amenities p {
  font-family:var(--body-font); font-weight:300; font-size:16px;
  line-height:1.65; max-width:540px; margin:0 auto;
}
@media (max-width:700px) {
  .room-popup-copy .room-amenities { text-align:center; border-top:1px solid #19191826; padding-top:20px; }
  .room-popup-copy .room-amenities h3 { font-size:16px; margin-bottom:12px; }
  .room-popup-copy .room-amenities p { font-size:14px; }
}

/* The Q tail is drawn only as the hero becomes the S2 mark. */
.bracket-tail { stroke-dasharray:67; stroke-dashoffset:67; }

/* Room invitations use the actual banner arcs, without the Q tail. */
.room-types .room-row .room-details-label {
  border:0; border-radius:0; background:transparent;
  padding:8px 30px; min-height:44px;
}
.room-details-label .room-curve {
  position:absolute; top:50%; height:44px; width:19.7px; max-width:none;
  transform:translateY(-50%); pointer-events:none; overflow:hidden;
  transition:left .6s cubic-bezier(.22,1,.36,1),right .6s cubic-bezier(.22,1,.36,1);
}
.room-details-label .room-curve-left { left:calc(50% - 22px); }
.room-details-label .room-curve-right { right:calc(50% - 22px); }
.room-row:is(:hover,:focus-visible) .room-curve-left { left:0; }
.room-row:is(:hover,:focus-visible) .room-curve-right { right:0; }
.room-types .room-image>span { transition:opacity .3s ease; }
@media (hover:none) {
  .room-types .room-row .room-image>span { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .room-details-label .room-curve { transition:none; }
}

@media (min-width:761px) {
  .room-types .room-row .room-image { transition:width .6s cubic-bezier(.22,1,.36,1),height .6s cubic-bezier(.22,1,.36,1); }
}
@media (prefers-reduced-motion:reduce) {
  .room-types .room-row .room-image { transition:none; }
}
/* Room type thumbnails use a capsule silhouette at every size. */
.room-types .room-image {
  border-radius: 999px;
  overflow: hidden;
}

.room-types .room-image > img,
.room-types .room-image > span {
  border-radius: inherit;
}

.room-types .room-image > img {
  box-sizing: border-box;
  border: 6px solid #fff;
}

.room-types .room-label-mask {
  display: none;
}

@media (max-width: 760px) {
  .room-types .room-image > img {
    border-width: 4px;
  }
}

/* Keep the room list compact while leaving enough room for the enlarged hover image. */
@media (min-width: 761px) {
  .room-types .room-row,
  .room-types .room-row[data-room*="Riverview"] {
    height: 10.5vw;
  }
}

@media (max-width: 760px) {
  .room-types .room-row,
  .room-types .room-row[data-room*="Riverview"] {
    min-height: 25vw;
    padding-block: 3.5vw;
  }
}

/* Mobile shows larger static room photos; tapping opens the room details. */
@media (max-width: 760px) {
  .room-types .room-row,
  .room-types .room-row[data-room*="Riverview"] {
    min-height: 32vw;
    grid-template-columns: 1fr 38vw;
    column-gap: 5vw;
    transition: none;
  }

  .room-types .room-row:nth-of-type(even) {
    grid-template-columns: 38vw 1fr;
  }

  .room-types .room-row .room-image,
  .room-types .room-row:is(:hover, :focus-visible) .room-image {
    width: 38vw;
    height: 25.5vw;
    transition: none;
  }

  .room-types .room-row .room-image > span {
    display: none;
  }

  .room-types .room-row:nth-of-type(even) .room-name,
  .room-types .room-row:nth-of-type(even) .room-name-group {
    text-align: right;
  }
}

/* On hover, the room image opens from between black brackets outside the pill. */
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .room-types .room-row,
  .room-types .room-row[data-room*="Riverview"] {
    gap: 0;
    height: 7.2vw;
    transition: gap .6s cubic-bezier(.22, 1, .36, 1), height .6s cubic-bezier(.22, 1, .36, 1);
  }

  .room-types .room-row .room-name-last {
    margin-left: .22em;
    transition: margin-left .6s cubic-bezier(.22, 1, .36, 1);
  }

  .room-types .room-row:is(:hover, :focus-visible) {
    gap: 1.5vw;
    height: 12vw;
  }

  .room-types .room-row:is(:hover, :focus-visible) .room-name-last {
    margin-left: 0;
  }

  .room-types .room-image {
    overflow: visible;
    background: transparent;
  }

  .room-types .room-row .room-image,
  .room-types .room-row:nth-of-type(even) .room-image {
    width: 0;
  }

  .room-types .room-row:is(:hover, :focus-visible) .room-image {
    width: 22vw;
    height: 12vw;
    transition-delay: 0s;
  }

  .room-types .room-row:not(:hover):not(:focus-visible) .room-image {
    transition-delay: .24s;
  }

  .room-types .room-image > img {
    border-radius: 999px;
    overflow: hidden;
    clip-path: inset(50% round 999px);
    transition: clip-path .5s cubic-bezier(.22, 1, .36, 1);
  }

  .room-types .room-row:is(:hover, :focus-visible) .room-image > img {
    clip-path: inset(0 round 999px);
  }

  .room-types .room-image > span {
    inset: 0;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    color: #191918;
  }

  .room-types .room-row .room-image > span {
    background: transparent;
    opacity: 0;
    transition: opacity .24s ease 0s;
  }

  .room-types .room-row:is(:hover, :focus-visible) .room-image > span {
    opacity: 1;
    transition: opacity .38s ease .12s;
  }

  .room-types .room-details-label {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    min-height: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    color: #191918;
  }

  .room-details-label .room-curve {
    width: auto;
    height: 100%;
    opacity: 0;
    transition-property: left, right, transform, opacity;
    transition-duration: .65s, .65s, .55s, .28s;
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
    transition-delay: 0s, 0s, .08s, .08s;
  }

  .room-details-label .room-curve-left {
    transform: translateY(-50%) scaleX(.18);
    transform-origin: right center;
  }

  .room-details-label .room-curve-right {
    transform: translateY(-50%) scaleX(.18);
    transform-origin: left center;
  }

  .room-types .room-row:is(:hover, :focus-visible) .room-curve {
    opacity: 1;
    transform: translateY(-50%) scaleX(1);
  }

  .room-types .room-row:not(:hover):not(:focus-visible) .room-curve {
    transition-delay: .24s, .24s, .24s, 0s;
  }
}
html.access-locked,
html.access-locked body {
  overflow: hidden;
}

.access-gate {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 32px;
  color: #fff;
  background: #11110f;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.access-gate::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgb(255 255 255 / 22%);
  pointer-events: none;
}

.access-gate.is-unlocking {
  visibility: hidden;
  opacity: 0;
}

.access-gate__panel {
  position: relative;
  width: min(560px, 100%);
  text-align: center;
}

.access-gate__logo {
  width: min(210px, 48vw);
  height: auto;
  margin-bottom: clamp(42px, 8vh, 84px);
  filter: brightness(0) invert(1);
}

.access-gate__eyebrow,
.access-gate__form label {
  font-size: 12px;
  letter-spacing: 0.18em;
}

.access-gate__eyebrow { margin: 0 0 18px; }

.access-gate h1 {
  margin: 0 0 clamp(38px, 7vh, 68px);
  font: 300 clamp(38px, 5vw, 66px)/1.02 var(--display-font, "ABC Solar", sans-serif);
  letter-spacing: -0.025em;
}

.access-gate__form label {
  display: block;
  margin-bottom: 12px;
  text-align: left;
}

.access-gate__field {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid #fff;
}

.access-gate__field input {
  min-width: 0;
  padding: 14px 0 16px;
  color: #fff;
  font: inherit;
  font-size: 20px;
  letter-spacing: 0.12em;
  background: transparent;
  border: 0;
  outline: 0;
}

.access-gate__field button {
  padding: 10px 22px;
  color: #11110f;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.08em;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 999px;
  cursor: pointer;
}

.access-gate__error {
  margin: 12px 0 0;
  color: #ff9a88;
  font-size: 14px;
  text-align: left;
}

.access-gate.has-error .access-gate__field {
  animation: access-gate-shake 0.34s ease;
}

@keyframes access-gate-shake {
  25% { transform: translateX(-7px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
}

@media (max-width: 700px) {
  .access-gate { padding: 24px; }
  .access-gate::before { inset: 10px; }
  .access-gate__logo { margin-bottom: 48px; }
  .access-gate h1 { margin-bottom: 44px; font-size: clamp(36px, 10vw, 48px); }
  .access-gate__field button { padding-inline: 18px; }
}

/* QURO brand-guideline typography roles. */
:root {
  --font-display: 'ABC Solar Display', serif;
  --font-heading: 'manop-variable', 'Noto Sans Thai Looped', sans-serif;
  --font-body: 'Noto Sans Thai Looped', sans-serif;
  /* Backwards-compatible aliases used by the existing components. */
  --font: var(--font-display);
  --heading-font: var(--font-heading);
  --body-font: var(--font-body);
}

body,
p,
input,
textarea {
  font-family: var(--font-body);
  font-weight: 300;
}

/* Super headlines. Brand guideline: ABC Solar Display Light, 25 tracking. */
.hero-content h1,
.welcome-name,
.room-row,
.marquee,
.room-popup-copy #room-popup-title {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .025em;
}

/* Pullouts and eyebrows. Brand guideline: ABC Solar Display Light, 245 tracking. */
.eyebrow,
.story-eyebrow,
.section-label,
.chapter-heading > span,
.privacy-kicker,
.dialog-brand {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .245em;
}

/* English headings and subheadings use Manop Extended. */
html[lang='en'] h2,
html[lang='en'] h3,
html[lang='en'] .gallery-track figcaption,
html[lang='en'] .outline-faq summary {
  font-family: var(--font-heading);
  font-weight: 400;
  font-variation-settings: 'wdth' 140;
  letter-spacing: 0;
}

/* Body subheadings use Noto Sans Thai Looped Medium. */
.privacy-sections h3,
.room-popup-copy details summary,
.location-actions,
.map-filters,
.footer-links,
.footer-social,
.button,
.bracket-control {
  font-family: var(--font-body);
  font-weight: 500;
}

/* Thai headings use Manop Extended. */
html[lang='th'] h1,
html[lang='th'] h2,
html[lang='th'] h3,
html[lang='th'] .gallery-track figcaption,
html[lang='th'] .outline-faq summary {
  font-family: var(--font-heading);
  font-weight: 400;
  font-variation-settings: 'wdth' 140;
  letter-spacing: 0;
  text-transform: none;
}

/* Thai subheadings: Manop Extended at the guideline's 88% horizontal scale. */
html[lang='th'] .eyebrow,
html[lang='th'] .story-eyebrow,
html[lang='th'] .section-label,
html[lang='th'] .chapter-heading > span,
html[lang='th'] .privacy-kicker {
  font-family: var(--font-heading);
  font-weight: 400;
  font-stretch: 88%;
  font-variation-settings: 'wdth' 123;
  letter-spacing: 0;
  text-transform: none;
}

/* Apply hero tracking to the animated text nodes themselves. */
html[lang='en'] .hero-content .headline-line,
html[lang='en'] .hero-content .headline-inner {
  letter-spacing: .025em;
}

/* Apply 25 tracking directly to room-name text and its modal title. */
html[lang='en'] .room-types .room-row .room-name,
html[lang='en'] .room-popup-copy #room-popup-title {
  letter-spacing: .025em;
}

/* Keep 245 tracking on the pinned 01–03 chapter pullouts. */
html[lang='en'] .chapters-enabled .chapter-heading > span {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .245em;
}

/* Minimal QURO styling for the CookieYes notice. */
.cky-consent-container.cky-box-bottom-left {
  right: auto !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  left: 50% !important;
  width: min(760px, calc(100vw - 24px)) !important;
  max-width: none !important;
  transform: translateX(-50%) !important;
}

.cky-consent-container .cky-consent-bar {
  padding: 7px 8px 7px 16px !important;
  color: #fff !important;
  background: rgb(23 23 21 / 58%) !important;
  border: 1px solid rgb(255 255 255 / 18%) !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 32px rgb(0 0 0 / 14%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
}

.cky-consent-container .cky-notice-content-wrapper,
.cky-consent-container .cky-notice,
.cky-consent-container .cky-notice-group {
  width: 100% !important;
}

.cky-consent-container .cky-notice-group {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}

.cky-consent-container .cky-title,
.cky-consent-container [data-cky-tag='powered-by'] {
  display: none !important;
}

.cky-consent-container .cky-notice-des {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  line-height: 1.35 !important;
}

.cky-consent-container .cky-notice-des p {
  margin: 0 !important;
}

.cky-consent-container .cky-notice-btn-wrapper {
  display: flex !important;
  flex: 0 0 auto !important;
  gap: 5px !important;
  width: auto !important;
  margin: 0 !important;
}

.cky-consent-container .cky-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 1px solid rgb(255 255 255 / 42%) !important;
  border-radius: 999px !important;
}

.cky-consent-container .cky-btn-accept {
  color: #171715 !important;
  background: rgb(255 255 255 / 90%) !important;
  border-color: rgb(255 255 255 / 72%) !important;
}

.cky-consent-container .cky-btn:hover,
.cky-consent-container .cky-btn:focus-visible {
  border-color: #fff !important;
}

@media (max-width: 700px) {
  .cky-consent-container.cky-box-bottom-left {
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: calc(100vw - 16px) !important;
  }

  .cky-consent-container .cky-consent-bar {
    padding: 9px !important;
    border-radius: 20px !important;
  }

  .cky-consent-container .cky-notice-group {
    gap: 8px !important;
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .cky-consent-container .cky-notice-des {
    padding: 2px 4px 0 !important;
    font-size: 10px !important;
  }

  .cky-consent-container .cky-notice-btn-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .cky-consent-container .cky-btn {
    width: 100% !important;
    padding-inline: 6px !important;
    font-size: 8px !important;
  }
}

/* Keep the scroll scenes active on short landscape laptop windows. */
@media (max-height: 650px) and (orientation: landscape) {
  .experience,
  .chapters-enabled .chapter-stage {
    height: 100svh;
    min-height: 0;
  }

  .hero-content { top: 25%; }
  .hero-content .eyebrow { margin-bottom: 10px; }
  .hero-content h1 { font-size: min(5.1vw, 10vh); }
  .hero-actions { margin-top: 14px; }
  .hero-actions .button { min-height: 38px; padding-block: 7px; }
  .scroll-cue { bottom: 8px; }

  .chapters-enabled .chapter-stage { --chapter-line: 43%; }
  .chapters-enabled .chapter-content {
    grid-template-rows: calc(var(--chapter-line) + 16px) auto 12px 38px 1fr;
  }
  .chapters-enabled .chapter-heading {
    bottom: calc(100% - var(--chapter-line) + 12px);
  }
  .chapters-enabled .chapter-heading > span {
    font-size: clamp(12px, 2.5vh, 16px);
  }
  .chapters-enabled .chapter h2 {
    font-size: clamp(22px, 5.4vh, 34px);
  }
  .chapters-enabled .chapter-content > p {
    font-size: clamp(15px, 3.25vh, 20px);
    line-height: 1.18;
  }
  .chapters-enabled .chapter-content > .bracket-link {
    font-size: clamp(12px, 2.5vh, 16px);
  }
}

@supports (height: 100lvh) {
  @media (max-height: 650px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    .experience,
    .chapters-enabled .chapter-stage {
      height: 100lvh;
      min-height: 0;
    }
  }
}


/* Responsive hero collision guard: keep copy and actions in one vertical flow. */
.hero-content {
  height: auto;
}

@media (max-width: 900px) {
  .hero-content {
    width: min(88%, 780px);
  }

  .hero-content h1 {
    max-width: 100%;
  }

  .hero-content .hero-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 700px) {
  .hero-content {
    top: clamp(155px, 27svh, 240px);
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-content .eyebrow {
    margin: 0 0 clamp(10px, 1.8svh, 16px);
  }

  .hero-content h1 {
    width: 60vw;
    max-width: 430px;
    font-size: clamp(27px, 7.4vw, 52px);
    line-height: 1.02;
  }

  .hero-content .hero-actions {
    position: static;
    inset: auto;
    width: auto;
    margin: clamp(18px, 3svh, 28px) 0 0;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
  }

  .brand-frame {
    width: 124vw;
    max-width: none;
  }
}

/* Short landscape windows need horizontal room more than a height-based frame cap. */
@media (max-height: 650px) and (orientation: landscape) {
  .brand-frame {
    width: min(96vw, 190svh);
    max-width: none;
  }

  .hero-content {
    top: clamp(72px, 16svh, 110px);
    width: min(72%, 820px);
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-content .eyebrow {
    margin: 0 0 clamp(6px, 1.5svh, 10px);
  }

  .hero-content h1 {
    width: 100%;
    max-width: 820px;
    font-size: min(4.35vw, 8.4svh);
    line-height: 1;
  }

  .hero-content .hero-actions {
    position: static;
    inset: auto;
    width: auto;
    margin: clamp(10px, 2.4svh, 15px) 0 0;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
  }
}


/* Thai mobile heading participates in the same flow as its action buttons. */
@media (max-width: 700px) {
  html[lang='th'] .hero-heading-group {
    position: static;
    inset: auto;
    width: 100%;
    transform: none;
  }
}


/* Centre the complete hero copy-and-actions group inside the resting brackets. */
.hero-content {
  top: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 700px) {
  .hero-content {
    top: 49%;
  }
}


/* Mobile portrait composition: centred headline with actions anchored near the bottom. */
@media (max-width: 700px) and (orientation: portrait) {
  .hero-content {
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
    display: block;
  }

  .hero-heading-group {
    position: absolute;
    top: 49%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
  }

  .hero-content .hero-actions {
    position: absolute;
    inset: auto auto clamp(76px, 10svh, 104px) 50%;
    width: 100%;
    margin: 0;
    transform: translateX(-50%);
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
  }
}

/* Give the mobile portrait headline more presence without moving its layout anchors. */
@media (max-width: 700px) and (orientation: portrait) {
  .hero-content h1 {
    width: 72vw;
    max-width: 500px;
    font-size: clamp(32px, 8.6vw, 56px);
    line-height: 1;
  }
}

/* Keep mobile action buttons above the scroll cue, including Safari's dynamic toolbars. */
@media (max-width: 700px) and (orientation: portrait) {
  .hero-content .hero-actions {
    bottom: max(132px, 18svh);
  }
}

@supports (height: 100lvh) {
  @media (max-width: 700px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
    .hero-content .hero-actions {
      bottom: calc((100lvh - 100dvh) / 2 + max(18px, env(safe-area-inset-bottom)) + 58px);
    }
  }
}

/* Keep the Thai heading centred after an in-place language switch. */
@media (max-width: 700px) and (orientation: portrait) {
  html[lang='th'] .hero-content .hero-heading-group {
    position: absolute;
    inset: auto;
    top: 49%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
  }
}