/* Limassol Blu Marine, website preview (Highframe). One stylesheet, tokens first. */
/* the Leptos brand identity (draft, 3 Nov 2026): headings in Volkys Serif, everything else in Inter. Volkys needs the
   Leptos web licence; until its files arrive, Bodoni Moda (OFL, the same upright stress and hairlines) stands in */
@font-face { font-family: "Inter"; src: url(../fonts/inter-latin-var.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url(../fonts/bodonimoda-latin-var.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }

:root {
  /* the brand palette: navy is the brand, white the largest field, royal and sky blue support, stone softens, gold
     punctuates (never a text colour), black for fine rules and scrims */
  --navy: #003057;
  --navy-2: #1d4289;
  --royal: #1d4289;
  --sky: #7ba4db;
  --ink: #003057;
  --deep: #002a4c;
  --ivory: #ffffff;
  --sand: #d6d2c4;
  --stone: #d6d2c4;
  --gold: #ab9868;
  --gold-2: #ffffff;
  --black: #101820;
  --line: rgba(255, 255, 255, .18);
  --glass: rgba(0, 48, 87, .42);
  --glass-light: rgba(255, 255, 255, .1);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, .72);
  --serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif-display: "Bodoni Moda", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(16px, 4vw, 64px);
  --max: 1440px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0; background: var(--deep); color: var(--text); font-family: var(--sans); font-weight: 300;
  font-size: clamp(16px, 1.05vw, 18px); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, canvas, video { display: block; max-width: 100%; }
img { height: auto; } /* images carry width and height attributes for their aspect ratio: never drawn stretched */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--gold); color: var(--ink); }
/* keyboard focus: a fine gold ring on everything that takes focus (fields keep their gold border instead) */
:focus-visible { outline: 1px solid var(--gold-2); outline-offset: 3px; border-radius: 6px; }
.field :is(input, select, textarea):focus-visible { outline: none; }
main p { max-width: 62ch; }
main p.eyebrow { max-width: none; } /* tracked capitals run wider than ch: the measure is for body copy */
/* ultrawide: the layout widens with the screen, the text keeps its measure */
@media (min-width: 2200px) { :root { --max: 2160px; } }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* type */
/* the overline: Inter bold, capitals, tracked wide (the brand's one use of bold) */
.eyebrow { font: 600 .7rem/1.3 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-2); }
/* headings in the brand serif: sentence case, one weight on a page, never letterspaced past one per cent; the optical
   size is held at 24 so the hairlines stay visible at display sizes */
.display { font-family: var(--serif-display); font-weight: 400; font-optical-sizing: none; font-variation-settings: "opsz" 24; letter-spacing: -.005em; line-height: 1.1; margin: 0; }
.h1 { font-size: clamp(2.8rem, 6.6vw, 7.6rem); line-height: 1.02; }
.h2 { font-size: clamp(2rem, 4.2vw, 4.4rem); }
.h3 { font-size: clamp(1.4rem, 2.2vw, 2.2rem); }
.lede { font-size: clamp(1.08rem, 1.5vw, 1.4rem); font-weight: 300; color: var(--muted); max-width: 40ch; }
.gold { color: var(--gold-2); }
.num { font-family: var(--sans); font-weight: 300; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0; }
p { margin: 0 0 1em; }

/* buttons */
.btn {
  --b: #fff; display: inline-flex; align-items: center; gap: .75em; min-height: 48px; padding: 0 1.6em;
  border: 1px solid var(--b); border-radius: 999px; font: 500 .9rem/1 var(--sans); letter-spacing: .02em;
  color: var(--navy); background: #fff; transition: background .5s var(--ease), color .5s var(--ease), transform .5s var(--ease-out);
}
.btn:hover { background: var(--stone); }
.btn.ghost { background: rgba(255, 255, 255, .06); color: var(--text); --b: rgba(255, 255, 255, .38); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.btn.ghost:hover { background: rgba(255, 255, 255, .16); }
.btn svg { width: 16px; height: 16px; }
.link { border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: border-color .4s; }
.link:hover { border-color: var(--gold); }

/* preview strip */
.pv { position: fixed; z-index: 90; left: 50%; bottom: 14px; transform: translateX(-50%); font: 500 .66rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); background: rgba(16, 24, 32, .66); border: 1px solid var(--line); border-radius: 999px; padding: .7em 1.2em; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); white-space: nowrap; pointer-events: none; }

/* header */
/* the header, like a house: Menu on the left, the name in the centre, Enquire on the right; no pills, a soft shade only */
.skip { position: fixed; z-index: 120; left: 16px; top: -80px; padding: 12px 18px; border-radius: 8px; background: var(--ivory); color: var(--ink); font-weight: 500; transition: top .3s var(--ease); }
.skip:focus { top: 12px; }
.hdr { position: fixed; z-index: 80; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 76px; padding: 0 var(--gutter); pointer-events: none;
  background: linear-gradient(180deg, rgba(16, 24, 32, .55), rgba(16, 24, 32, 0)); transition: transform .8s var(--ease-out), opacity .6s var(--ease); }
.hdr > * { pointer-events: auto; }
.hdr.away { transform: translateY(-110%); opacity: 0; }
.brand { display: flex; align-items: center; justify-content: center; min-height: 44px; }
.brand img { height: 34px; width: auto; transition: opacity .5s var(--ease); }
.brand:hover img { opacity: .82; }
.menu-btn, .hdr-enq { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: 500 .95rem/1 var(--sans); letter-spacing: .03em; color: var(--ivory); transition: color .5s var(--ease); }
.menu-btn { justify-self: start; }
.menu-btn .ic { display: grid; gap: 6px; width: 22px; }
.menu-btn .ic i { display: block; height: 1px; background: currentColor; transition: transform .6s var(--ease-out); }
body.menu-open .menu-btn .ic i:first-child { transform: translateY(3.5px) rotate(45deg); } body.menu-open .menu-btn .ic i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.hdr-enq { justify-self: end; text-decoration: underline 1px rgba(255, 255, 255, .6); text-underline-offset: 7px; }
.menu-btn:hover, .hdr-enq:hover { color: var(--gold-2); }
/* the live dot: a soft coral breathing slowly (the bright red pulse read as a gimmick) */
.dr-live i, .livebox .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #e59a86; box-shadow: 0 0 0 0 rgba(229, 154, 134, .45); animation: pulse 3.2s var(--ease) infinite; margin-right: 10px; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(229, 154, 134, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 154, 134, 0); } }
@media (max-width: 640px) { .hdr { height: 64px; } .brand img { height: 28px; } .menu-btn .tx { display: none; } .menu-btn, .hdr-enq { font-size: .9rem; } }
.livebox { width: min(1100px, 100vw - 32px); max-width: none; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--deep); color: var(--text); }
.livebox::backdrop { background: rgba(16, 24, 32, .82); backdrop-filter: blur(6px); }
.livebox .lb-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.livebox .x { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; }
.livebox .frame { aspect-ratio: 16 / 9; display: grid; place-items: center; background: #000; }
.livebox iframe { width: 100%; height: 100%; border: 0; }
/* the menu: a full-screen overlay, the sections in a light serif, the live camera and the offices beside them */
.drawer { position: fixed; inset: 0; z-index: 79; overflow-y: auto; background: rgba(16, 24, 32, .97); opacity: 0; visibility: hidden; transition: opacity .8s var(--ease), visibility 0s linear .8s; }
.drawer.open { opacity: 1; visibility: visible; transition: opacity .8s var(--ease), visibility 0s; }
.dr-inner { min-height: 100%; width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; padding: 110px 0 56px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px clamp(32px, 6vw, 120px); align-items: center; }
.dr-links { list-style: none; margin: 0; padding: 0; columns: 2 260px; column-gap: 48px; }
.dr-links a { display: block; padding: 8px 0; font: 400 clamp(1.6rem, 2.6vw, 2.5rem)/1.25 var(--serif-display); letter-spacing: .01em; color: var(--ivory); transition: color .5s var(--ease), transform .8s var(--ease-out); }
.dr-links a:hover { color: var(--gold-2); transform: translateX(6px); }
.dr-side { display: grid; gap: 26px; align-content: center; padding-left: clamp(0px, 3vw, 48px); border-left: 1px solid var(--line); }
.dr-side .eyebrow { margin: 0 0 8px; }
.dr-side p { margin: 0 0 4px; color: var(--muted); }
.dr-side a { display: flex; align-items: center; min-height: 44px; color: var(--ivory); transition: color .5s var(--ease); }
.dr-side a:hover, .dr-live:hover { color: var(--gold-2); }
.dr-live { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; font: 500 .95rem/1 var(--sans); color: var(--ivory); transition: color .5s var(--ease); }
@media (max-width: 860px) { .dr-inner { grid-template-columns: minmax(0, 1fr); align-items: start; padding-top: 92px; } .dr-links { columns: 1; } .dr-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 26px; } }

/* loader */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--deep); display: grid; place-items: center; transition: opacity 1.2s var(--ease), visibility 1.2s; }
.loader.done { opacity: 0; visibility: hidden; }
.loader .mark { width: min(240px, 56vw); opacity: .92; }
.loader .bar { width: min(240px, 56vw); height: 1px; background: rgba(255, 255, 255, .14); margin-top: 26px; overflow: hidden; }
.loader .bar i { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .4s var(--ease); }

/* ride (hero) */
.ride { position: relative; height: 760vh; background: var(--deep); }
.ride .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.ride canvas, .ride .ride-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ride .shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, rgba(16, 24, 32, .5) 0%, rgba(16, 24, 32, 0) 24%, rgba(16, 24, 32, 0) 46%, rgba(16, 24, 32, .5) 72%, rgba(16, 24, 32, .8) 100%); }
/* phones: the copy sits low and centred over the brightest part of the aerial, so the shade rises higher behind it */
@media (max-width: 640px) { .ride .shade { background: linear-gradient(180deg, rgba(16, 24, 32, .45) 0%, rgba(16, 24, 32, 0) 20%, rgba(16, 24, 32, 0) 38%, rgba(16, 24, 32, .58) 62%, rgba(16, 24, 32, .86) 100%); } }
/* no orphan words: headlines, eyebrows and short copy wrap balanced */
.display, .eyebrow, .lede, h3, .av-line, .next p { text-wrap: balance; }
.chap { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(88px, 14vh, 160px); pointer-events: none; }
.chap > * { opacity: 0; transform: translateY(28px); filter: blur(10px); transition: opacity 1.1s var(--ease), transform 1.4s var(--ease-out), filter 1.1s var(--ease); }
.chap.on > * { opacity: 1; transform: none; filter: none; }
.chap.on > *:nth-child(2) { transition-delay: .12s; } .chap.on > *:nth-child(3) { transition-delay: .24s; }
.chap .display { text-shadow: 0 2px 40px rgba(16, 24, 32, .35); }
.chap .eyebrow { margin-bottom: 20px; } .chap .display + .lede { margin-top: 20px; }
.chap .lede, .chap .eyebrow { color: #fff; text-shadow: 0 1px 2px rgba(16, 24, 32, .55), 0 0 22px rgba(16, 24, 32, .55); }
.chap.top { bottom: auto; top: clamp(110px, 17vh, 190px); }
.chap.right { text-align: right; right: calc(var(--gutter) + 120px); }
.chap.right .lede { margin-left: auto; }
@media (max-width: 640px) { .chap.right { right: var(--gutter); } }
.chap .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; pointer-events: auto; }
.rail { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); display: grid; gap: 14px; }
.rail button { display: flex; align-items: center; justify-content: flex-end; gap: 12px; font: 500 .64rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .44); transition: color .5s; }
.rail button i { width: 18px; height: 1px; background: currentColor; transition: width .6s var(--ease-out), background .5s; }
.rail button.on { color: var(--text); } .rail button.on i { width: 44px; background: var(--gold); }
.cap { position: absolute; left: var(--gutter); bottom: 22px; font-size: .7rem; letter-spacing: .08em; color: rgba(255, 255, 255, .5); max-width: 60ch; }
.scrollcue { position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%); width: 1px; height: 54px; background: linear-gradient(var(--gold), transparent); animation: cue 2.4s var(--ease) infinite; transition: opacity .6s; }
@keyframes cue { 0% { transform: translateX(-50%) scaleY(0); transform-origin: top; } 50% { transform: translateX(-50%) scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: translateX(-50%) scaleY(0); transform-origin: bottom; } }
@media (max-width: 640px) { .rail { display: none; } .cap { right: var(--gutter); bottom: calc(16px + env(safe-area-inset-bottom)); font-size: .64rem; text-align: center; max-width: none; } .scrollcue { display: none; } .dial .ticks span:nth-child(even) { color: transparent; }
  /* phones: the hero copy centred, and it fades and rises without the blur (a blur filter per frame stutters on phones) */
  .chap, .chap.right { bottom: calc(128px + env(safe-area-inset-bottom)); text-align: center; } .chap .lede, .chap.right .lede { margin-inline: auto; } .chap .actions { justify-content: center; }
  .chap > * { filter: none; transform: translateY(18px); transition: opacity .9s var(--ease), transform 1.1s var(--ease-out); will-change: opacity, transform; } .chap.on > * { transform: none; } }

/* section scaffolding */
section { position: relative; }
.sec { padding: clamp(96px, 16vh, 200px) 0; }
.sec-head { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: 32px 64px; align-items: end; margin-bottom: clamp(40px, 7vh, 88px); }
.sec-head .eyebrow { grid-column: 1 / -1; }
@media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; } }
.light { background: var(--ivory); color: var(--ink); }
/* the ivory sections take ink text: the dark theme's ivory lede and pale gold eyebrow vanish on ivory */
:is(.light, .orbit, .towers, .loc, .grp, .jr) :is(.lede, .muted) { color: rgba(0, 48, 87, .68); }
:is(.light, .orbit, .towers, .loc, .grp, .jr) .eyebrow { color: #1d4289; }
:is(.light, .orbit, .towers, .loc, .grp, .jr) .btn.ghost { color: var(--ink); --b: rgba(0, 48, 87, .3); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
:is(.light, .orbit, .towers, .loc, .grp, .jr) .btn.ghost:hover { background: rgba(0, 48, 87, .06); }

/* quiet text links: small caps in gold with a hairline that draws out on hover */
.tlink { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; font: 500 .74rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-2); transition: color .6s var(--ease); }
.tlink::after { content: ""; width: 34px; height: 1px; background: currentColor; transition: width .9s var(--ease-out); }
.tlink:hover { color: var(--text); } .tlink:hover::after { width: 64px; }
:is(.light, .orbit, .towers, .loc, .grp, .jr) .tlink { color: #1d4289; }
:is(.light, .orbit, .towers, .loc, .grp, .jr) .tlink:hover { color: var(--ink); }
/* one quiet next step at the end of a section */
.next { display: flex; align-items: center; gap: 8px 36px; flex-wrap: wrap; margin-top: clamp(48px, 8vh, 96px); }
.next p { margin: 0; max-width: 52ch; color: var(--muted); font-size: 1rem; }
:is(.orbit, .towers, .loc, .grp, .jr) .next p { color: rgba(0, 48, 87, .68); }
.mq > .next { margin-top: 0; padding: clamp(28px, 4vh, 44px) 0 clamp(72px, 11vh, 130px); }
.muted { color: var(--muted); }

/* headline lines rise out of their own masks */
.ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.ln > span { display: block; transform: translateY(105%); transition: transform 1.3s var(--ease-out); }
.in .ln > span, .ln.in > span { transform: none; }
.in .ln:nth-child(2) > span { transition-delay: .09s; } .in .ln:nth-child(3) > span { transition-delay: .18s; }
.display[data-rv] { opacity: 1; transform: none; }
/* image curtains */
.tw-media, .am-card .img, .loc-media, .p3d-media { clip-path: inset(0 0 100% 0); transition: clip-path 1.6s var(--ease-out); }
.tw-media.in, .am-track.in .am-card .img, .loc-media.in, .p3d-media.in { clip-path: inset(0 0 0 0); }
/* page progress */
.prog { display: none; } /* the page progress bar was chrome the eye did not need: removed */

/* reveal */
[data-rv] { opacity: 0; transform: translateY(36px); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease-out); }
[data-rv].in { opacity: 1; transform: none; }
[data-rv="fade"] { transform: none; }
[data-rv="mask"] { clip-path: inset(100% 0 0 0); transform: none; opacity: 1; transition: clip-path 1.6s var(--ease-out); }
[data-rv="mask"].in { clip-path: inset(0 0 0 0); }

/* maquette */
.mq { background: radial-gradient(120% 90% at 50% 10%, #0b3c6e 0%, var(--navy) 40%, var(--deep) 100%); padding-top: clamp(72px, 11vh, 140px); }
/* availability anchor: the first thing after the flight, every figure from data/units.json */
.avail { margin-bottom: clamp(72px, 12vh, 150px); }
.avail .eyebrow { margin: 0 0 18px; }
.av-line { margin: 0; max-width: 24ch; font: 400 clamp(1.7rem, 3.2vw, 3.1rem)/1.18 var(--serif); letter-spacing: .02em; color: var(--text); }
.av-line .gold { font-variant-numeric: lining-nums; white-space: nowrap; }
.av-tw { margin: 22px 0 0; font-size: .95rem; color: var(--muted); }
.av-tw button { font: inherit; color: var(--text); border-bottom: 1px solid var(--line); padding: 10px 0 2px; transition: border-color .5s var(--ease), color .5s var(--ease); }
.av-tw button:hover { color: var(--gold-2); border-color: var(--gold); }
.mq-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 0; height: min(92vh, 980px); min-height: 640px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mq-zoom { position: absolute; left: 20px; bottom: 52px; display: grid; gap: 8px; z-index: 2; }
.mq-zoom button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(16, 24, 32, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 300 1.4rem/1 var(--sans); color: var(--text); transition: background .3s; }
.mq-zoom button:hover { background: rgba(255, 255, 255, .12); }
.mq-zoom button { display: grid; place-items: center; }
.mq-zoom button[aria-pressed="true"] { color: var(--ink); background: var(--gold); border-color: var(--gold); }
@media (max-width: 640px) { .mq-zoom { left: 12px; bottom: 44px; } }
.mq-view { position: relative; overflow: hidden; touch-action: pan-y; background: radial-gradient(90% 70% at 50% 30%, rgba(30, 64, 120, .0), rgba(2, 6, 16, 0)); transition: background 1.2s var(--ease); }
.mq-view.night { background: radial-gradient(90% 70% at 50% 30%, rgba(4, 10, 26, .55), rgba(2, 6, 16, .85)); }
.mq-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
.mq-view canvas:active { cursor: grabbing; }
.mq-hud { position: absolute; left: 20px; top: 20px; right: 20px; display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none; }
.mq-hud > * { pointer-events: auto; }
.chip { min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(16, 24, 32, .42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font: 500 .68rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); transition: all .4s var(--ease); display: inline-flex; align-items: center; gap: 8px; }
.chip:hover { color: var(--text); border-color: rgba(255, 255, 255, .4); }
.chip.on { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mq-tip { position: absolute; z-index: 3; pointer-events: none; transform: translate(-50%, calc(-100% - 14px)); background: rgba(16, 24, 32, .86); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font-size: .8rem; line-height: 1.35; white-space: nowrap; opacity: 0; transition: opacity .25s; }
.mq-tip.on { opacity: 1; }
@media (hover: none) { .mq-tip { display: none; } } /* a hover tooltip has no place on a touch screen; the tap opens the sheet */
.mq-tip b { font: 400 1rem/1.2 var(--serif); letter-spacing: .06em; display: block; color: var(--gold-2); }
.mq-ruler { position: absolute; right: 18px; top: 74px; bottom: 74px; width: 54px; display: flex; flex-direction: column-reverse; justify-content: space-between; align-items: center; padding: 10px 0; border-radius: 999px; background: rgba(16, 24, 32, .38); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.mq-ruler button { font: 500 .66rem/1 var(--sans); letter-spacing: .06em; color: rgba(255, 255, 255, .5); width: 40px; height: 22px; border-radius: 999px; transition: all .3s; }
.mq-ruler button:hover { color: var(--text); }
.mq-ruler button.on { background: var(--gold); color: var(--ink); }
.mq-ruler .lbl { font-size: .54rem; letter-spacing: .2em; color: var(--gold-2); writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; }
.mq-legend { position: absolute; left: 20px; bottom: 18px; display: flex; gap: 18px; flex-wrap: wrap; font-size: .7rem; letter-spacing: .08em; color: rgba(255, 255, 255, .6); pointer-events: none; }
.mq-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: -1px; }
.mq-side { display: flex; flex-direction: column; border-left: 1px solid var(--line); background: rgba(16, 24, 32, .5); min-height: 0; }
.mq-side .top { padding: 22px 24px 14px; border-bottom: 1px solid var(--line); }
.mq-side .count { font: 400 2.4rem/1 var(--serif); }
.mq-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.mq-filters .chip { min-height: 34px; padding: 0 12px; font-size: .62rem; }
@media (max-width: 640px) { .mq-filters .chip, #shortlistChip { min-height: 44px; } }
.price-range { margin-top: 14px; display: grid; gap: 6px; font-size: .78rem; color: var(--muted); }
.price-range input { width: 100%; height: 44px; margin: 0; background: transparent; accent-color: var(--gold); -webkit-appearance: none; appearance: none; cursor: pointer; }
.price-range input::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(var(--gold), var(--gold)) 0 0 / var(--v, 100%) 100% no-repeat, rgba(255, 255, 255, .2); }
.price-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%; background: var(--gold); border: 0; box-shadow: 0 0 0 6px rgba(171, 152, 104, .16); }
.price-range input::-moz-range-track { height: 2px; background: rgba(255, 255, 255, .2); }
.price-range input::-moz-range-progress { height: 2px; background: var(--gold); }
.price-range input::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--gold); }
/* fingers: the slider is driven by a clear sideways drag only (main.js), so a vertical swipe on it scrolls the page */
.touch .price-range { touch-action: pan-y; }
.touch .price-range input { pointer-events: none; }
.list { overflow: auto; flex: 1; min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(245,241,234,.2) transparent; }
.card { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; width: 100%; text-align: left; padding: 14px 24px; border-bottom: 1px solid rgba(255, 255, 255, .08); transition: background .35s; }
.card:hover, .card.on { background: rgba(171, 152, 104, .1); }
.card .no { font: 400 1.35rem/1 var(--serif); color: var(--gold-2); }
.card .t { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: block; }
.card .n { font-size: .95rem; display: block; }
.card .p { font: 400 .95rem/1.2 var(--serif); text-align: right; white-space: nowrap; }
.card .p small { display: block; font: 400 .62rem/1.4 var(--sans); letter-spacing: .14em; color: var(--muted); }
.card.dim { opacity: .35; }
.card.fav .no::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-left: 6px; vertical-align: 6px; }
.src { font-size: .68rem; color: rgba(255, 255, 255, .62); padding: 12px 24px; border-top: 1px solid var(--line); }
.more-btn { width: 100%; min-height: 52px; border-top: 1px solid var(--line); font: 500 .72rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); transition: background .35s; }
.more-btn:hover { background: rgba(171, 152, 104, .08); }
@media (min-width: 1081px) { .more-btn { display: none; } }
@media (max-width: 1080px) {
  .mq-grid { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .mq-view { height: 72vh; min-height: 460px; }
  .mq-side { border-left: 0; border-top: 1px solid var(--line); }
  /* below the model the list flows with the page (an inner scroller traps the finger); it opens six at a time */
  .list { overflow: visible; flex: none; }
  .list.clip .card.more { display: none; }
}
body.sheet-open .pv { opacity: 0; }
.pv { transition: opacity .4s, transform .7s var(--ease-out); }
/* phones: the chip row sits below the returning header (the brand pill covered "All towers" and a tap on it jumped to the top),
   and the controls go quiet: glass chips with a hairline, the chosen one in gold type rather than a gold slab */
@media (max-width: 640px) {
  .mq-view .mq-hud { top: 74px; } .mq-view .mq-ruler { top: 130px; }
  .mq-view .mq-hud .chip { background: rgba(16, 24, 32, .3); border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .72); }
  .mq-view .mq-hud .chip.on { background: rgba(16, 24, 32, .5); border-color: var(--gold); color: var(--gold-2); }
  .mq-ruler.idle { display: none; }
  .mq-zoom button { background: rgba(16, 24, 32, .3); border-color: rgba(255, 255, 255, .16); }
}
@media (max-width: 640px) { .mq-ruler { top: 68px; bottom: 56px; width: 48px; right: 10px; justify-content: flex-start; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; } .mq-ruler::-webkit-scrollbar { display: none; } .mq-ruler button { height: 32px; flex: none; } .mq-hud { left: 0; right: 0; top: 12px; padding: 0 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .mq-hud::-webkit-scrollbar { display: none; } .mq-hud .chip { flex: none; min-height: 44px; padding: 0 14px; font-size: .62rem; } .mq-legend { left: 12px; bottom: 12px; gap: 10px; } .card { padding: 14px 16px; grid-template-columns: 52px 1fr auto; } .mq-side .top { padding: 18px 16px 12px; } }

/* unit sheet */
.sheet { position: fixed; z-index: 85; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: rgba(8, 18, 40, .97); border-left: 1px solid var(--line); transform: translateX(104%); transition: transform .9s var(--ease-out); display: flex; flex-direction: column; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.sheet.open { transform: none; }
.sheet .bar { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.sheet .x { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background .4s; }
.sheet .x:hover { background: rgba(255, 255, 255, .08); }
.sheet .body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 26px 26px 40px; overscroll-behavior: contain; }
/* the sheet's primary action stays in reach while the plan and details scroll */
.sheet .foot { flex: none; padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(8, 18, 40, .98); }
.sheet .foot .btn { width: 100%; justify-content: center; }
.sheet .plan { background: #fff; border-radius: 10px; overflow: hidden; cursor: zoom-in; }
.sheet .view { position: relative; margin: 0 0 14px; border-radius: 10px; overflow: hidden; cursor: zoom-in; }
.sheet .view img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sheet .view figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 12px; background: linear-gradient(transparent, rgba(16, 24, 32, .8)); font-size: .78rem; color: rgba(255, 255, 255, .85); }
.sheet .view figcaption .eyebrow { display: block; margin-bottom: 4px; }
.pin { position: absolute; transform: translate(-50%, -100%); pointer-events: none; z-index: 2; }
.pin b { display: block; font: 400 1rem/1 var(--serif); letter-spacing: .1em; color: var(--ink); background: var(--gold-2); padding: 8px 12px; border-radius: 999px; box-shadow: 0 6px 30px rgba(255, 255, 255, .45); }
.pin i { display: block; width: 1px; height: 34px; margin: 0 auto; background: linear-gradient(var(--gold-2), rgba(255, 255, 255, 0)); }
.sheet .facts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line); border-radius: 12px; margin: 22px 0; }
.sheet .facts div { padding: 14px 16px; border-right: 1px solid var(--line); }
.sheet .facts div:last-child { border-right: 0; }
.sheet .facts b { display: block; font: 400 1.5rem/1.1 var(--serif); }
.sheet .facts span { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sheet .price { font: 400 clamp(2rem, 5vw, 2.6rem)/1.05 var(--serif); }
.sheet .price small { font: 500 .72rem/1 var(--sans); letter-spacing: .18em; color: var(--gold-2); margin-left: 8px; }
.sheet .acts { display: grid; justify-items: start; gap: 0; margin-top: 18px; }
.sheet .acts .pair { display: flex; flex-wrap: wrap; gap: 0 36px; }
.sheet .thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 22px; }
.sheet .thumbs img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; cursor: zoom-in; }
.sheet ul.feat { columns: 2; padding: 0; list-style: none; font-size: .86rem; color: var(--muted); margin: 18px 0 0; }
.sheet ul.feat li { break-inside: avoid; padding: 4px 0 4px 16px; position: relative; }
.sheet ul.feat li::before { content: ""; position: absolute; left: 0; top: 13px; width: 6px; height: 1px; background: var(--gold); }
@media (max-width: 640px) { .sheet { top: auto; height: 64svh; width: 100%; border-left: 0; border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; transform: translateY(104%); } .sheet .body { padding: 20px 18px 28px; } .sheet .foot { padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); } .sheet ul.feat { columns: 1; } }
.scrim { position: fixed; inset: 0; z-index: 84; background: rgba(16, 24, 32, .5); opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; }
.scrim.on { opacity: 1; visibility: visible; }
@media (max-width: 640px) { .scrim { background: rgba(16, 24, 32, .22); } }

/* hour (sun path) */
.hour { background: var(--deep); }
.hour .frame { position: relative; aspect-ratio: 16 / 9; max-height: 86vh; width: 100%; overflow: hidden; border-radius: 0; }
.hour canvas { width: 100%; height: 100%; }
.hour .clock { position: absolute; right: var(--gutter); top: clamp(24px, 6vh, 64px); font: 400 clamp(3rem, 11vw, 10rem)/1 var(--serif); letter-spacing: .02em; color: rgba(255, 255, 255, .92); text-shadow: 0 4px 60px rgba(16, 24, 32, .4); font-variant-numeric: tabular-nums; }
.dial { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(18px, 4vh, 40px); height: 64px; touch-action: none; cursor: ew-resize; }
.dial .track { position: absolute; left: 0; right: 0; top: 30px; height: 1px; background: rgba(255, 255, 255, .3); }
.dial .ticks { position: absolute; inset: 0; display: flex; justify-content: space-between; }
.dial .ticks span { position: relative; font-size: .64rem; letter-spacing: .14em; color: rgba(255, 255, 255, .7); padding-top: 42px; }
.dial .ticks span::before { content: ""; position: absolute; top: 24px; left: 50%; width: 1px; height: 12px; background: rgba(255, 255, 255, .5); }
.dial .knob { position: absolute; top: 14px; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 8px rgba(171, 152, 104, .18), 0 0 40px rgba(255, 255, 255, .6); }
@media (max-width: 640px) { .hour .frame { aspect-ratio: 4 / 5; } }

/* orbit */
.orbit { background: var(--ivory); color: var(--ink); }
.orbit .frame { position: relative; aspect-ratio: 16 / 9; width: 100%; max-height: 88vh; overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.orbit .frame:active { cursor: grabbing; }
.orbit canvas { width: 100%; height: 100%; }
.tag { position: absolute; transform: translate(-50%, -100%); pointer-events: none; text-align: center; transition: opacity .3s; }
.tag b { display: block; font: 400 .8rem/1 var(--serif); letter-spacing: .22em; text-transform: uppercase; color: #fff; background: rgba(0, 48, 87, .55); padding: 8px 12px; border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap; }
.tag i { display: block; width: 1px; height: 28px; margin: 0 auto; background: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,0)); }
.drag-hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; font: 500 .66rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #fff; background: rgba(0, 48, 87, .5); padding: 12px 18px; border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none; transition: opacity .6s; }
@media (max-width: 640px) { .orbit .frame { aspect-ratio: 4 / 5; } }
/* screens wider than 16:9 (1920x1080 and up to 3440x1440): the 16:9 hour and 360 frames keep their whole picture, crowns
   included, at 88 % of the screen height, centred on their section's own band, instead of a cover crop into 2.4:1 */
@media (min-aspect-ratio: 16 / 9) and (min-width: 1100px) {
  .hour .frame, .orbit .frame { width: min(100%, calc(88vh * 16 / 9)); max-height: none; margin-inline: auto; border-radius: 2px; }
}

/* towers */
.towers { background: var(--ivory); color: var(--ink); }
.tw { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 88px); align-items: center; padding: clamp(40px, 8vh, 100px) 0; border-top: 1px solid rgba(0, 48, 87, .12); }
.tw:nth-child(even) .tw-media { order: 2; }
.tw-fig { position: relative; }
.tw-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; }
.tw-inset { position: absolute; width: 40%; aspect-ratio: 4 / 5; right: -7%; bottom: -9%; border: 8px solid var(--ivory); border-radius: 4px; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 48, 87, .18); }
.tw-inset img { width: 100%; height: 100%; object-fit: cover; }
.tw:nth-child(even) .tw-fig { order: 2; } .tw:nth-child(even) .tw-inset { right: auto; left: -7%; }
@media (max-width: 860px) { .tw-inset { width: 36%; right: 4%; bottom: -10%; } .tw:nth-child(even) .tw-inset { left: auto; right: 4%; } .tw:nth-child(even) .tw-fig { order: 0; } .tw-fig { margin-bottom: 30px; } }
.tw-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 2.4s var(--ease-out); }
.tw-media.in img { transform: scale(1); }
.tw-media .lbl { position: absolute; left: 16px; bottom: 14px; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.tw .stats { display: flex; gap: 36px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(0, 48, 87, .12); flex-wrap: wrap; }
.tw .stats b { display: block; font: 400 2.2rem/1 var(--serif); }
.tw .stats span { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(0, 48, 87, .6); }
.tw .logo { height: 54px; width: auto; margin-bottom: 22px; }
@media (max-width: 860px) { .tw { grid-template-columns: 1fr; } .tw:nth-child(even) .tw-media { order: 0; } .tw-media { aspect-ratio: 4 / 3; } }

/* Cavalli x Leptos: one image-led spread, a single line of copy per image */
.spread { background: var(--deep); padding-bottom: clamp(96px, 16vh, 200px); }
.sp-open { position: relative; margin: 0; height: min(94vh, 1180px); min-height: 520px; overflow: hidden; background: #002a4c; }
.sp-open img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 3.6s var(--ease-out); }
.sp-open.in img { transform: none; }
.sp-open::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(16, 24, 32, .42) 0%, rgba(16, 24, 32, 0) 24%, rgba(16, 24, 32, .18) 44%, rgba(16, 24, 32, .86) 100%); }
.sp-title { position: absolute; z-index: 1; left: 0; right: 0; bottom: clamp(44px, 9vh, 110px); width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.sp-title .eyebrow { margin: 0 0 22px; color: rgba(255, 255, 255, .94); }
.sp-title :is(.eyebrow, .display, .sp-cap) { text-shadow: 0 1px 2px rgba(16, 24, 32, .5), 0 0 28px rgba(16, 24, 32, .55); }
@media (max-width: 640px) { .sp-open::after { background: linear-gradient(180deg, rgba(16, 24, 32, .4) 0%, rgba(16, 24, 32, 0) 22%, rgba(16, 24, 32, .25) 40%, rgba(16, 24, 32, .88) 78%, rgba(16, 24, 32, .94) 100%); } }
.sp-cap { margin: 26px 0 0; color: rgba(255, 255, 255, .82); font-size: .95rem; max-width: 46ch; }
.sp-intro { padding: clamp(72px, 12vh, 150px) 0 clamp(48px, 8vh, 100px); }
.sp-intro .lede { max-width: 50ch; font-size: clamp(1.2rem, 1.8vw, 1.75rem); line-height: 1.55; color: rgba(255, 255, 255, .86); }
.sp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 56px); align-items: start; }
.sp-grid figure { margin: 0; }
.sp-grid .im { overflow: hidden; border-radius: 2px; background: #002a4c; }
.sp-grid img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 2.8s var(--ease-out); }
.sp-grid figure.in img { transform: none; }
.sp-grid .sp-a { grid-column: 1 / span 7; } .sp-a .im { aspect-ratio: 16 / 10; }
.sp-grid .sp-b { grid-column: 9 / span 4; margin-top: clamp(96px, 18vh, 240px); } .sp-b .im { aspect-ratio: 4 / 5; }
.sp-grid .sp-c { grid-column: 2 / span 8; margin-top: clamp(40px, 6vh, 80px); } .sp-c .im { aspect-ratio: 16 / 9; }
.sp-grid figcaption { margin-top: 18px; font-size: .95rem; line-height: 1.55; color: var(--muted); max-width: 42ch; }
.sp-grid figcaption span { display: block; margin-bottom: 8px; font: 500 .7rem/1.2 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-2); }
@media (max-width: 860px) {
  .sp-grid { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .sp-grid .sp-a, .sp-grid .sp-b, .sp-grid .sp-c { grid-column: auto; margin-top: 0; }
  .sp-grid .sp-b { width: 78%; margin-left: auto; }
  .sp-open { height: 86svh; }
}

/* amenities */
.am { background: var(--navy); overflow: hidden; }
.am-track { display: flex; gap: clamp(14px, 2vw, 28px); padding: 0 var(--gutter); scroll-padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.am-track::-webkit-scrollbar { display: none; }
.am-card { flex: 0 0 clamp(280px, 34vw, 520px); scroll-snap-align: start; }
.am-card .img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; position: relative; }
.am-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); }
.am-card:hover img { transform: scale(1.04); }
.am-card .fig { font: 400 clamp(2.2rem, 3.4vw, 3.4rem)/1 var(--serif); margin: 22px 0 6px; color: var(--gold-2); }
.am-card h3 { font: 500 .8rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; margin: 0 0 8px; }
.am-card p { color: var(--muted); font-size: .95rem; max-width: 38ch; }
.am-card .lbl { position: absolute; left: 14px; bottom: 12px; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .86); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.am-ctrl { display: flex; gap: 10px; margin-top: 32px; }
.am-ctrl button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background .4s; }
.am-ctrl button:hover { background: rgba(255, 255, 255, .08); }
.am-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; margin-top: clamp(48px, 8vh, 96px); border-top: 1px solid var(--line); }
.am-list div { padding: 22px 0; border-bottom: 1px solid var(--line); font-size: .92rem; color: var(--muted); }
.am-list div b { color: var(--text); font-weight: 500; display: block; letter-spacing: .04em; }

/* full-bleed openers: a section opens on one picture, which settles slowly as it arrives */
.sec.has-opener { padding-top: 0; }
.opener { position: relative; margin: 0 0 clamp(72px, 12vh, 150px); height: min(84vh, 1100px); min-height: 420px; overflow: hidden; background: #002a4c; }
.opener img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 3.6s var(--ease-out); }
.opener.in img { transform: none; }
.opener figcaption { position: absolute; left: var(--gutter); bottom: 16px; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .82); text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
@media (max-width: 640px) { .opener { height: 64svh; min-height: 360px; } }

/* residency and investment */
.res { background: var(--navy); }
.res-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(32px, 4vw, 80px); }
.res-grid h3 { margin: 0 0 18px; font: 400 clamp(1.3rem, 1.7vw, 1.7rem)/1.2 var(--serif); letter-spacing: .05em; text-transform: uppercase; }
.res-grid p { color: var(--muted); max-width: 46ch; margin-bottom: 12px; }
.res-note { margin: clamp(48px, 7vh, 80px) 0 0; font-size: .78rem; color: rgba(255, 255, 255, .52); }
@media (max-width: 860px) { .res-grid { grid-template-columns: minmax(0, 1fr); } }

/* location */
.loc { background: var(--ivory); color: var(--ink); }
.loc-addr .eyebrow { margin: 0 0 16px; }
.loc-addr .addr { margin: 0 0 22px; font: 400 clamp(1.5rem, 2.3vw, 2.2rem)/1.35 var(--serif); letter-spacing: .02em; }
.loc-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 5vw, 88px); align-items: stretch; }
.loc-media { position: relative; border-radius: 4px; overflow: hidden; min-height: 420px; }
.loc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dist { display: grid; }
.dist div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; padding: 20px 0; border-bottom: 1px solid rgba(0, 48, 87, .14); }
.dist b { font: 400 clamp(2rem, 3.6vw, 3.2rem)/1 var(--serif); }
.dist span { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(0, 48, 87, .66); }
.grp-acts { display: flex; gap: 8px 40px; flex-wrap: wrap; margin-top: 48px; }
@media (max-width: 860px) { .loc-grid { grid-template-columns: 1fr; } .loc-media { min-height: 0; aspect-ratio: 4 / 3; } }

/* gallery */
.gal { background: var(--deep); }
.gal-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.gal-tabs .chip { min-height: 44px; }
.gal-grid { columns: 3 320px; column-gap: 14px; }
.gal-grid figure { margin: 0 0 14px; break-inside: avoid; position: relative; overflow: hidden; border-radius: 4px; cursor: zoom-in; }
.gal-grid img { width: 100%; height: auto; transition: transform 1.4s var(--ease-out), filter .6s; }
.gal-grid figure:hover img { transform: scale(1.03); }
.gal-grid.clip figure.more { display: none; }
.gal-more { margin-top: 18px; }
.gal-grid figcaption { position: absolute; left: 12px; bottom: 10px; font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .86); text-shadow: 0 1px 8px rgba(0, 0, 0, .55); opacity: 0; transition: opacity .6s var(--ease); }
.gal-grid figure:hover figcaption { opacity: 1; }
@media (hover: none) { .gal-grid figcaption { opacity: 1; } }
.lb { position: fixed; inset: 0; z-index: 95; background: rgba(16, 24, 32, .96); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.lb.on { opacity: 1; visibility: visible; }
.lb img { max-width: 94vw; max-height: 86vh; object-fit: contain; border-radius: 4px; }
.lb .x { position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; }
.lb .cap2 { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; font-size: .72rem; letter-spacing: .12em; color: var(--muted); padding: 0 20px; }
.lb .nv { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; }
.lb .nv.p { left: 18px; } .lb .nv.n { right: 18px; }
.lb .x, .lb .nv, .livebox .x { transition: background .4s var(--ease), border-color .4s var(--ease); }
.lb .x:hover, .lb .nv:hover, .livebox .x:hover { background: rgba(255, 255, 255, .08); border-color: var(--gold); }

/* film */
.film { position: relative; height: 92vh; min-height: 520px; overflow: hidden; background: #000; }
.film video, .film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film .over { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 22px; background: radial-gradient(60% 60% at 50% 50%, rgba(5,14,34,.15), rgba(5,14,34,.6)); }
.play { width: 96px; height: 96px; border-radius: 50%; border: 1px solid rgba(245,241,234,.6); display: grid; place-items: center; margin: 0 auto; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .6s var(--ease-out), background .4s; }
.play:hover { transform: scale(1.06); background: rgba(245,241,234,.12); }

/* private 3D */
.p3d { background: linear-gradient(180deg, var(--deep), var(--navy)); overflow: hidden; }
.p3d-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 88px); align-items: center; }
.p3d-media { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; }
.p3d-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); }
.p3d-media .lock { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 12px; background: linear-gradient(180deg, rgba(5,14,34,.1), rgba(5,14,34,.72)); }
.p3d-media .lock svg { width: 36px; height: 36px; margin: 0 auto; }
.p3d ul { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 12px; }
.p3d li { padding-left: 22px; position: relative; color: var(--muted); }
.p3d li::before { content: ""; position: absolute; left: 0; top: 12px; width: 10px; height: 1px; background: var(--gold); }
.p3d .h2, .ct .h2 { font-size: clamp(2rem, 4vw, 4.2rem); }
@media (max-width: 860px) { .p3d-grid { grid-template-columns: 1fr; } }

/* forms */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form .full { grid-column: 1 / -1; }
.field { position: relative; }
/* 16px text in every field (iOS zooms into anything smaller) */
.field input, .field select, .field textarea { width: 100%; min-height: 56px; padding: 22px 16px 8px; background-color: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; color: var(--text); font: 400 16px/1.3 var(--sans); outline: none; transition: border-color .3s, background-color .3s; appearance: none; -webkit-appearance: none; }
.field textarea { min-height: 104px; resize: vertical; }
.field select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23e9d8ad' stroke-width='1.3'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; text-overflow: ellipsis; }
.field select option { color: #111; }
.field label { position: absolute; left: 17px; top: 8px; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); pointer-events: none; z-index: 1; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); background-color: rgba(255, 255, 255, .08); }
/* the dialling code of the chosen country sits inside the phone field */
.field .cc { position: absolute; z-index: 1; left: 17px; top: 23px; font: 400 16px/1.3 var(--sans); color: var(--gold-2); pointer-events: none; }
.field input::placeholder { color: rgba(255, 255, 255, .42); }
.field input[type="date"] { min-width: 0; }
.field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.85) sepia(.4); opacity: .8; }
.field [aria-invalid="true"] { border-color: #e0a37a; }
.field .err { grid-column: 1 / -1; display: block; margin-top: 6px; font-size: .78rem; color: #f0b88f; }
.form .note { font-size: .76rem; color: var(--muted); margin: 0; }
.form .note .link { color: var(--text); }
.addmsg-row { margin: -4px 0 0; }
.addmsg { font: 500 .72rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2); padding: 12px 0; }
.form .btn[type="submit"] { width: 100%; justify-content: center; min-height: 54px; }
/* the success state replaces the fields */
.form .ok { display: none; padding: 26px 24px; border: 1px solid var(--gold); border-radius: 12px; background: rgba(171, 152, 104, .07); outline: none; }
.form .ok h3 { margin: 0 0 10px; }
.form .ok p { color: var(--muted); margin: 0 0 12px; }
.form .ok p:last-of-type { margin-bottom: 18px; }
.form .ok .row { display: flex; gap: 10px; flex-wrap: wrap; }
.form.sent > :not(.ok) { display: none; }
.form.sent .ok { display: block; }
.light .field input, .light .field select, .light .field textarea { background: #fff; border-color: rgba(0, 48, 87, .16); color: var(--ink); }
.light .field label { color: rgba(0, 48, 87, .55); }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }

/* group */
.grp { background: var(--ivory); color: var(--ink); overflow: hidden; }
.grp-figs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(0,48,87,.14); border-bottom: 1px solid rgba(0,48,87,.14); margin: clamp(40px, 7vh, 80px) 0; }
.grp-figs div { padding: 28px 0 24px; border-right: 1px solid rgba(0,48,87,.14); padding-left: 24px; }
.grp-figs div:first-child { padding-left: 0; }
.grp-figs div:last-child { border-right: 0; }
.grp-figs b { display: block; font: 400 clamp(2.6rem, 6vw, 5.4rem)/1 var(--serif); }
.grp-figs span { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(0,48,87,.6); }
.timeline { display: flex; gap: 12px; overflow-x: auto; padding: 0 var(--gutter) 10px; scrollbar-width: none; }
.timeline::-webkit-scrollbar { display: none; }
.timeline figure { flex: 0 0 220px; margin: 0; }
.timeline img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; filter: grayscale(.25); }
.timeline figcaption { font-size: .74rem; margin-top: 8px; color: rgba(0,48,87,.7); }
.timeline figcaption b { font: 400 1rem/1 var(--serif); display: block; color: var(--ink); }
@media (max-width: 640px) { .grp-figs { grid-template-columns: 1fr; } .grp-figs div { border-right: 0; border-bottom: 1px solid rgba(0,48,87,.14); padding-left: 0; } .grp-figs div:last-child { border-bottom: 0; } }

/* journal + brochures */
.jr { background: var(--ivory); color: var(--ink); padding-top: 0; }
.jr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.jr-grid a { display: block; }
.jr-grid img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; margin-bottom: 14px; }
.jr-grid time { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(0,48,87,.55); }
.jr-grid h3 { font: 400 1.25rem/1.25 var(--serif); margin: 6px 0 0; letter-spacing: .02em; }
@media (max-width: 860px) { .jr-grid { grid-template-columns: 1fr; } }
.jr-news { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px clamp(32px, 5vw, 104px); align-items: start; }
.jr-lead { display: block; }
.jr-lead .im { overflow: hidden; border-radius: 2px; aspect-ratio: 16 / 10; margin-bottom: 20px; background: #e9e3d8; }
.jr-lead img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--ease-out); }
.jr-lead:hover img { transform: scale(1.03); }
.jr-lead h3 { margin: 10px 0 0; max-width: 34ch; font: 400 clamp(1.3rem, 2vw, 1.9rem)/1.28 var(--serif); letter-spacing: .02em; transition: color .5s var(--ease); }
.jr-lead:hover h3 { color: #1d4289; }
.jr time { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(0, 48, 87, .64); }
.jr-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0, 48, 87, .14); }
.jr-list li { border-bottom: 1px solid rgba(0, 48, 87, .14); }
.jr-list a { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: 6px 20px; align-items: baseline; padding: 20px 0; }
.jr-list a span { font: 400 1.08rem/1.38 var(--serif); letter-spacing: .02em; transition: color .5s var(--ease); }
.jr-list a:hover span { color: #1d4289; }
.jr-list li.all { border-bottom: 0; padding-top: 14px; }
.jr-list .tlink { display: inline-flex; padding: 0; }
.jr-press { margin-top: clamp(64px, 10vh, 120px); }
.jr-press ul { list-style: none; padding: 0; margin: 18px 0 24px; columns: 2 320px; column-gap: 56px; }
.jr-press li { break-inside: avoid; }
.jr-press li a { display: block; padding: 12px 0; border-bottom: 1px solid rgba(0, 48, 87, .1); transition: color .5s var(--ease); }
.jr-press li a:hover { color: #1d4289; }
@media (max-width: 860px) { .jr-news { grid-template-columns: minmax(0, 1fr); } .jr-list a { grid-template-columns: minmax(0, 1fr); } }

/* contact + footer */
.ct { background: var(--navy); }
.ct-grid { display: grid; grid-template-columns: 1fr 1.1fr; grid-template-areas: "head form" "info form"; gap: 30px clamp(28px, 5vw, 96px); align-items: start; }
.ct-head { grid-area: head; } .ct-info { grid-area: info; } .ct-form { grid-area: form; }
.ct-head .lede { margin: 22px 0 0; }
/* the developer, in brief, beside the form (Leptos Group facts as published) */
.trust { padding: 22px 0 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust .eyebrow { margin: 0; }
.t-figs { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: 14px clamp(20px, 3vw, 44px); margin: 16px 0 14px; }
.t-figs span { display: block; max-width: 13ch; margin-top: 6px; line-height: 1.5; }
.t-figs b { display: block; font: 400 clamp(1.8rem, 2.4vw, 2.3rem)/1 var(--serif); color: var(--gold-2); }
.t-figs span { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.t-award { margin: 0; font-size: .92rem; color: var(--muted); }
.offices { display: grid; gap: 26px; margin-top: 36px; }
.offices h4 { font: 500 .72rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); margin: 0 0 10px; }
.offices p { margin: 0; color: var(--muted); }
.offices a { color: var(--text); }
.social { display: flex; gap: 10px; margin-top: 30px; }
.social a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background .4s; }
.social a:hover { background: rgba(245,241,234,.08); }
.social img { width: 18px; height: 18px; filter: brightness(0) invert(1); opacity: .85; }
@media (max-width: 860px) { .ct-grid { grid-template-columns: 1fr; grid-template-areas: "head" "form" "info"; } }

/* phones: one quiet floating pill to the enquiry form; it appears after the flight and steps aside over the hero,
   an open sheet, the menu, a picture and the forms (fixed and transformed only: no layout shift) */
.enq-pill { display: none; }
@media (max-width: 640px) {
  .enq-pill { position: fixed; z-index: 83; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 30px;
    border-radius: 999px; background: rgba(0, 48, 87, .76); border: 1px solid rgba(171, 152, 104, .55); backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15);
    font: 500 .74rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; font-variant-caps: all-small-caps; color: var(--ivory);
    opacity: 0; visibility: hidden; transform: translate(-50%, 14px); transition: opacity .9s var(--ease), transform 1.1s var(--ease-out), visibility 0s linear 1.1s; }
  .enq-pill.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .9s var(--ease), transform 1.1s var(--ease-out), visibility 0s; }
  .enq-pill:active { background: rgba(0, 48, 87, .8); }
  body.pill-on .pv { opacity: 0; } /* one floating element at a time: the preview strip shows over the hero, the forms and the sheet's absence */
}
.direct { margin-top: 34px; display: grid; justify-items: start; }
.direct .eyebrow { margin: 0 0 6px; }
.direct a { display: inline-flex; align-items: center; min-height: 44px; font: 400 clamp(1.15rem, 1.6vw, 1.45rem)/1.2 var(--serif); letter-spacing: .02em; color: var(--text); transition: color .5s var(--ease); }
.direct a:hover { color: var(--gold-2); }
/* footer: the three offices, then the legal lines */
footer { background: var(--deep); padding: clamp(72px, 12vh, 140px) 0 calc(48px + env(safe-area-inset-bottom)); font-size: .8rem; color: rgba(255, 255, 255, .56); border-top: 1px solid rgba(255, 255, 255, .14); }
.ft-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 48px clamp(32px, 5vw, 96px); }
.ft-brand { display: grid; align-content: start; gap: 26px; }
.ft-brand img { height: 48px; width: auto; opacity: .92; }
.ft-brand .lep { height: 22px; opacity: .7; }
.ft-offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 56px); }
.ft-offices h4 { margin: 0 0 14px; font: 500 .68rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); }
.ft-offices p { margin: 0 0 8px; line-height: 1.7; }
.ft-offices a { display: flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, .82); transition: color .5s var(--ease); }
.ft-offices a:hover, .ft-legal a:hover { color: var(--gold-2); }
.ft-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 28px; margin-top: clamp(56px, 9vh, 100px); padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .12); }
.ft-legal a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, .74); transition: color .5s var(--ease); }
.ft-legal .hf { margin-left: auto; }
@media (max-width: 860px) { .ft-top { grid-template-columns: minmax(0, 1fr); } .ft-offices { grid-template-columns: minmax(0, 1fr); } .ft-legal .hf { margin-left: 0; } }
@media (max-width: 640px) { footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* ============================================================== round 2 (3 Nov): one rhythm, quieter type, fixes
   Later rules on purpose: they override the same selectors above. */

/* Cormorant Garamond, self-hosted (OFL, fonts/OFL_cormorant.txt): one Latin subset of the variable font, weights 300 to
   700, so every phone gets the same headline face as the desktop. */
@font-face { font-family: "Cormorant Garamond"; src: url(../fonts/cormorant-garamond-latin-var.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }

/* the header over ivory: ink type on a soft ivory veil */
.hdr.on-ivory { background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); }
.hdr.on-ivory .menu-btn, .hdr.on-ivory .hdr-enq { color: var(--ink); }
.hdr.on-ivory .hdr-enq { text-decoration-color: rgba(127, 98, 52, .7); }
.hdr.on-ivory .brand img { filter: brightness(0) saturate(100%) invert(10%) sepia(40%) saturate(2000%) hue-rotate(205deg); }

/* anchor jumps land below the header; the model's own anchor lands flush (the header steps away over it) */
main [id], footer [id] { scroll-margin-top: 92px; }
#mqView { scroll-margin-top: 0; }

/* one rhythm of backgrounds: navy for the hero, residences, hour and contact; ivory from the 360 through the Journal */
section.ivory { background: var(--ivory); color: var(--ink); --text: #003057; --muted: rgba(0, 48, 87, .7); --line: rgba(0, 48, 87, .14); --gold-2: #1d4289; }
section.ivory .btn.ghost { color: var(--ink); --b: rgba(0, 48, 87, .3); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
section.ivory .btn { color: var(--ivory); background: var(--navy); --b: var(--navy); }
section.ivory .btn:hover { background: var(--ink); }
section.ivory .sp-open .eyebrow, section.ivory .sp-title { --gold-2: #ffffff; color: var(--ivory); }
section.ivory .sp-title .display { color: var(--ivory); }
.hour { background: var(--navy); }
.sp-intro .lede { color: var(--text); }
.res-note { color: var(--muted); }
.spread { padding-bottom: clamp(96px, 16vh, 200px); }
section.ivory .p3d-media .lock .eyebrow { color: #ffffff; }

/* type: buttons, links and chips in sentence case; UI text at 12 px or more */
.tlink { font: 500 .95rem/1.2 var(--sans); letter-spacing: .02em; text-transform: none; }
.chip { font: 500 .8rem/1 var(--sans); letter-spacing: .02em; text-transform: none; }
.mq-filters .chip { font-size: .78rem; }
.card .t { font-size: .75rem; letter-spacing: .1em; }
.card .p small, .sheet .price small { font-size: .75rem; letter-spacing: .12em; }
.sheet .facts span, .src, .more-btn, .drag-hint, .ft-offices h4, .sp-grid figcaption span, .cap, .jr time { font-size: .75rem; }
.mq-ruler .lbl { font-size: .75rem; letter-spacing: .12em; }
.dial .ticks span { font-size: .75rem; letter-spacing: .08em; }
.field label { font-size: .75rem; letter-spacing: .1em; }
.lb .cap2, .timeline figcaption { font-size: .8rem; }
.mq-legend { font-size: .75rem; }

/* the hero: shorter (the same film, scrolled in 4.6 screens on desktop, 4 on phones), three chapters, a soft local
   shade behind the copy only (not a darker film), no rail */
.ride { height: 460vh; }
@media (max-width: 640px) { .ride { height: 400vh; } }
.rail { display: none; }
.chap::before { content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--gutter)); width: min(980px, 78%); top: -55%; bottom: -35%; pointer-events: none; background: radial-gradient(closest-side at 38% 50%, rgba(16, 24, 32, .6), rgba(16, 24, 32, .36) 55%, rgba(16, 24, 32, 0)); opacity: 0; transition: opacity 1.2s var(--ease); }
.chap .eyebrow, .chap .display { text-shadow: 0 1px 3px rgba(16, 24, 32, .6), 0 0 30px rgba(16, 24, 32, .5); }
.chap.on::before { opacity: 1; }
.chap { z-index: 1; } /* its own stacking context, so the shade sits above the film and below the copy */
.chap .h2 { max-width: 16ch; }
@media (max-width: 640px) { .chap::before { left: -12%; right: -12%; width: auto; background: radial-gradient(closest-side, rgba(16, 24, 32, .55), rgba(16, 24, 32, .32) 55%, rgba(16, 24, 32, 0)); } .chap .h2 { margin-inline: auto; } }

/* labels and the pin are placed by transform from the top left corner (no layout shift) */
.tag, .pin { left: 0; top: 0; will-change: transform; }

/* the model on phones: the chips back at the top (the header steps away over the model), a 44 px floor ruler that
   scrolls, a dark glass legend that reads over the white podium */
@media (max-width: 640px) {
  .mq-view .mq-hud { top: 12px; gap: 6px; } .mq-view .mq-hud .chip { padding: 0 12px; font-size: .78rem; }
  .mq-view .mq-ruler { top: 66px; }
  .mq-ruler button { height: 44px; }
}
.mq-legend { padding: 8px 12px; border-radius: 10px; background: rgba(16, 24, 32, .62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: rgba(255, 255, 255, .86); }
@media (max-width: 640px) { .mq-legend { right: 66px; } .mq-zoom { bottom: 96px; } }
.av-tw button { display: inline-flex; align-items: flex-end; min-height: 44px; }

/* the collection: three ways in, before the model */
.coll { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 40px); margin-bottom: clamp(72px, 12vh, 150px); }
.cc-card { display: block; }
.cc-card .im { overflow: hidden; aspect-ratio: 4 / 5; border-radius: 2px; background: #002a4c; margin-bottom: 18px; }
.cc-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 2.2s var(--ease-out); }
.cc-card:hover img { transform: scale(1.04); }
.cc-card h3 { margin: 0 0 6px; font: 400 clamp(1.3rem, 1.8vw, 1.8rem)/1.2 var(--serif-display); }
.cc-card p { margin: 0; color: var(--muted); }
.cc-card p span { color: var(--gold-2); font-family: var(--serif); }
@media (max-width: 860px) { .coll { grid-template-columns: minmax(0, 1fr); } .cc-card .im { aspect-ratio: 16 / 11; } }

/* the towers: the masterplan copy from the old hero chapters, and availability as a sentence */
.tw-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(32px, 5vw, 96px); padding-bottom: clamp(48px, 8vh, 96px); }
.tw-intro h3 { margin: 0 0 12px; font: 400 clamp(1.3rem, 1.9vw, 1.9rem)/1.2 var(--serif-display); }
.tw-intro p { color: var(--muted); }
.tw-avail { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 1.05rem; }
.tw-avail span { font-family: var(--serif); }
@media (max-width: 860px) { .tw-intro { grid-template-columns: minmax(0, 1fr); } }

/* Cavalli: within the margins below 1440 px; at 1440 and above the interiors run full bleed, two up, then one */
.sp-grid { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
@media (min-width: 1440px) {
  .sp-grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6px; row-gap: 6px; }
  .sp-grid .sp-a, .sp-grid .sp-b { grid-column: auto; margin-top: 0; }
  .sp-grid .sp-a .im, .sp-grid .sp-b .im { aspect-ratio: 4 / 3; }
  .sp-grid .sp-c { grid-column: 1 / -1; margin-top: 0; } .sp-grid .sp-c .im { aspect-ratio: 21 / 9; }
  .sp-grid figcaption { padding: 0 var(--gutter); margin: 18px 0 36px; }
}

/* amenities and location as prose */
.am-prose { margin: clamp(40px, 7vh, 80px) 0 0; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.6; color: var(--muted); }
.loc-prose { margin: 0; font: 400 clamp(1.3rem, 2vw, 1.9rem)/1.45 var(--serif-display); color: var(--text); max-width: 30ch; }
.loc-grid { align-items: start; }

/* brochures */
.bro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px clamp(32px, 5vw, 96px); align-items: start; }
.bro-cover { overflow: hidden; aspect-ratio: 4 / 5; border-radius: 2px; background: #e9e3d8; }
.bro-cover img { width: 100%; height: 100%; object-fit: cover; }
.bro-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin: 28px 0 40px; }
.bro-list .eyebrow { margin: 26px 0 10px; }
.bro-nos { display: flex; flex-wrap: wrap; gap: 4px; }
.bro-nos a { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; font: 400 .95rem/1 var(--serif); transition: border-color .5s var(--ease), color .5s var(--ease); }
.bro-nos a:hover { border-color: var(--gold-2); color: var(--gold-2); }
@media (max-width: 860px) { .bro-grid { grid-template-columns: minmax(0, 1fr); } .bro-cover { aspect-ratio: 16 / 10; } }

/* private 3D viewing on ivory, its request through the one form */
.p3d li { color: var(--muted); }

/* the trust line, once */
.t-line { margin: 12px 0 0; color: var(--muted); max-width: 52ch; }

/* the film: a quiet loading state while it is fetched */
.film-state { margin: 0; min-height: 1.4em; font-size: .9rem; color: rgba(255, 255, 255, .86); }
.film .over.loading .play { animation: breathe 1.6s var(--ease) infinite; }
@keyframes breathe { 50% { opacity: .45; } }

/* the viewer: one finger swipes step the set (pinch zoom stays) */
.lb { touch-action: pinch-zoom; }

/* footer: the logo link at 44 px, one credits line */
.ft-lep { display: inline-flex; align-items: center; min-height: 44px; }
.ft-credits { display: flex; flex-wrap: wrap; gap: 6px 28px; justify-content: space-between; margin-top: 18px; font-size: .78rem; color: rgba(255, 255, 255, .5); }

/* the Enquire pill: smaller and lower, a slow fade in when the visitor pauses, out as soon as they scroll */
@media (max-width: 640px) {
  .enq-pill { height: 40px; padding: 0 22px; bottom: calc(10px + env(safe-area-inset-bottom)); font-size: .75rem; transition: opacity .5s var(--ease), transform .7s var(--ease-out), visibility 0s linear .7s; }
  .enq-pill.on { transition: opacity .9s var(--ease), transform 1.1s var(--ease-out), visibility 0s; }
}

/* ============================================================== round 3 (3 Nov, phone-first audit) */
/* the pill at a full 44 px touch target (it only shows where nothing readable or tappable sits under it, see main.js) */
@media (max-width: 640px) { .enq-pill { height: 44px; } }

/* the gallery tabs on ivory: ink outlines, not the navy section's glass slabs */
.ivory .gal-tabs .chip { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: rgba(0, 48, 87, .28); color: var(--ink); }
.ivory .gal-tabs .chip:hover { border-color: rgba(0, 48, 87, .6); color: var(--ink); }
.ivory .gal-tabs .chip.on { background: var(--ink); border-color: var(--ink); color: var(--ivory); }

/* the tower labels on the 360: a quieter size on phones; overlapping labels stack, with a longer leader line */
@media (max-width: 640px) { .tag b { font-size: .7rem; letter-spacing: .16em; padding: 7px 10px; } }

/* the loader never swallows a tap while it fades */
.loader.done { pointer-events: none; }

/* the menu covers the hero completely */
.drawer { background: rgb(5, 14, 34); }

/* the hour clock keeps its left edge as the minutes change (no layout shift) */
.hour .clock { width: 3.4em; text-align: left; white-space: nowrap; }

/* residency card headings in sentence case, like every other card */
.res-grid h3 { font-family: var(--serif-display); letter-spacing: .005em; text-transform: none; }

/* the list when a tower or a filter has nothing for sale */
.list-empty { margin: 0; padding: 22px 20px; color: var(--muted); }
.list-empty .tlink { margin-left: 10px; }

/* the Cavalli Tower mark at its own pixel size (only a 74 x 47 file is published; larger it turns jagged) */
#tw-cavalli .logo { height: 47px; }

/* "Add a message": a full touch target */
.addmsg { min-height: 44px; min-width: 132px; font-size: .8rem; }

/* a date never breaks from its month */
.av-tw { text-wrap: pretty; }

/* ============================================================== round 4 (3 Nov, his phone review) */
/* the hero: more scroll for the same film (the curve in main.js gives the rushing seconds the most), the promise over
   the sky from the first frame */
/* round 8 (3 Nov 15:55): the last 16 % of the scroll holds the sunset frame (main.js END) */
.ride { height: 740vh; }
@media (max-width: 640px) { .ride { height: 740vh; } }
.chap.riviera { top: clamp(104px, 15vh, 170px); bottom: auto; }
.chap.riviera .display { font-size: clamp(2.1rem, 4.8vw, 5rem); line-height: 1.04; letter-spacing: .01em; max-width: 13ch; }
.chap.riviera::before { top: -45%; bottom: -45%; }
@media (max-width: 640px) { .chap.riviera { top: calc(84px + env(safe-area-inset-top)); } .chap.riviera .display { margin-inline: auto; font-size: 2.35rem; } }

/* the residences straight after the film: the price anchor beside the headline */
.mq-intro .av-line { font-size: clamp(1.5rem, 2.4vw, 2.3rem); }
.mq-intro .av-tw { margin: 12px 0 0; color: var(--muted); font-size: .95rem; }
.mq-intro .lede { margin: 18px 0 0; font-size: 1rem; }
.side-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.list-toggle { display: none; }
@media (max-width: 1080px) {
  .list-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; margin-top: 14px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; font: 500 .75rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2); transition: background .35s; }
  .list-toggle svg { transition: transform .5s var(--ease-out); }
  .mq-side.open .list-toggle svg { transform: rotate(180deg); }
  .mq-side:not(.open) .side-body { display: none; }
  .mq-side > .top { border-bottom: 0; }
}

/* Cavalli x Leptos: dark, tight, the living room full bleed */
.spread { padding-bottom: clamp(64px, 10vh, 120px); }
.sp-open .cv-logo { position: static; display: block; inset: auto; width: auto; height: 47px; margin: 0 0 22px; object-fit: contain; transform: none; transition: none; filter: brightness(0) invert(1); opacity: .94; }
.sp-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px clamp(32px, 5vw, 96px); padding: clamp(40px, 7vh, 84px) 0 clamp(32px, 5vh, 60px); }
.sp-body .lede { margin: 0; max-width: 44ch; font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.55; color: rgba(255, 255, 255, .9); }
.sp-body .muted { margin: 0; color: rgba(255, 255, 255, .66); }
.sp-avail { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 36px; margin: 8px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.sp-avail span { font-family: var(--serif); }
@media (max-width: 860px) { .sp-body { grid-template-columns: minmax(0, 1fr); } }

/* swipe rows: Cavalli interiors, the three towers (a finger swipes, a mouse drags) */
.sp-row, .tw-row { display: flex; gap: clamp(10px, 1.4vw, 22px); padding: 0 var(--gutter); scroll-padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
.sp-row::-webkit-scrollbar, .tw-row::-webkit-scrollbar { display: none; }
.sp-row.drag, .tw-row.drag { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
.sp-row.drag img, .tw-row.drag img { pointer-events: none; }
.sp-row figure { flex: 0 0 clamp(260px, 30vw, 520px); margin: 0; scroll-snap-align: start; }
.sp-row .im { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: #002a4c; }
.sp-row img { width: 100%; height: 100%; object-fit: cover; transition: transform 2.2s var(--ease-out); }
.sp-row figure:hover img { transform: scale(1.04); }
.sp-row figcaption { margin-top: 12px; font-size: .85rem; letter-spacing: .02em; color: rgba(255, 255, 255, .7); }
@media (max-width: 640px) { .sp-row figure { flex-basis: 76vw; } }

.tw-row { padding-top: clamp(44px, 8vh, 96px); }
.tw-card { position: relative; flex: 0 0 min(86vw, 520px); aspect-ratio: 3 / 4.3; overflow: hidden; border-radius: 4px; background: #002a4c; scroll-snap-align: start; color: #fff; --gold-2: #ffffff; --text: #fff; }
.tw-card .im { position: absolute; inset: 0; }
.tw-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: scale(1.04); transform-origin: 50% 0; transition: transform 2.4s var(--ease-out); }
.tw-card:hover img { transform: scale(1.09); }
/* the words sit on a deep band, never on the facade (the tower keeps the top half) */
.tw-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(16, 24, 32, 0) 24%, rgba(16, 24, 32, .72) 50%, rgba(16, 24, 32, .95) 74%, rgb(5, 14, 34) 100%); }
.tw-card .tx { position: absolute; z-index: 1; left: clamp(20px, 2.4vw, 32px); right: clamp(20px, 2.4vw, 32px); bottom: clamp(20px, 2.4vw, 32px); }
.orbit .tw-card .eyebrow { margin: 0 0 12px; color: var(--gold-2); }
.tw-card h3 { margin: 0 0 12px; color: #fff; }
.tw-card p { margin: 0 0 12px; font-size: .92rem; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.tw-card .av { font-family: var(--serif); color: var(--gold-2); }
.orbit .tw-card .tlink { color: #fff; }
.orbit .tw-card .tlink:hover { color: var(--gold-2); }
@media (min-width: 1100px) { .tw-row { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; padding-inline: 0; overflow: visible; cursor: auto; } .tw-card { flex: 1 1 0; } }

/* amenities: the stage holds still while the scroll carries the cards sideways (main.js); the card at the centre is at
   full size and light */
.am { padding: 0; overflow: visible; }
.am-pin { position: relative; }
.am-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 3.4vh, 40px); }
.am-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px 24px; }
.am-head .eyebrow { grid-column: 1 / -1; margin: 0; }
.am-head .h2 { font-size: clamp(1.9rem, 3.6vw, 3.8rem); }
.am-count { margin: 0 0 6px; font-size: 1rem; letter-spacing: .12em; color: var(--muted); }
.am-count b { font-weight: 400; color: var(--gold-2); }
.am-stage .am-track { width: max-content; overflow: visible; scroll-snap-type: none; will-change: transform; }
.am-card { position: relative; flex: 0 0 clamp(300px, 44vw, 780px); height: min(60svh, 660px); overflow: hidden; border-radius: 4px; background: #002a4c; transform: scale(calc(.9 + .1 * var(--a, 1))); }
.am-card .img { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.am-card img { transform: translate3d(calc(var(--d, 0) * -14%), 0, 0) scale(1.2); transition: none; filter: brightness(calc(.5 + .5 * var(--a, 1))); }
.am-card:hover img { transform: translate3d(calc(var(--d, 0) * -14%), 0, 0) scale(1.2); }
.am-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(16, 24, 32, 0) 42%, rgba(16, 24, 32, .82) 100%); }
.am-card .tx { position: absolute; z-index: 1; left: clamp(20px, 2.4vw, 34px); right: clamp(20px, 2.4vw, 34px); bottom: clamp(18px, 2.4vw, 32px); opacity: calc(.25 + .75 * var(--a, 1)); }
.am-card .n { display: block; margin-bottom: 10px; font-size: .95rem; letter-spacing: .14em; color: var(--gold-2); }
.am-card h3 { color: #fff; }
.am-card p { margin: 0; color: rgba(255, 255, 255, .86); }
.am-bar { position: relative; height: 1px; background: var(--line); }
.am-bar i { position: absolute; inset: 0; background: var(--gold-2); transform-origin: left; transform: scaleX(.08); }
.am-after { padding: clamp(56px, 9vh, 110px) 0 clamp(80px, 13vh, 160px); }
.am-after .lede { margin: 0; max-width: 52ch; }
@media (max-width: 640px) { .am-card { flex-basis: 80vw; height: 56svh; } .am-head .h2 { font-size: 1.9rem; } }

/* the hour as a time-lapse film: on phones its own tall film fills the screen under the dial */
@media (max-width: 640px) { .hour .frame.tall { aspect-ratio: 9 / 16; max-height: 84svh; } }

/* full-width pictures drift slower than the page (main.js sets --par) */
[data-par] > img { transform: translate3d(0, var(--par, 0%), 0) scale(1.16); transition: none; will-change: transform; }
[data-par].in > img { transform: translate3d(0, var(--par, 0%), 0) scale(1.16); }

/* the gallery on phones: one swipe row of large pictures instead of twelve screens of grid */
@media (max-width: 640px) {
  .gal-grid { display: flex; columns: auto; gap: 10px; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter); scroll-padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .gal-grid::-webkit-scrollbar { display: none; }
  .gal-grid figure { flex: 0 0 82vw; margin: 0; aspect-ratio: 4 / 5; scroll-snap-align: start; }
  .gal-grid img { height: 100%; object-fit: cover; }
  .gal-grid figcaption { opacity: 1; }
}

/* ============================================================== round 5 (3 Nov): the Leptos brand + the motion layer */
/* the Leptos Estates mark beside the project's name (hero) and in the footer, at the book's ratio of 7.23 to one */
.lep-by { margin: 0 0 22px; }
.lep-by img { height: 18px; width: auto; display: inline-block; opacity: .96; }
@media (max-width: 640px) { .lep-by img { height: 16px; } }
.ft-lep .lep { height: 22px; width: auto; }
/* headings on white in navy, the overlines in royal blue (the book's recommended pairings) */
section.ivory .display { color: var(--navy); }
/* prices and figures in Inter light, tabular (no serif numerals, no gold text) */
.av-line, .card .no, .card .p, .sheet .price, .mq-side .count, .hour .clock { font-family: var(--sans); font-weight: 300; letter-spacing: -.01em; }
.hour .clock { font-weight: 200; }
.gold { color: #fff; }
section.ivory .gold { color: var(--navy); }

/* the scroll line: a gold hairline across the top (the brand's one accent, punctuating) */
.sprog { position: fixed; z-index: 85; left: 0; top: 0; width: 100%; height: 2px; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
/* the header turns to glass once the film is behind it */
.hdr { transition: transform .8s var(--ease-out), opacity .6s var(--ease), background .6s var(--ease), height .6s var(--ease-out), backdrop-filter .6s; }
.hdr.solid { height: 64px; background: rgba(0, 48, 87, .62); backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25); }
.hdr.solid.on-ivory { background: rgba(255, 255, 255, .74); }
.hdr.solid .brand img { height: 28px; }

/* overlines draw a short rule before the words */
.sec-head .eyebrow, .am-head .eyebrow, .sp-title .eyebrow { display: flex; align-items: center; gap: 14px; }
.sec-head .eyebrow::before, .am-head .eyebrow::before, .sp-title .eyebrow::before { content: ""; flex: none; width: 32px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.3s var(--ease-out) .15s; }
.sec-head .eyebrow.in::before, .am-head .eyebrow::before, .sp-title .eyebrow::before { transform: scaleX(1); }

/* every picture opens from a soft inset and settles from a slow zoom; rows cascade */
.rv-im { clip-path: inset(8% 6% 8% 6% round 6px); transition: clip-path 1.5s var(--ease-out) calc(var(--i, 0) * .09s); }
.rv-im.in { clip-path: inset(0 0 0 0 round 4px); }
.rv-im img { scale: 1.14; transition: scale 2.2s var(--ease-out) calc(var(--i, 0) * .09s), transform 2.4s var(--ease-out); }
.rv-im.in img { scale: 1; }
/* blocks of copy and cards rise into place */
.rv-up { opacity: 0; translate: 0 26px; transition: opacity 1.1s var(--ease) calc(var(--i, 0) * .08s), translate 1.3s var(--ease-out) calc(var(--i, 0) * .08s); }
.rv-up.in { opacity: 1; translate: 0 0; }
/* the story paragraphs light word by word as they are read */
[data-lit] { opacity: 1 !important; transform: none !important; }
[data-lit] .w { opacity: .2; transition: opacity .5s var(--ease); }
[data-lit] .w.on { opacity: 1; }

/* curtains: the opening picture holds still, full screen, while the page slides over it (it settles and dims as it is
   covered, main.js / motion.js set --cov) */
.curtain { --bgc: var(--ivory); }
#cavalli.curtain { --bgc: var(--deep); }
.curtain .opener, .curtain .sp-open { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; min-height: 0; margin-bottom: 0; }
.curtain .opener > img, .curtain .sp-open > img { transform: none; scale: calc(1.1 - .07 * var(--cov, 0)); filter: brightness(calc(1 - .42 * var(--cov, 0))); transition: none; }
.curtain > .wrap, .curtain > .sp-body { position: relative; z-index: 1; background: var(--bgc); box-shadow: 0 0 0 100vmax var(--bgc); clip-path: inset(0 -100vmax); padding-top: clamp(64px, 11vh, 140px); }
.curtain > .sp-row { position: relative; z-index: 1; background: var(--bgc); box-shadow: 0 0 0 1px var(--bgc); }
/* the title over a curtain picture lifts and fades before the page reaches it (never cut in half by the panel) */
.curtain .sp-title { opacity: clamp(0, 1 - var(--cov, 0) * 2.6, 1); translate: 0 calc(var(--cov, 0) * -60px); }

/* the L of the wordmark, cropped by the left edge of a divider picture, white at 16 per cent (the book's only use of it
   on photography); it drifts slower than the picture */
.lmark::after { content: ""; position: absolute; z-index: 1; left: -6%; bottom: -14%; width: 46%; aspect-ratio: 50 / 84.1; background: url(../brand/leptos-L-white.svg) no-repeat 0 100% / contain; opacity: .16; transform: translate3d(0, calc(var(--cov, 0) * -8%), 0); pointer-events: none; }
@media (max-width: 640px) { .lmark::after { width: 72%; left: -12%; } }

/* the diagonal rule (the angle of the wordmark) on navy sections, from the left edge in the section's opening space,
   never over words; it draws up as the section arrives */
.diag::before { content: ""; position: absolute; z-index: 0; left: 0; top: 0; width: 1px; height: clamp(64px, 10vh, 130px); background: rgba(255, 255, 255, .22); transform-origin: 0 100%; transform: skewX(-9.6deg) scaleY(var(--draw, 0)); pointer-events: none; }

/* a mouse: a fine ring that follows the pointer and opens with a word over what can be dragged, opened or played */
.cur { position: fixed; z-index: 140; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease); mix-blend-mode: difference; }
.cur.on { opacity: 1; }
.cur i { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border: 1px solid #fff; border-radius: 50%; transition: transform .5s var(--ease-out), background .4s var(--ease); }
.cur.act i { transform: scale(1.6); }
.cur.big i { transform: scale(2.6); background: #fff; }
.cur b { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font: 600 .62rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #000; white-space: nowrap; opacity: 0; transition: opacity .3s var(--ease); }
.cur.big b { opacity: 1; }
@media (pointer: coarse) { .cur { display: none; } }
.btn, .hdr-enq, .play { transition: background .5s var(--ease), color .5s var(--ease), transform .6s var(--ease-out); }

/* the residences list cascades in when it is opened */
@keyframes rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.mq-side.open .card { animation: rise .8s var(--ease-out) both; }
.mq-side.open .card:nth-child(2) { animation-delay: .04s; } .mq-side.open .card:nth-child(3) { animation-delay: .08s; } .mq-side.open .card:nth-child(4) { animation-delay: .12s; }
.mq-side.open .card:nth-child(5) { animation-delay: .16s; } .mq-side.open .card:nth-child(6) { animation-delay: .2s; } .mq-side.open .card:nth-child(n+7) { animation-delay: .24s; }

/* phones: the Location photo shows whole at its own shape (round 6), so it scrolls past instead of being covered from
   below (the curtain would hide the couple first) */
@media (max-width: 640px) { #location.curtain .opener { position: relative; } #location.curtain .opener > img { scale: 1; filter: none; } }

/* At home above the sea (the Blu Marine shoot): the Cavalli spread's layout on white */
.spread.life { background: var(--ivory); }
.life .sp-body .lede { color: var(--navy); }
.life .sp-row figcaption, .life .sp-avail span { color: rgba(0, 48, 87, .72); }
.life .sp-row .im { background: var(--stone); }

/* forms: the field line brightens on focus */
.field :is(input, select, textarea) { transition: border-color .5s var(--ease), background .5s var(--ease); }

/* ---- round 6 (3 Nov, his phone screen recording) ----
   phones: the sections sit closer (a thumb flick showed whole screens of empty navy and white between them), copy and
   pictures arrive while the thumb is still moving, and unlit words never read as disabled text */
[data-lit] .w { opacity: .36; }
@media (max-width: 640px) {
  .sec { padding: clamp(60px, 8.5vh, 84px) 0; }
  .sec-head { margin-bottom: 30px; }
  .spread { padding-bottom: 52px; }
  .next { margin-top: 34px; }
  .mq > .next { padding-bottom: 52px; }
  .am-after { padding: 40px 0 60px; }
  .curtain > .wrap, .curtain > .sp-body { padding-top: 50px; }
  .opener { margin-bottom: 50px; }
  .jr-press { margin-top: 50px; }
  footer { padding-top: 60px; }
  .ft-legal { margin-top: 44px; }
  .rv-up, [data-rv] { transition-duration: .7s, .8s; }
  .rv-im { transition-duration: .9s; }
  .rv-im img { transition-duration: 1.2s, 2.4s; }
  /* the hour: the clock sits on the water above the dial, clear of the tower tops */
  .hour .frame.tall .clock { top: auto; bottom: calc(clamp(18px, 4vh, 40px) + 70px); left: var(--gutter); right: auto; font-size: 3.4rem; }
  /* Location: the photograph exactly as shot, whole (the couple soft in the foreground, the marina sharp), never a tall cut */
  #location.curtain .opener { height: auto; aspect-ratio: 5504 / 3072; min-height: 0; }
  /* the brochure numbers: one swipe row per tower instead of two screens of buttons */
  .bro-nos { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .bro-nos::-webkit-scrollbar { display: none; }
  .bro-nos a { flex: none; }
}

/* ---- round 7 (3 Nov, his "i dont like the shadows", on the phone) ----
   the pictures stay bright: no dark cloud behind the hero copy, no heavy fades over the film, the openers and the
   cards, no dimming as a picture is covered. Copy over a picture keeps a tight edge shadow (no halo) and a short, light
   fade only where it sits. On phones the tower cards put their copy under the picture instead of over it. */
.chap::before { display: none; }
.chap .display, .chap .eyebrow, .chap .lede, .sp-title .display, .sp-title .eyebrow { text-shadow: 0 1px 2px rgba(16, 24, 32, .55), 0 2px 10px rgba(16, 24, 32, .3); }
.ride .shade { background: linear-gradient(180deg, rgba(16, 24, 32, .2) 0%, rgba(16, 24, 32, 0) 16%, rgba(16, 24, 32, 0) 56%, rgba(16, 24, 32, .34) 82%, rgba(16, 24, 32, .5) 100%); }
.sp-open::after { background: linear-gradient(180deg, rgba(16, 24, 32, .18) 0%, rgba(16, 24, 32, 0) 18%, rgba(16, 24, 32, 0) 52%, rgba(16, 24, 32, .5) 100%); }
.curtain .opener > img, .curtain .sp-open > img { filter: brightness(calc(1 - .1 * var(--cov, 0))); }
.am-card::after { background: linear-gradient(180deg, rgba(16, 24, 32, 0) 52%, rgba(16, 24, 32, .66) 100%); }
.am-card img { filter: brightness(calc(.8 + .2 * var(--a, 1))); }
.am-card .tx { text-shadow: 0 1px 2px rgba(16, 24, 32, .5); }
.film .over { background: radial-gradient(60% 60% at 50% 50%, rgba(5, 14, 34, 0), rgba(5, 14, 34, .3)); }
.p3d-media .lock { background: linear-gradient(180deg, rgba(5, 14, 34, 0) 40%, rgba(5, 14, 34, .42)); }
/* the tower cards' headline: the white section's navy display colour (section.ivory .display) made it navy on navy */
.orbit .tw-card .display { color: #fff; }
@media (max-width: 640px) {
  .ride .shade { background: linear-gradient(180deg, rgba(16, 24, 32, .22) 0%, rgba(16, 24, 32, 0) 15%, rgba(16, 24, 32, 0) 52%, rgba(16, 24, 32, .32) 78%, rgba(16, 24, 32, .5) 100%); }
  .sp-open::after { background: linear-gradient(180deg, rgba(16, 24, 32, .18) 0%, rgba(16, 24, 32, 0) 16%, rgba(16, 24, 32, 0) 50%, rgba(16, 24, 32, .55) 100%); }
  .tw-card { aspect-ratio: auto; display: flex; flex-direction: column; }
  .tw-card .im { position: relative; inset: auto; flex: none; aspect-ratio: 4 / 3.6; overflow: hidden; }
  .tw-card::after { display: none; }
  .tw-card .tx { position: relative; left: auto; right: auto; bottom: auto; padding: 22px 20px 26px; }
}

/* ============================================================== round 8 (3 Nov 15:55, his phone recording) */
/* the 360 holds still, its whole frame on screen, while the scroll takes the towers once around; the bar under it is
   the turn so far. Phones: a square cut of the 16:9 masters (wider than the old 4:5, room around the towers) */
.orbit-pin { position: relative; height: calc(100vh + 240vh); height: calc(100lvh + 240vh); }
.orbit-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.orbit-head { flex: none; }
.orbit-head .eyebrow { margin: 0 0 10px; }
.orbit-head .h2 { margin: 0 0 8px; }
.orbit-head .lede { margin: 0; max-width: 60ch; }
.orbit .orbit-stage .frame { aspect-ratio: 16 / 9; width: min(100%, calc((100svh - 250px) * 16 / 9)); max-height: none; margin: 0 auto; border-radius: 2px; }
.orbit-bar { width: min(220px, 46vw); height: 1px; background: rgba(0, 48, 87, .16); }
.orbit-bar i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 640px) {
  .orbit-pin { height: calc(100vh + 200vh); height: calc(100lvh + 200vh); }
  /* 16:45 "white empty space under it": the frame takes the height the heading leaves (a 4:5 cut of the square set) */
  .orbit .orbit-stage .frame { aspect-ratio: 4 / 5; width: min(100%, calc((100svh - 230px) * 4 / 5)); }
  .orbit-stage { gap: 14px; justify-content: center; padding-top: 10px; }
  .orbit.sec { padding-top: 0; }
  .orbit .tw-row { margin-top: 8px; }
}
/* his photographs: the stage holds still while the scroll carries the carousel sideways (main.js, photographs) */
/* 17:45 "it comes and leaves fast": each full-screen picture holds still for 40 % of a screen before the page slides
   over it (the margin scrolls while the sticky picture stays; --cov stays 0 until the body arrives) */
.curtain .opener, .curtain .sp-open { margin-bottom: 40vh; }
/* 18:00 (PC) "its too small on screen make the 3d on right with fade of the text on the left and make it full frame
   apply this principle wherever else is possible": the 360 fills the pinned screen, towers right of centre, the words
   on an ivory fade at the left; the hour fills the width, its words on the open sky at the right (its towers stand left
   of centre) over a light navy fade. Phones keep the stacked layout. */
@media (min-width: 900px) {
  .orbit-stage { display: block; }
  .orbit .orbit-stage .frame { position: absolute; top: 0; bottom: 0; left: 16%; right: 0; width: auto; aspect-ratio: auto; max-height: none; margin: 0; border-radius: 0; }
  .orbit-stage::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 54%; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--ivory) 0%, var(--ivory) 30%, transparent 100%); }
  .orbit-head { position: absolute; z-index: 2; left: var(--gutter); top: 50%; transform: translateY(-50%); width: min(30vw, 460px); margin: 0; }
  .orbit-bar { position: absolute; z-index: 2; left: var(--gutter); bottom: clamp(28px, 6vh, 60px); }
  .hour.sec { position: relative; padding-top: 0; }
  .hour-stage > .wrap { position: absolute; z-index: 3; top: clamp(90px, 16vh, 170px); right: var(--gutter); width: min(32vw, 500px); margin: 0; pointer-events: none; }
  .hour .sec-head { margin: 0; display: block; }
  .hour .sec-head .h2 { margin: 0 0 14px; font-size: clamp(2.2rem, 3.4vw, 3.6rem); }
  .hour .sec-head .lede { margin: 0; max-width: 30ch; }
  /* the hero (18:05): the logo at the left, centred on the screen height; "Europe's new Riviera" at the right */
  .hero-logo { display: block; width: clamp(190px, 15vw, 290px); height: auto; margin: 0 0 26px; filter: drop-shadow(0 1px 2px rgba(16, 24, 32, .45)); }
  .chap.name { top: 50%; bottom: auto; right: auto; transform: translateY(-50%); }
  .chap.name h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .chap.riviera { top: 50%; bottom: auto; left: auto; right: var(--gutter); transform: translateY(-50%); text-align: right; }
  .chap.riviera .display { margin-left: auto; }
  .hour .frame { width: 100%; max-height: none; margin: 0; border-radius: 0; }
  .hour .frame::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 50%; z-index: 1; pointer-events: none; background: linear-gradient(270deg, rgba(0, 32, 64, .55), rgba(0, 32, 64, .26) 45%, rgba(0, 32, 64, 0)); }
  .hour .dial, .hour .clock { z-index: 2; }
}
/* 18:25 (PC) "fade the image so it goes full frame ... both images" + "the explore in 3d ... on left and then on the
   right the image": the brochure picture runs to the left edge of the screen, the private 3D picture to the right
   edge, each whole and fading into the page on its inner side and softly at the top and bottom. The Riviera line:
   one quiet line at the right, level with the logo. */
@media (min-width: 900px) {
  :root { --bleed: calc((100vw - min(100vw - 2 * var(--gutter), var(--max))) / 2); }
  .bro-cover { margin-left: calc(-1 * var(--bleed)); width: calc(100% + var(--bleed)); border-radius: 0; background: none;
    -webkit-mask-image: linear-gradient(90deg, #000 58%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, #000 58%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-composite: intersect; }
  .p3d-grid { grid-template-columns: 1fr 1.1fr; }
  .p3d-grid > .p3d-media { order: 2; margin-right: calc(-1 * var(--bleed)); width: calc(100% + var(--bleed)); border-radius: 0;
    -webkit-mask-image: linear-gradient(270deg, #000 58%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(270deg, #000 58%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-composite: intersect; }
  .chap.riviera { top: calc(50% - 66px); }
  .chap.riviera .display { font-size: clamp(1.9rem, 2.9vw, 3.2rem); white-space: nowrap; max-width: none; line-height: 1.1; }
}
/* 18:15 the brochure picture framed whole (the 4:5 cut showed half a tower): its own 1441 x 902 shape, centred on the
   copy beside it */
.bro-cover, .bro-cover img { aspect-ratio: 1441 / 902; height: auto; }
.bro-grid { align-items: center; }
/* 17:50 "make the time smaller and more on the left": the clock on the water, lower left, above the dial */
.hour .clock { top: auto; right: auto; left: var(--gutter); bottom: calc(clamp(18px, 4vh, 40px) + 78px); font-size: clamp(2.4rem, 4.2vw, 4.2rem); }
@media (max-width: 640px) { #location.curtain .opener { margin-bottom: 0; } }
/* above the curtain's held picture (16:55 his shot: the terrace photo covered the stage's first line) */
.curtain > .hs-pin { position: relative; z-index: 1; background: var(--ivory); }
.hs-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 3vh, 30px); background: var(--ivory); }
.hs-stage .sp-body { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
.hs-stage .sp-body .lede { margin: 0 0 12px; }
.hs-stage .sp-avail { margin: 0; }
.hs-stage .sp-row { width: max-content; overflow: visible; scroll-snap-type: none; will-change: transform; cursor: default; }
/* the cards take the height the text and the header leave, so the stage clears the header on a short screen */
.life .hs-stage .sp-row figure { flex-basis: min(46vw, calc((100svh - 380px) * 4 / 3)); }
@media (max-width: 640px) { .life .hs-stage .sp-row figure { flex-basis: 82vw; } }

/* pages: one document, html[data-page] set in the head; a section shows on the pages its data-pg names (none: all) */
html[data-page="home"] [data-pg]:not([data-pg~="home"]),
html[data-page="amenities"] [data-pg]:not([data-pg~="amenities"]),
html[data-page="gallery"] [data-pg]:not([data-pg~="gallery"]),
html[data-page="news"] [data-pg]:not([data-pg~="news"]) { display: none !important; }
/* the news page reads news first, then the guides, then the developer */
html[data-page="news"] main { display: flex; flex-direction: column; }
html[data-page="news"] .pg-head { order: 0; } html[data-page="news"] #journal { order: 1; } html[data-page="news"] #residency { order: 2; }
html[data-page="news"] #group { order: 3; } html[data-page="news"] #contact { order: 4; }
.pg-head { background: var(--deep); color: #fff; padding: clamp(120px, 20vh, 220px) 0 clamp(44px, 7vh, 84px); }
.pg-head .eyebrow { color: var(--gold-2, #e9d8ad); margin: 0 0 14px; }
.pg-head h1 { margin: 0 0 clamp(26px, 4vh, 44px); }
.pg-nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.pg-nav a { font: 500 .72rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .66); text-decoration: none; padding: 8px 0; border-bottom: 1px solid transparent; transition: color .4s, border-color .4s; }
.pg-nav a:hover, .pg-nav a.on { color: #fff; border-bottom-color: currentColor; }
html[data-page="gallery"] #film { margin-top: 0; }
/* the home page's way to the other pages */
.pg-more { background: var(--ivory); color: var(--ink); }
.pg-more .eyebrow { color: #1d4289; margin: 0 0 clamp(20px, 3vh, 32px); }
.pg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 30px); }
.pg-card { display: block; color: var(--ink); text-decoration: none; }
.pg-card .im { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--stone, #e9e3d8); margin-bottom: 16px; }
.pg-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 2.2s var(--ease-out); }
.pg-card:hover img { transform: scale(1.04); }
.pg-card .t { display: block; font: 400 clamp(1.3rem, 1.9vw, 1.8rem)/1.15 var(--serif); margin-bottom: 6px; }
.pg-card .s { display: block; font-size: .88rem; color: rgba(0, 48, 87, .68); }
@media (max-width: 640px) {
  .pg-cards { grid-template-columns: 1fr; gap: 26px; }
  .pg-card { display: grid; grid-template-columns: 38% 1fr; gap: 16px; align-items: center; }
  .pg-card .im { margin: 0; }
}
/* his photographs: whole 4:3 frames, larger (a 4:5 card cut away half of each picture) */
.life .sp-row figure { flex-basis: clamp(300px, 46vw, 820px); }
.life .sp-row .im { aspect-ratio: 4 / 3; }
.life .sp-row figcaption { font-size: .92rem; }
@media (max-width: 640px) { .life .sp-row figure { flex-basis: 88vw; } }

/* ============================================================== 3 Nov, his meeting note (PC hero) */
/* "keep the blu marine logo on the left and center it between towers and the left side of the frame ... and do the same
   for the right side ... europe's new riviera make them all caps ... put Leptos logo at the sea ... not the text": the
   logo alone, centred between the frame's left edge and the towers (--tl, main.js); the Riviera line in capitals,
   centred between the towers (--tr) and the right edge; the Leptos mark on the sea under the towers. Phones unchanged. */
@media (min-width: 900px) {
  .chap.name { left: calc(var(--tl, 40vw) / 2); right: auto; top: 42%; bottom: auto; transform: translate(-50%, -50%); text-align: center; }
  .chap.name .lep-by, .chap.name .lede { display: none; }
  .chap.name .hero-logo { margin: 0 auto; }
  .chap.riviera { left: calc((var(--tr, 60vw) + 100vw) / 2); right: auto; top: 42%; bottom: auto; transform: translate(-50%, -50%); width: max-content; max-width: calc(100vw - var(--tr, 60vw) - 2 * var(--gutter)); text-align: center; }
  .chap.riviera .display { text-transform: uppercase; letter-spacing: .1em; font-size: clamp(1.3rem, 2vw, 2.5rem); line-height: 1.25; white-space: normal; text-wrap: balance; max-width: none; margin: 0 auto; }
  .chap.sea { left: calc((var(--tl, 40vw) + var(--tr, 60vw)) / 2); right: auto; top: auto; bottom: 21vh; transform: translateX(-50%); }
  .sea-logo { display: block; width: clamp(110px, 8vw, 160px); height: auto; filter: drop-shadow(0 1px 2px rgba(16, 24, 32, .4)); }
}
/* 20:30 "when it finishes the landing ... put poseidon cavalli & oceanus on top of the towers": each name just above its
   crown with a fine line down to it (main.js places them on the last frame) */
.ride .chap.names { left: 0; right: 0; top: 0; bottom: 0; }
.tn { position: absolute; width: 0; height: 0; }
.tn > span { position: absolute; left: 0; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.tn b { font: 500 .72rem/1 var(--sans); letter-spacing: .22em; padding-left: .22em; text-transform: uppercase; color: #fff; white-space: nowrap; text-shadow: 0 1px 2px rgba(16, 24, 32, .6), 0 0 12px rgba(16, 24, 32, .4); }
.tn i { width: 1px; height: 22px; margin-top: 8px; background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); }
@media (max-width: 640px) { .tn b { font-size: .6rem; letter-spacing: .18em; } .tn i { height: 16px; margin-top: 6px; } }
.ride .chap.names.below .tn > span { top: 0; bottom: auto; flex-direction: column-reverse; }
.ride .chap.names.below .tn i { height: var(--lead, 60px); margin: 0 0 8px; background: linear-gradient(rgba(255, 255, 255, .85), rgba(255, 255, 255, .25)); }
/* 21:10 (his PC, 1900 x 900): the residences heading sat far above its title (the eyebrow had a row of its own over the
   tall intro) and the section opened and closed on wide navy bands: the eyebrow now sits on the title, less padding */
#residences .sec-head { grid-template-areas: "eb intro" "title intro"; grid-template-rows: 1fr auto; row-gap: 14px; }
#residences .sec-head .eyebrow { grid-area: eb; align-self: end; margin: 0; }
#residences .sec-head .h2 { grid-area: title; margin: 0; }
#residences .sec-head .mq-intro { grid-area: intro; align-self: end; }
@media (max-width: 860px) { #residences .sec-head { grid-template-areas: "eb" "title" "intro"; } }
.mq { padding-top: clamp(56px, 8vh, 96px); }
.mq > .next { padding: clamp(22px, 3vh, 36px) 0 clamp(26px, 4vh, 44px); }
@media (max-width: 640px) { .mq > .next { padding-bottom: 28px; } }
/* 21:10 "set the hour must also go full frame" on every screen: the frame fills the stage (cover, the crowns kept by
   main.js's focus), not a 16:9 box with bands on a wide screen */
@media (min-width: 900px) {
  .hour .hour-stage .frame { left: 0; top: 0; right: 0; bottom: 0; transform: none; width: 100%; height: 100%; aspect-ratio: auto; }
}
/* 20:25 his iPhone ("When i scroll a bit this happens"): once Safari folds its bars away the visible screen is taller
   than 100svh, and every full-screen stage left a navy band at the bottom. The stages and their pins take the large
   viewport (100lvh); with the bars showing, the stage simply runs a little under them. Overrides the svh heights above
   and below (the hour and 360 pins are set again after their own rules) */
.ride .stage, .curtain .opener, .curtain .sp-open, .am-stage, .hs-stage, .orbit-stage, .hour-stage { height: 100vh; height: 100lvh; }
/* 19:45 the hour holds still while its time runs to 17:00, then stays on the sunset ("make the timer finish and stay a
   bit so we can see full frame the image"): a pinned stage, the whole frame on screen */
.hour-pin { position: relative; height: calc(100vh + 170vh); height: calc(100lvh + 170vh); }
.hour-stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
@media (min-width: 900px) {
  .hour-stage { display: block; }
  .hour .hour-stage .frame { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
}
/* 20:45 phones "make the set the hour full screen not in a framed box": the time-lapse fills the stage, the heading on
   the water above the clock and the dial (the crowns stand in the top fifth of the phone picture) */
@media (max-width: 899px) {
  .hour-stage { display: block; }
  .hour .hour-stage .frame, .hour .hour-stage .frame.tall { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; margin: 0; border-radius: 0; }
  .hour-stage > .wrap { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(clamp(18px, 4vh, 40px) + 152px + env(safe-area-inset-bottom)); margin: 0 auto; pointer-events: none; }
  .hour-stage .sec-head { margin: 0; }
  .hour-stage .sec-head .h2 { margin: 0 0 8px; }
  .hour-stage .sec-head .lede { margin: 0; font-size: .95rem; }
  .hour-stage .sec-head :is(.eyebrow, .h2, .lede) { text-shadow: 0 1px 2px rgba(16, 24, 32, .55), 0 2px 10px rgba(16, 24, 32, .3); }
  .hour .hour-stage .frame .clock { bottom: calc(clamp(18px, 4vh, 40px) + 70px + env(safe-area-inset-bottom)); }
  .hour .hour-stage .frame .dial { bottom: calc(clamp(18px, 4vh, 40px) + env(safe-area-inset-bottom)); }
}
/* 19:45 (PC) "put the text on the right side of the image in a full sentence": the photo heading on one line, at the
   right over the sea and the sky */
@media (min-width: 900px) {
  #show .sp-open .sp-title { left: auto; right: var(--gutter); top: 44%; bottom: auto; margin: 0; width: auto; text-align: right; transform: translateY(-50%); }
  #show .sp-open .sp-title .display { white-space: nowrap; font-size: clamp(2.4rem, 3.6vw, 4.3rem); }
  #show .sp-open .sp-title .eyebrow { justify-content: flex-end; flex-wrap: nowrap; }
}
/* 19:35 the cursor: "change this into white cyrcle empty transparent": a white ring with nothing inside and the word in
   white (no inverting blend, which turned it black over light pictures); a faint shadow keeps it visible on ivory */
.cur { mix-blend-mode: normal; }
.cur i { border: 1.5px solid #fff; background: transparent; box-shadow: 0 0 0 1px rgba(16, 24, 32, .1), 0 1px 8px rgba(16, 24, 32, .22); }
.cur.big i { background: transparent; border-width: .9px; }
.cur b { color: #fff; text-shadow: 0 1px 2px rgba(16, 24, 32, .55), 0 0 10px rgba(16, 24, 32, .35); }
/* 19:20 "i want it to read clearer now": the capitals line a step heavier (Bodoni Moda 500 at its small-text optical
   size, whose hairlines hold up), a little larger and less spaced. Bodoni Moda stays the stand-in for the brand's
   Volkys Serif (the closest of the fonts we may serve; Volkys needs Leptos's web licence) */
.chap.riviera .display { font-weight: 500; font-variation-settings: "opsz" 11; text-shadow: 0 1px 2px rgba(16, 24, 32, .6), 0 2px 12px rgba(16, 24, 32, .35); }
@media (min-width: 900px) { .ride .chap.riviera .display { font-size: clamp(1.5rem, 2.3vw, 2.8rem); letter-spacing: .06em; } }
@media (max-width: 899px) { .ride .chap.riviera .display { font-size: clamp(1.15rem, 5vw, 1.5rem); letter-spacing: .07em; } }
/* phones, the same principles (19:05 "adjust the same principles pls for the phone"): no room beside the towers, so
   the logo alone in the sky at the top with EUROPE'S NEW RIVIERA in capitals under it, the Leptos mark on the sea
   under the towers; no name text, no Leptos Estates line, no lede */
@media (max-width: 899px) {
  .chap.name { top: calc(92px + env(safe-area-inset-top)); bottom: auto; }
  .chap.name .hero-logo { display: block; width: clamp(130px, 36vw, 170px); height: auto; margin: 0 auto; filter: drop-shadow(0 1px 2px rgba(16, 24, 32, .45)); }
  .chap.name .lep-by, .chap.name .lede { display: none; }
  .chap.name h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .chap.riviera { top: calc(92px + env(safe-area-inset-top) + clamp(130px, 36vw, 170px) * 87 / 137 + 22px); bottom: auto; }
  .chap.riviera .display { font-size: clamp(1.05rem, 4.6vw, 1.4rem); text-transform: uppercase; letter-spacing: .14em; line-height: 1.3; max-width: none; white-space: nowrap; }
  .chap.sea { left: 50%; right: auto; top: auto; bottom: 21vh; transform: translateX(-50%); }
  .sea-logo { display: block; width: clamp(96px, 26vw, 130px); height: auto; filter: drop-shadow(0 1px 2px rgba(16, 24, 32, .4)); }
}

/* ============================================================== review link, 3 Nov 21:30 (his PC notes) */
/* the Cavalli interiors on a PC: "the drag effect on pc i dont like but i dont want the same as the photographed at
   limassol blu marine": the six side by side across the width, the first open; the one under the mouse opens wide
   and shows its caption. Phones keep their swipe. */
@media (min-width: 900px) and (pointer: fine) {
  #cavalli .sp-row.acc { display: flex; gap: clamp(8px, .8vw, 14px); overflow: visible; scroll-snap-type: none; cursor: default; height: min(66vh, 680px); }
  #cavalli .sp-row.acc figure { position: relative; flex: 1 1 0; min-width: 0; margin: 0; transition: flex-grow 1.1s var(--ease-out); }
  #cavalli .sp-row.acc .im { height: 100%; aspect-ratio: auto; }
  #cavalli .sp-row.acc figure:first-child, #cavalli .sp-row.acc:hover figure:hover { flex-grow: 3.4; }
  #cavalli .sp-row.acc:hover figure:first-child:not(:hover) { flex-grow: 1; }
  #cavalli .sp-row.acc figcaption { position: absolute; left: 20px; right: 20px; bottom: 18px; margin: 0; color: #fff; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .8s var(--ease-out); text-shadow: 0 1px 2px rgba(16, 24, 32, .6), 0 0 14px rgba(16, 24, 32, .4); }
  #cavalli .sp-row.acc figure:first-child figcaption, #cavalli .sp-row.acc:hover figure:hover figcaption { opacity: 1; transform: none; }
  #cavalli .sp-row.acc:hover figure:first-child:not(:hover) figcaption { opacity: 0; transform: translateY(8px); }
}
/* location: "between the marina and the old port text must be placed on image and the whole segment arranged for
   that": on a PC the heading sits on the open sky at the right of the picture, in navy (the sky is light), the couple
   at the left untouched; the address and the distances follow under it. Phones keep the heading under the picture. */
.loc-title { display: none; }
@media (min-width: 900px) {
  /* an opener caption is small capitals by default (.opener figcaption): this one is a heading; kept in the sky, above
     the marina building (about 45 % down the picture) */
  #location .opener .loc-title { display: block; left: auto; right: var(--gutter); top: clamp(92px, 12vh, 150px); bottom: auto; width: min(36vw, 560px); margin: 0; font-size: 1rem; letter-spacing: normal; text-transform: none; color: var(--ink); }
  #location .loc-title .eyebrow { color: #1d4289; margin: 0 0 14px; }
  #location .loc-title .display { color: var(--ink); font-size: clamp(2rem, 3vw, 3.4rem); line-height: 1.08; text-transform: none; letter-spacing: -.005em; }
  #location .loc-title .lede { color: rgba(0, 48, 87, .82); margin: 14px 0 0; max-width: 40ch; font-size: clamp(.95rem, 1.05vw, 1.1rem); text-transform: none; letter-spacing: normal; }
  #location .loc-title :is(.eyebrow, .display, .lede) { text-shadow: none; }
  #location > .wrap > .sec-head { display: none; }
}
/* the brochure, redesigned ("the brochure segment is bad"): one split panel, the whole sunset picture beside the navy
   page; the residence brochures are one choice by tower, then one button */
.bro2 { background: var(--deep); color: #fff; padding: 0; }
.bro2 .bro-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; align-items: stretch; min-height: min(88vh, 900px); }
.bro2 .bro-cover { position: relative; margin: 0; width: auto; height: auto; min-height: 420px; aspect-ratio: auto; border-radius: 0; background: #0a1a2e; -webkit-mask-image: none; mask-image: none; }
.bro2 .bro-cover img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 28% 50%; }
.bro2 .bro-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(56px, 10vh, 120px) clamp(28px, 6vw, 110px); }
.bro2 .eyebrow { color: #e9d8ad; }
.bro2 .display { color: var(--ivory); }
.bro2 .lede { color: rgba(245, 241, 234, .78); max-width: 34ch; }
.bro2 .bro-acts { margin: 30px 0 0; }
.bro2 .tlink { color: #fff; }
.bro2 .bro-list .eyebrow { margin: 40px 0 16px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .14); }
.bro-pick { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.bro-sel select { -webkit-appearance: none; appearance: none; min-height: 50px; min-width: min(340px, 100%); padding: 0 48px 0 22px; font: 400 1rem/1 var(--sans); color: #fff; background: rgba(255, 255, 255, .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center / 14px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; cursor: pointer; }
.bro-sel select:focus-visible { outline: 2px solid #e9d8ad; outline-offset: 2px; }
.bro-sel option, .bro-sel optgroup { color: #0b1f33; background: #fff; }
.bro-n { margin: 14px 0 0; font-size: .85rem; color: rgba(245, 241, 234, .6); }
@media (max-width: 860px) {
  .bro2 .bro-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .bro2 .bro-cover { aspect-ratio: 1441 / 902; min-height: 0; }
  .bro2 .bro-body { padding: 44px var(--gutter) 60px; }
  .bro-sel, .bro-sel select { width: 100%; }
}