/* ==========================================================================
   ORA — tokens
   ========================================================================== */
:root{
  --ink:#715543;
  --ink-70:rgba(113,85,67,.7);
  --ink-55:rgba(113,85,67,.55);
  --ink-40:rgba(113,85,67,.4);
  --cream:#f7f3ea;
  --cream-deep:#ece2cd;
  --sand:#cdbfa1;
  --gold:#ab8a5c;
  --gold-deep:#7d6238;
  --line:rgba(113,85,67,.14);
  --line-strong:rgba(113,85,67,.26);
  --line-light:rgba(255,255,255,.28);

  --font-display:'Assistant',system-ui,sans-serif;
  --font-body:'Assistant',system-ui,sans-serif;

  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,.8,.2,1);

  --nav-h:84px;
  --edge:clamp(20px,5vw,64px);
  --maxw:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;width:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  width:100%;
  max-width:100vw;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

h1,h2,h3,p,figure{margin:0}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}

.skip-link{
  position:fixed;inset-inline-start:12px;top:-60px;z-index:200;
  background:var(--ink);color:var(--cream);padding:12px 18px;
  font-size:13px;letter-spacing:.04em;transition:top .3s var(--ease);
}
.skip-link:focus{top:12px}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ==========================================================================
   Intro loader
   ========================================================================== */
html.is-loading,html.is-loading body{overflow:hidden}
.loader{
  position:fixed;inset:0;z-index:300;
  background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s var(--ease);
}
.loader__mark{
  display:block;width:clamp(140px,18vw,220px);aspect-ratio:630/816;
  background-color:var(--cream);
  -webkit-mask:url(../assets/img/logo-full.png) center/contain no-repeat;
  mask:url(../assets/img/logo-full.png) center/contain no-repeat;
  opacity:0;transform:translateY(14px) scale(.96);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}
.loader.is-visible .loader__mark{opacity:1;transform:translateY(0) scale(1)}
.loader.is-hiding{opacity:0;pointer-events:none}
.loader.is-done{display:none}
@media (prefers-reduced-motion: reduce){
  .loader{display:none}
}

.eyebrow{
  display:block;font-size:11px;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-deep);
}
.eyebrow--light{color:rgba(255,255,255,.75)}

.rule{width:40px;height:1px;background:var(--ink-40)}
.rule--gold{background:var(--gold)}

h2{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(34px,4.2vw,56px);line-height:1.08;
  margin:20px 0 24px;
}

/* buttons */
.btn{
  display:inline-block;padding:14px 30px;font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--ink);cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  background:transparent;color:var(--ink);
}
.btn[data-magnetic]{will-change:transform}
.btn--dark{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn--dark:hover{background:transparent;color:var(--ink)}
.btn--outline{border-color:rgba(255,255,255,.7);color:#fff;background:transparent}
.btn--outline:hover{background:#fff;color:var(--ink)}
.btn--on-dark{border-color:var(--gold)}
.btn--lg{padding:18px 44px;font-size:13px}

/* placeholder photo slots — swap for real photography */
.ph{
  position:relative;width:100%;height:100%;overflow:hidden;
  background:
    radial-gradient(140% 120% at 12% 0%, rgba(171,138,92,.35), transparent 55%),
    linear-gradient(150deg,#3a3226 0%,#221d16 55%,#14120e 100%);
}
.ph::before{
  content:'';position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 5px);
}
.ph::after{
  content:attr(data-ph);position:absolute;inset-inline-start:20px;bottom:18px;
  max-width:78%;color:rgba(255,255,255,.55);font-size:11px;letter-spacing:.06em;
  line-height:1.5;font-family:var(--font-body);
}
.ph:has(img),.ph:has(video){background:var(--ink)}
.ph:has(img)::before,.ph:has(img)::after,.ph:has(video)::before,.ph:has(video)::after{content:none}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph--tall{aspect-ratio:4/5}
.ph--square{aspect-ratio:1/1}
.ph--hero,.ph--full{position:absolute;inset:0;aspect-ratio:auto}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav{
  position:fixed;inset-inline:0;top:0;z-index:80;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--edge);
  background:transparent;border-bottom:1px solid transparent;
  backdrop-filter:blur(0px);
  transition:background .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s var(--ease);
}
.nav.is-solid{
  background:rgba(247,243,234,.92);
  border-bottom-color:var(--line);
  backdrop-filter:blur(10px);
}
.nav__brand{color:#fff;transition:color .5s var(--ease)}
.nav.is-solid .nav__brand{color:var(--ink)}
.brand-mark{
  display:block;height:54px;width:calc(54px * 630 / 816);
  background-color:currentColor;
  -webkit-mask:url(../assets/img/logo-full.png) center/contain no-repeat;
  mask:url(../assets/img/logo-full.png) center/contain no-repeat;
}
.nav__links{display:flex;align-items:center;gap:40px}
.nav__links a{
  color:#fff;text-decoration:none;font-size:11px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;transition:color .5s var(--ease),opacity .3s var(--ease);
  opacity:.9;
}
.nav__links a:hover{opacity:1}
.nav.is-solid .nav__links a{color:var(--ink)}
.nav__actions{display:flex;align-items:center;gap:22px}
.lang-toggle{
  border:none;background:transparent;padding:0;font-size:11px;font-weight:500;
  letter-spacing:.1em;cursor:pointer;color:#fff;text-decoration:underline;
  text-underline-offset:3px;transition:color .5s var(--ease);
}
.nav.is-solid .lang-toggle{color:var(--ink)}
.nav.is-solid .nav__actions .btn--dark{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.nav:not(.is-solid) .nav__actions .btn--dark{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.5)}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.nav__burger span{width:22px;height:1px;background:#fff;transition:background .4s var(--ease)}
.nav.is-solid .nav__burger span{background:var(--ink)}

.mobile-menu{
  position:fixed;inset:0;z-index:75;background:var(--ink);color:var(--cream);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:26px;padding:0 var(--edge);
  transform:translateY(-100%);transition:transform .5s var(--ease);
}
.mobile-menu.is-open{transform:translateY(0)}
.mobile-menu a{
  color:var(--cream);text-decoration:none;font-family:var(--font-display);
  font-size:32px;font-weight:300;
}
.mobile-menu .btn{margin-top:12px}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero-pin{position:relative;height:220vh}
.hero{
  position:sticky;top:0;height:100svh;min-height:640px;overflow:hidden;
  perspective:1000px;
}
.hero__scene{position:absolute;inset:0;transform-style:preserve-3d}
.hero__layer{position:absolute;inset:-4%}
.hero__layer--img{will-change:transform;transform-origin:50% 42%;background:var(--ink)}
.hero__frames{display:block;width:100%;height:100%;object-fit:cover}
.hero__layer--scrim{
  background:linear-gradient(to top, rgba(113,85,67,.65) 0%, rgba(113,85,67,.05) 42%, rgba(113,85,67,.3) 100%);
  pointer-events:none;
}
.hero__layer--grain{
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px);
  pointer-events:none;
}
.hero__layer--fade{background:var(--ink);opacity:0;pointer-events:none}

.hero__content{
  position:relative;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 20px;
}
.hero__mark{
  display:block;width:clamp(140px,18vw,220px);aspect-ratio:630/816;
  background-color:var(--cream);
  -webkit-mask:url(../assets/img/logo-full.png) center/contain no-repeat;
  mask:url(../assets/img/logo-full.png) center/contain no-repeat;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.25));
}
@keyframes ora-fade-up{to{opacity:1;transform:none}}

.hero__scroll{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;color:#fff;
  opacity:0;
}
.loaded .hero__scroll{animation:ora-fade-up 1s var(--ease-out) 1.1s forwards}
.hero__scroll-line{width:1px;height:34px;background:rgba(255,255,255,.7);transform-origin:top}

@media (prefers-reduced-motion: reduce){
  .hero__kicker,.hero__title span,.hero__sub,.hero__scroll,
  .loaded .hero__kicker,.loaded .hero__title span,.loaded .hero__sub,.loaded .hero__scroll{
    animation:none;opacity:1;transform:none;
  }
  .hero-pin{height:auto}
  .hero{position:relative}
  .hero__layer--fade{display:none}
}

/* ==========================================================================
   Booking bar
   ========================================================================== */
.booking-wrap{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--edge);
  position:relative;z-index:20;
  scroll-margin-top:calc(var(--nav-h) + 40px);
}
.booking{
  margin-top:-46px;background:#fff;border-top:2px solid var(--gold);
  box-shadow:0 30px 60px -20px rgba(20,18,14,.25);
  padding:28px clamp(16px,3vw,36px);
  display:grid;grid-template-columns:repeat(4,1fr) auto;gap:0;
}
.booking__field{
  padding-inline:20px;
  border-inline-start:1px solid var(--line);
  position:relative;
}
.booking__field:first-child{border-inline-start:none;padding-inline-start:0}
.booking__field label{
  display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-55);margin-bottom:8px;
}
.booking__field input,.booking__field select{
  width:100%;border:none;padding:0;font-size:16px;font-family:var(--font-display);
  background:transparent;color:inherit;
}
.booking__field input[data-date-field]{cursor:pointer}
.booking__submit{border-radius:0;padding-inline:30px;white-space:nowrap}

/* ---------------- date picker popover ---------------- */
.datepicker{
  position:absolute;top:calc(100% + 14px);inset-inline-start:0;z-index:30;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 24px 48px -16px rgba(20,18,14,.3);
  padding:18px;width:280px;
}
.datepicker__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.datepicker__label{font-family:var(--font-display);font-size:14px;font-weight:500;color:var(--ink)}
.datepicker__nav-btn{
  width:26px;height:26px;border:1px solid var(--line);background:none;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
}
.datepicker__nav-btn:hover{background:var(--cream)}
.datepicker__nav-btn::before{content:'';display:block;width:6px;height:6px;border:1px solid var(--ink)}
.datepicker__nav-prev::before{border-width:1px 0 0 1px;transform:rotate(-45deg);translate:1px 0}
.datepicker__nav-next::before{border-width:1px 1px 0 0;transform:rotate(45deg);translate:-1px 0}
.datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px}
.datepicker__weekdays span{display:block;text-align:center;font-size:10px;letter-spacing:.03em;color:var(--ink-40)}
.datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.datepicker__day{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-family:var(--font-body);background:none;border:none;border-radius:50%;
  color:var(--ink);cursor:pointer;
}
.datepicker__day.is-outside{visibility:hidden;cursor:default}
.datepicker__day:not(.is-outside):hover:not(:disabled){background:var(--cream-deep)}
.datepicker__day.is-today{color:var(--gold-deep);font-weight:600}
.datepicker__day.is-selected{background:var(--ink);color:var(--cream)}
.datepicker__day:disabled{color:var(--ink-40);opacity:.4;cursor:not-allowed}

@media (max-width:480px){
  .datepicker{width:calc(100vw - 40px)}
}

@media (max-width:900px){
  .booking{grid-template-columns:1fr 1fr;gap:20px 0;row-gap:22px}
  .booking__field{border-inline-start:none;padding-inline-start:0}
  .booking__field:nth-child(2n){padding-inline-start:20px;border-inline-start:1px solid var(--line)}
  .booking__submit{grid-column:1/-1;margin-top:6px}
}

/* ==========================================================================
   Reveal (shared scroll-in)
   ========================================================================== */
[data-reveal]{
  opacity:0;transform:translateY(30px) rotateX(6deg);
  transform-origin:bottom center;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:var(--rd,0s);
}
[data-reveal].is-in{opacity:1;transform:translateY(0) rotateX(0)}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{transform:none;transition:opacity .4s linear}
}

/* ==========================================================================
   About
   ========================================================================== */
.about{
  max-width:var(--maxw);margin:0 auto;padding:150px var(--edge);
  display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:70px;align-items:center;perspective:1400px;
}
.about__media{max-width:420px}
.about__copy h2{font-size:clamp(20px,2.2vw,28px);white-space:nowrap;direction:ltr;text-align:left}
.about__copy p{font-size:16px;line-height:1.85;color:var(--ink-70);max-width:100%;margin:0 0 8px;font-weight:300}
.about__copy p:last-of-type{margin-bottom:44px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,3vw,40px)}
.stat{padding-inline-end:clamp(14px,3vw,40px);border-inline-end:1px solid var(--line);min-width:0}
.stat:last-child{border-inline-end:none;padding-inline-end:0}
.stat__num{font-family:var(--font-display);font-weight:300;font-size:42px;line-height:1}
.stat__sub{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-top:10px}
.stat__label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-55);margin-top:4px}

@media (max-width:860px){
  .about{grid-template-columns:1fr;gap:40px}
}

/* image wrap w/ tilt + soft zoom */
[data-tilt]{
  transform-style:preserve-3d;will-change:transform;
  transition:transform .5s var(--ease);
}
[data-tilt] .ph img{transition:transform 1.1s var(--ease-out)}
[data-tilt]:hover .ph img{transform:scale(1.05)}
@media (prefers-reduced-motion: reduce){
  [data-tilt]{transition:none}
  [data-tilt] .ph img{transition:none}
  [data-tilt]:hover .ph img{transform:none}
}

/* living photo — a static base photo with a second copy stacked on top,
   masked to only the water/foliage band below the horizon, so the strong
   displacement effect never touches the sky — it stays crisp while the
   sea and palms underneath get real, visible motion. */
.living-photo{
  filter:url(#livingPhoto);
  scale:1;
  translate:0 0;
  animation:living-photo-drift 18s ease-in-out infinite alternate;
  mask-image:linear-gradient(to bottom, transparent 0%, transparent 64%, black 88%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, transparent 64%, black 88%);
}
@keyframes living-photo-drift{
  from{scale:1;translate:0 0}
  to{scale:1.012;translate:-0.3% -0.2%}
}
@media (prefers-reduced-motion: reduce){
  .living-photo{display:none}
}

/* ==========================================================================
   Corridor — signature 3D walkthrough
   ========================================================================== */
.corridor{position:relative;height:500vh}
.corridor__sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink);
}
.corridor__scene{
  position:absolute;inset:0;perspective:1400px;perspective-origin:50% 50%;
}
.corridor__frame{
  position:absolute;inset:0;transform-style:preserve-3d;will-change:transform,opacity;
}
.corridor__frame .ph{position:absolute;inset:0}
/* subtle Ken Burns drift on each corridor still — lives on the <img> itself,
   independent of the JS-driven translateZ/scale/rotateX on .corridor__frame,
   so the two transforms never fight over the same style property. */
.corridor__frame .ph img.corridor-base{animation:corridor-kenburns-a 26s ease-in-out infinite alternate;transform-origin:56% 46%}
.corridor__frame:nth-child(even) .ph img.corridor-base{animation-name:corridor-kenburns-b;transform-origin:44% 54%}
@keyframes corridor-kenburns-a{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-1.2%,-0.8%)}}
@keyframes corridor-kenburns-b{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(1.2%,0.8%)}}

@media (prefers-reduced-motion: reduce){
  .corridor__frame .ph img.corridor-base{animation:none}
}
.corridor__frame::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top, rgba(113,85,67,.72) 0%, rgba(113,85,67,.08) 45%, rgba(113,85,67,.2) 100%);
}
.corridor__label{
  position:absolute;left:var(--edge);top:50%;transform:translateY(-50%);z-index:5;
  direction:ltr;text-align:left;
}
/* fixed width so the wrap has real intrinsic size for its absolutely-
   positioned .corridor__caption children to stretch into — without it the
   block collapses toward 0 (no in-flow content) and long titles get crushed
   into a sliver, wrapping into far too many lines and clipping. */
.corridor__caption-wrap{margin-top:20px;position:relative;width:min(340px,60vw);height:190px;overflow:hidden}
.corridor__caption{
  position:absolute;inset:0;opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.corridor__caption-label{
  display:block;font-family:var(--font-display);font-weight:300;
  font-size:clamp(30px,3.6vw,46px);line-height:1.15;color:var(--gold);
  margin-bottom:10px;
}
.corridor__caption-title{
  font-size:14px;letter-spacing:.03em;font-weight:300;
  color:rgba(255,255,255,.78);max-width:100%;
}
.corridor__caption.is-active{opacity:1;transform:translateY(0)}
.corridor__progress{
  position:absolute;inset-inline-end:var(--edge);bottom:44px;z-index:5;
  display:flex;align-items:center;gap:14px;font-family:var(--font-display);
  font-size:15px;color:rgba(255,255,255,.85);direction:ltr;
}
.corridor__progress > span:last-child{color:rgba(255,255,255,.5)}
.corridor__bar{width:84px;height:1px;background:rgba(255,255,255,.28);position:relative}
.corridor__bar i{position:absolute;inset-block:0;inset-inline-start:0;width:0%;background:#fff;display:block}

@media (prefers-reduced-motion: reduce){
  .corridor{height:auto}
  .corridor__sticky{position:relative;height:70vh}
  .corridor__frame{transition:opacity .5s linear}
}

/* ==========================================================================
   Rooms — tabbed room-type gallery. Click a room type, its photo gallery
   and details crossfade in. The gallery itself is a native scroll-snap
   track (swipe/drag/wheel all just work) with arrows + dots on top — no
   scroll-jacking, so there's no separate reduced-motion fallback to keep.
   ========================================================================== */
.rooms{
  max-width:var(--maxw);margin:0 auto;padding:150px var(--edge);
  transition:background-color 1s var(--ease);
}
.rooms[data-active-room="0"]{background:#f8f4ec}
.rooms[data-active-room="1"]{background:#f6f0e2}
.rooms[data-active-room="2"]{background:#f3ecdc}
.rooms__head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap;padding-bottom:56px;
}

.rooms__tabs{display:flex;position:relative;border-bottom:1px solid var(--line)}
.rooms__tab{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:6px;
  padding:26px 20px;background:none;border:none;cursor:pointer;text-align:start;
  border-bottom:2px solid transparent;opacity:.55;
  transition:border-color .4s var(--ease),opacity .4s var(--ease);
}
.rooms__tab + .rooms__tab{border-inline-start:1px solid var(--line)}
.rooms__tab:hover{opacity:.85}
.rooms__tab.is-active{opacity:1}
.rooms__tab-index{font-size:11px;letter-spacing:.12em;color:var(--gold-deep);font-weight:500}
.rooms__tab-name{font-family:var(--font-display);font-size:19px;font-weight:400}
.rooms__tabs-indicator{
  position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:var(--gold);display:block;pointer-events:none;
  transition:left .6s var(--ease),width .6s var(--ease);
}

.rooms__stage{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:56px;align-items:center;padding-top:56px;
  transition:opacity .4s var(--ease);
}
.rooms__stage.is-switching{opacity:0}

.rooms__gallery{position:relative;aspect-ratio:16/10;overflow:hidden}
.rooms__gallery-track{
  display:flex;width:100%;height:100%;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.rooms__gallery-track::-webkit-scrollbar{display:none}
.rooms__slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative}
.rooms__slide .ph{position:absolute;inset:0}

@media (hover:hover){
  .rooms__gallery img{transition:transform .6s var(--ease),filter .6s var(--ease)}
  .rooms__gallery:hover img{transform:scale(1.02);filter:brightness(1.05)}
}

.rooms__gallery::after{
  content:'';position:absolute;inset-inline:0;bottom:0;height:96px;z-index:1;
  background:linear-gradient(to top, rgba(30,20,12,.4), transparent);pointer-events:none;
}
.rooms__gallery-arrow{
  position:absolute;top:50%;translate:0 -50%;z-index:2;
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:rgba(247,243,234,.85);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.5);cursor:pointer;padding:0;
  opacity:0;transition:opacity .35s var(--ease),background .3s var(--ease);
}
.rooms__gallery:hover .rooms__gallery-arrow{opacity:1}
.rooms__gallery-arrow:hover{background:var(--cream)}
.rooms__gallery-arrow--prev{inset-inline-start:16px}
.rooms__gallery-arrow--next{inset-inline-end:16px}
.rooms__gallery-arrow::before{content:'';display:block;width:8px;height:8px;border:1px solid var(--ink)}
.rooms__gallery-arrow--prev::before{border-width:1px 1px 0 0;transform:rotate(45deg);translate:-1px 1px}
.rooms__gallery-arrow--next::before{border-width:0 0 1px 1px;transform:rotate(45deg);translate:1px -1px}

.rooms__gallery-dots{position:absolute;inset-inline:0;bottom:18px;z-index:2;display:flex;justify-content:center;gap:8px}
.rooms__gallery-dot{width:22px;height:2px;padding:0;border:none;background:rgba(247,243,234,.5);cursor:pointer;transition:background .3s var(--ease),width .3s var(--ease)}
.rooms__gallery-dot.is-active{background:var(--cream);width:34px}

.rooms__info-index{display:block;font-size:12px;letter-spacing:.14em;color:var(--gold-deep);font-weight:500;margin-bottom:18px}
.rooms__info-index i{margin:0 6px;font-style:normal;color:var(--ink-40)}
.rooms__info-name{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,3vw,36px);margin-bottom:8px}
.rooms__info-desc{font-size:15px;line-height:1.8;color:var(--ink-70);margin:18px 0 28px;max-width:100%;font-weight:300}
.rooms__info-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:18px;max-width:36ch}
.rooms__info-price{font-size:15px;font-weight:500;letter-spacing:.02em}

@media (prefers-reduced-motion: reduce){
  .rooms__stage{transition:none}
  .rooms{transition:none}
  .rooms__tabs-indicator{transition:none}
  .rooms__gallery img{transition:none}
}

@media (max-width:860px){
  .rooms{padding:100px var(--edge)}
  .rooms__tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .rooms__tab{flex:0 0 auto;min-width:150px}
  .rooms__stage{grid-template-columns:1fr;gap:32px;padding-top:36px}
  .rooms__gallery{aspect-ratio:4/5}
  .rooms__gallery-arrow{display:none}
}

@media (hover:none){
  .rooms__gallery-arrow{display:none}
}

/* ==========================================================================
   Dining — cinematic video reel, copy staggers in below on scroll
   ========================================================================== */
.dining{background:var(--cream-deep);padding-bottom:150px}
.dining__reel{position:relative;width:100%;aspect-ratio:16/8;max-height:82vh;overflow:hidden}
.dining__reel .ph{position:absolute;inset:0}
.dining__reel::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(20,16,10,.65) 0%, rgba(20,16,10,.05) 42%);
}
.dining__reel-overlay{
  position:absolute;inset:0;z-index:5;padding-bottom:48px;
  direction:ltr;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:22px;
}
.dining__reel-name{
  font-family:var(--font-display);font-weight:300;color:#fff;
  font-size:clamp(20px,2.4vw,30px);line-height:1.3;
}
@media (max-width:600px){
  .dining__reel-overlay{gap:16px}
}
.dining__copy{max-width:720px;margin:0 auto;padding:72px var(--edge) 0;text-align:center}
.dining__copy p{font-size:16px;line-height:1.85;color:var(--ink-70);max-width:46ch;margin:0 auto 36px;font-weight:300}
.dining__list{max-width:420px;margin:0 auto}

@media (max-width:860px){
  .dining__reel{aspect-ratio:4/5;max-height:70vh}
}

/* ==========================================================================
   Location — alternating media row
   ========================================================================== */
.location{
  max-width:var(--maxw);margin:0 auto;padding:150px var(--edge);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:80px;align-items:center;perspective:1400px;
}
.location__copy{text-align:center}
.location__copy h2{font-size:clamp(26px,3vw,38px)}
.location__copy p{font-size:16px;line-height:1.85;color:var(--ink-70);max-width:100%;margin:0 auto;font-weight:300}

.list-rule{display:flex;flex-direction:column}
.list-rule > div{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-top:1px solid var(--line-strong)}
.list-rule .tick{width:20px;height:1px;background:var(--gold)}
.list-rule span:first-child{font-size:15px;font-weight:300}

@media (max-width:860px){
  .location{grid-template-columns:1fr;gap:40px}
}

/* ==========================================================================
   Finale — pinned scroll-scrubbed footage + closing CTA
   ========================================================================== */
.finale-pin{position:relative;height:200vh}
.finale{
  position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.finale__scene{position:absolute;inset:0}
.finale__layer{position:absolute;inset:-4%}
.finale__layer--img{will-change:transform}
.finale__frames{display:block;width:100%;height:100%;object-fit:cover}
.finale__layer--scrim{background:rgba(113,85,67,.55);pointer-events:none}
.finale__layer--grain{
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px);
  pointer-events:none;
}
.finale__content{position:relative;text-align:center;padding:0 20px;opacity:0;transform:translateY(24px)}
.finale__content h3{
  font-family:var(--font-display);font-weight:300;font-size:clamp(20px,3vw,40px);
  line-height:1.1;color:#fff;margin:0 0 38px;max-width:34ch;white-space:nowrap;
}

@media (prefers-reduced-motion: reduce){
  .finale-pin{height:auto}
  .finale{position:relative}
  .finale__content{opacity:1;transform:none}
}

/* ==========================================================================
   Footer credit
   ========================================================================== */
.credit{
  background:#fff;padding:56px var(--edge);border-top:2px solid var(--gold);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  direction:ltr;
}
.credit__brand{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.credit__text{font-size:13px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--ink)}
.credit__logo{height:22px;width:auto;display:block}
.credit__links{display:flex;align-items:center;gap:12px}
.credit__icon{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.credit__icon svg{width:18px;height:18px}
.credit__icon:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ==========================================================================
   Responsive nav
   ========================================================================== */
@media (max-width:860px){
  .nav__links{display:none}
  .nav__actions .lang-toggle{display:inline}
  .nav__actions .btn{display:none}
  .nav__burger{display:flex}
}
@media (min-width:861px){
  .mobile-menu{display:none}
}