/* ROOM360 floor films, cinema layout: under the header the film fills the screen edge to edge,
   with the floor title, WATCH SHOWREEL and WATCH WITH SOUND inside it and a quiet bar beneath. */
#r360-top { overflow-x: clip; }
/* the floor section clips its sides and pads its top; let the film through and sit it right under the header */
#r360-top section:has(> .r360-fvid) { overflow-x: visible !important; padding-top: 0 !important; }
#r360-top .r360-fvid {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-radius: 0 !important;
  height: calc(100vh - var(--r360-hh, 112px) - 96px) !important;
  height: calc(100svh - var(--r360-hh, 112px) - 96px) !important;
  min-height: 460px !important;
}
#r360-top .r360-fvid-in { left: max(48px, 4.8vw) !important; right: max(48px, 4.8vw) !important; bottom: 48px !important; align-items: flex-end !important; }

/* round play and speaker rings */
#r360-top .r360-reelbtn, #r360-top .r360-soundbtn {
  display: inline-flex; align-items: center; gap: 18px; color: #EBE4D1; background: none; border: 0; padding: 0;
  font-size: 12px; letter-spacing: 3.2px; cursor: pointer; white-space: nowrap;
}
#r360-top .r360-reelbtn { margin-top: 30px; align-self: flex-start; }
#r360-top .r360-ring {
  width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(235, 228, 209, 0.92); flex: none;
  display: inline-flex; align-items: center; justify-content: center; transition: background .3s, color .3s, border-color .3s;
}
#r360-top .r360-reelbtn .r360-ring svg { margin-left: 2px; }
#r360-top .r360-soundbtn { height: 44px; padding: 0 22px 0 0; gap: 14px; border-radius: 22px; border: 1px solid rgba(235, 228, 209, 0.6); background: rgba(10, 26, 40, 0.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#r360-top .r360-soundbtn .r360-ring { width: 42px; height: 42px; margin-left: -1px; border-width: 1px; }
#r360-top .r360-soundbtn svg { fill: none; stroke: currentColor; }
#r360-top .r360-reelbtn:hover .r360-ring, #r360-top .r360-soundbtn:hover .r360-ring,
#r360-top .r360-soundbtn[aria-pressed="true"] .r360-ring { background: #E55604; border-color: #E55604; color: #EBE4D1; }
#r360-top .r360-reelbtn:focus-visible, #r360-top .r360-soundbtn:focus-visible, #r360-top .r360-fbar button:focus-visible { outline: 1px solid #EBE4D1; outline-offset: 4px; }

/* the bar under the film: BACK TO RECEPTION | SCROLL TO EXPLORE, each with a hairline */
#r360-top .r360-fbar {
  width: 100vw; margin-left: calc(50% - 50vw); height: 96px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; padding: 0 max(48px, 4.8vw);
}
#r360-top .r360-fbar button {
  background: none; border: 0; color: inherit; font: inherit; font-size: 11px; letter-spacing: 3.2px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 22px; padding: 6px 0;
}
#r360-top .r360-fbar button::before, #r360-top .r360-fbar button::after { content: ''; width: 1px; height: 26px; background: currentColor; opacity: .7; }
#r360-top .r360-fbar button:first-child::after, #r360-top .r360-fbar button:last-child::before { display: none; }
#r360-top .r360-fbar button:hover { color: #C24A0B; }
/* while the film bar is on screen, the floating BACK TO RECEPTION button is not needed */
html.r360-atfilm button[style*="position: fixed; left: 20px; bottom: 20px"] { opacity: 0; pointer-events: none; }
button[style*="position: fixed; left: 20px; bottom: 20px"] { transition: opacity .3s; }

@media (max-width: 700px) {
  #r360-top .r360-fvid { height: calc(100svh - var(--r360-hh, 150px) - 72px) !important; min-height: 420px !important; }
  #r360-top .r360-fvid-in { left: 22px !important; right: 22px !important; bottom: 26px !important; }
  #r360-top .r360-reelbtn { margin-top: 16px; }
  #r360-top .r360-fbar { height: 72px; padding: 0 22px; }
  #r360-top .r360-fbar button { font-size: 10px; letter-spacing: 2.2px; gap: 12px; }
}

/* ---------- THE LOBBY: the concierge desk ---------- */
/* key cabinet: lacquered Atlantic, double hairline frame, soft hills in the lacquer */
#r360-top .r360-kwall {
  position: relative; padding: 30px 30px 34px !important; gap: 22px !important; border-radius: 3px;
  background: linear-gradient(165deg, #22567D 0%, #1A4566 48%, #14354F 100%) !important;
  box-shadow: 0 34px 60px -18px rgba(10, 26, 40, 0.45), inset 0 0 0 1px rgba(235, 228, 209, 0.22), inset 0 0 0 9px #163A55, inset 0 0 0 10px rgba(235, 228, 209, 0.12);
}
#r360-top .r360-kwall::before {
  content: ''; position: absolute; inset: 10px; pointer-events: none; opacity: .5; mix-blend-mode: soft-light;
  background: url('/stone/hills-tone.jpg') center top / 900px 300px repeat;
}
#r360-top .r360-kwall > * { position: relative; }
#r360-top .r360-kwall > div:first-child { padding: 2px 4px 16px; border-bottom: 1px solid rgba(235, 228, 209, 0.22); font-size: 11px !important; letter-spacing: 3.4px !important; }
#r360-top .r360-kwall .r360-keys { gap: 26px 18px !important; padding: 6px 4px 0; }
/* key 11 (YOUR KEY) lives in the guest book now */
#r360-top .r360-kwall .r360-key[aria-label^="Key 11"] { display: none !important; }

/* each pigeonhole becomes an arched niche, lit from within on hover */
#r360-top .r360-kwall .r360-cubby {
  height: 196px !important; border: 1px solid rgba(235, 228, 209, 0.5) !important; border-radius: 999px 999px 4px 4px;
  background: radial-gradient(120% 70% at 50% 0%, #1F4664 0%, #102A40 62%, #0C2234 100%) !important;
  box-shadow: inset 0 18px 30px rgba(3, 14, 24, 0.7), inset 0 -1px 0 rgba(235, 228, 209, 0.12) !important;
  outline: 1px solid rgba(235, 228, 209, 0.16); outline-offset: 4px;
  transition: box-shadow .5s, background .5s, border-color .5s, outline-color .5s !important;
}
#r360-top .r360-kwall .r360-cubby > div:first-child { display: none; }               /* the orange number badge: the fob carries the number */
#r360-top .r360-kwall .r360-cubby > div:nth-child(2) {                               /* polished pin */
  top: 31px !important; width: 10px !important; height: 10px !important; z-index: 2; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF8E6 0%, #D9CDAE 45%, #8F8467 100%) !important; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}
#r360-top .r360-kwall .r360-keyart { top: 28px !important; filter: drop-shadow(0 14px 10px rgba(0, 0, 0, 0.5)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)); transform-origin: 50% 8px; }
#r360-top .r360-kwall .r360-keyart svg { display: block; overflow: visible; }
#r360-top .r360-kwall .r360-key:hover .r360-cubby, #r360-top .r360-kwall .r360-key:focus-visible .r360-cubby {
  border-color: rgba(229, 86, 4, 0.9) !important; outline-color: rgba(229, 86, 4, 0.35);
  background: radial-gradient(90% 60% at 50% 8%, rgba(236, 120, 50, 0.55) 0%, #1C3F5B 55%, #0C2234 100%) !important;
  box-shadow: inset 0 18px 30px rgba(3, 14, 24, 0.45), 0 0 34px rgba(229, 86, 4, 0.22) !important;
}
/* engraved plaque under each niche */
#r360-top .r360-kwall .r360-key > div:last-child {
  font-size: 10.5px !important; letter-spacing: 2.4px !important; gap: 8px !important; padding-top: 4px; min-height: 44px; justify-content: flex-start;
}
#r360-top .r360-kwall .r360-key > div:last-child svg { color: #E55604; }
#r360-top .r360-kwall .r360-key:hover > div:last-child { color: #FFFFFF; }

/* the guest register: an open leather-bound book on the desk */
#r360-top .r360-register {
  position: relative; color: #15324A !important; border-top: 0 !important; border-radius: 2px 6px 6px 2px;
  padding: 40px 40px 40px 52px !important; gap: 20px !important;
  background:
    linear-gradient(90deg, rgba(21, 50, 74, 0.2) 0, rgba(21, 50, 74, 0.06) 14px, transparent 34px),
    repeating-linear-gradient(180deg, transparent 0 35px, rgba(38, 87, 124, 0.065) 35px 36px),
    #F3EEE1 !important;
  box-shadow: 0 34px 60px -18px rgba(10, 26, 40, 0.4), -7px 7px 0 -1px #C24A0B, -7px 7px 0 0 #9E3C08;
}
#r360-top .r360-register::after {                                                       /* ribbon bookmark */
  content: ''; position: absolute; top: -6px; right: 46px; width: 16px; height: 86px; background: linear-gradient(90deg, #D24E03, #E55604 50%, #C24A0B);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
#r360-top .r360-register::before {                                                      /* the book's colophon, bottom of the page */
  content: 'ROOM360  \00B7  THE GUEST BOOK  \00B7  VOL. I'; position: absolute; left: 52px; right: 40px; bottom: 26px; padding-top: 14px;
  border-top: 1px solid rgba(21, 50, 74, 0.18); font-family: var(--r360-sans); font-size: 10px; letter-spacing: 3px; color: rgba(21, 50, 74, 0.55); white-space: pre;
}
#r360-top .r360-register { padding-bottom: 84px !important; }
#r360-top .r360-register * { color: #15324A; }
#r360-top .r360-register [style*="color: #EBE4D1"], #r360-top .r360-register [style*="color: #EAE2CF"] { color: #15324A !important; }
#r360-top .r360-register [style*="color: #E55604"] { color: #C24A0B !important; }
#r360-top .r360-register .r360-wm { color: #15324A; }
#r360-top .r360-register [style*="height: 1px; background: #DDD3BA"] { background: rgba(21, 50, 74, 0.22) !important; }
#r360-top .r360-register button[aria-label="Ring the reception bell"] { border-color: rgba(194, 74, 11, 0.6) !important; margin-right: 34px; }
#r360-top .r360-register button[aria-label="Ring the reception bell"]:hover { background: #C24A0B !important; }
#r360-top .r360-register button[aria-label="Ring the reception bell"]:hover * { color: #F3EEE1 !important; }
#r360-top .r360-register input {
  color: #15324A !important; border-bottom: 1px solid rgba(21, 50, 74, 0.45) !important;
  font-family: var(--r360-script) !important; font-size: 2.3rem !important; padding: 4px 2px 2px !important;
}
#r360-top .r360-register input::placeholder { color: rgba(21, 50, 74, 0.35); }
#r360-top .r360-register input:focus { outline: none; border-bottom-color: #C24A0B !important; }
#r360-top .r360-regactions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 6px; }
#r360-top .r360-directkey {
  background: none; border: 0; padding: 6px 0; font-family: var(--r360-sans);
  font-size: 11px; letter-spacing: 2.6px; color: #15324A; cursor: pointer; border-bottom: 1px solid rgba(21, 50, 74, 0.35);
}
#r360-top .r360-directkey:hover { color: #C24A0B !important; border-bottom-color: #C24A0B; }
#r360-top .r360-directkey span { color: inherit !important; }

@media (max-width: 700px) {
  #r360-top .r360-kwall { padding: 22px 18px 26px !important; }
  #r360-top .r360-kwall .r360-cubby { height: 176px !important; }
  #r360-top .r360-register { padding: 32px 24px 32px 36px !important; }
}

/* ---------- ROOM SERVICE: the service wall ---------- */
/* the section runs the full width on deep Atlantic; services are tiles of real work, the cream ticket rides alongside */
#r360-top section[aria-label="Room service"] {
  max-width: none !important; padding: 110px max(32px, 4vw) 120px !important; color: #F3EEE1;
  background: linear-gradient(180deg, #10283C 0%, #0C1F2F 100%);
}
#r360-top section[aria-label="Room service"] > svg { display: none; }
#r360-top section[aria-label="Room service"] > div:first-of-type { align-items: flex-start !important; text-align: left !important; display: grid !important; grid-template-columns: auto 1fr; column-gap: 28px; }
#r360-top section[aria-label="Room service"] > div:first-of-type > div:nth-child(1) { grid-column: 1 / -1; color: #E55604 !important; font-size: 11px !important; letter-spacing: 3.4px !important; }
#r360-top section[aria-label="Room service"] > div:first-of-type > div:nth-child(2) { color: #F3EEE1; font-size: clamp(2.6rem, 7vw, 6rem) !important; }
#r360-top section[aria-label="Room service"] > div:first-of-type > div:nth-child(3) { color: #E55604 !important; align-self: end; padding-bottom: .3em; }
#r360-top section[aria-label="Room service"] > div:first-of-type > p { grid-column: 1 / -1; color: rgba(243, 238, 225, 0.7) !important; max-width: 520px !important; }
#r360-top section[aria-label="Room service"] > div:nth-of-type(2) { margin-top: 56px !important; gap: 24px !important; }

#r360-top .r360-pass { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }
#r360-top .r360-passgrid { display: flex !important; flex-direction: column; gap: 0 !important; border-bottom: 1px solid rgba(243, 238, 225, 0.2); }

/* one line of the carte */
#r360-top .r360-svc {
  position: relative; isolation: isolate; width: 100%; padding: 30px 28px 30px 8px; border: 0; border-top: 1px solid rgba(243, 238, 225, 0.2); border-radius: 0;
  background: transparent; color: #F3EEE1; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: clamp(78px, 8vw, 130px) 58px minmax(0, 1fr) auto; align-items: center; column-gap: clamp(18px, 2.4vw, 40px);
  transition: color .45s, padding-left .6s cubic-bezier(.2, .8, .2, 1);
}
#r360-top .r360-svc::before {                          /* the Spice Orange sweep */
  content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #E55604 0%, #D24E03 100%);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
#r360-top .r360-svc::after {                           /* chosen: an orange edge */
  content: ''; position: absolute; left: 0; top: -1px; bottom: 0; width: 0; background: #E55604; transition: width .4s;
}
#r360-top .r360-svc-no {
  font-family: var(--r360-serif); font-size: clamp(3rem, 6vw, 6.2rem); line-height: .8; letter-spacing: -1px;
  color: transparent; -webkit-text-stroke: 1px rgba(243, 238, 225, 0.55); transition: -webkit-text-stroke-color .45s, color .45s;
}
#r360-top .r360-svc-ic {
  width: 58px; height: 58px; border-radius: 50%; border: 1px solid rgba(243, 238, 225, 0.4); display: inline-flex; align-items: center; justify-content: center; color: #E55604;
  transition: border-color .45s, color .45s, background .45s;
}
#r360-top .r360-svc-ic svg { fill: none; stroke: currentColor; }
#r360-top .r360-svc-text { display: flex; align-items: baseline; gap: 10px 32px; flex-wrap: wrap; min-width: 0; }
#r360-top .r360-svc-name { font-family: var(--r360-serif); font-size: clamp(1.7rem, 3.3vw, 3.4rem); line-height: 1.02; letter-spacing: -.2px; }
#r360-top .r360-svc-desc { font-size: 14px; line-height: 1.5; color: rgba(243, 238, 225, 0.62); max-width: 380px; transition: color .45s; }
#r360-top .r360-svc-cta {
  display: inline-flex; align-items: center; gap: 16px; font-family: var(--r360-sans); font-size: 11px; letter-spacing: 2.8px; white-space: nowrap;
}
#r360-top .r360-svc-plus { position: relative; width: 48px; height: 48px; flex: none; border-radius: 50%; border: 1px solid rgba(243, 238, 225, 0.6); transition: background .4s, border-color .4s, transform .6s cubic-bezier(.2, .8, .2, 1), color .4s; }
#r360-top .r360-svc-plus::before, #r360-top .r360-svc-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
#r360-top .r360-svc-plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .45s; }

/* hover: the line fills with Spice Orange and steps in */
#r360-top .r360-svc:hover, #r360-top .r360-svc:focus-visible { padding-left: 26px; outline: none; }
#r360-top .r360-svc:hover::before, #r360-top .r360-svc:focus-visible::before { transform: scaleX(1); }
#r360-top .r360-svc:hover .r360-svc-no, #r360-top .r360-svc:focus-visible .r360-svc-no { -webkit-text-stroke-color: transparent; color: #FFF6EA; }
#r360-top .r360-svc:hover .r360-svc-ic, #r360-top .r360-svc:focus-visible .r360-svc-ic { border-color: #FFF6EA; color: #FFF6EA; }
#r360-top .r360-svc:hover .r360-svc-desc, #r360-top .r360-svc:focus-visible .r360-svc-desc { color: rgba(255, 246, 234, 0.92); }
#r360-top .r360-svc:hover .r360-svc-plus, #r360-top .r360-svc:focus-visible .r360-svc-plus { background: #FFF6EA; border-color: #FFF6EA; color: #E55604; transform: rotate(90deg); }

/* on the order */
#r360-top .r360-svc[data-on="yes"]::after { width: 6px; }
#r360-top .r360-svc[data-on="yes"] .r360-svc-no { -webkit-text-stroke-color: #E55604; }
#r360-top .r360-svc[data-on="yes"] .r360-svc-name { color: #FF8A4C; }
#r360-top .r360-svc[data-on="yes"]:hover .r360-svc-name { color: #FFF6EA; }
#r360-top .r360-svc[data-on="yes"] .r360-svc-lbl { color: #FF8A4C; }
#r360-top .r360-svc[data-on="yes"]:hover .r360-svc-lbl { color: #FFF6EA; }
#r360-top .r360-svc[data-on="yes"] .r360-svc-plus { background: #E55604; border-color: #E55604; color: #FFF6EA; }
#r360-top .r360-svc[data-on="yes"] .r360-svc-plus::after { transform: translate(-50%, -50%) rotate(0deg); }   /* + becomes − */

/* the cream order ticket rides alongside the carte, torn at both ends */
#r360-top .r360-ticket { position: sticky !important; top: calc(var(--r360-hh, 112px) + 24px); align-self: flex-start; margin-bottom: 8px; max-width: 420px; }
#r360-top .r360-ticket::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px;
  background: radial-gradient(circle at 6px 0, transparent 5px, #FEF7E4 5.5px) 0 0 / 12px 8px repeat-x;
}
@media (max-width: 900px) {
  #r360-top .r360-svc { grid-template-columns: 64px minmax(0, 1fr) auto; padding: 22px 14px 22px 4px; }
  #r360-top .r360-svc-ic { display: none; }
  #r360-top .r360-svc-no { font-size: 2.8rem; }
  #r360-top .r360-svc-lbl { display: none; }
  #r360-top .r360-svc-plus { width: 40px; height: 40px; }
}
@media (max-width: 700px) {
  #r360-top section[aria-label="Room service"] { padding: 80px 16px 90px !important; }
  #r360-top .r360-svc-desc { font-size: 13px; }
  #r360-top .r360-ticket { position: relative !important; top: 0; max-width: none; }
}

/* ---------- buttons: the header's capsule everywhere ---------- */
.r360-btn {
  border-radius: 999px !important; border: 1px solid rgba(214, 228, 234, 0.48) !important; color: #F1EDE5 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, rgba(74, 90, 102, 0.86) 0%, rgba(40, 54, 66, 0.92) 100%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 10px 22px -10px rgba(6, 14, 22, 0.6) !important;
  padding-left: max(22px, 1.4em) !important; padding-right: max(22px, 1.4em) !important;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s, border-color .4s, background .4s !important; cursor: pointer;
}
.r360-btn:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.85) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 14px 26px -10px rgba(6, 14, 22, 0.7), 0 0 16px rgba(255, 255, 255, 0.12) !important; }
.r360-btn * { color: inherit; }
.r360-btn.r360-btn-hot {
  border: 0 !important; color: #FFFFFF !important;
  background: linear-gradient(180deg, #FF7A3E 0%, #FF5A1F 52%, #F04A10 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 6px rgba(150, 30, 0, 0.3), 0 10px 24px -8px rgba(255, 80, 20, 0.6) !important;
}
.r360-btn.r360-btn-hot:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 6px rgba(150, 30, 0, 0.3), 0 14px 32px -8px rgba(255, 80, 20, 0.75), 0 0 26px rgba(255, 98, 70, 0.4) !important; }
.r360-btn.r360-btn-round { border-radius: 50% !important; padding: 0 !important; }
.r360-btn:focus-visible { outline: 1px solid #F1EDE5; outline-offset: 3px; }
.r360-btn-shape { border-radius: 999px !important; padding-left: max(16px, 1.3em) !important; padding-right: max(16px, 1.3em) !important; }
@media (prefers-reduced-motion: reduce) { .r360-btn { transition: none !important; } }
/* Reception: no next-season ribbon over the film */
#r360-top section[aria-label="Lights on"] .r360-ribbon { display: none !important; }

/* ---------- FOOTER: full-bleed cream with blue Peaks mountains ---------- */
.r360-ft {
  position: relative; isolation: isolate; overflow: hidden; color: #1E3A55;
  width: 100vw; margin: 88px calc(50% - 50vw) 0; box-sizing: border-box;
  background: transparent; color: #F1EDE5;
  --ft-sans: var(--r360-sans); --ft-serif: var(--r360-serif);
}
/* faint hills along the top, mountains rising strong at the bottom */
.r360-ft::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 46%; z-index: -2; opacity: .45;
  background: url('/stone/hills-lines.png') center top / auto 160% repeat-x;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
}
.r360-ft::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 66%; z-index: -2;
  background: url('/stone/peaks-lines.png') center bottom / auto 100% repeat-x; opacity: .9;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 35%, rgba(0, 0, 0, 0.45) 70%, transparent 100%); mask-image: linear-gradient(0deg, #000 0%, #000 35%, rgba(0, 0, 0, 0.45) 70%, transparent 100%);
}
.r360-ft * { box-sizing: border-box; }
.r360-ft-main {
  position: relative; display: grid; grid-template-columns: minmax(400px, 31%) 1fr; align-items: stretch; min-height: 440px;
  padding: 0 max(120px, 10vw) 0 0;
}

/* the teal brand panel, its right edge sweeping down into the cream */
.r360-ft-brand {
  position: relative; z-index: 1; padding: 54px 70px 64px max(32px, 4vw); color: #F1EDE5;
  display: flex; flex-direction: column; gap: 16px; justify-content: center;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 420' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23234F68'/%3E%3Cstop offset='.55' stop-color='%23163A4F'/%3E%3Cstop offset='1' stop-color='%230E2B3C'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0H446C492 0 508 34 518 96C530 174 536 262 556 328C568 372 582 404 600 420H0Z' fill='url(%23g)'/%3E%3Cpath d='M446 0.8C490 0.8 506 35 516 96C528 174 534 262 554 328C566 372 580 404 598 420' fill='none' stroke='rgba(190,220,232,0.45)' stroke-width='1.2'/%3E%3C/svg%3E") left top / 100% 100% no-repeat;
  filter: drop-shadow(10px 0 24px rgba(14, 43, 60, 0.25));
}
.r360-ft-logo { font-size: clamp(30px, 2.2vw, 40px); line-height: 1; color: #F1EDE5; }
.r360-ft-kicker { font-family: var(--ft-sans); font-weight: 500; font-size: 11px; letter-spacing: 3.6px; color: rgba(241, 237, 229, 0.82); }
.r360-ft-head { font-family: var(--ft-serif); font-weight: 500; font-size: clamp(30px, 2.45vw, 48px); line-height: 1.02; white-space: nowrap; letter-spacing: -.3px; margin: 8px 0 4px; }
.r360-ft-head em { font-style: italic; color: #FF6246; }
.r360-ft-social { display: flex; gap: 14px; margin-top: 10px; }
.r360-ft-social a {
  width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #F1EDE5;
  border: 1px solid rgba(214, 228, 234, 0.45); background: radial-gradient(circle at 40% 28%, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.12));
  transition: background .4s, border-color .4s, color .4s, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.r360-ft-social a:hover { background: #FF5A1F; border-color: #FF5A1F; color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 8px 18px -6px rgba(255, 80, 20, 0.6); }

/* the frosted cream panel holding the four columns */
.r360-ft-cols {
  position: relative; z-index: 1; align-self: center; margin: 46px 0 56px -40px;
  display: grid; grid-template-columns: 1fr 1.25fr 1.3fr 1.25fr; padding: 36px 8px 34px;
  border-radius: 34px; background: transparent; border: 1px solid rgba(241, 237, 229, 0.16);
}
.r360-ft-col { padding: 0 clamp(18px, 2vw, 40px); border-left: 1px solid rgba(241, 237, 229, 0.2); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.r360-ft-col:first-child { border-left: 0; }
.r360-ft-col h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 12px; font-family: var(--ft-sans); font-weight: 500; font-size: 13px; letter-spacing: 3.6px; color: #F1EDE5; }
.r360-ft-col h3::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #FF5A1F; box-shadow: 0 0 8px rgba(255, 90, 31, 0.6); }
.r360-ft-col ul { list-style: none; margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 14px; }
.r360-ft-col li, .r360-ft-col li button, .r360-ft-col li a, .r360-ft-col p, .r360-ft-col small {
  font-family: var(--ft-sans); font-weight: 500; font-size: 11.5px; letter-spacing: 2.2px; line-height: 1.6; color: rgba(241, 237, 229, 0.86); text-decoration: none;
}
.r360-ft-col li button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; position: relative; transition: color .35s, text-shadow .35s; }
.r360-ft-col li button::after, .r360-ft-col li a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1px; background: #FF5A1F; transition: right .45s cubic-bezier(.2, .8, .2, 1); }
.r360-ft-col li a { position: relative; transition: color .35s; }
.r360-ft-col li button:hover, .r360-ft-col li a:hover { color: #FF8A5C; text-shadow: 0 0 12px rgba(255, 98, 70, 0.45); }
.r360-ft-col li button:hover::after, .r360-ft-col li a:hover::after { right: 0; }
.r360-ft-plain { padding-bottom: 18px !important; border-bottom: 1px solid rgba(241, 237, 229, 0.2); }
.r360-ft-col p { margin: 0 0 4px 22px; }
.r360-ft-talk {
  align-self: flex-start; margin: 10px 0 0 4px; height: 52px; padding: 0 28px; white-space: nowrap; border-radius: 999px; border: 0; cursor: pointer; color: #FFFFFF;
  display: inline-flex; align-items: center; gap: 14px; font-family: var(--ft-sans); font-weight: 600; font-size: 12px; letter-spacing: 3.2px;
  background: linear-gradient(180deg, #FF7A3E 0%, #FF5A1F 52%, #F04A10 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 6px rgba(150, 30, 0, 0.3), 0 12px 26px -8px rgba(255, 80, 20, 0.65);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s;
}
.r360-ft-talk:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 6px rgba(150, 30, 0, 0.3), 0 18px 34px -8px rgba(255, 80, 20, 0.75), 0 0 28px rgba(255, 98, 70, 0.4); }
.r360-ft-talk svg { transition: transform .45s; } .r360-ft-talk:hover svg { transform: translateX(3px); }
.r360-ft-news {
  margin-left: 8px; height: 52px; border-radius: 999px; display: flex; align-items: center; padding: 0 20px 0 24px; gap: 10px;
  background: linear-gradient(180deg, rgba(74, 90, 102, 0.55), rgba(40, 54, 66, 0.65)); border: 1px solid rgba(214, 228, 234, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); opacity: .8;
}
.r360-ft-news input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-family: var(--ft-sans); font-size: 11px; letter-spacing: 2.6px; color: #F1EDE5; cursor: not-allowed; }
.r360-ft-news input::placeholder { color: rgba(241, 237, 229, 0.6); }
.r360-ft-news span { color: #F1EDE5; display: inline-flex; }
.r360-ft-col small { margin-left: 30px; font-size: 9.5px; color: rgba(241, 237, 229, 0.5); }

/* the orange sun, half-set behind the mountains on the right */
.r360-ft-sun {
  position: absolute; right: max(30px, 3.4vw); bottom: 22%; width: clamp(70px, 5.8vw, 112px); aspect-ratio: 1; border-radius: 50%; z-index: -2;
  background: radial-gradient(circle at 42% 38%, #FF9A5E 0%, #FF6A2E 55%, #F05312 100%);
  box-shadow: 0 0 0 18px rgba(255, 140, 90, 0.12), 0 0 0 40px rgba(255, 140, 90, 0.06), 0 0 60px rgba(255, 98, 40, 0.35);
}

/* the glass bottom bar, edge to edge */
.r360-ft-bar {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; min-height: 76px;
  padding: 10px max(28px, 3.2vw) 10px max(20px, 2.4vw); color: #F1EDE5;
  background: linear-gradient(180deg, rgba(40, 92, 128, 0.62) 0%, rgba(22, 60, 88, 0.78) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(130%); backdrop-filter: blur(10px) saturate(130%);
  border-top: 1px solid rgba(200, 225, 238, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-family: var(--ft-sans); font-weight: 500; font-size: 11px; letter-spacing: 3.2px;
}
.r360-ft-home { justify-self: start; display: inline-flex; align-items: center; gap: 18px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; letter-spacing: inherit; transition: color .35s; }
.r360-ft-home:hover { color: #FFB290; }
.r360-ft-home > svg { transition: transform .45s; } .r360-ft-home:hover > svg { transform: translateX(3px); }
.r360-ft-bico { width: 54px; height: 54px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: radial-gradient(circle at 40% 28%, #2C4858, #0D2230); border: 1px solid rgba(214, 228, 234, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 18px -6px rgba(4, 12, 18, 0.6); }
.r360-ft-motto { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; }
.r360-ft-motto i { width: 9px; height: 9px; border-radius: 50%; background: #FF5A1F; box-shadow: 0 0 8px rgba(255, 90, 31, 0.7); }
.r360-ft-copy { justify-self: end; font-size: 10px; letter-spacing: 2.6px; color: rgba(241, 237, 229, 0.85); }
.r360-ft button:focus-visible, .r360-ft a:focus-visible { outline: 1px solid #FF5A1F; outline-offset: 4px; }

/* tablet: the brand panel on top, columns two by two */
@media (max-width: 1180px) {
  .r360-ft-main { grid-template-columns: 1fr; padding: 0; }
  .r360-ft-sun { display: none; }
  .r360-ft-brand { padding: 48px max(28px, 5vw) 76px; background-position: left top; background-size: 112% 100%; }
  .r360-ft-cols { margin: -28px max(16px, 4vw) 48px; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .r360-ft-col:nth-child(3) { border-left: 0; }
  .r360-ft-sun { bottom: 22%; }
  .r360-ft-bar { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 18px 20px 22px; }
  .r360-ft-home, .r360-ft-copy { justify-self: center; }
}
/* phone: everything stacks */
@media (max-width: 640px) {
  .r360-ft-brand { padding: 40px 24px 70px; background-size: 135% 100%; }
  .r360-ft-head { font-size: 32px; white-space: normal; }
  .r360-ft-cols { grid-template-columns: 1fr; padding: 28px 4px; margin: -26px 12px 40px; border-radius: 26px; }
  .r360-ft-col { border-left: 0; border-top: 1px solid rgba(241, 237, 229, 0.18); padding: 24px 20px 0; }
  .r360-ft-col:first-child { border-top: 0; padding-top: 0; }
  .r360-ft-motto { white-space: normal; letter-spacing: 2.4px; }
}
@media (prefers-reduced-motion: reduce) { .r360-ft *, .r360-ft *::after { transition: none !important; } }

/* ---------- THE ENTRANCE: the old single door gives way to the two doors (brand/signature.css) ---------- */
.r360-ent-old, .r360-ent-old + div { display: none !important; }
html.r360-to-hotel div:has(> .r360-doors), html.r360-to-studio div:has(> .r360-doors) { opacity: 1 !important; }
/* make room for the two doors on one screen */
[style*="padding: 11vh 20px 9vh"]:has(.r360-doors) { padding: 9vh 20px 3vh !important; }
[style*="margin: 30px 0 18px"]:has(+ .r360-ent-old), div:has(> .r360-ent-old) > [style*="margin: 30px 0 18px"] { margin: 14px 0 4px !important; }
div:has(> .r360-doors) { margin-top: 14px !important; gap: 8px !important; }
div:has(> .r360-doors) > h1 { font-size: clamp(1.4rem, 3.3vw, 2.4rem) !important; }

/* ---------- THE GRAND ENTRANCE: the approved artwork, with exact hit areas ---------- */
.r360-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
div:has(> .r360-gate) > :not(.r360-gate):not([style*="z-index: 4"]) { display: none !important; }   /* the drawn entrance steps aside */
.r360-gate { position: absolute; inset: 0; overflow: hidden; background: #0E2034; z-index: 2; }
.r360-gate-stage { position: absolute; left: 50%; top: 50%; width: max(100vw, 166.74vh); aspect-ratio: 1619 / 971; transform: translate(-50%, -50%); }
.r360-gate-zoom { position: absolute; inset: 0; transform-origin: 50% 66%; }
.r360-gate-art { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; animation: r360gateIn 1.6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes r360gateIn { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
/* the light behind each doorway, revealed when that door is chosen */
.r360-gate-glow { position: absolute; top: 42.74%; height: 41.71%; border-radius: 999px 999px 0 0; opacity: 0; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 62%, #FFF2DE 0%, #FFC690 38%, rgba(240, 122, 58, 0.75) 70%, rgba(240, 122, 58, 0.2) 100%); transition: opacity .7s ease; }
.r360-gate-glow-hotel { left: 25.02%; width: 15.44%; } .r360-gate-glow-studio { left: 59.91%; width: 15.13%; }
/* hit areas: each covers the whole door (frame, fanlight and painted button) */
.r360-gate-door, .r360-gate-ui { position: absolute; padding: 0; border: 0; background: transparent; cursor: pointer; display: block; -webkit-tap-highlight-color: transparent; }
.r360-gate-door { top: 40.16%; height: 44.28%; border-radius: 999px 999px 0 0; transition: box-shadow .5s, background .5s; }
.r360-door-hotel.r360-gate-door { left: 23.47%; width: 18.41%; } .r360-door-studio.r360-gate-door { left: 58.55%; width: 18.04%; }
.r360-gate-door:hover { background: radial-gradient(60% 50% at 50% 30%, rgba(255, 200, 140, 0.12), transparent 70%); box-shadow: 0 0 60px rgba(255, 160, 90, 0.18); }
.r360-gate-skip { left: 74.74%; top: 2.27%; width: 9.27%; height: 4.74%; border-radius: 999px; }
.r360-gate-sound { left: 86.91%; top: 2.27%; width: 11.12%; height: 4.74%; border-radius: 999px; }
.r360-gate-door:focus-visible, .r360-gate-ui:focus-visible { outline: 2px solid #EBE4D1; outline-offset: 4px; }
/* the painted button says SOUND OFF; once sound is on, a live label covers it */
.r360-gate-sound-live { position: absolute; inset: 2px; border-radius: 999px; display: flex; align-items: center; justify-content: center; opacity: 0;
  background: #0F1F33; border: 1px solid rgba(235, 228, 209, 0.85); color: #EBE4D1; font-family: var(--r360-sans); font-weight: 600; font-size: clamp(9px, .72vw, 13px); letter-spacing: .22em; }
.r360-gate-sound[aria-label="Sound ON"] .r360-gate-sound-live { opacity: 1; }
/* choosing a door: its light comes on, then the camera flies into that doorway */
html.r360-to-hotel .r360-gate-glow-hotel, html.r360-to-studio .r360-gate-glow-studio { opacity: 1; }
html.r360-to-hotel .r360-gate-zoom, html.r360-to-studio .r360-gate-zoom {
  transform-origin: var(--r360-zx, 50%) var(--r360-zy, 66%); transform: scale(10); transition: transform 1.9s cubic-bezier(.7, 0, .25, 1) .55s;
}
html.r360-to-hotel .r360-gate-door, html.r360-to-studio .r360-gate-door, html.r360-to-hotel .r360-gate-ui, html.r360-to-studio .r360-gate-ui { pointer-events: none; }
/* tall phone screens: show the whole artwork rather than crop the doors away */
@media (max-aspect-ratio: 4/5) { .r360-gate-stage { width: 100vw; } }
@media (prefers-reduced-motion: reduce) { .r360-gate-art { animation: none; } html.r360-to-hotel .r360-gate-zoom, html.r360-to-studio .r360-gate-zoom { transform: none; transition: none; } }