@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');
:root{--ink:#292a25;--paper:#e9e6df;--line:#b9b5ac;--accent:#d1b88f}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}.skip{position:absolute;top:-100px;left:12px;background:#fff;padding:12px;z-index:100}.skip:focus{top:12px}.site-header{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:25px 3.5vw;color:#fff;border-bottom:1px solid #ffffff55}.wordmark{font-size:14px;font-weight:600;letter-spacing:.24em;white-space:nowrap;display:flex;align-items:center;gap:12px}.mark{font-size:26px;font-weight:400;line-height:1}.wordmark-sub{font-size:9px;letter-spacing:.13em;font-weight:400;opacity:.72;margin-left:10px}.nav{display:flex;align-items:center;gap:35px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}.nav a:hover,.discover:hover,.text-link:hover{opacity:.65}.nav-action{border:1px solid #ffffff99;padding:13px 17px}.nav-action span{margin-left:26px}.mobile-action{display:none}.story{height:405vh}.story-sticky{height:100svh;min-height:610px;position:sticky;top:0;overflow:hidden;background:#292c2b;color:white}.scene,.scene-image,.scene-gold,.scene-blue,.scene-shade{position:absolute;inset:0}.scene-image{background-image:url('assets/retreat-room.webp');background-position:center;background-size:cover;transform:scale(var(--zoom,1)) translateX(var(--pan,0%));filter:brightness(var(--bright,.85)) saturate(var(--sat,.82)) sepia(var(--sepia,.04));will-change:transform,filter}.scene-gold{background:linear-gradient(100deg,transparent 45%,#eec78944 100%);opacity:var(--gold,0)}.scene-blue{background:linear-gradient(0deg,#111f32aa,#23325180 60%,#111b2a66);opacity:var(--blue,0)}.scene-shade{background:linear-gradient(90deg,rgba(12,17,19,.65),rgba(12,17,19,.22) 47%,transparent 78%),linear-gradient(0deg,rgba(8,12,13,.48),transparent 28%,transparent 76%,rgba(8,12,13,.18));opacity:var(--shade,1)}.scene-top,.scene-bottom{position:absolute;z-index:3;left:3.5vw;right:3.5vw;display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.18em;font-weight:600}.scene-top{top:105px}.scene-time{font-weight:400}.story-copy{position:absolute;z-index:3;top:50%;left:7.5vw;width:min(700px,74vw);transform:translateY(-42%)}.story-state{position:absolute;top:50%;left:0;transform:translateY(calc(-50% + 26px));opacity:0;visibility:hidden;transition:opacity .55s ease,transform .7s ease,visibility .55s}.story-state.is-active{opacity:1;visibility:visible;transform:translateY(-50%)}.eyebrow,.intro-kicker{display:block;font-size:10px;font-weight:600;letter-spacing:.22em}.story-state h1,.story-state h2,.intro h2,.detail-panel h2,.booking h2{font-family:'Playfair Display',Georgia,serif;font-weight:400;letter-spacing:-.055em;line-height:1.02}.story-state h1,.story-state h2{font-size:clamp(58px,7.6vw,132px);margin:22px 0 23px;white-space:nowrap}.story-state em,.intro em,.detail-panel em,.booking em{font-weight:400}.story-state p{font-size:15px;letter-spacing:.01em;line-height:1.7;max-width:400px}.scene-bottom{bottom:37px;gap:30px}.discover{font-size:11px;letter-spacing:.08em;text-transform:uppercase;min-width:230px}.discover span{font-size:20px;margin-left:20px}.scene-progress{height:1px;background:#ffffff55;width:240px;position:relative}.scene-progress span{height:2px;background:white;width:var(--progress,0%);position:absolute;top:-1px;left:0}.scroll-note{font-size:9px;opacity:.75;text-align:right}.section-pad{padding:118px 7.5vw;display:grid;grid-template-columns:26% 1fr;gap:30px}.section-index{font-size:12px;letter-spacing:.14em}.section-index span{font-size:10px;color:#7e817a}.intro{min-height:630px;align-items:start}.intro>div:last-child{max-width:920px}.intro-kicker{color:#7b806f}.intro h2,.detail-panel h2,.booking h2{font-size:clamp(62px,7.3vw,112px);margin:26px 0 35px}.intro-body{max-width:510px;font-size:17px;line-height:1.85;color:#5d5f58}.text-link{display:inline-flex;gap:44px;align-items:center;margin-top:36px;border-bottom:1px solid #666a61;padding-bottom:12px;font-size:12px;text-transform:uppercase;letter-spacing:.1em}.text-link span{font-size:20px}.detail-section{display:grid;grid-template-columns:55% 45%;min-height:750px;background:#d7d2c8}.detail-photo{background:url('assets/retreat-room.webp') 72% center/cover}.detail-panel{padding:84px 9%;display:flex;flex-direction:column;justify-content:space-between}.detail-panel h2{font-size:clamp(54px,5.5vw,92px)}.detail-panel p:not(.intro-kicker){font-size:14px;line-height:1.9;max-width:470px;color:#555950}.detail-list{margin:55px 0 20px;border-top:1px solid #aca99f}.detail-list div{display:grid;grid-template-columns:35px 1fr auto;gap:12px;align-items:center;border-bottom:1px solid #aca99f;padding:18px 0;font-size:12px}.detail-list div>span:first-child{font-size:10px;color:#777c73}.detail-list div>span:last-child{color:#777c73}.detail-list strong{font-weight:500}.booking{background:#292b28;color:#f5f0e8;min-height:720px}.booking .section-index span{color:#a7a99f}.booking-content{max-width:920px}.booking .intro-kicker{color:#c9bd9e}.booking h2{margin-bottom:22px}.booking-content>p:not(.intro-kicker):not(.form-message){max-width:480px;line-height:1.8;color:#b5b9b0;font-size:15px}.date-form{display:flex;gap:0;margin-top:65px;border-top:1px solid #747a73;border-bottom:1px solid #747a73}.date-form label{flex:1;min-width:0;font-size:10px;letter-spacing:.18em;padding:14px 18px;border-right:1px solid #747a73;color:#aeb5a7}.date-form label:first-child{padding-left:0}.date-form input{display:block;width:100%;border:0;background:transparent;color:white;outline:0;font-size:16px;letter-spacing:0;margin-top:10px;color-scheme:dark}.date-form button{border:0;background:#d8c6a4;color:#252723;cursor:pointer;padding:20px 25px;min-width:190px;font-size:12px;font-weight:600;text-align:left}.date-form button span{float:right;margin-left:18px;font-size:18px}.date-form button:hover{background:#eee0c5}.form-message{font-size:11px;color:#aeb5a7;line-height:1.6;margin-top:17px}footer{background:#1c1f1d;color:#c8c9c2;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:36px 3.5vw;font-size:11px;letter-spacing:.12em}footer small{display:block;font-size:9px;margin-top:7px;color:#8c938a}footer strong{font-weight:600;color:#fff}footer a:hover{color:#fff}
@media(max-width:800px){.site-header{padding:20px 5vw}.wordmark{font-size:12px;gap:8px}.wordmark-sub{display:none}.nav{display:none}.mobile-action{display:block;border:1px solid #ffffff88;padding:7px 11px}.scene-top,.scene-bottom{left:5vw;right:5vw}.scene-top{top:96px;font-size:9px}.story-sticky{min-height:540px}.scene-image{background-position:62% center}.scene-shade{background:linear-gradient(90deg,#11181899,#11181844 70%,#11181822),linear-gradient(0deg,#11181880,transparent 35%)}.story-copy{left:6vw;width:87vw;top:53%}.story-state h1,.story-state h2{font-size:clamp(51px,11vw,86px);white-space:normal}.story-state p{font-size:13px;max-width:310px}.scene-bottom{bottom:25px}.scroll-note{display:none}.scene-progress{width:100px}.discover{font-size:9px;min-width:0}.discover span{margin-left:4px}.section-pad{display:block;padding:80px 7vw}.section-index{margin-bottom:65px}.intro{min-height:0}.intro h2,.booking h2{font-size:clamp(56px,12vw,90px)}.intro-body{font-size:15px}.detail-section{display:block}.detail-photo{height:65vh;min-height:420px;background-position:71% center}.detail-panel{padding:70px 7vw 85px;min-height:650px}.detail-panel h2{font-size:clamp(56px,12vw,84px)}.booking{min-height:0}.date-form{display:block}.date-form label{display:block;border-right:0;border-bottom:1px solid #747a73;padding:18px 0}.date-form button{width:100%;margin:0;text-align:left}footer{display:block;padding:42px 7vw;line-height:1.8}footer>span{display:block;margin-bottom:24px}footer>a{display:inline-block}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scene-image,.story-state{transition:none!important}.story{height:100svh}.story-sticky{position:relative}.story-state:not([data-state="0"]){display:none}}
.scene-dusk{position:absolute;inset:0;background:url('assets/retreat-room-dusk.webp') center/cover;transform:scale(var(--zoom,1)) translateX(var(--pan,0%));opacity:var(--dusk,0);filter:brightness(.83);will-change:transform,opacity}
@media(max-width:800px){.scene-dusk{background-position:62% center}}
/* Each scroll-length is a real page: copy moves with the page while the room stays in view. */
.story{height:auto;position:relative}
.story-sticky{z-index:0}
.story-copy{position:relative;z-index:2;top:auto;left:auto;width:100%;transform:none;margin-top:-100svh;pointer-events:none}
.story-state,.story-state.is-active{position:relative;top:auto;left:auto;transform:none;opacity:1;visibility:visible;transition:none;height:100svh;min-height:610px;width:100%;padding:0 7.5vw;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.story-state .eyebrow,.story-state h1,.story-state h2,.story-state p{position:relative;max-width:700px}
.story-state h1,.story-state h2{margin:22px 0 23px}
@media(max-width:800px){.story-state,.story-state.is-active{min-height:540px;padding:0 6vw}.story-state h1,.story-state h2{max-width:87vw}}
@media(prefers-reduced-motion:reduce){.story{height:100svh}.story-sticky{position:absolute;inset:0}.story-copy{margin-top:0;height:100svh}.story-state,.story-state.is-active{height:100svh}.story-state:not([data-state="0"]){display:none}}
.story-copy{color:#fff}

/* Minimal line icons render consistently on iOS, without emoji glyphs. */
.arrow-icon{display:inline-block;width:18px;height:18px;flex:none;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.arrow-down{transform:rotate(90deg)}
.arrow-up{transform:rotate(-90deg)}
.nav-action,.mobile-action,.discover,.date-form button,footer a{display:inline-flex;align-items:center;justify-content:space-between;gap:15px}
.nav-action .arrow-icon{width:15px;height:15px}
.mobile-action{display:none}
.discover{justify-content:flex-start;gap:16px}
.discover .arrow-icon{width:18px;height:18px}
.text-link .arrow-icon{width:17px;height:17px}
.date-form button .arrow-icon{width:17px;height:17px}
footer a .arrow-icon{width:16px;height:16px}

/* The cooler first scene opens into a warmer, brighter midday room. */
.scene-blue{background:linear-gradient(110deg,rgba(16,31,47,.33),rgba(26,43,65,.66) 68%,rgba(16,27,44,.38));opacity:var(--blue,.42)}
.scene-image{filter:brightness(var(--bright,.72)) saturate(var(--sat,.77))}
.detail-photo{background-image:url('assets/retreat-room-dusk.webp');background-position:68% center}

/* Keep the native date picker while showing dates in the site's language. */
.date-field{position:relative;cursor:pointer;min-height:78px}
.date-field .date-label{display:block;font-size:10px;letter-spacing:.18em;color:#aeb5a7}
.date-field .date-value{display:block;margin-top:10px;font-size:15px;letter-spacing:0;color:#f5f0e8;white-space:nowrap}
.date-field input{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.date-field:focus-within{outline:1px solid #d8c6a4;outline-offset:-1px}
.date-form button{align-self:stretch}

/* The concept ends with a distinct, usable invitation to the studio. */
.studio-cta{background:#e9e6df;padding:110px 7.5vw 125px;display:grid;grid-template-columns:26% 1fr;gap:30px}
.studio-cta>.intro-kicker{padding-top:16px;color:#737a70}
.studio-cta>div{max-width:900px}
.studio-cta h2{font-family:'Playfair Display',Georgia,serif;font-weight:400;letter-spacing:-.055em;line-height:1.04;font-size:clamp(54px,6.2vw,100px);margin:0 0 30px}
.studio-cta h2 em{font-weight:400}
.studio-cta p{font-size:16px;line-height:1.8;color:#5d5f58;max-width:560px;margin:0 0 38px}
.studio-link{display:inline-flex;align-items:center;justify-content:space-between;gap:42px;padding:17px 0;border-bottom:1px solid #555a52;font-size:12px;letter-spacing:.1em;text-transform:uppercase;transition:gap .2s ease}
.studio-link:hover{gap:52px}
.studio-link .arrow-icon{width:18px;height:18px}

@media(max-width:800px){
  .wordmark{gap:0}
  .mobile-action{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #ffffff88;padding:12px 14px;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
  .mobile-action .arrow-icon{width:15px;height:15px}
  .detail-photo{background-position:64% center}
  .date-field{min-height:86px}
  .date-form .date-field{padding:18px 0}
  .date-form button{min-height:65px}
  .studio-cta{display:block;padding:84px 7vw 95px}
  .studio-cta>.intro-kicker{display:block;padding:0;margin-bottom:58px}
  .studio-cta h2{font-size:clamp(50px,11.5vw,76px)}
  .studio-cta p{font-size:15px}
}