/* The Nathia Reserve, floor picker. Method: Omnya Lab Full Tower Blueprint ch05 to ch12. */
:root {
  --ink: #0e130d;
  --forest: #18211a;
  --olive: #2b3424;
  --cream: #f1ede2;
  --cream-2: rgba(241, 237, 226, .76);
  --cream-3: rgba(241, 237, 226, .54);
  --hair: rgba(241, 237, 226, .16);
  --accent: #c9a86a;
  --accent-hi: #d8bb82;
  --accent-ink: #1d1a0f;
  --grey: #5b5d55;
  --display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gutter: 40px;
  --panel-w: 360px;
  --top-h: 96px;
  --panel-h: 0px;
  /* desktop panel unit: 1 px on a 900 px tall window, so the floor panel scales with the picture and stays clear of Tower A */
  --u: clamp(.86px, .1111vh, 1.18px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font: 400 15px/1.45 var(--sans);
  overflow: hidden;
  height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-variant-numeric: lining-nums;
}
button { font: inherit; color: inherit; }
img { max-width: 100%; }

/* ---------------------------------------------------------------- stage */
.stage { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--ink); }
.clip {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; pointer-events: none;
}
.clip.on { opacity: 1; }
/* a film layer that is not showing is taken out of layout. Even at opacity 0 a <video> stays in the compositor,
   and under the blend-mode glows Chrome then shifts a strip of the picture by about 2 levels (qc/fit, 10 Nov) */
video.clip { display: none; }
video.clip.on { display: block; }
#videos { position: absolute; inset: 0; }
.shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 12, 7, .55) 0, rgba(8, 12, 7, 0) 22%),
    linear-gradient(0deg, rgba(8, 12, 7, .5) 0, rgba(8, 12, 7, 0) 26%),
    radial-gradient(60% 55% at 100% 100%, rgba(8, 12, 7, .42) 0, rgba(8, 12, 7, 0) 72%);
}
.scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: rgba(8, 12, 7, .62); opacity: 0;
  transition: opacity .6s var(--ease);
}
.scrim.on { opacity: 1; }
.scrim.deep { opacity: 1; background: rgba(8, 12, 7, .5); }

/* ch05: floor bands, hit path + glowing screen-blend path */
svg.floors { position: absolute; inset: 0; width: 100%; height: 100%; }
.floor path.hit { fill: transparent; cursor: pointer; }
.floor g.glow { mix-blend-mode: screen; pointer-events: none; } /* clipped to the tower outline, after the blur */
.floor path.shape {
  fill: url(#fade); opacity: 0; filter: url(#soft);
  transition: opacity .3s; pointer-events: none;
}
.floor.hover path.shape { opacity: .9; }
.floor line { stroke: var(--cream); stroke-width: 1.5; opacity: 0; transition: opacity .25s; pointer-events: none; }
.floor text {
  fill: var(--cream); font: 600 40px var(--display); font-feature-settings: "lnum" 1;
  paint-order: stroke; stroke: rgba(8, 12, 7, .5); stroke-width: 6px; stroke-linejoin: round;
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.floor.hover line, .floor.hover text { opacity: 1; }
.floor.hover.unit-on path.shape { opacity: .5; } /* the floor steps back while one of its residences is lit */
/* residences on the facade */
#uni .unit path.uhit { fill: transparent; pointer-events: none; }
#uni .unit.pick path.uhit { pointer-events: auto; cursor: pointer; }
#uni .unit.pick.sold path.uhit, #uni .unit.pick.reserved path.uhit { cursor: not-allowed; }
#uni .unit g.uglow { mix-blend-mode: screen; pointer-events: none; }
#uni .unit path.ushape { fill: #f7d49e; opacity: 0; filter: url(#usoft); transition: opacity .25s; pointer-events: none; }
#uni .unit.on path.ushape { opacity: .78; }
#uni .unit path.ugrey { fill: #262923; opacity: 0; transition: opacity .3s; pointer-events: none; }
#uni .unit.floor-on.sold path.ugrey, #uni .unit.floor-on.reserved path.ugrey { opacity: .55; }
#uni .unit.on.sold path.ushape, #uni .unit.on.reserved path.ushape { opacity: 0; }
#uni .unit.on.sold path.ugrey, #uni .unit.on.reserved path.ugrey { opacity: .75; }
/* the lights come on: the lit copy of the same picture shows through, only inside this floor or this residence */
.floor g.lit, #uni .unit g.lit { opacity: 0; transition: opacity .35s; pointer-events: none; }
.floor.hover g.lit, .floor.sweep g.lit { opacity: 1; }
.floor.hover.unit-on g.lit { opacity: 0; } /* a lit residence takes over from its floor */
#uni .unit.on g.lit { opacity: 1; }
#uni .unit.on.sold g.lit, #uni .unit.on.reserved g.lit { opacity: 0; }
/* with real window light underneath, the warm wash only needs to hint */
.has-lit .floor.hover path.shape { opacity: .6; }
.has-lit .floor.hover.unit-on path.shape { opacity: .32; }
.has-lit #uni .unit.on path.ushape { opacity: .55; }
/* the load sweep: a warm light rising floor by floor through both towers */
.floor.sweep path.shape { opacity: .85; transition-duration: .2s; }
.has-lit .floor.sweep path.shape { opacity: .6; }

/* ch09: room pills */
.spot { position: absolute; transform: translate(-50%, -50%); z-index: 5; }

/* ---------------------------------------------------------------- glass (ch06, warm) */
.glass {
  background: rgba(30, 38, 26, .46);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
  box-shadow:
    inset 0 0 0 .5px rgba(241, 237, 226, .42),
    inset 0 1px 1px rgba(241, 237, 226, .24),
    0 10px 36px rgba(4, 8, 3, .32);
}
.glass-dark {
  background: rgba(13, 18, 11, .8);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
  box-shadow: inset 0 0 0 .5px rgba(241, 237, 226, .3), 0 18px 50px rgba(0, 0, 0, .35);
}

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0;
  font: 600 14px/1 var(--sans); letter-spacing: .01em; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s, transform .2s var(--ease), opacity .2s;
}
.pill:active { transform: scale(.98); }
.pill:focus-visible, .link:focus-visible, .step:focus-visible, .tswitch button:focus-visible, .brand:focus-visible {
  outline: 2px solid var(--accent-hi); outline-offset: 3px;
}
.brand:focus-visible { border-radius: 6px; outline-offset: 6px; }
/* on the picture itself a gold ring can sink into warm wood and lamps: cream reads on every frame */
.spot:focus-visible, .back:focus-visible { outline-color: var(--cream); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: var(--accent-hi); }
.btn-accent[disabled] { background: rgba(241, 237, 226, .12); color: var(--cream-3); cursor: default; }
.btn-cream { background: var(--cream); color: #1f2619; }
.btn-cream:hover { background: #fff; }
/* pills that sit on the picture (Back, room buttons): a deeper glass, so cream text holds on a bright interior */
.pill.glass { color: var(--cream); background: rgba(22, 29, 18, .62); }
.pill.glass:hover { background: rgba(40, 50, 33, .78); }
.wide { width: 100%; }
.link {
  display: block; width: 100%; min-height: 44px; margin-top: 6px;
  background: none; border: 0; cursor: pointer;
  color: var(--cream-2); font: 500 13px var(--sans); letter-spacing: .02em;
}
.link:hover { color: var(--cream); }

/* ---------------------------------------------------------------- chrome */
.top {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px var(--gutter) 0; pointer-events: none;
}
.top > * { pointer-events: auto; }
.brand { display: block; position: relative; line-height: 0; transition: opacity .4s; }
.brand::after { content: ''; position: absolute; inset: -6px -8px; } /* a 44 px touch target without moving the wordmark */
.brand img { height: 52px; width: auto; }
body[data-state="loading"] .brand { opacity: 0; pointer-events: none; }

.back {
  position: fixed; z-index: 12; left: var(--gutter); top: calc(var(--top-h) + 4px);
  padding: 0 18px 0 12px;
}
.back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.caption {
  position: fixed; z-index: 6; left: var(--gutter); bottom: 30px; margin: 0;
  font: 500 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--cream-2);
  pointer-events: none;
}

.note {
  position: fixed; z-index: 11; left: 50%; bottom: 28px; transform: translateX(-50%);
  padding: 12px 20px; border-radius: 999px; font: 500 13px var(--sans); color: var(--cream);
  opacity: 0; visibility: hidden; pointer-events: none;
}

/* inside a residence: the caption line becomes a card (number, collection, layout, size, one gold action).
   Bottom left on desktop, a sheet above the home bar on phones; clear of the room buttons and the middle of the picture. */
body[data-state="terrace"] .caption, body[data-state="living"] .caption, body[data-state="bath"] .caption { visibility: hidden; }
.homecard {
  position: fixed; z-index: 9; left: var(--gutter); bottom: 28px;
  width: min(calc(340 * var(--u)), calc(100vw - 2 * var(--gutter))); padding: 22px 24px 24px; border-radius: 24px;
  background: rgba(16, 22, 13, .74);
  -webkit-backdrop-filter: blur(26px) saturate(140%); backdrop-filter: blur(26px) saturate(140%);
  box-shadow: inset 0 0 0 .5px rgba(241, 237, 226, .36), inset 0 1px 1px rgba(241, 237, 226, .18), 0 14px 44px rgba(4, 8, 3, .36);
  opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
}
.homecard.on {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .6s var(--ease) .15s, transform .6s var(--ease) .15s, visibility 0s linear 0s;
}
.homecard .eyebrow { color: var(--cream-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; margin: 10px 0 6px; font-weight: 600; }
.hc-id { font: 600 46px/1 var(--display); font-feature-settings: "lnum" 1, "tnum" 1; font-variant-numeric: lining-nums tabular-nums; color: var(--cream); }
.hc-coll { font: 600 italic 21px/1.2 var(--display); color: var(--cream-2); }
.hc-meta { margin: 0 0 18px; font-size: 14px; line-height: 1.4; color: var(--cream); font-variant-numeric: lining-nums tabular-nums; }
.homecard .pill { min-height: 48px; font-size: 15px; }
/* one primary action per screen: while the card carries Register interest, the header copy of it steps back */
#register { transition: background .2s, color .2s, transform .2s var(--ease), opacity .4s var(--ease), visibility 0s linear 0s; }
body[data-state="flying"] #register, body[data-state="terrace"] #register,
body[data-state="living"] #register, body[data-state="bath"] #register {
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s var(--ease), visibility 0s linear .4s;
}

/* layers that gsap reveals */
.panel, .planbox, .production, .finale, .back, .spot { opacity: 0; visibility: hidden; }

/* ---------------------------------------------------------------- panels */
.panel {
  position: fixed; z-index: 8; right: var(--gutter); top: 50%; transform: translateY(-50%);
  width: var(--panel-w); max-height: calc(100dvh - 2 * var(--top-h) + 40px); overflow: auto;
  padding: 30px 30px 22px; border-radius: 24px;
  scrollbar-width: none;
}
.panel::-webkit-scrollbar { display: none; }
.eyebrow {
  margin: 0; font: 600 11px/1.3 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--cream-3);
}
.panel h1, .production h2 {
  margin: 10px 0 22px; font: 600 46px/.98 var(--display); letter-spacing: -.005em;
  font-feature-settings: "lnum" 1, "pnum" 1; color: var(--cream);
}

/* floor panel, in reading order: tower switch, level with up and down, the chosen residence, its floor's chips, one gold button.
   "Choose your floor" is the quiet label; the level is the one display line. Desktop sizes: see the docking block below. */
#p-tower { width: 432px; padding: 20px 24px 20px; }
.phead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel .phead h1 {
  margin: 0; font: 600 12px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  font-feature-settings: normal; color: var(--cream-2); white-space: nowrap;
}
.tswitch { display: inline-flex; flex: none; border-radius: 999px; background: rgba(241, 237, 226, .07); box-shadow: inset 0 0 0 1px var(--hair); }
.tswitch button {
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 600 13px/1 var(--sans); letter-spacing: .02em; color: var(--cream-2); transition: background .2s, color .2s;
}
.tswitch button:hover { color: var(--cream); }
.tswitch button[aria-pressed="true"] { background: var(--cream); color: #1f2619; }
.where { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hero {
  margin: 0; font: 600 38px/1.05 var(--display); white-space: nowrap;
  font-feature-settings: "lnum" 1, "tnum" 1; font-variant-numeric: lining-nums tabular-nums;
}
.hero .num { display: inline-block; min-width: .55em; }
.stepper { display: flex; gap: 8px; flex: none; }
.step {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(241, 237, 226, .08); box-shadow: inset 0 0 0 1px var(--hair);
  display: grid; place-items: center; transition: background .2s, opacity .2s;
}
.step:hover:not([disabled]) { background: rgba(241, 237, 226, .16); }
.step[disabled] { opacity: .3; cursor: default; }
.step svg { width: 18px; height: 18px; fill: none; stroke: var(--cream); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.facts { margin: 0 0 22px; display: grid; gap: 12px; }
.facts > div { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding-top: 12px; border-top: 1px solid var(--hair); }
.facts dt { font: 600 11px/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--cream-3); }
.facts dd { margin: 0; font-size: 14px; color: var(--cream); font-variant-numeric: lining-nums tabular-nums; }
/* floor or residence detail: two fixed lines, so the panel never jumps */
.detail { min-height: 58px; margin-bottom: 12px; padding-top: 10px; border-top: 1px solid var(--hair); }
.detail p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail .d1 { font-size: 15px; line-height: 26px; color: var(--cream); }
.detail .d2 { font-size: 14px; line-height: 22px; color: var(--cream-2); font-variant-numeric: lining-nums tabular-nums; }
.detail .uidl { font: 600 26px/26px var(--display); font-feature-settings: "lnum" 1, "tnum" 1; color: var(--cream); margin-right: 10px; }
.detail .coll { font: 600 italic 18px/26px var(--display); color: var(--cream-2); }
.detail .status { display: inline-flex; align-items: center; gap: 6px; color: var(--cream); }
.detail .dot { width: 7px; height: 7px; }
/* the floor's residences as chips */
.chips { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 7px; margin-bottom: 10px; }
.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 12px; flex: none; min-width: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(241, 237, 226, .08); box-shadow: inset 0 0 0 1px rgba(241, 237, 226, .32);
  font: 600 13px/1 var(--sans); letter-spacing: .01em; color: var(--cream); font-variant-numeric: lining-nums tabular-nums;
  transition: background .15s, color .15s, box-shadow .15s;
}
.chip:hover { background: rgba(241, 237, 226, .18); }
.chip.rear { background: none; box-shadow: none; outline: 1px dashed rgba(241, 237, 226, .46); outline-offset: -1px; color: var(--cream-2); }
.chip.sold, .chip.reserved { background: rgba(64, 66, 60, .55); box-shadow: none; outline: 0; color: rgba(241, 237, 226, .5); cursor: not-allowed; }
.chip.on { background: var(--accent); color: var(--accent-ink); box-shadow: none; outline: 0; }
.chip:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
/* a home whose rooms can be walked: one small gold dot under its number, explained once under the chips (the FILM tag was on every chip) */
.chip { position: relative; }
.chip .walk { position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.chip.on .walk { background: var(--accent-ink); }
.chips-notes { display: flex; flex-wrap: wrap; gap: 0 18px; }
.chips-note { margin: 0 0 12px; font-size: 12px; line-height: 16px; color: var(--cream-2); letter-spacing: .01em; }
.chips-note::before {
  content: ''; display: inline-block; width: 14px; height: 8px; margin-right: 7px; vertical-align: 0;
  border-radius: 999px; outline: 1px dashed rgba(241, 237, 226, .5); outline-offset: -1px;
}
.chips-note.walk-note::before { width: 6px; height: 6px; border-radius: 50%; outline: 0; background: var(--accent); vertical-align: 1px; }
.chips-note.none { display: none; }
#t-facts { grid-template-columns: auto auto 1fr; gap: 0 22px; margin-bottom: 16px; }
#t-facts > div { grid-template-columns: 1fr; gap: 3px; padding-top: 10px; }
#t-facts dt { font-size: 10px; letter-spacing: .18em; }
#t-facts dd { font-size: 13px; line-height: 1.4; }

/* unit panel */
.u-hint { margin: 10px 0 22px; }
.u-hint h1 { margin-bottom: 14px; }
.u-hint p { margin: 0; color: var(--cream-2); font-size: 14px; }
.uid { margin: 10px 0 2px; font: 600 58px/.95 var(--display); font-feature-settings: "lnum" 1, "tnum" 1; }
.ucoll { margin: 0 0 20px; font: 600 italic 21px/1.2 var(--display); color: var(--cream-2); }
.status { display: inline-flex; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------- floor plan */
.planbox {
  position: fixed; z-index: 7;
  left: var(--gutter); top: calc(var(--top-h) + 8px); bottom: 64px;
  right: calc(var(--gutter) + var(--panel-w) + 24px);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.planinner {
  pointer-events: auto; border-radius: 24px; padding: 18px 22px 22px;
  display: flex; flex-direction: column; max-width: 100%; max-height: 100%; min-width: min(520px, 100%);
}
.planhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.legend { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--cream-2); }
.legend li { display: flex; align-items: center; gap: 7px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.available { background: var(--cream); }
.dot.reserved, .dot.sold { background: var(--grey); }
.dot.sold { box-shadow: inset 0 0 0 2px rgba(14, 19, 13, .7); }
.dot.sel { background: var(--accent); }
.planscroll {
  position: relative; flex: none; display: flex; align-items: center;
  overflow: hidden; overscroll-behavior: contain;
}
.plate { position: relative; margin: auto; flex: none; }
.plate img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.pins { position: absolute; inset: 0; }
.pin {
  position: absolute; transform: translate(-50%, -50%);
  min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none;
  display: grid; place-items: center; cursor: pointer;
  color: var(--cream); font: 600 var(--pin-fs, 12px)/1 var(--sans); letter-spacing: .05em;
}
.pin span {
  display: block; padding: .6em .95em; border-radius: 999px; white-space: nowrap;
  background: rgba(16, 22, 14, .9);
  box-shadow: inset 0 0 0 1px rgba(241, 237, 226, .6), 0 4px 14px rgba(0, 0, 0, .4);
  font-variant-numeric: lining-nums tabular-nums;
  transition: background .2s, color .2s, box-shadow .2s, transform .25s var(--ease);
}
.pin:hover span, .pin.peek span {
  transform: scale(1.08);
  box-shadow: inset 0 0 0 1px var(--cream), 0 0 0 5px rgba(241, 237, 226, .14), 0 6px 18px rgba(0, 0, 0, .45);
}
.pin.sel span {
  background: var(--accent); color: var(--accent-ink); transform: scale(1.08);
  box-shadow: 0 0 0 5px rgba(201, 168, 106, .3), 0 6px 18px rgba(0, 0, 0, .45);
}
.pin.reserved, .pin.sold { cursor: not-allowed; }
.pin.reserved span, .pin.sold span {
  background: rgba(64, 66, 60, .9); color: rgba(241, 237, 226, .42);
  box-shadow: inset 0 0 0 1px rgba(241, 237, 226, .16); transform: none;
}
.pin:focus-visible { outline: none; }
.pin:focus-visible span { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------------------------------------------------------------- production + finale */
.production {
  position: fixed; z-index: 9; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 2 * var(--gutter))); padding: 34px 36px 30px; border-radius: 24px; text-align: left;
}
.production h2 { margin: 10px 0 14px; font-size: 44px; }
.prod-text { margin: 0 0 26px; color: var(--cream-2); font-size: 15px; max-width: 42ch; }
.production .row { display: flex; flex-wrap: wrap; gap: 10px; }

.finale {
  position: fixed; z-index: 10; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; pointer-events: none; text-align: center;
}
.finale > * { pointer-events: auto; }
#finale-logo { width: min(440px, 64vw); height: auto; opacity: 0; will-change: transform, filter, opacity; }
#finale-sub {
  margin: 0; font: 600 12px var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--cream-2); opacity: 0;
}
#restart { margin-top: 22px; opacity: 0; visibility: hidden; }

/* ---------------------------------------------------------------- loader */
.loader {
  position: fixed; z-index: 20; inset: 0; background: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
}
.loader img { width: 200px; height: auto; }
.loader .bar { width: 180px; height: 1px; background: var(--hair); overflow: hidden; }
.loader .bar i { display: block; height: 100%; background: var(--cream); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease); }
.loader p { margin: 0; font: 500 11px var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--cream-3); }

/* ---------------------------------------------------------------- desktop docking */
@media (min-width: 761px) and (min-aspect-ratio: 9/10) {
  /* the floor panel, docked bottom right over the trees. Every size is in --u, so on a 900 px tall window the panel is
     about 390 px tall with two rows of chips and its top stays under Tower A's lowest floor (qc: A1 ends at 461 px). */
  #p-tower {
    top: auto; bottom: 28px; transform: none;
    width: min(calc(496 * var(--u)), 46vw); padding: calc(22 * var(--u)) calc(26 * var(--u));
  }
  .phead { margin-bottom: calc(12 * var(--u)); }
  .panel .phead h1 { font-size: max(11px, calc(12 * var(--u))); }
  .tswitch button { min-height: calc(38 * var(--u)); padding: 0 calc(17 * var(--u)); font-size: max(12px, calc(13 * var(--u))); }
  .where { margin-bottom: calc(14 * var(--u)); }
  .hero { font-size: calc(44 * var(--u)); line-height: 1; }
  .step { width: calc(42 * var(--u)); height: calc(42 * var(--u)); }
  .detail { min-height: calc(62 * var(--u)); padding-top: calc(11 * var(--u)); margin-bottom: calc(12 * var(--u)); }
  .detail .d1 { font-size: max(13px, calc(15 * var(--u))); line-height: calc(28 * var(--u)); }
  .detail .d2 { font-size: max(12px, calc(14 * var(--u))); line-height: calc(22 * var(--u)); }
  .detail .uidl { font-size: calc(30 * var(--u)); line-height: calc(28 * var(--u)); }
  .detail .coll { font-size: calc(20 * var(--u)); line-height: calc(28 * var(--u)); }
  /* chips: one even grid, seven to a row, so a floor of thirteen reads in two rows */
  .chips {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(56 * var(--u)), 1fr));
    gap: calc(7 * var(--u)) calc(6 * var(--u)); margin-bottom: calc(10 * var(--u));
  }
  .chip { height: calc(36 * var(--u)); padding: 0; font-size: max(12px, calc(13 * var(--u))); }
  .chip .walk { bottom: calc(4.5 * var(--u)); }
  .chips-note { margin-bottom: calc(12 * var(--u)); font-size: max(12px, calc(12 * var(--u))); }
  #t-go { min-height: calc(48 * var(--u)); font-size: max(14px, calc(15 * var(--u))); }

  /* plan screen: the plan and the residence card share one centre line; the plan header already says where we are */
  .planbox { bottom: calc(var(--top-h) + 8px); }
  body[data-state="plan"] .caption { display: none; }

  /* fixed height whatever the floor: collections never wrap, three lines reserved */
  #t-facts { grid-template-columns: auto auto auto; justify-content: space-between; gap: 0 14px; }
  #t-facts dd { white-space: nowrap; min-height: 4.2em; }
}

/* ---------------------------------------------------------------- wide screens */
@media (min-width: 1900px) {
  :root { --gutter: 56px; --panel-w: 390px; --top-h: 108px; }
  #p-tower { bottom: 44px; }
  .homecard { bottom: 44px; }
  .brand img { height: 60px; }
}
@media (max-height: 760px) and (min-width: 761px) and (min-aspect-ratio: 9/10) {
  .panel h1 { font-size: 38px; margin-bottom: 16px; }
  .facts { gap: 8px; }
  .facts > div { padding-top: 8px; }
}

/* ---------------------------------------------------------------- ch11: phones */
@media (max-width: 760px), (max-aspect-ratio: 899/1000) {
  :root { --gutter: 16px; --top-h: 68px; }
  body { font-size: 14px; }
  .top { padding: calc(12px + env(safe-area-inset-top)) 16px 0; }
  .brand img { height: 38px; }
  #register { min-height: 44px; padding: 0 16px; font-size: 13px; }
  .back { top: calc(var(--top-h) + 6px + env(safe-area-inset-top)); }

  .panel {
    top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); right: 16px; left: 16px;
    width: auto; transform: none; padding: 20px 20px 10px; border-radius: 20px;
    max-height: 64dvh;
  }
  .panel h1 { font-size: 30px; margin: 6px 0 14px; }
  .panel h1 br { display: none; }
  #p-tower { width: auto; padding: 16px 18px 16px; }
  .chips {
    display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; margin: 0 -18px 6px; padding: 0 18px 2px;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { height: 44px; padding: 0 16px; font-size: 14px; }
  .chip .walk { bottom: 7px; }
  .chips-note { margin-bottom: 12px; }
  .chips-note.none { display: none; }
  .detail { min-height: 0; margin-bottom: 12px; }
  .detail p.d2 { white-space: normal; } /* a long line wraps on a phone, it is never cut mid-word */
  .detail .off { display: none; }        /* the legend under the chips already says it; the line stays one line */
  .panel .phead h1 { font-size: 11px; letter-spacing: .2em; }
  .phead { margin-bottom: 8px; }
  .tswitch button { padding: 0 14px; }
  .hero { font-size: 30px; }
  .where { margin-bottom: 10px; }
  #t-go { min-height: 48px; font-size: 15px; }
  .facts { grid-template-columns: repeat(3, auto); gap: 10px 14px; margin-bottom: 14px; }
  .facts > div { grid-template-columns: 1fr; gap: 2px; padding-top: 8px; }
  .facts dt { font-size: 10px; letter-spacing: .16em; }
  .facts dd { font-size: 13px; }
  .facts.unit { grid-template-columns: 1fr 1fr; }

  .u-hint { margin: 6px 0 14px; }
  .uid { font-size: 40px; margin-top: 6px; }
  .ucoll { font-size: 18px; margin-bottom: 12px; }

  .planbox {
    left: 0; right: 0; top: calc(var(--top-h) + env(safe-area-inset-top)); bottom: calc(var(--panel-h) + 24px);
    display: block;
  }
  .planinner {
    width: 100%; height: 100%; min-width: 0; border-radius: 0; padding: 10px 0 8px; background: rgba(13, 18, 11, .56);
  }
  .planinner .planscroll { flex: 1; min-height: 0; }
  .pcount { display: none; }
  .planhead { padding: 0 16px; margin-bottom: 4px; }
  .legend { gap: 12px; font-size: 11px; }
  /* touch pan with native momentum, no scrollbar, soft fade where there is more to swipe */
  .planscroll {
    overflow-x: auto; overflow-y: hidden; padding: 0;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x;
    scrollbar-width: none; -ms-overflow-style: none;
    --fl: 0px; --fr: 0px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  }
  .planscroll.more-l { --fl: 44px; }
  .planscroll.more-r { --fr: 44px; }
  .planscroll::-webkit-scrollbar { display: none; width: 0; height: 0; }

  /* inside a residence: the card is a sheet above the home bar, the same shape as the other panels */
  .homecard {
    left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: auto;
    padding: 18px 20px 20px; border-radius: 20px;
  }
  .hc-title { margin: 8px 0 4px; }
  .hc-id { font-size: 38px; }
  .hc-coll { font-size: 19px; }
  .hc-meta { margin-bottom: 14px; }

  .caption { bottom: calc(16px + env(safe-area-inset-bottom)); left: 16px; letter-spacing: .14em; font-size: 11px; }
  body[data-state="site"] .caption, body[data-state="tower"] .caption, body[data-state="plan"] .caption,
  body[data-state="production"] .caption { display: none; }
  .note { bottom: calc(var(--panel-h) + 28px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); text-align: center; }

  .production {
    left: 16px; right: 16px; top: auto; bottom: calc(16px + env(safe-area-inset-bottom));
    transform: none; width: auto; padding: 24px 22px 20px; border-radius: 20px;
  }
  .production h2 { font-size: 34px; }
  .production .row .pill { flex: 1; }
}

/* tablets in landscape use the desktop layout with a finger: every target in the floor panel is at least 44 px */
@media (pointer: coarse) and (min-width: 761px) and (min-aspect-ratio: 9/10) {
  .tswitch button { min-height: 44px; }
  .step { width: 44px; height: 44px; }
  .chip { height: 44px; }
  .chip .walk { bottom: 7px; }
  #t-go { min-height: 48px; }
}
@media (max-width: 380px) {
  .hero { font-size: 26px; } /* "Tower B · Level 11" beside the two steppers on a 360 px phone */
  .tswitch button { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .homecard { transform: none; }
}

/* 10 Nov 2026: in Chrome the glass panel blinked when another floor or home was chosen. Each change of the lit windows
   (screen blend over the picture) made the browser redraw the panel's blurred backdrop from nothing for one frame.
   The picture with its lights is now one isolated layer, and the panel keeps a layer of its own, so a change of the
   lights no longer touches the panel. */
.stage { isolation: isolate; }
.panel.glass { will-change: opacity; backface-visibility: hidden; }

/* ---------------------------------------------------------------- 11 Nov 14:00: the floor panel, wide and short
   The taller panel covered part of Tower A at 1440x900 and on 21:9 (qc/bands.mjs; blueprint check 2: every floor band stays reachable).
   The tower outlines leave about 640u x 250u free at the bottom right, so the panel is laid out in that box: about 240u tall.
   Reading order kept: level with up and down (tower switch beside it), the chosen residence on one line, the floor's chips, one gold button.
   The words "Choose your floor" stay for screen readers (the panel's own label says the same). */
@media (min-width: 761px) and (min-aspect-ratio: 9/10) {
  #p-tower {
    width: min(calc(640 * var(--u)), 56vw); padding: calc(15 * var(--u)) calc(24 * var(--u)) calc(16 * var(--u));
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "where head" "detail detail" "chips chips" "notes go";
    column-gap: calc(22 * var(--u)); row-gap: calc(9 * var(--u)); align-items: center; max-height: none; overflow: visible;
  }
  #p-tower .phead { grid-area: head; margin: 0; justify-content: flex-end; }
  #p-tower .phead h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #p-tower .tswitch button { min-height: calc(34 * var(--u)); }
  #p-tower .where { grid-area: where; margin: 0; justify-content: flex-start; gap: calc(16 * var(--u)); }
  #p-tower .hero { font-size: calc(38 * var(--u)); }
  #p-tower .step { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
  #p-tower .detail {
    grid-area: detail; margin: 0; min-height: 0; padding: calc(8 * var(--u)) 0 0; border-top: 1px solid var(--hair);
    display: flex; align-items: baseline; gap: calc(16 * var(--u)); white-space: nowrap; overflow: hidden;
  }
  #p-tower .detail .d1 { flex: none; line-height: calc(24 * var(--u)); }
  #p-tower .detail .d2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: calc(24 * var(--u)); }
  #p-tower .detail .uidl { font-size: calc(26 * var(--u)); line-height: calc(24 * var(--u)); }
  #p-tower .detail .coll { font-size: calc(18 * var(--u)); line-height: calc(24 * var(--u)); }
  #p-tower .chips { grid-area: chips; margin: 0; grid-template-columns: repeat(auto-fill, minmax(calc(64 * var(--u)), 1fr)); gap: calc(6 * var(--u)); }
  #p-tower .chip { height: calc(32 * var(--u)); }
  #p-tower .chips-notes { grid-area: notes; align-self: center; }
  #p-tower .chips-note { margin: 0; }
  #p-tower #t-go { grid-area: go; justify-self: end; width: auto; min-width: calc(250 * var(--u)); min-height: calc(40 * var(--u)); padding: 0 calc(26 * var(--u)); }
}