/* Shared listing styles (first built for the Global 6000, 2026-10-31). The look: black into deep navy, Switzer + Plex Mono, the ▌
   terminal caption, thin white corner brackets on every frame, glass (two 1 px insets + 20 px blur) only over footage. */
@font-face { font-family: "Switzer"; src: url(../fonts/Switzer-Variable.ttf) format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(../fonts/IBMPlexMono-Regular.woff) format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(../fonts/IBMPlexMono-Medium.woff) format("woff"); font-weight: 500; font-display: swap; }

:root {
	--bg: #000;
	--navy: #071423;
	--fg: #fff;
	--dim: rgba(255, 255, 255, .62);
	--faint: rgba(255, 255, 255, .38);
	--line: rgba(255, 255, 255, .14);
	--brk: rgba(255, 255, 255, .7);
	--glow: inset 1px 1px 1px -1px rgba(255, 255, 255, .4), inset -1px -1px 1px -1px rgba(255, 255, 255, .4);
	--gutter: clamp(16px, 4vw, 64px);
	--arm: 18px;
	color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0; color: var(--fg); font: 400 16px/1.55 "Switzer", system-ui, sans-serif; letter-spacing: -.01em;
	background: radial-gradient(120% 60% at 50% 100%, #0d2a44 0%, var(--navy) 38%, #000 78%) fixed, #000;
	-webkit-font-smoothing: antialiased;
}
h1, h2 { margin: 0; font-weight: 500; letter-spacing: -.035em; line-height: 1.02; }
h1 { font-size: clamp(64px, 12vw, 184px); font-weight: 400; }
h2 { font-size: clamp(30px, 4vw, 56px); max-width: 18ch; font-weight: 400; }
p { margin: 0; }

/* ▌ terminal caption */
.cap { display: flex; align-items: center; gap: 12px; font: 500 13px/1 "Plex Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; }
.bar { display: inline-block; width: 3px; height: 15px; background: currentColor; flex: none; }
.lede { color: var(--dim); max-width: 52ch; }
.fine { font: 400 12px/1.6 "Plex Mono", monospace; color: var(--faint); max-width: 90ch; }

/* corner brackets on any .brk box */
.brk { position: relative; }
.brk::before, .brk::after { content: ""; position: absolute; inset: -10px; pointer-events: none; z-index: 3;
	background:
		linear-gradient(var(--brk), var(--brk)) top left / var(--arm) 1.5px no-repeat,
		linear-gradient(var(--brk), var(--brk)) top left / 1.5px var(--arm) no-repeat,
		linear-gradient(var(--brk), var(--brk)) top right / var(--arm) 1.5px no-repeat,
		linear-gradient(var(--brk), var(--brk)) top right / 1.5px var(--arm) no-repeat; }
.brk::after { background:
		linear-gradient(var(--brk), var(--brk)) bottom left / var(--arm) 1.5px no-repeat,
		linear-gradient(var(--brk), var(--brk)) bottom left / 1.5px var(--arm) no-repeat,
		linear-gradient(var(--brk), var(--brk)) bottom right / var(--arm) 1.5px no-repeat,
		linear-gradient(var(--brk), var(--brk)) bottom right / 1.5px var(--arm) no-repeat; }

/* top bar */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; padding: 18px var(--gutter);
	background: linear-gradient(#000 0%, rgba(0, 0, 0, .72) 70%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.mark { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font: 500 14px "Plex Mono", monospace; letter-spacing: .16em; }
.nav { display: flex; gap: 22px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.nav a { color: var(--faint); text-decoration: none; font: 500 12px "Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transition: color .2s; padding: 6px 0; }
.nav a:hover, .nav a.on { color: var(--fg); }
.btn-brk { --arm: 8px; --brk: #fff; color: #fff; text-decoration: none; font: 500 12px "Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; padding: 10px 16px; white-space: nowrap; position: relative; }
.btn-brk::before, .btn-brk::after { inset: 0; }
.btn-brk:hover { background: rgba(255, 255, 255, .06); }
button.btn-brk { background: none; border: 0; cursor: pointer; }

main { padding: 0 var(--gutter) 160px; display: grid; gap: clamp(96px, 12vw, 180px); }

/* footage frames: square corners, brackets just outside */
.frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.frame video, .frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }   /* img: a listing photo until the videos are made */

/* hero */
.hero { display: grid; gap: 40px; padding-top: 12px; }
.hero-copy { display: grid; gap: 18px; }
.hero-copy .cap { color: var(--dim); }
.hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 22px; }
.price { font: 400 clamp(28px, 3.4vw, 44px)/1 "Switzer"; letter-spacing: -.03em; }
.kpis { display: flex; gap: clamp(20px, 4vw, 56px); margin: 0; flex-wrap: wrap; }
.kpis dt, .stat small, .specs dt { font: 500 11px "Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.kpis dd { margin: 4px 0 0; font: 400 20px "Plex Mono", monospace; letter-spacing: -.01em; }

/* section blocks */
.block { display: grid; gap: 40px; }
.head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 48px; align-items: end; }
.head .cap { grid-column: 1 / -1; color: var(--dim); }
.head .lede { justify-self: end; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }

/* glass stat cards over the flight shot */
.lg { position: relative; isolation: isolate; border-radius: 14px; background: rgba(0, 0, 0, .28); box-shadow: var(--glow);
	backdrop-filter: blur(20px) saturate(1.1); -webkit-backdrop-filter: blur(20px) saturate(1.1); }
.stats { position: absolute; left: 4%; right: 4%; bottom: 6%; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat { display: grid; gap: 4px; padding: 18px 20px 20px; }
.stat b { font: 400 clamp(26px, 3.3vw, 48px)/1.05 "Switzer"; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat span { font: 400 12px "Plex Mono", monospace; color: var(--dim); }

/* range map */
.map-wrap { aspect-ratio: 16 / 9; background: #02070d; }
#map { width: 100%; height: 100%; display: block; }
#map .grat { fill: none; stroke: rgba(255, 255, 255, .05); }
#map .land { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .32); stroke-width: .7; }
#map .ring { fill: rgba(255, 255, 255, .025); stroke: #fff; stroke-width: 1.6; }
#map .ring-sub { fill: none; stroke: rgba(255, 255, 255, .22); stroke-dasharray: 2 6; }
#map .ring-lbl, #map .home-lbl, #map .city { font: 500 15px "Plex Mono", monospace; letter-spacing: .1em; fill: #fff; }
#map .nm, #map .meta { font: 400 12px "Plex Mono", monospace; letter-spacing: .06em; fill: rgba(255, 255, 255, .5); }
#map .route { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1; }
#map .route.out { stroke: rgba(255, 255, 255, .16); stroke-dasharray: 3 6; }
#map .dot { fill: #fff; }
#map .dot.out, #map .city.out { fill: rgba(255, 255, 255, .38); }
#map .sweep { stroke: rgba(255, 255, 255, .4); stroke-width: 1; }

/* floor plan */
.plan { display: grid; gap: 28px; padding: clamp(20px, 3vw, 40px); background: rgba(255, 255, 255, .02); border: 1px solid var(--line); }
.plan-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.plan-head .meta { font: 400 12px "Plex Mono", monospace; letter-spacing: .1em; color: var(--faint); }
#floorplan { width: 100%; height: auto; display: block; overflow: visible; }
#floorplan .hull { fill: none; stroke: #fff; stroke-width: 1.6; }
#floorplan .wall { stroke: rgba(255, 255, 255, .55); stroke-width: 1.2; }
#floorplan .seat rect { fill: none; stroke: #fff; stroke-width: 1.2; }
#floorplan .fit { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.1; }
#floorplan .zone { font: 500 15px "Plex Mono", monospace; letter-spacing: .14em; fill: #fff; }
#floorplan .zl { font: 400 12px "Plex Mono", monospace; letter-spacing: .08em; fill: rgba(255, 255, 255, .5); }
#floorplan .tick { stroke: rgba(255, 255, 255, .35); }
.plan-key { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 32px; font: 400 13px "Plex Mono", monospace; color: var(--dim); }
.plan-key b { display: inline-block; width: 26px; color: #fff; font-weight: 500; }

/* specs */
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.specs > div { padding: 18px 0 18px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; padding-right: 24px; }
.specs dd { margin: 0; font-size: 18px; letter-spacing: -.015em; }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 28px; }
.gallery button { all: unset; cursor: pointer; display: grid; gap: 10px; --arm: 12px; --brk: rgba(255, 255, 255, 0); }
.gallery button:hover, .gallery button:focus-visible { --brk: #fff; }
.gallery .ph { position: relative; aspect-ratio: 16 / 9; background: #0a0f15; }
.gallery .ph::before, .gallery .ph::after { inset: -8px; transition: opacity .2s; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery span { font: 400 12px "Plex Mono", monospace; letter-spacing: .08em; color: var(--dim); text-transform: uppercase; }
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: grid; place-items: center; padding: 48px 16px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(1400px, 100%); max-height: 82vh; object-fit: contain; }
.lb-close { all: unset; cursor: pointer; position: absolute; top: 14px; right: 22px; font: 300 40px/1 "Switzer"; color: #fff; }
.lb-count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font: 400 12px "Plex Mono", monospace; letter-spacing: .14em; color: var(--dim); text-transform: uppercase; }

.contact { display: grid; gap: 16px; padding: clamp(28px, 5vw, 64px); border: 1px solid var(--line); }
.contact .cap { color: var(--dim); }

/* ---------------- Max dock (fixed bottom right) ---------------- */
.max { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
	width: min(420px, calc(100vw - 32px)); display: grid; gap: 10px; padding: 14px; --arm: 14px; --brk: #fff;
	background: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .6)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.max::before, .max::after { inset: 0; }
.mx-cap { color: var(--dim); font-size: 11px; }
.mx-answer { display: grid; gap: 8px; max-height: min(44vh, 360px); overflow: auto; padding: 4px 2px 6px; }
.mx-answer[hidden] { display: none; }
.mx-q { font: 500 12px/1.5 "Plex Mono", monospace; letter-spacing: .06em; color: var(--dim); text-transform: uppercase; }
.mx-a { font-size: 15px; line-height: 1.5; color: #fff; white-space: pre-wrap; }
.mx-a.pending::after { content: "Checking the listing…"; color: var(--faint); font: 400 13px "Plex Mono", monospace; }
.mx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mx-chips[hidden] { display: none; }
.mx-chips button { all: unset; cursor: pointer; font: 400 12px "Plex Mono", monospace; letter-spacing: .02em; color: var(--dim); padding: 7px 10px; border-radius: 10px; box-shadow: var(--glow); background: rgba(255, 255, 255, .04); }
.mx-chips button:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.mx-wrap { margin: 0; }
.mx-field { position: relative; display: flex; align-items: center; gap: 11px; height: 54px; border-radius: 16px; padding: 0 8px 0 15px; overflow: hidden;
	box-shadow: inset 1px 1px 1px -1px rgba(255, 255, 255, .5), inset -1px -1px 1px -1px rgba(255, 255, 255, .5); }
.mx-orb { display: block; flex: none; }
.mx-input { all: unset; flex: 1; min-width: 0; height: 34px; font: 400 14.5px "Switzer", sans-serif; color: #fff; caret-color: #0A84FF; }
.mx-input::placeholder { color: rgba(255, 255, 255, .42); }
.mx-trail { all: unset; cursor: pointer; width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; gap: 3px; }
.mx-dot { width: 3px; height: 3px; border-radius: 50%; background: #fff; display: block; }

@media (max-width: 860px) {
	.head, .grid2 { grid-template-columns: minmax(0, 1fr); }
	.head .lede { justify-self: start; }
	.specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; left: 3%; right: 3%; bottom: 4%; }
	.stat { padding: 10px 12px 12px; }
	.btn-brk { display: none; }
	.btn-brk.btn-share { display: inline-block; padding: 8px 12px; }   /* phones keep Share (Request info hides) */
	.nav { gap: 16px; }
	main { padding-bottom: 220px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }