@font-face { font-family: 'Grogan Display'; src: url('fonts/grogan-display-regular.woff2') format('woff2'); font-weight: 100 550; font-display: swap; }
@font-face { font-family: 'Grogan Display'; src: url('fonts/grogan-display-bold.woff2') format('woff2'); font-weight: 551 900; font-display: swap; }

:root {
  --night: #0a1322;
  --navy: #002349;
  --ink: #18222f;
  --ink-2: #4a5666;
  --paper: #f6f2ec;
  --sand: #ebe2d5;
  --stone: #9b8a76;
  --copper: #b98a5e;
  --line: rgba(24, 34, 47, .14);
  --display: 'Grogan Display', 'Cormorant Garamond', Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --gutter: clamp(16px, 4.5vw, 64px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.65 var(--sans); overflow-x: hidden; }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--copper); color: #fff; }

/* Logos are masks so one file works on light and dark */
.logo { display: inline-block; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.logo--gg { --m: url('brand/grogan-logo.svg'); aspect-ratio: 7066 / 1602; height: 26px; }
.logo--rls { --m: url('brand/rls-logo.svg'); aspect-ratio: 3651 / 707; height: 26px; }
.logo--white { color: #fff; }

/* Type */
.eyebrow { margin: 0 0 14px; font: 600 11.5px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--copper); }
.eyebrow--light { color: #e7c9a6; }
.h2 { margin: 0 0 18px; font: 400 clamp(34px, 5.2vw, 68px)/1.04 var(--display); letter-spacing: -.01em; color: var(--navy); }
.h2--light { color: #fff; }
.h3 { margin: 0 0 16px; font: 400 clamp(28px, 3.4vw, 44px)/1.08 var(--display); color: var(--navy); }
.lede { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.55; color: var(--ink); }
p { margin: 0 0 1em; }
.fineprint { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin: 10px 0 0; }
.fineprint--light { color: rgba(255,255,255,.62); }
.textlink { color: var(--copper); text-underline-offset: 3px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; border: 1px solid transparent; font: 600 14px/1 var(--sans); letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s; }
.btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn--light { background: #fff; color: var(--night); }
.btn--ghost { background: rgba(10,19,34,.28); color: #fff; border-color: rgba(255,255,255,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn--ghost:hover { background: rgba(255,255,255,.14); }
.btn--dark { background: var(--navy); color: #fff; }
.chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font-size: 13px; cursor: pointer; }
.chip.is-on { background: var(--navy); color: #fff; border-color: var(--navy); }

/* VR link: quiet on purpose */
.vrlink { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; color: rgba(255,255,255,.78); font-size: 13px; text-decoration: none; letter-spacing: .01em; }
.vrlink svg { width: 26px; height: 16px; opacity: .9; }
.vrlink b { font-weight: 600; color: #fff; border-bottom: 1px solid rgba(255,255,255,.35); }
.vrlink:hover b { border-color: #fff; }
.vrlink--inline { display: flex; margin-top: 18px; }

/* Loader */
.loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: 22px; background: var(--night); color: #fff; transition: opacity .8s var(--ease), visibility .8s; }
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__mark .logo { height: 40px; color: #fff; animation: breathe 2.4s var(--ease) infinite; }
.loader__bar { width: 140px; height: 1px; background: rgba(255,255,255,.18); overflow: hidden; }
.loader__bar i { display: block; height: 100%; width: 0; background: #e7c9a6; transition: width .4s var(--ease); }
@keyframes breathe { 50% { opacity: .55; } }

/* Top bar */
.topbar { position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gutter); color: #fff; transition: background .4s, color .4s, transform .5s var(--ease), padding .4s; transform: translateY(-110%); }
.topbar.is-shown { transform: none; }
.topbar.is-solid { background: rgba(246,242,236,.94); color: var(--navy); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); padding-top: 14px; padding-bottom: 14px; }
.topbar__brand { display: flex; align-items: center; gap: clamp(12px, 1.2vw, 18px); color: inherit; }
/* Logos: ours first, Russ Lyon Sotheby's beside it at the same height (2026-10-12: Matt wanted ours much bigger) */
.topbar__brand .logo { height: clamp(34px, 3.1vw, 50px); transition: height .4s var(--ease); }
.topbar__rule { display: block; width: 1px; height: clamp(28px, 2.5vw, 40px); background: currentColor; opacity: .35; }
.topbar__nav { display: flex; gap: clamp(14px, 1.8vw, 28px); }
.topbar__nav a { text-decoration: none; font-size: 13.5px; letter-spacing: .04em; opacity: .85; }
.topbar__nav a:hover { opacity: 1; }
.topbar__menu { display: none; background: none; border: 0; width: 40px; height: 40px; padding: 10px; cursor: pointer; }
.topbar__menu i { display: block; height: 1.5px; background: currentColor; margin: 6px 0; transition: transform .3s; }
html.menu-open, html.menu-open body { overflow: hidden; }
html.menu-open #gg-tour-chat { display: none; }  /* the chat button stays out of the open phone menu */
@media (max-width: 1240px) {
  .topbar__menu { display: block; }
  .topbar__nav { position: fixed; inset: 0; top: 0; flex-direction: column; justify-content: center; align-items: center; gap: 22px; background: var(--night); color: #fff; opacity: 0; visibility: hidden; transition: opacity .35s; }
  .topbar__nav a { font: 400 30px/1.1 var(--display); opacity: 1; }
  .topbar.is-open .topbar__nav { opacity: 1; visibility: visible; }
  /* Open menu = whole screen (Android bug 2026-10-22): the solid header's backdrop-filter made the fixed menu size itself to the
     header strip once the page was scrolled, so the links spilled over the page. No filter or transform while open. */
  .topbar.is-open { backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; }
  .topbar__nav { height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
  .topbar.is-open .topbar__menu { position: relative; z-index: 2; color: #fff; }
  .topbar.is-open .topbar__menu i:first-child { transform: translateY(3.75px) rotate(45deg); }
  .topbar.is-open .topbar__menu i:last-child { transform: translateY(-3.75px) rotate(-45deg); }
}

/* Arrival */
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; color: #fff; overflow: hidden; background: var(--night); }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,19,34,.82) 0, rgba(10,19,34,.55) 40%, rgba(10,19,34,0) 70%), linear-gradient(180deg, rgba(10,19,34,.5) 0, rgba(10,19,34,0) 25%, rgba(10,19,34,0) 55%, rgba(10,19,34,.85) 100%); }
.hero__inner { position: relative; text-shadow: 0 2px 24px rgba(0,0,0,.45); padding: 0 var(--gutter) clamp(56px, 10vh, 110px); max-width: 1100px; }
.hero__title { margin: 0 0 14px; font: 400 clamp(38px, 5.4vw, 84px)/1.02 var(--display); letter-spacing: -.015em; max-width: 12ch; }
.hero__sub { max-width: 44ch; font-size: clamp(17px, 1.5vw, 20px); color: rgba(255,255,255,.88); }
.hero__price { margin: 22px 0 26px; font: 400 clamp(26px, 2.6vw, 36px)/1 var(--display); }
.hero__price span { display: block; margin-bottom: 8px; font: 600 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: #e7c9a6; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__credit { position: absolute; right: var(--gutter); bottom: 22px; font-size: 12px; letter-spacing: .08em; color: rgba(255,255,255,.6); }
/* Desktop: the lit elevator sits left of center, so the words go on the right over the open sky. */
@media (min-width: 900px) {
  .hero { justify-items: end; }
  .hero__inner { max-width: 600px; padding-right: calc(var(--gutter) + 2vw); }
  .hero__shade { background: linear-gradient(270deg, rgba(10,19,34,.82) 0, rgba(10,19,34,.55) 36%, rgba(10,19,34,0) 62%), linear-gradient(180deg, rgba(10,19,34,.45) 0, rgba(10,19,34,0) 22%, rgba(10,19,34,0) 60%, rgba(10,19,34,.7) 100%); }
  .hero__credit { left: var(--gutter); right: auto; }
}
/* Phone: the elevator fills the top half; a compact text block sits on a darker lower half. */
@media (max-width: 640px) {
  .hero__sub { display: none; }
  .hero__title { font-size: 36px; max-width: none; }
  .hero__price { margin: 14px 0 18px; }
  .hero__shade { background: linear-gradient(180deg, rgba(10,19,34,.35) 0, rgba(10,19,34,0) 18%, rgba(10,19,34,0) 28%, rgba(10,19,34,.8) 48%, rgba(10,19,34,.95) 100%); }
}
@media (max-width: 640px) { .hero__credit { display: none; } .hero__actions .btn { flex: 1 1 100%; justify-content: center; } }

/* Stats */
.stats { background: var(--night); color: #fff; padding: clamp(36px, 6vw, 70px) var(--gutter); }
.stats__list { list-style: none; margin: 0 auto; padding: 0; max-width: 1280px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.stats__list li { border-top: 1px solid rgba(255,255,255,.18); padding-top: 16px; }
.stats__list b { display: block; font: 400 clamp(34px, 3.6vw, 52px)/1 var(--display); }
.stats__list span { display: block; margin-top: 8px; font-size: 13px; color: rgba(255,255,255,.66); line-height: 1.4; }
@media (max-width: 900px) { .stats__list { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; } }

/* Story */
.story { padding: clamp(80px, 12vw, 160px) var(--gutter) clamp(60px, 8vw, 110px); max-width: 1320px; margin: 0 auto; }
.story__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 6vw, 96px); align-items: center; }
.story__text p:not(.eyebrow):not(.lede) { color: var(--ink-2); }
.story__fig { margin: 0; }
.story__fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.story__fig figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.story__timeline { margin-top: clamp(50px, 7vw, 90px); display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.story__timeline div { padding: 20px 20px 0 0; }
.story__timeline b { display: block; font: 400 26px/1.1 var(--display); color: var(--navy); }
.story__timeline span { display: block; margin-top: 6px; font-size: 14px; color: var(--ink-2); max-width: 24ch; }
@media (max-width: 900px) { .story__grid { grid-template-columns: 1fr; } .story__timeline { grid-template-columns: 1fr 1fr; gap: 10px 0; } }
/* Design awards (Trevor, 2026-10-23): listed in the story, not in any headline (Denise). */
.awards { margin-top: clamp(36px, 5vw, 60px); }
.awards__list { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--line); }
.awards__list li { display: grid; grid-template-columns: minmax(150px, 220px) 1fr auto; gap: 6px 24px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.awards__list b { font: 400 20px/1.2 var(--display); color: var(--navy); }
.awards__list span { font-size: 15px; color: var(--ink-2); }
.awards__list a { font-size: 13.5px; color: var(--navy); white-space: nowrap; }
.awards__note { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }
@media (max-width: 700px) { .awards__list li { grid-template-columns: 1fr; gap: 4px; } }

/* Section heads */
.section-head { max-width: 1320px; margin: 0 auto clamp(30px, 4vw, 54px); padding: 0 var(--gutter); }
.section-head__note { color: var(--ink-2); font-size: 15px; max-width: 60ch; }

/* Spaces */
.spaces { padding: clamp(40px, 6vw, 80px) 0 clamp(70px, 9vw, 130px); }
.chapter { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-areas: 'lead copy' 'strip strip'; gap: clamp(22px, 3.5vw, 56px); max-width: 1440px; margin: 0 auto clamp(70px, 9vw, 130px); padding: 0 var(--gutter); align-items: center; }
.chapter--flip { grid-template-columns: 1fr 1.35fr; grid-template-areas: 'copy lead' 'strip strip'; }
.chapter__lead { grid-area: lead; overflow: hidden; border-radius: 3px; cursor: zoom-in; background: var(--sand); aspect-ratio: 3 / 2; }
.chapter__lead img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s var(--ease); }
.chapter__lead.is-in img { transform: scale(1); }
.chapter__copy { grid-area: copy; }
.chapter__copy p:not(.eyebrow) { color: var(--ink-2); }
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.facts li { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; color: var(--ink); }
.chapter__strip { grid-area: strip; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.chapter__strip button { flex: 0 0 auto; width: clamp(150px, 17vw, 240px); aspect-ratio: 3 / 2; padding: 0; border: 0; border-radius: 2px; overflow: hidden; cursor: zoom-in; scroll-snap-align: start; background: var(--sand); }
.chapter__strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), opacity .3s; }
.chapter__strip button:hover img { transform: scale(1.05); }
.chapter__strip .more { display: grid; place-items: center; background: var(--navy); color: #fff; font-size: 13px; letter-spacing: .04em; }
@media (max-width: 900px) {
  .chapter, .chapter--flip { grid-template-columns: 1fr; grid-template-areas: 'lead' 'copy' 'strip'; }
  .chapter__lead { margin: 0 calc(var(--gutter) * -1); border-radius: 0; }
}
.interlude { position: relative; height: 92vh; min-height: 520px; margin: 0 0 clamp(70px, 9vw, 130px); display: grid; align-items: end; background: var(--night) center / cover no-repeat; background-attachment: fixed; }
@media (hover: none) { .interlude { background-attachment: scroll; } }
.interlude::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10,19,34,.75)); }
.interlude__inner { position: relative; padding: 0 var(--gutter) clamp(40px, 8vh, 90px); }
.allphotos { text-align: center; }

/* Floor plans */
.plans { background: var(--sand); padding: clamp(70px, 9vw, 120px) 0; }
.plans__tabs { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 var(--gutter); max-width: 1320px; margin: 0 auto 18px; }
.plans__tabs button { padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(0,35,73,.25); background: transparent; cursor: pointer; font-size: 14px; color: var(--navy); }
.plans__tabs button[aria-selected='true'] { background: var(--navy); color: #fff; border-color: var(--navy); }
.plans__grid { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(16px, 2.5vw, 32px); align-items: start; }
.plans__stage { position: relative; background: #fff; border-radius: 6px; padding: clamp(12px, 2vw, 28px); display: grid; place-items: center; box-shadow: 0 30px 80px -40px rgba(0,35,73,.35); }
.plans__canvas { position: relative; width: min(100%, calc(70vh * var(--ar, 1))); }
.plans__canvas > img { width: 100%; height: auto; mix-blend-mode: multiply; }
.plans__pins { position: absolute; inset: 0; }
.pin { position: absolute; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; cursor: pointer; }
.pin i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font: 600 11px/1 var(--sans); font-style: normal; box-shadow: 0 0 0 3px rgba(255,255,255,.9); transition: transform .2s var(--ease), background .2s; }
.pin:hover i, .pin.is-on i { background: var(--copper); transform: scale(1.18); }
.pin--nophoto i { background: #8a97a8; }
.plans__side { position: sticky; top: 80px; display: grid; gap: 14px; }
.plans__photo { margin: 0; border-radius: 6px; overflow: hidden; background: #fff; cursor: zoom-in; box-shadow: 0 30px 80px -40px rgba(0,35,73,.35); }
.plans__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.plans__photo figcaption { padding: 12px 16px; font: 400 22px/1.2 var(--display); color: var(--navy); }
.plans__photo.is-empty img { opacity: .15; }
.plans__rooms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.plans__rooms li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 6px; background: rgba(255,255,255,.55); cursor: pointer; font-size: 14px; color: var(--ink); }
.plans__rooms li b { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; font: 600 11px/1 var(--sans); }
.plans__rooms li.is-on { background: #fff; box-shadow: inset 0 0 0 1px var(--copper); }
.plans__rooms li.is-on b { background: var(--copper); }
.plans__totals { max-width: 1320px; margin: 28px auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.plans__totals b { display: block; font: 400 34px/1 var(--display); color: var(--navy); }
.plans__totals span { font-size: 13px; color: var(--ink-2); }
.plans__note { max-width: 1320px; margin: 14px auto 0; padding: 0 var(--gutter); }
@media (max-width: 900px) {
  .plans__grid { grid-template-columns: 1fr; }
  .plans__side { position: static; }
  .plans__stage { border-radius: 0; margin: 0 calc(var(--gutter) * -1); }
  .plans__totals { grid-template-columns: 1fr 1fr; }
  .pin i { width: 20px; height: 20px; font-size: 10px; }
}

/* Tour */
.tour { background: var(--night); color: #fff; padding: clamp(60px, 8vw, 110px) var(--gutter); }
.tour__head { max-width: 1320px; margin: 0 auto 26px; }
.tour__head p:not(.eyebrow) { color: rgba(255,255,255,.75); max-width: 56ch; }
.tour__frame { position: relative; max-width: 1320px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #111a29; box-shadow: 0 40px 90px -40px rgba(0,0,0,.8); }
.tour__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tour__poster { position: absolute; inset: 0; padding: 0; border: 0; cursor: pointer; background: none; }
.tour__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; }
.tour__poster:hover img { transform: scale(1.03); filter: brightness(1.05); }
.tour__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px; padding: 18px 30px; border-radius: 999px; background: #fff; color: var(--night); font: 600 16px/1 var(--sans); box-shadow: 0 18px 40px -12px rgba(0,0,0,.55); }
.tour__play svg { width: 22px; height: 22px; fill: currentColor; }
.tour__foot { max-width: 1320px; margin: 16px auto 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.tour__foot .vrlink { margin-top: 0; }
@media (max-width: 700px) { .tour__frame { aspect-ratio: 4 / 5; } .tour__play { padding: 15px 22px; font-size: 15px; } }

/* Sky */
.sky { background: radial-gradient(ellipse at 70% 40%, #12223b 0, #070d18 70%); color: #fff; padding: clamp(80px, 10vw, 140px) var(--gutter); overflow: hidden; }
.sky__grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.sky__copy p:not(.eyebrow) { color: rgba(255,255,255,.75); }
.sky__when { margin: 26px 0 22px; }
.sky__when label { display: block; font: 400 34px/1 var(--display); margin-bottom: 14px; }
.sky__when input[type=range] { width: 100%; accent-color: #e7c9a6; }
.sky__days { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 14px; color: rgba(255,255,255,.7); }
.sky__days button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; cursor: pointer; font-size: 18px; line-height: 1; }
.sky__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin: 0 0 22px; }
.sky__facts dt { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #e7c9a6; }
.sky__facts dd { margin: 4px 0 0; font: 400 22px/1.2 var(--display); }
.sky__storytitle { margin: 26px 0 8px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #e7c9a6; }
.sky__story { margin: 0; border-top: 1px solid rgba(231,201,166,.25); }
.sky__story > div { padding: 12px 0; border-bottom: 1px solid rgba(231,201,166,.14); display: grid; grid-template-columns: 116px 1fr; gap: 14px; }
.sky__story dt { font: 400 17px/1.35 var(--display); color: #fff; }
.sky__story dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.78); }
@media (max-width: 560px) { .sky__story > div { grid-template-columns: 1fr; gap: 4px; } }
.sky__how { margin: 22px 0 0; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.66) !important; }
.sky__how b { color: #fff; font-weight: 600; }
.sky__fine { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.45) !important; }
.sky__toggle { font-size: 14px; color: rgba(255,255,255,.75); display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.sky__dome { position: relative; aspect-ratio: 1; width: 100%; max-width: 760px; justify-self: center; }
.sky__dome canvas { width: 100%; height: 100%; border-radius: 50%; touch-action: none; }
.sky__compass span { position: absolute; font-size: 12px; letter-spacing: .2em; color: rgba(231,201,166,.85); }
.sky__compass span:nth-child(1) { top: -22px; left: 50%; transform: translateX(-50%); }
.sky__compass span:nth-child(2) { left: -22px; top: 50%; transform: translateY(-50%); }
.sky__compass span:nth-child(3) { bottom: -22px; left: 50%; transform: translateX(-50%); }
.sky__compass span:nth-child(4) { right: -22px; top: 50%; transform: translateY(-50%); }
@media (max-width: 900px) { .sky__grid { grid-template-columns: 1fr; } .sky__dome { order: -1; margin: 10px 20px; width: calc(100% - 40px); } }

/* Land */
.land { padding: clamp(70px, 9vw, 130px) 0; }
.land__grid { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(18px, 3vw, 40px); }
.land__map { position: relative; min-height: 620px; border-radius: 4px; overflow: hidden; background: #1b2430; }
.land__mapFallback { position: absolute; inset: 0; background: center / cover no-repeat; }
.land__views { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.land__list ol { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow: auto; }
.land__list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 12px 4px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .2s; }
.land__list li:hover, .land__list li.is-on { background: var(--sand); }
.land__list li b { font-weight: 600; font-size: 14.5px; color: var(--navy); }
.land__list li em { font-style: normal; font-size: 12.5px; color: var(--ink-2); }
.land__list li strong { grid-row: span 2; align-self: center; text-align: right; font: 400 24px/1 var(--display); color: var(--navy); }
.land__list li strong small { display: block; font: 400 11.5px/1.3 var(--sans); color: var(--ink-2); }
.maplibregl-ctrl-attrib { font-size: 10px; }
@media (max-width: 900px) { .land__grid { grid-template-columns: 1fr; } .land__map { min-height: 440px; margin: 0 calc(var(--gutter) * -1); border-radius: 0; } }

/* Films */
.films { background: var(--night); color: #fff; padding: clamp(70px, 9vw, 120px) 0; }
.films .h2 { color: #fff; }
.films__one { max-width: 1680px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 48px); }
.films video { width: 100%; border-radius: 4px; background: #000; }
.films__wide { aspect-ratio: 16 / 9; }
.films .fineprint { color: rgba(255,255,255,.55); }

/* Details */
.details { padding: clamp(70px, 9vw, 130px) 0 clamp(50px, 7vw, 90px); }
.details__grid { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px 40px; }
.details h4 { margin: 0 0 12px; font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--copper); }
.details dl { margin: 0; }
.details dt { font-size: 12.5px; color: var(--ink-2); margin-top: 12px; }
.details dd { margin: 2px 0 0; font-size: 15.5px; line-height: 1.45; }
.details__note { max-width: 1320px; margin: 30px auto 0; padding: 0 var(--gutter); }

/* Contact */
.contact { background: var(--navy); color: #fff; padding: clamp(80px, 10vw, 140px) var(--gutter) clamp(50px, 6vw, 80px); text-align: center; }
.contact__inner { max-width: 880px; margin: 0 auto; }
.contact__people { display: flex; justify-content: center; gap: clamp(30px, 6vw, 80px); flex-wrap: wrap; margin: 26px 0 50px; }
.contact__people b { display: block; font: 400 24px/1.2 var(--display); }
.contact__people a { color: #e7c9a6; text-decoration: none; letter-spacing: .04em; }
.contact__logos { display: flex; align-items: center; justify-content: center; gap: 26px; margin-bottom: 30px; flex-wrap: wrap; }
.contact__logos .logo { height: 34px; }
.contact__rule { width: 1px; height: 40px; background: rgba(255,255,255,.3); }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 90; background: rgba(6,10,18,.97); color: #fff; display: grid; grid-template-rows: auto 1fr auto; }
.lb[hidden] { display: none; }
.lb__top { display: flex; gap: 18px; align-items: center; padding: 14px var(--gutter); font-size: 13px; color: rgba(255,255,255,.7); }
.lb__top #lbTitle { flex: 1; color: #e7c9a6; letter-spacing: .14em; text-transform: uppercase; font-size: 11.5px; }
.lb__close { background: none; border: 0; font-size: 34px; line-height: 1; cursor: pointer; color: #fff; }
.lb__fig { margin: 0; display: grid; place-items: center; min-height: 0; padding: 0 clamp(8px, 6vw, 90px); touch-action: pan-y; }
.lb__fig img { max-width: 100%; max-height: calc(100vh - 180px); max-height: calc(100svh - 180px); object-fit: contain; user-select: none; -webkit-user-drag: none; transition: opacity .25s; }
.lb__fig figcaption { margin-top: 12px; font-size: 14px; color: rgba(255,255,255,.75); text-align: center; }
.lb__nav { position: fixed; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.3); color: #fff; font-size: 30px; cursor: pointer; }
.lb__nav--prev { left: 14px; } .lb__nav--next { right: 14px; }
@media (max-width: 700px) { .lb__nav { display: none; } }
.lb__chapters { display: flex; gap: 6px; overflow-x: auto; padding: 12px var(--gutter) 16px; scrollbar-width: none; }
.lb__chapters button { flex: none; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: transparent; color: rgba(255,255,255,.8); font-size: 12px; cursor: pointer; }
.lb__chapters button.is-on { background: #fff; color: var(--night); }

/* Listen player */
.listen { position: fixed; z-index: 60; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 4px 14px; align-items: center; padding: 12px 16px; border-radius: 16px; background: rgba(10,19,34,.94); color: #fff; box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); backdrop-filter: blur(10px); }
.listen[hidden] { display: none; }
.listen__play { grid-row: span 2; width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff; cursor: pointer; display: grid; place-items: center; }
.listen__play svg { width: 18px; height: 18px; fill: var(--night); }
.listen__meta { display: flex; justify-content: space-between; font-size: 13px; }
.listen__meta span { color: rgba(255,255,255,.6); }
.listen__bar { grid-column: 2; height: 3px; background: rgba(255,255,255,.18); border-radius: 2px; overflow: hidden; cursor: pointer; }
.listen__bar i { display: block; height: 100%; width: 0; background: #e7c9a6; }
.listen__close { grid-row: span 2; grid-column: 3; grid-row-start: 1; background: none; border: 0; color: #fff; font-size: 26px; cursor: pointer; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .chapter__lead img { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Map markers */
.map-home { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(10,19,34,.85); border: 2px solid #ffd7a8; color: #fff; font: 600 11px/1 var(--sans); letter-spacing: .06em; box-shadow: 0 0 0 8px rgba(255,215,168,.18); }
.map-lot { padding: 5px 10px; border-radius: 999px; background: rgba(10,19,34,.78); color: #9ff0f7; font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }

.contact__marks { display: flex; justify-content: center; align-items: center; gap: 14px; margin-bottom: 14px; color: rgba(255,255,255,.7); font-size: 12px; letter-spacing: .08em; }
.contact__marks svg { width: 26px; height: 26px; }

/* Reimagine */
.reimagine { padding: clamp(60px, 8vw, 120px) 0; background: var(--paper); }
.ri { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
.ri__controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-bottom: 16px; }
.ri__rooms, .ri__styles { display: flex; flex-wrap: wrap; gap: 8px; }
.ri__stage { position: relative; aspect-ratio: 3 / 2; width: min(100%, calc(80vh * 1.5)); margin: 0 auto; overflow: hidden; border-radius: 4px; background: var(--sand); user-select: none; touch-action: pan-y; cursor: ew-resize; }
.ri__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ri__beforeWrap { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.ri__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.35); }
.ri__handle i { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.ri__handle i::before, .ri__handle i::after { content: ''; position: absolute; top: 50%; width: 0; height: 0; border: 6px solid transparent; margin-top: -6px; }
.ri__handle i::before { left: 8px; border-right-color: var(--navy); } .ri__handle i::after { right: 8px; border-left-color: var(--navy); }
.ri__tag { position: absolute; top: 14px; padding: 6px 10px; border-radius: 999px; background: rgba(10,19,34,.7); color: #fff; font-size: 12px; letter-spacing: .04em; }
.ri__tag--l { left: 14px; } .ri__tag--r { right: 14px; }
.ri__veil { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px; background: rgba(10,19,34,.82); color: #fff; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); }
.ri__veil .logo { height: 34px; animation: breathe 1.4s var(--ease) infinite; }
.ri__veil em { font-style: normal; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #e7c9a6; }
.ri__veil.is-on { opacity: 1; }
@media (max-width: 700px) { .ri__stage { aspect-ratio: 4 / 3; } }
#routes li[hidden]{display:none!important}
/* Details (2026-10-12, Matt: easier to read): each group on its own card, a rule under the heading, a hairline between rows */
.details__grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }
.details__grid > div { background: #fffdf9; border: 1px solid var(--line); border-radius: 4px; padding: 22px 24px 10px; }
.details h4 { padding-bottom: 14px; margin-bottom: 0; border-bottom: 2px solid var(--navy); color: var(--navy); }
.details dl { display: grid; grid-template-columns: minmax(96px, 36%) 1fr; column-gap: 16px; }
.details dt, .details dd { padding: 11px 0; border-top: 1px solid var(--line); margin: 0; }
.details dt:first-of-type, .details dt:first-of-type + dd { border-top: 0; }
.details dt { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--stone); line-height: 1.5; }
.details dd { font-size: 15px; line-height: 1.5; }
@media (max-width: 600px) {
  .details__grid { gap: 14px; }
  .details__grid > div { padding: 16px 16px 6px; }
  .details dl { grid-template-columns: 1fr; }
  .details dt { padding: 12px 0 0; }
  .details dd { padding: 2px 0 12px; border-top: 0; }
  .details dt:first-of-type { border-top: 0; }
}

/* Airports: glowing plane markers with name and drive time (2026-10-12) */
.map-plane { display: none; align-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.map-plane.is-on { display: flex; }
.map-plane i { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #ffe1b8 0, #ffb15c 60%, #f08a24 100%); box-shadow: 0 0 0 3px rgba(10,19,34,.85), 0 0 22px 8px rgba(255,177,92,.75); }
.map-plane i::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255,190,110,.9); animation: planePulse 2.2s ease-out infinite; }
.map-plane svg { width: 22px; height: 22px; fill: #0a1322; transform: rotate(45deg); }
.map-plane span { background: rgba(10,19,34,.88); color: #fff; padding: 6px 10px; border-radius: 6px; font-size: 12px; line-height: 1.3; text-align: left; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.map-plane span b { display: block; font-weight: 600; font-size: 13px; color: #ffd7a8; }
@keyframes planePulse { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map-plane i::after { animation: none; } }
.chip--air { display: inline-flex; align-items: center; gap: 6px; }
.chip--air svg { width: 15px; height: 15px; fill: currentColor; transform: rotate(45deg); }
/* Sky: with the nightly story the copy runs long, so the dome stays in view beside it on desktop (2026-10-12) */
@media (min-width: 901px) { .sky__grid { align-items: start; } .sky__dome { position: sticky; top: 96px; } }
.sky { overflow: clip; }
.map-plane--left { flex-direction: row-reverse; }
.map-plane--left span { text-align: right; }
@media (max-width: 700px) { .map-plane i { width: 32px; height: 32px; } .map-plane svg { width: 18px; height: 18px; } .map-plane span { font-size: 11px; padding: 5px 8px; } .map-plane span b { font-size: 12px; } }
@media (max-width: 900px) { .land__list li { padding-right: 14px; } }

/* Phones: both logos stay side by side, sized to fit beside the menu button */
@media (max-width: 700px) { .topbar { padding-top: 12px; padding-bottom: 12px; } .topbar.is-solid { padding-top: 10px; padding-bottom: 10px; } .topbar__brand { gap: 10px; } .topbar__brand .logo { height: 27px; } .topbar__rule { height: 22px; } }
@media (max-width: 360px) { .topbar__brand .logo { height: 23px; } }

/* Night picker (2026-10-12): steady date pill, star-chart calendar with each night's Moon and meteor-shower peaks */
.sky__when { position: relative; -webkit-user-select: none; user-select: none; }
.sky__facts dt { -webkit-user-select: none; user-select: none; }
.sky__days .sky__date { width: auto; min-width: 11.2em; height: 36px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid rgba(231,201,166,.45); background: rgba(231,201,166,.07); color: #fff; font: 500 14px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .02em; transition: border-color .2s, box-shadow .2s; }
.sky__days .sky__date:hover, .sky__days .sky__date[aria-expanded="true"] { border-color: #e7c9a6; box-shadow: 0 0 20px rgba(231,201,166,.28); }
.sky__date svg { width: 17px; height: 17px; fill: none; stroke: #e7c9a6; stroke-width: 1.5; stroke-linecap: round; }
.sky__date svg .star { fill: #e7c9a6; stroke: none; }
.sky__days .sky__today { width: auto; height: auto; border: 0; border-radius: 0; background: none; color: #e7c9a6; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; padding: 0 2px; }
.sky__days .sky__today[hidden] { display: none; }
.sky__cal { position: absolute; z-index: 30; top: calc(100% + 10px); left: 0; width: 344px; padding: 18px 18px 14px; border-radius: 20px; color: #fff;
  border: 1px solid rgba(231,201,166,.35);
  background: radial-gradient(1px 1px at 22% 53%, rgba(255,255,255,.9), transparent 70%), radial-gradient(1px 1px at 71% 15%, rgba(255,255,255,.55), transparent 70%), radial-gradient(1px 1px at 67% 30%, rgba(255,255,255,.9), transparent 70%), radial-gradient(1px 1px at 58% 56%, rgba(255,255,255,.9), transparent 70%), radial-gradient(1.5px 1.5px at 14% 73%, rgba(255,255,255,.4), transparent 70%), radial-gradient(1px 1px at 75% 18%, rgba(255,255,255,.7), transparent 70%), radial-gradient(1px 1px at 76% 77%, rgba(255,255,255,.4), transparent 70%), radial-gradient(1px 1px at 31% 8%, rgba(255,255,255,.7), transparent 70%), radial-gradient(1px 1px at 56% 21%, rgba(255,255,255,.9), transparent 70%), radial-gradient(1px 1px at 74% 90%, rgba(255,255,255,.7), transparent 70%), radial-gradient(1px 1px at 77% 76%, rgba(255,255,255,.7), transparent 70%), radial-gradient(1px 1px at 15% 73%, rgba(255,255,255,.9), transparent 70%), radial-gradient(1px 1px at 82% 29%, rgba(255,255,255,.4), transparent 70%), radial-gradient(2px 2px at 43% 62%, rgba(255,255,255,.4), transparent 70%), radial-gradient(1px 1px at 41% 34%, rgba(255,255,255,.7), transparent 70%), radial-gradient(1.5px 1.5px at 13% 76%, rgba(255,255,255,.55), transparent 70%), radial-gradient(2px 2px at 46% 96%, rgba(255,255,255,.4), transparent 70%), radial-gradient(1px 1px at 80% 12%, rgba(255,255,255,.9), transparent 70%), radial-gradient(2px 2px at 24% 46%, rgba(255,255,255,.7), transparent 70%), radial-gradient(2px 2px at 56% 8%, rgba(255,255,255,.9), transparent 70%), radial-gradient(1px 1px at 46% 91%, rgba(255,255,255,.55), transparent 70%), radial-gradient(2px 2px at 77% 61%, rgba(255,255,255,.9), transparent 70%), radial-gradient(1px 1px at 37% 63%, rgba(255,255,255,.9), transparent 70%), radial-gradient(1px 1px at 96% 92%, rgba(255,255,255,.55), transparent 70%), radial-gradient(2px 2px at 39% 94%, rgba(255,255,255,.4), transparent 70%), radial-gradient(1px 1px at 5% 62%, rgba(255,255,255,.55), transparent 70%), radial-gradient(ellipse at 30% -10%, #213a63 0, #0b1629 58%, #060b16 100%);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 44px rgba(110,150,230,.14), inset 0 0 0 1px rgba(255,255,255,.04);
  animation: calIn .28s var(--ease); }
.sky__cal[hidden] { display: none; }
@keyframes calIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal__head strong { font: 400 21px/1.1 var(--display); letter-spacing: .01em; }
.cal__nav { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(231,201,166,.35); background: rgba(255,255,255,.03); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.cal__nav:hover { border-color: #e7c9a6; }
.cal__wk { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 10px; letter-spacing: .2em; color: #e7c9a6; margin-bottom: 6px; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__day { position: relative; aspect-ratio: 1; padding: 0; border-radius: 50%; border: 1px solid transparent; background: rgba(255,255,255,.035); color: rgba(255,255,255,.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; font: 500 12.5px/1 var(--sans); font-variant-numeric: tabular-nums; transition: background .15s, border-color .15s, box-shadow .15s; }
.cal__day b { font-weight: 500; }
.cal__day svg { width: 12px; height: 12px; }
.cal__day:hover, .cal__day:focus-visible { background: rgba(231,201,166,.14); border-color: rgba(231,201,166,.45); outline: none; }
.cal__day.is-today { border-color: rgba(231,201,166,.75); }
.cal__day.is-sel { background: radial-gradient(circle, rgba(231,201,166,.38), rgba(231,201,166,.08) 70%); border-color: #e7c9a6; box-shadow: 0 0 18px rgba(231,201,166,.5); color: #fff; }
.m-dark { fill: rgba(255,255,255,.1); stroke: rgba(255,255,255,.3); stroke-width: .6; }
.m-lit { fill: #f6ead2; }
.cal__spark { display: inline-block; width: 8px; height: 8px; background: #ffd9a0; filter: drop-shadow(0 0 3px #ffcf86);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.cal__day .cal__spark { position: absolute; top: 3px; right: 5px; }
.cal__foot { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: 11px; color: rgba(255,255,255,.62); }
.cal__foot span { display: inline-flex; align-items: center; gap: 5px; }
.cal__foot svg { width: 11px; height: 11px; }
.cal__tonight { margin-left: auto; padding: 6px 13px; border-radius: 999px; border: 1px solid rgba(231,201,166,.5); background: none; color: #e7c9a6; font-size: 12px; cursor: pointer; }
.cal__tonight:hover { background: rgba(231,201,166,.12); }
@media (max-width: 600px) { .sky__cal { position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; max-width: 420px; margin: 0 auto; } .sky__days { flex-wrap: wrap; } }

/* Floor plan on phones (2026-10-21): one-screen room viewer. The plan, the room photo and its name always share the screen;
   rooms are picked from a swipeable rail at the bottom (thumb reach), the arrows on the photo, a swipe or a pin. Desktop unchanged. */
.plans__count, .plans__arrow { display: none; }
.plans__viewer { scroll-margin-top: var(--tbh, 60px); }
.plans__rooms li:focus-visible, .plans__arrow:focus-visible, .plans__tabs button:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
@media (max-width: 900px), (orientation: landscape) and (max-height: 520px) {
  .plans__viewer { display: flex; flex-direction: column; gap: 10px; height: calc(100vh - var(--tbh, 60px) - 8px); height: calc(100svh - var(--tbh, 60px) - 8px); min-height: 420px; max-height: 1000px; }
  .plans__tabs { flex: none; width: 100%; flex-wrap: nowrap; overflow-x: auto; margin: 0; gap: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; position: relative; }
  .plans__tabs::-webkit-scrollbar, .plans__rooms::-webkit-scrollbar { display: none; }
  .plans__tabs button { flex: none; white-space: nowrap; padding: 8px 14px; font-size: 13.5px; }
  .plans__grid { flex: 1 1 auto; min-height: 0; width: 100%; margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .plans__stage { flex: 1 1 auto; min-height: 0; margin: 0; border-radius: 6px; padding: 8px; container-type: size; box-shadow: 0 18px 40px -30px rgba(0,35,73,.45); }
  .plans__canvas { width: min(100%, calc((100svh - 420px) * var(--ar, 1))); width: min(100cqw, 100cqh * var(--ar, 1)); }
  .plans__side { flex: none; display: flex; flex-direction: column; gap: 10px; }
  .plans__photo { position: relative; flex: none; box-shadow: 0 18px 40px -30px rgba(0,35,73,.45); background: var(--navy); touch-action: pan-y; -webkit-user-select: none; user-select: none; }
  .plans__photo img { aspect-ratio: 16 / 9; }
  .plans__photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 56px 9px 14px; font-size: 21px; line-height: 1.15; color: #fff; background: linear-gradient(to top, rgba(0,22,46,.78), rgba(0,22,46,0)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
  .plans__photo.is-empty { background: #fff; }
  .plans__photo.is-empty img { opacity: .08; }
  .plans__photo.is-empty figcaption { top: 0; display: grid; place-items: center; padding: 12px 56px; color: var(--navy); background: none; white-space: normal; text-align: center; }
  .plans__count { display: block; position: absolute; top: 8px; right: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(0,22,46,.55); color: #fff; font: 600 11px/1.4 var(--sans); letter-spacing: .04em; font-variant-numeric: tabular-nums; pointer-events: none; }
  .plans__photo.is-empty .plans__count { background: rgba(0,35,73,.08); color: var(--navy); }
  .plans__arrow { display: grid; place-items: center; position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 50%; background: rgba(246,242,236,.92); color: var(--navy); cursor: pointer; box-shadow: 0 4px 14px rgba(0,22,46,.25); }
  .plans__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .plans__arrow--prev { left: 8px; } .plans__arrow--next { right: 8px; }
  .plans__arrow:active { background: #fff; transform: scale(.94); }
  .plans__photo.is-in-r img { animation: planInR .32s var(--ease); }
  .plans__photo.is-in-l img { animation: planInL .32s var(--ease); }
  .plans__rooms { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; position: relative; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 4px; scroll-padding-inline: var(--gutter); }
  .plans__rooms li { flex: none; scroll-snap-align: center; white-space: nowrap; min-height: 44px; padding: 6px 14px 6px 8px; background: rgba(255,255,255,.7); }
  .plans__rooms li.is-on { background: #fff; box-shadow: inset 0 0 0 1.5px var(--copper); }
  .pin i { width: 20px; height: 20px; font-size: 10px; box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
  .pin.is-on { z-index: 2; }
  .pin.is-on i { transform: scale(1.3); box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(185,138,94,.35); }
  .pin::before { content: ''; position: absolute; inset: -8px; }
}
/* Phones turned sideways: plan on the left, photo and rail on the right. */
@media (orientation: landscape) and (max-height: 520px) {
  .plans__viewer { min-height: 0; gap: 6px; }
  .plans__tabs button { padding: 6px 12px; }
  .plans__grid { flex-direction: row; }
  .plans__side { flex: 0 0 48%; min-width: 0; justify-content: flex-end; }
  .plans__side { min-height: 0; }
  .plans__photo { flex: 1 1 auto; min-height: 0; }
  .plans__photo img { aspect-ratio: auto; height: 100%; }
  .plans__rooms { margin: 0; padding-inline: 0; }
}
@keyframes planInR { from { opacity: .35; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes planInL { from { opacity: .35; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .plans__photo.is-in-r img, .plans__photo.is-in-l img { animation: none; } .pin i { transition: none; } }