/* Limassol Blu Marine, website preview (Highframe). One stylesheet, tokens first. */
/* the Leptos brand identity (guide received 4 Nov 2026): headings in Volkys Serif, everything else in Inter. One Volkys
   weight on the whole site (the guide: never two on a page). Own family names with no local() source, so a font installed
   on a PC can never stand in for a file that failed to load. The face declares 100 to 900 so nothing is synthesised. */
@font-face { font-family: "Leptos Inter"; src: url(../fonts/inter-brand-var.woff2) format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Leptos Volkys"; src: url(../fonts/volkys-serif-400.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
/* the hero's titles over the film only: the guide's Medium, for where fine hairlines would disappear */
@font-face { font-family: "Leptos Volkys M"; src: url(../fonts/volkys-serif-500.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
/* Extra Light, shown on ?volkys=light only until he has seen it (his 4 Nov note: "show me extra light application before you apply") */
@font-face { font-family: "Leptos Volkys XL"; src: url(../fonts/volkys-serif-200.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
html.xl { --serif-display: "Leptos Volkys XL", Georgia, serif; }

:root {
  /* the brand palette, in the guide's proportions: white the ground (40), royal blue signs the work (25), navy carries the
     dark surfaces (15), sky blue and stone soften (15), gold punctuates (5, here the one fine progress line at the top).
     --gold-2 is the accent of the moment: white on dark grounds, royal blue on white ones */
  --navy: #003057;
  --navy-2: #1d4289;
  --royal: #1d4289;
  --sky: #0082c6;
  --ink: #003057;
  --deep: #003057;
  --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: "Leptos Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif-display: "Leptos Volkys", Georgia, serif;
  --sans: "Leptos 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(--royal); color: #fff; }
/* 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: 700 .7rem/1.3 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-2); }
/* headings in Volkys Serif: sentence case, one weight on the site, lower case never letterspaced past one per cent,
   capitals letterspaced to open them up. Regular, not Light: most headings here sit over film and photographs, where
   Light's hairlines go (compared on the film 4 Nov, audit r33; his "i want it to read clearer"). Its word space is wide
   at display sizes, so it is drawn in a little */
.display { font-family: var(--serif-display); font-weight: 400; letter-spacing: 0; word-spacing: -.08em; 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-2); }

/* 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-2); 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-2); }
.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-2), 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 { 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 { 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: var(--royal); 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-2); }
.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-2); border-color: var(--gold-2); }
@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-2); border-color: var(--gold-2); }
.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-2); 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: var(--navy); 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-2); -webkit-appearance: none; appearance: none; cursor: pointer; }
.price-range input::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(var(--gold-2), var(--gold-2)) 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-2); border: 0; box-shadow: 0 0 0 6px rgba(255, 255, 255, .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-2); }
.price-range input::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--gold-2); }
/* 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(255, 255, 255, .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-2); 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(255, 255, 255, .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-2); 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; }
.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-2); }
@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; pointer-events: none; } /* the model under it stays free to turn (his 5 Nov note); a tap on empty space there closes the sheet */
@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-2); box-shadow: 0 0 0 8px rgba(255, 255, 255, .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: #003057; }
.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: #003057; }
.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: #003057; }
.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-2); }

/* 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 */
.ct .h2 { font-size: clamp(2rem, 4vw, 4.2rem); }

/* 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-2); 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-2); border-radius: 12px; background: rgba(255, 255, 255, .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: #d6d2c4; }
.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(255, 255, 255, .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: 1; }
.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. */


/* 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); }

/* 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: #003057; 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: #d6d2c4; }
.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 */

/* 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: #003057; }
.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: #003057; 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: #003057; 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 */
.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); }
/* touch screens: no blur on the header, ever. His 5 Nov iPhone shots had a blurred band under the toolbar, the header's height, in every section, while the header
   was away: its colours measure as this filter's saturate(1.25) with no tint, so iOS kept painting the filter after the header had gone, and turning it off only
   while away did not stop that. A plain solid header, and one that is really gone when it steps aside */
.hdr.away, .hdr.solid.away { backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (hover: none), (pointer: coarse) {
  .hdr, .hdr.solid, .hdr.away, .hdr.solid.away { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .hdr { transition: transform .8s var(--ease-out), opacity .6s var(--ease), background .6s var(--ease), height .6s var(--ease-out), visibility 0s; }
  .hdr.away { visibility: hidden; transition: transform .8s var(--ease-out), opacity .6s var(--ease), background .6s var(--ease), height .6s var(--ease-out), visibility 0s linear .8s; }
  .hdr.solid { background: rgba(0, 48, 87, .94); }
  .hdr.solid.on-ivory { background: rgba(255, 255, 255, .96); }
}
.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 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)); }
/* 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) {
  .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; }
  .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, #ffffff); 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 */
/* his 4 Nov note on the beige block: "it needs a proper redesign". Three full pictures edge to edge, the words on them, straight
   into the navy of the contact section */
.pg-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--deep); }
.pg-card { position: relative; display: block; height: min(70vh, 640px); overflow: hidden; color: #fff; text-decoration: none; background: var(--deep); }
.pg-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 2.2s var(--ease-out); }
.pg-card:hover img { transform: scale(1.04); }
.pg-card img[data-img="news-unveil"] { object-position: 12% 50%; } /* all three towers in the frame */
.pg-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 34, 62, 0) 48%, rgba(0, 34, 62, .78) 100%); }
.pg-card .t, .pg-card .s { position: absolute; z-index: 1; left: clamp(20px, 2.4vw, 40px); right: clamp(20px, 2.4vw, 40px); }
.pg-card .t { bottom: clamp(46px, 3.6vw, 66px); font: 400 clamp(1.6rem, 2.3vw, 2.6rem)/1.1 var(--serif-display); word-spacing: -.08em; }
.pg-card .s { bottom: clamp(20px, 1.8vw, 32px); font-size: clamp(.82rem, .9vw, .95rem); color: rgba(255, 255, 255, .84); }
@media (orientation: portrait), (max-width: 640px) {
  .pg-more { grid-template-columns: 1fr; }
  .pg-card { height: 30svh; min-height: 210px; }
}
/* 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: 37%; bottom: auto; transform: translate(-50%, -50%); text-align: center; } /* a little higher (his 5 Nov note) */
  .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(100px, 7.2vw, 140px); 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 { 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(92px, 26vw, 120px); 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(--royal); 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: #003057; -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: #ffffff; }
.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 #ffffff; outline-offset: 2px; }
.bro-sel option, .bro-sel optgroup { color: #003057; 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%; }
}
/* 4 Nov, his PC, thirteen screenshots ("make all changes accordingly to the mindset of the feedback for every device") */
@media (min-width: 900px) {
  /* the Leptos mark and the scroll line on one axis, the middle of the screen */
  .chap.sea { left: 50%; }
  /* Cavalli: in the sky left of the towers, level with their crowns; over the city the white letters break up (--cavy from main.js) */
  .ride .chap.cav { left: calc(var(--tl, 40vw) * .44); right: auto; top: var(--cavy, 30%); bottom: auto; transform: translate(-50%, -100%); width: min(calc(var(--tl, 40vw) * .84), 680px); text-align: center; }
  .ride .chap.cav .eyebrow { justify-content: center; }
  .ride .chap.cav .h2 { max-width: none; margin: 0 auto; font-size: clamp(1.9rem, 2.7vw, 3.6rem); text-wrap: balance; }
  /* the landing: its line and its buttons centred on the screen, on the water under the towers */
  .ride .chap.end { left: 0; right: 0; bottom: clamp(52px, 10vh, 110px); text-align: center; }
  .ride .chap.end .h2 { max-width: none; margin: 0 auto; }
  .ride .chap.end .actions { justify-content: center; }
}
/* every upright screen: the Cavalli line in the sky over the towers, his 4 Nov iPhone note ("Put the text on top of the towers") */
@media (orientation: portrait) {
  .ride .chap.cav { left: var(--gutter); right: var(--gutter); top: var(--cavy, 27%); bottom: auto; transform: translateY(-100%); width: auto; text-align: center; }
  .ride .chap.cav .eyebrow { justify-content: center; }
  .ride .chap.cav .h2 { margin-inline: auto; text-wrap: balance; }
}
/* the names on the towers themselves, no lines, each just under its crown */
.ride .chap.names.over .tn > span { top: 0; bottom: auto; }
.ride .chap.names.over .tn i { display: none; }
.ride .chap.names.over .tn b { font-size: clamp(.56rem, .66vw, .76rem); letter-spacing: .2em; padding-left: .2em; text-shadow: 0 0 3px rgba(8, 14, 22, .95), 0 1px 9px rgba(8, 14, 22, .85), 0 0 22px rgba(8, 14, 22, .65); }
/* the residences head: one compact band, no empty navy over the title */
.mq { padding-top: clamp(30px, 4.5vh, 52px); }
#residences .sec-head { grid-template-rows: auto auto; align-content: center; align-items: start; row-gap: 10px; margin-bottom: clamp(16px, 2.6vh, 26px); }
#residences .sec-head .eyebrow { align-self: end; }
#residences .sec-head .mq-intro { align-self: center; }
@media (min-width: 861px) { #residences .mq-intro .lede { display: none; } }
/* turn the towers: the sales line and its button */
.orbit-cta { margin: 18px 0 0; }
@media (min-width: 900px) {
  .orbit-head .h2 { font-size: clamp(2.3rem, 3.3vw, 3.7rem); line-height: 1.06; }
  .orbit-head .lede { font-size: clamp(1rem, 1.1vw, 1.2rem); }
  .orbit-cta { margin-top: 24px; }
}
.orbit .frame { cursor: default; touch-action: auto; }
/* the brochure picture: the left of the frame, so Poseidon stands whole */
.bro2 .bro-cover img { object-position: 0% 50%; }
/* less white around the private 3D and the discover row */
/* the terrace title: midway between the two glass posts (--cx, main.js) */
@media (min-width: 900px) and (orientation: landscape) {
  #show .sp-open .sp-title { left: var(--cx, 76%); right: auto; top: 44%; transform: translate(-50%, -50%); text-align: center; }
  #show .sp-open .sp-title .eyebrow { justify-content: center; }
}
/* the Cavalli opener: the curtains either side of the painting carry the words (--cl, --cr, --cy, main.js), the title left
   and the sentence right, instead of the sofa at the bottom */
.cv-right { display: none; }
@media (min-width: 641px) and (orientation: landscape) {
  #cavalli .cv-cap { left: 0; right: 0; top: 0; bottom: 0; width: auto; margin: 0; padding: 0; }
  .cv-left, .cv-right { position: absolute; top: var(--cy, 33%); transform: translate(-50%, -50%); text-align: center; }
  .cv-left { left: var(--cl, 22%); width: min(30vw, 540px); }
  .cv-left .cv-logo { display: block; margin: 0 auto 14px; }
  .cv-left .eyebrow { justify-content: center; margin-bottom: 12px; }
  .cv-left .h2 { margin: 0 auto; max-width: none; font-size: clamp(2.2rem, 3.2vw, 3.7rem); line-height: 1.08; text-wrap: balance; }
  .cv-right { display: block; left: var(--cr, 75%); width: min(27vw, 480px); margin: 0; color: #fff; font-size: clamp(1.02rem, 1.22vw, 1.38rem); line-height: 1.5; text-shadow: 0 1px 2px rgba(16, 24, 32, .7), 0 2px 14px rgba(16, 24, 32, .55); }
  #cavalli .sp-body > .lede { display: none; }
}
/* the location heading in white over the sky, a soft navy glow behind it so it holds on the light blue */
@media (min-width: 861px) {
  #location .loc-title .eyebrow, #location .loc-title .display, #location .loc-title .lede { color: #fff; text-shadow: 0 1px 2px rgba(0, 36, 70, .55), 0 2px 16px rgba(0, 36, 70, .4); }
  #location .loc-title::before { content: ""; position: absolute; z-index: -1; left: -14%; right: -14%; top: -30%; bottom: -30%; background: radial-gradient(closest-side, rgba(0, 48, 87, .34), rgba(0, 48, 87, 0)); pointer-events: none; }
}
/* the Cavalli row after the ChatGPT pass: each picture holds on its person when the panel is narrow; phones get tall
   cards, so the vertical of each picture shows whole (main.js setImg takes <key>-v in a tall box) */
.sp-row.acc img[data-img="cavalli-lobby"] { object-position: 42% 50%; }
.sp-row.acc img[data-img="cavalli-open"] { object-position: 30% 50%; }
.sp-row.acc img[data-img="cavalli-dining"] { object-position: 40% 50%; }
.sp-row.acc img[data-img="cavalli-kitchen"] { object-position: 92% 50%; }
.sp-row.acc img[data-img="cavalli-duplex"] { object-position: 38% 50%; }
/* phones: 4:5 cards of the true picture, held on the person (main.js). No invented verticals here (his 4 Nov note: "the environment
   is faked"). */
@media (max-width: 640px) { #cavalli .sp-row.acc .im { aspect-ratio: 4 / 5; } }
/* the Cavalli opener on a phone: the vertical picture leaves its top third calm, so the title sits there, off the furniture,
   and the picture holds to its right so the woman at the console stays in frame */
@media (max-width: 640px) {
  #cavalli .sp-open > img { scale: 1; object-position: 72% 50% !important; }
  #cavalli .sp-open::after { background: linear-gradient(180deg, rgba(16, 24, 32, .46) 0%, rgba(16, 24, 32, .26) 30%, rgba(16, 24, 32, 0) 44%); }
  #cavalli .cv-cap { top: calc(82px + env(safe-area-inset-top)); bottom: auto; left: var(--gutter); right: var(--gutter); width: auto; margin: 0; text-align: center; }
  .cv-left .cv-logo { display: block; margin: 0 auto 10px; }
  .cv-left .eyebrow { justify-content: center; margin-bottom: 8px; }
  .cv-left .h2 { margin: 0 auto; }
}

/* ============================================================== 4 Nov, later (R58) */
/* the landing: "In the Centre of Everything" high on the water, just under the shore (--endy, main.js), on every screen */
.ride .chap.end { top: var(--endy, 60%); bottom: auto; }
/* the Cavalli opener: the two logos stacked, Roberto Cavalli on top, x, Leptos Estates under it, on the left curtain and centred
   on the height of the picture; the heading and the sentence on the right curtain; the Cavalli Tower mark over the painting */
.sp-open .cv-tower, .sp-open .cv-marks img { position: static; inset: auto; object-fit: contain; transform: none; transition: none; }
.cv-marks { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }
.cv-marks span { font: 400 1.5rem/1 var(--serif-display); opacity: .92; }
.cv-right .h2 { margin: 0; color: #fff; }
.cv-right p { margin: 0; color: #fff; }
.sp-title.cv-cap .display, .cv-right p, .cv-marks img { text-shadow: 0 1px 2px rgba(16, 24, 32, .7), 0 2px 16px rgba(16, 24, 32, .55); }
@media (min-width: 641px) and (orientation: landscape) {
  #cavalli .sp-open::after { background: linear-gradient(180deg, rgba(16, 24, 32, .46) 0%, rgba(16, 24, 32, .3) 50%, rgba(16, 24, 32, 0) 72%); }
  .sp-open .cv-tower { position: absolute; left: var(--cm, 50%); top: var(--ct, 6%); width: auto; height: clamp(30px, 4.4vh, 42px); transform: translate(-50%, -50%); }
  /* the logos on the same line as "A partnership defined by excellence" (--cly, main.js) */
  .cv-left { top: var(--cly, 40%); left: var(--cl, 22%); width: min(32vw, 600px); }
  .cv-left::before { content: ""; position: absolute; z-index: -1; left: -10%; right: -10%; top: -46%; bottom: -46%; pointer-events: none; background: radial-gradient(closest-side, rgba(16, 24, 32, .42), rgba(16, 24, 32, 0)); }
  .cv-marks { --mw: clamp(130px, 14vw, 270px); gap: clamp(10px, 1.5vh, 16px); }
  .cv-marks img { width: var(--mw); height: auto; }
  .cv-marks span { font-size: clamp(1rem, 1.4vw, 1.6rem); }
  .cv-right .h2 { font-size: clamp(1.4rem, 2.4vw, 2.8rem); line-height: 1.08; }
  /* the heading and the sentence together centred on the same line as the logos (his 5 Nov note, --cly, main.js) */
  .cv-right { position: absolute; display: block; top: var(--cly, 40%); left: var(--cr, 75%); width: min(32vw, 610px); transform: translate(-50%, -50%); text-align: center; font-size: inherit; text-shadow: none; }
  .cv-right .h2 { margin-bottom: clamp(12px, 1.8vh, 20px); }
  .cv-right p { max-width: 27vw; margin-inline: auto; font-size: clamp(.9rem, 1vw, 1.12rem); line-height: 1.5; text-wrap: balance; }
  /* a phone on its side: the two logos and the heading only */
  @media (max-height: 500px) { .sp-open .cv-tower, .cv-right p { display: none; } }
}
/* phones and tablets upright: the vertical picture, its calm top third carries the mark, the logos and the heading */
@media (max-width: 640px), (orientation: portrait) {
  #cavalli .sp-open > img { scale: 1; object-position: 72% 0% !important; }
  #cavalli .sp-open::after { background: linear-gradient(180deg, rgba(16, 24, 32, .46) 0%, rgba(16, 24, 32, .26) 30%, rgba(16, 24, 32, 0) 44%); }
  /* lower on the ceiling, clear of the header and still above the spot lights (his 4 Nov iPhone note: "bring the text more down") */
  #cavalli .cv-cap { top: calc(clamp(96px, 13.6%, 150px) + env(safe-area-inset-top)); bottom: auto; left: var(--gutter); right: var(--gutter); width: auto; margin: 0; text-align: center; }
  .cv-right { display: block; }
  /* the sentence stays on upright screens too, much smaller (his 4 Nov phone note) */
  .cv-right p { max-width: 46ch; margin: 7px auto 0; font-size: clamp(.72rem, 1.5vw, .9rem); line-height: 1.5; text-align: center; text-wrap: balance; }
  .sp-open .cv-tower { display: block; position: static; width: auto; height: 30px; margin: 0 auto 14px; }
  .cv-marks { --mw: min(36vw, 190px); margin: 0 0 12px; gap: 4px; }
  .cv-marks img { width: var(--mw); height: auto; }
  .cv-marks span { font-size: .85rem; }
  .cv-right .h2 { margin: 0 auto; font-size: 1.35rem; line-height: 1.15; text-align: center; }
}

/* a residence on a phone (his 5 Nov note: the lift of the tower could not be seen): the sheet opens under half the screen with the facts and the button, and comes up when it is read
   on or its bar is tapped. The model stays bright and the chips step aside while it is open */
@media (max-width: 640px) {
  .sheet { height: 46svh; transition: transform .9s var(--ease-out), height .55s var(--ease-out); }
  .sheet.tall { height: 86svh; }
  .sheet::before { content: ""; position: absolute; left: 50%; top: 8px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(255, 255, 255, .3); pointer-events: none; }
  .sheet .bar { padding: 14px 18px 8px; cursor: pointer; }
  .sheet .body { padding: 12px 18px 24px; }
  .sheet .facts { margin: 14px 0; }
  .sheet .facts div { padding: 10px 12px; }
  .scrim { background: transparent; }
  body.sheet-open .mq-hud { opacity: 0; pointer-events: none; }
  body.sheet-open .mq-hud > * { pointer-events: none; }
  .mq-hud { transition: opacity .5s var(--ease); }
}

/* the Cavalli line now runs to the sunset (his 5 Nov note: "Keep ... on hero more until here"). The 16:9 sky goes pale through that stretch, white on it measured 1.4 to 1, so while the line
   shows a soft fall of navy from the top of the screen deepens the sky, the width of the film like a graduated filter. Upright screens measure 2 to 3.4 without it */
@media (orientation: landscape) {
  .ride .shade::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%; background: linear-gradient(180deg, rgba(0, 34, 62, .5), rgba(0, 34, 62, 0)); opacity: 0; transition: opacity 1.1s var(--ease); }
  .ride .stage:has(.chap.cav.on) .shade::after { opacity: 1; }
}

/* At home above the sea in the sky, upright screens: top right, between the balcony slab and the rail (his 5 Nov iPhone note: "place the text on top"). With the words gone
   from the foot, the dark fall goes too */
@media (orientation: portrait) {
  #show .sp-open .sp-title { left: auto; right: var(--gutter); top: calc(clamp(86px, 11.5%, 150px) + env(safe-area-inset-top)); bottom: auto; width: min(56vw, 420px); margin: 0; text-align: center; transform: none; }
  #show .sp-open .sp-title .eyebrow { justify-content: center; flex-wrap: wrap; margin-bottom: 10px; font-size: clamp(.58rem, 2.2vw, .78rem); }
  #show .sp-open .sp-title .eyebrow::before { display: none; }
  #show .sp-open .sp-title .display { white-space: normal; font-size: clamp(1.9rem, 8vw, 3.4rem); line-height: 1.06; text-wrap: balance; }
  #show .sp-open::after { background: linear-gradient(180deg, rgba(16, 24, 32, .2) 0%, rgba(16, 24, 32, 0) 42%); }
  @media (min-width: 641px) { #show .sp-open .sp-title { right: calc(var(--gutter) + 10vw); } #show .sp-open .sp-title .display { font-size: clamp(2.2rem, 5.6vw, 3rem); } } /* tablets: the rail climbs higher on the screen */
}

/* the 360 in full frame (his pick, 4 Nov): the picture edge to edge, the words white on a navy fall at the foot of the screen.
   A screen in portrait: the picture fills the width and falls into navy under it, the words below. */
.orbit.sec { padding-top: 0; }
.hour.sec { padding-bottom: 0; } /* the hour runs straight into the 360, the band between them is gone (his 4 Nov note) */
.orbit-stage { background: var(--deep); }
.orbit-head .eyebrow { color: rgba(255, 255, 255, .84); margin: 0; }
#orbit .orbit-head .h2 { color: #fff; }
#orbit .orbit-head .lede { color: rgba(255, 255, 255, .86); }
#orbit .orbit-head .btn { color: var(--ink); background: #fff; --b: #fff; }
.orbit-bar { background: rgba(255, 255, 255, .22); }
.orbit-bar i { background: #fff; }
@media (min-width: 900px), (orientation: landscape) {
  .orbit-stage { display: block; }
  .orbit .orbit-stage .frame { position: absolute; inset: 0; width: auto; aspect-ratio: auto; max-height: none; margin: 0; border-radius: 0; }
  .orbit-stage::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 30%; pointer-events: none; background: linear-gradient(0deg, rgba(0, 34, 62, .94) 0%, rgba(0, 34, 62, .74) 42%, rgba(0, 34, 62, 0) 100%); }
  .orbit .orbit-head { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); width: auto; max-width: none; top: auto; bottom: calc(clamp(16px, 4vh, 44px) + var(--foot, 0px)); padding: 0; transform: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px clamp(24px, 3vw, 60px); }
  #orbit .orbit-head .h2 { margin: 0; white-space: nowrap; font-size: clamp(1.4rem, 2.3vw, 2.6rem); line-height: 1.04; }
  #orbit .orbit-head .lede { margin: 0; font-size: clamp(.82rem, .95vw, 1.05rem); line-height: 1.4; }
  .orbit .orbit-cta { grid-column: 3; grid-row: 1; margin: 0; }
  .orbit .orbit-bar { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; width: 100%; height: 2px; }
  /* smaller landscape screens: the sales line under the heading */
  @media (max-width: 1000px) {
    .orbit .orbit-head { grid-template-columns: minmax(0, 1fr) auto; }
    .orbit .orbit-cta { grid-column: 2; grid-row: 1 / span 2; }
    #orbit .orbit-head .lede { grid-column: 1; grid-row: 2; }
  }
}
@media (max-width: 899px) and (orientation: portrait) {
  .orbit .orbit-stage { justify-content: flex-start; gap: 0; padding-top: 0; }
  /* the picture starts under the header, so the header never covers a tower label (his 4 Nov note: "bring the 3D a bit down") */
  /* his vertical cut of the move (5 Nov): edge to edge, the whole screen, the words on a navy fall at its foot */
  .orbit .orbit-stage .frame { position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; max-height: none; margin: 0; border-radius: 0; }
  .orbit .orbit-stage .frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(36% + var(--foot, 0px) * .7); background: linear-gradient(0deg, var(--deep), var(--deep) calc(var(--foot, 0px) * .3), rgba(0, 48, 87, .74) calc(18% + var(--foot, 0px) * .3), rgba(0, 48, 87, 0)); opacity: calc(1 - var(--lk, 0)); pointer-events: none; }
  /* the words at the foot of what can be seen, whether the browser's bars are out or away (--foot) */
  .orbit .orbit-head { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(30px + var(--foot, 0px) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; width: auto; max-width: none; margin: 0; padding: 0 var(--gutter); text-align: center; transition: bottom .3s var(--ease); }
  #orbit .orbit-head .h2 { margin: 0 0 6px; font-size: 1.6rem; }
  #orbit .orbit-head .lede { font-size: .9rem; }
  .orbit .orbit-cta { order: 3; margin: 14px 0 0; }
  .orbit .orbit-bar { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(14px + var(--foot, 0px) + env(safe-area-inset-bottom)); margin: 0 auto; transition: bottom .3s var(--ease); }
}
/* the tower names on the 360: plain small words and a short line, no pills */
.orbit .tag b { background: none; border: 0; box-shadow: none; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; font: 500 .62rem/1 var(--sans); letter-spacing: .2em; text-shadow: 0 0 3px rgba(8, 14, 22, .95), 0 1px 9px rgba(8, 14, 22, .85), 0 0 22px rgba(8, 14, 22, .65); }
.orbit .tag i { margin-top: 5px; }
/* the private 3D viewing on the 360 (his 4 Nov notes): the towers turn to the camera of his shot, the sea behind them, and as they settle the navy and
   the lock with its words arrive together on the scroll (--lk from main.js). Same speed of turn as before, 200 degrees of it */
.orbit-stage { overflow: hidden; }
.orbit-pin { height: calc(100vh + 200vh); height: calc(100lvh + 200vh); }
.orbit-anchor { position: absolute; left: 0; bottom: calc(100vh + 8vh); bottom: calc(100lvh + 8vh); width: 1px; height: 1px; }
#private3d { scroll-margin-top: 0; }
.orbit-lock { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; padding: calc(72px + env(safe-area-inset-top)) var(--gutter) calc(32px + var(--foot, 0px) + env(safe-area-inset-bottom)); text-align: center; background: rgba(0, 34, 62, .76); opacity: var(--lk, 0); pointer-events: none; }
.orbit-stage.locked .orbit-lock { pointer-events: auto; }
.orbit .orbit-head, .orbit .orbit-bar { opacity: calc(1 - var(--lk, 0)); }
.orbit-lock svg { display: block; width: clamp(34px, 2.6vw, 44px); height: auto; margin: 0 auto 16px; }
section.ivory .orbit-lock .eyebrow { display: block; color: rgba(255, 255, 255, .84); margin: 0 0 14px; }
#orbit .orbit-lock .h2 { color: #fff; margin: 0 0 14px; font-size: clamp(2rem, 3.4vw, 3.9rem); line-height: 1.06; }
#orbit .orbit-lock .lede { color: rgba(255, 255, 255, .86); margin: 0 auto; max-width: 44ch; font-size: clamp(.95rem, 1.1vw, 1.2rem); line-height: 1.5; }
.orbit-lock .act { margin: 24px 0 0; }
#orbit .orbit-lock .btn { color: var(--ink); background: #fff; --b: #fff; }
.orbit-lock .ol { transform: translateY(calc((1 - var(--lk, 0)) * 18px)); }
@media (max-width: 640px) { .orbit-pin { height: calc(100vh + 170vh); height: calc(100lvh + 170vh); } }

/* Have a question for us: the real model with the sales team (his 4 Nov note), beside the form on a wide screen, leading the section on an upright one */
.ct-grid { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "media head" "media form" "info form"; }
.ct-media { grid-area: media; align-self: stretch; position: relative; margin: 0; border-radius: 6px; overflow: hidden; }
.ct-media::before { content: ""; display: block; padding-top: 56.25%; } /* never thinner than the 16:9 picture, so no head is cut on a very wide screen */
.ct-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
@media (max-width: 860px) {
  .ct-grid { grid-template-rows: none; grid-template-areas: "media" "head" "form" "info"; }
  .ct-media { aspect-ratio: 4 / 3; margin-inline: calc(-1 * var(--gutter)); border-radius: 0; }
}

/* who built it, moved off the 360 (his note: more minimal) so the site still says it */
.tw-note { margin: clamp(24px, 4vh, 44px) auto 0; padding: 0 var(--gutter); max-width: 62ch; text-align: center; font-size: clamp(.9rem, 1vw, 1.05rem); line-height: 1.5; color: rgba(0, 48, 87, .68); }

/* his photographs, the stage filled: the words tight under the header, the cards as tall as the screen leaves. Upright screens. */
@media (orientation: portrait) {
  .hs-stage { justify-content: flex-start; gap: 14px; padding-top: calc(76px + env(safe-area-inset-top)); }
  .hs-stage .sp-body .lede { margin: 0 0 8px; font-size: .95rem; line-height: 1.45; }
  .hs-stage .sp-avail { padding-top: 10px; gap: 8px 24px; font-size: .9rem; }
  .life .hs-stage .sp-row figure { flex-basis: min(84vw, 680px); }
  .life .hs-stage .sp-row .im { aspect-ratio: auto; height: min(calc(100svh - 270px), 118vw); }
}
/* a phone on its side: the pictures alone */
@media (max-height: 500px) and (orientation: landscape) {
  .hs-stage .sp-body { display: none; }
  .life .hs-stage .sp-row figure { flex-basis: calc((100svh - 56px) * 4 / 3); }
}
/* the spa card: the scale of the card grows from its foot, so the woman stands clear of the words */
.am-card img[data-img="spa"] { transform-origin: 50% 100%; }

/* the sentence now lives on the picture on every screen, so it is not repeated under it */
#cavalli .sp-body > .lede { display: none; }
/* the Cavalli opener stops the page for over a screen of scroll, and the room plays like the opening of a film: the picture settles,
   the light dims a touch, then the Cavalli Tower mark, Roberto Cavalli, x, Leptos Estates, the heading, the sentence (main.js adds
   .cine, then .cv-go once the picture has stopped, .cv-end when it has played; not .play: that is the film's round button) */
/* the hold is a margin on what follows the picture, not on the picture: a sticky element keeps its own margin inside its section, so a
   margin on the picture would let it go early and leave a gap above the words */
#cavalli.curtain .sp-open { margin-bottom: 0; }
#cavalli.curtain > .sp-body { margin-top: 120vh; }
#cavalli .sp-open.cine::after { transition: opacity 1.1s var(--ease); }
#cavalli .sp-open.cine:not(.cv-go)::after { opacity: 0; }
.sp-open.cine .cv-tower, .sp-open.cine .cv-marks > *, .sp-open.cine .cv-right .h2, .sp-open.cine .cv-right p { transition: opacity .75s var(--ease), translate .9s var(--ease-out), filter .75s var(--ease); }
.cine:not(.cv-go) .cv-tower, .cine:not(.cv-go) .cv-marks > *, .cine:not(.cv-go) .cv-right .h2, .cine:not(.cv-go) .cv-right p { opacity: 0; translate: 0 18px; filter: blur(10px); }
.cine.cv-go .cv-tower { transition-delay: .1s; }
.cine.cv-go .cv-marks > :nth-child(1) { transition-delay: .3s; }
.cine.cv-go .cv-marks > :nth-child(2) { transition-delay: .48s; }
.cine.cv-go .cv-marks > :nth-child(3) { transition-delay: .6s; }
.cine.cv-go .cv-right .h2 { transition-delay: .85s; }
.cine.cv-go .cv-right p { transition-delay: 1.1s; }
@media (min-width: 641px) and (orientation: landscape) {
  #cavalli .sp-open.cine:not(.cv-end) > img { transition: scale 2.1s var(--ease-out); }
  #cavalli .sp-open.cine:not(.cv-go) > img { scale: 1.16; }
}

/* no shadow behind any letters or logos, on any device (his 4 Nov note): no text shadows, no soft dark patches behind the words */
body * { text-shadow: none !important; }
.chap::before, #location .loc-title::before, .cv-left::before { display: none; }
.hero-logo, .chap.name .hero-logo, .sea-logo { filter: none; }

/* 5 Nov: the single word Leptos beside Roberto Cavalli: narrower than the long mark, so the two sit at one height and one weight (--mw on .cv-marks) */
.cv-marks .lep { width: calc(var(--mw, 190px) * .6); }
/* the hero's titles (his 5 Nov note: "make the hero's titles clear white"): the letters were already pure white, the thin strokes melted into
   the pale sky, so the Medium of the same face, the guide's weight for where hairlines would disappear */
.ride .chap .display { font-family: "Leptos Volkys M", var(--serif-display); color: #fff; }
/* In the Centre of Everything smaller, on every screen (his 5 Nov note) */
.ride .chap.end .h2 { font-size: clamp(1.9rem, 2.9vw, 3.3rem); }
@media (max-width: 640px), (orientation: portrait) { .ride .chap.end .h2 { max-width: none; font-size: clamp(1.4rem, 6vw, 2.4rem); } }

/* the Cavalli opener stops the page until its words are in (main.js). Not body, not on a PC: a body with its own overflow would unpin the picture, and a scrollbar leaving would shift the page */
html.cv-stop { overscroll-behavior: none; }
html.touch.cv-stop { overflow: hidden; touch-action: none; }

/* ============================================================== a phone on its side (his 4 Nov note: "to be proper")
   Wide like a PC but only about 400 px tall, so the PC arrangement at phone scale, in one place. Last in the file on purpose: it wins over the
   phone and PC rules it replaces, whatever the width of the phone. */
@media (orientation: landscape) and (max-height: 520px) {
  /* the notch: with viewport-fit=cover the page runs under it */
  :root { --gutter: max(clamp(16px, 4vw, 64px), env(safe-area-inset-left), env(safe-area-inset-right)); }
  .sec { padding: clamp(32px, 9vh, 44px) 0; }
  .h2 { font-size: clamp(1.5rem, 3.4vw, 1.9rem); }
  .hdr, .hdr.solid { height: 52px; }
  /* his 4 Nov shot: the strips beside the notch take the colour of the page instead of staying navy beside white */
  html.bg-ivory { background: var(--ivory); }
  .brand img, .hdr.solid .brand img { height: 24px; }
  .menu-btn, .hdr-enq { min-height: 40px; font-size: .85rem; }

  /* hero: the logo in the sky left of the towers, the line right of them, Leptos on the water */
  .chap.name { left: calc(var(--tl, 40vw) / 2); right: auto; top: 30%; bottom: auto; transform: translate(-50%, -50%); text-align: center; }
  .chap.name h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .chap.name .lep-by, .chap.name .lede { display: none; }
  .chap.name .hero-logo { display: block; width: clamp(92px, 14vw, 128px); height: auto; margin: 0 auto; }
  .chap.riviera { left: calc((var(--tr, 60vw) + 100vw) / 2); right: auto; top: 30%; bottom: auto; transform: translate(-50%, -50%); width: max-content; max-width: calc(100vw - var(--tr, 60vw) - 2 * var(--gutter)); text-align: center; }
  .ride .chap.riviera .display { text-transform: uppercase; letter-spacing: .08em; font-size: clamp(.82rem, 1.9vw, 1.1rem); line-height: 1.3; 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: 13vh; transform: translateX(-50%); }
  .sea-logo { display: block; width: clamp(64px, 8.4vw, 84px); height: auto; }
  .ride .chap.cav { left: calc(var(--tl, 40vw) / 2); right: auto; top: calc(52px + env(safe-area-inset-top)); bottom: auto; transform: translateX(-50%); width: min(34vw, 300px); text-align: center; } /* in the sky, right under the header: over the city the white letters break up */
  .ride .chap.cav .eyebrow { justify-content: center; margin: 0 0 8px; }
  .ride .chap.cav .h2 { max-width: none; margin: 0 auto; font-size: clamp(1.15rem, 2.6vw, 1.5rem); line-height: 1.14; text-wrap: balance; }
  .ride .chap.end { left: 0; right: 0; top: var(--endy, 60%); bottom: auto; text-align: center; }
  .ride .chap.end .h2 { max-width: none; margin: 0 auto; font-size: clamp(1.1rem, 2.4vw, 1.4rem); }
  .ride .chap.end .actions { justify-content: center; flex-wrap: nowrap; gap: 10px; margin-top: 10px; }
  .ride .chap.end .btn { min-height: 38px; font-size: .8rem; }

  /* residences: the head tight, the model a full screen, its controls along the edges */
  #residences .sec-head { padding-block: 0; }
  .mq-view { height: 100svh; min-height: 0; }
  .mq-view .mq-hud { top: 8px; left: 12px; right: auto; flex-direction: column; align-items: flex-start; gap: 6px; } /* a column at the side: a row across the top ran into the tower names */
  .mq-zoom { left: 12px; bottom: 10px; grid-auto-flow: column; }
  .mq-zoom button { width: 38px; height: 38px; }
  .mq-legend { left: auto; right: 12px; bottom: 10px; }
  .mq-view .mq-ruler { top: 54px; bottom: 58px; right: 10px; }

  /* Cavalli: small and minimal; at this height the picture leaves no wall above the painting for the Tower mark. The arrangement is stated here too:
     on the smallest phones the width alone would bring back the upright one */
  #cavalli .sp-open > img { scale: calc(1.1 - .07 * var(--cov, 0)); object-position: 50% 50% !important; }
  #cavalli .sp-open::after { background: linear-gradient(180deg, rgba(16, 24, 32, .46) 0%, rgba(16, 24, 32, .3) 50%, rgba(16, 24, 32, 0) 72%); }
  #cavalli .cv-cap { left: 0; right: 0; top: 0; bottom: 0; width: auto; margin: 0; padding: 0; text-align: left; }
  .cv-left { position: absolute; top: var(--cly, 40%); left: var(--cl, 22%); width: min(32vw, 600px); transform: translate(-50%, -50%); text-align: center; }
  .cv-right { position: absolute; display: block; top: var(--cly, 40%); left: var(--cr, 75%); width: min(32vw, 610px); transform: translate(-50%, -50%); text-align: center; }
  .cv-marks { --mw: clamp(120px, 14vw, 170px); margin: 0; gap: clamp(6px, 1.5vh, 16px); }
  .sp-open .cv-tower { display: none; }
  .cv-right p { display: block; max-width: 30vw; font-size: .68rem; line-height: 1.45; }
  .cv-right .h2 { font-size: clamp(1.2rem, 2.6vw, 1.5rem); }

  /* Set the hour: the words on the open sky right of the towers, the clock and the dial along the foot, as on a PC */
  .hour-stage > .wrap { left: auto; right: var(--gutter); top: 12px; bottom: auto; width: min(34vw, 300px); margin: 0; padding: 0; text-align: left; }
  .hour .sec-head { margin: 0; display: block; }
  .hour-stage .sec-head .eyebrow { display: none; }
  .hour-stage .sec-head .h2 { margin: 0 0 4px; font-size: clamp(1.3rem, 3vw, 1.7rem); }
  .hour-stage .sec-head .lede { margin: 0; max-width: 30ch; font-size: .74rem; line-height: 1.4; }
  .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; }
  .hour .hour-stage .frame .clock { left: var(--gutter); right: auto; top: auto; bottom: 62px; font-size: 1.7rem; }
  .hour .hour-stage .frame .dial { bottom: 6px; }

  /* location: the heading on the sky of the picture, as on a PC */
  #location.curtain .opener { position: sticky; height: 100lvh; aspect-ratio: auto; margin-bottom: 40vh; }
  #location.curtain .opener > img { scale: calc(1.1 - .07 * var(--cov, 0)); }
  #location .opener .loc-title { display: block; position: absolute; left: auto; right: var(--gutter); top: 16px; bottom: auto; width: min(38vw, 340px); margin: 0; font-size: 1rem; letter-spacing: normal; text-transform: none; text-align: left; }
  #location .loc-title .eyebrow { margin: 0 0 6px; color: #fff; }
  #location .loc-title .display { color: #fff; font-size: clamp(1.25rem, 2.8vw, 1.6rem); line-height: 1.1; text-transform: none; letter-spacing: 0; }
  #location .loc-title .lede { display: none; } /* too small on the bright sky; the address and the distances follow under the picture */
  #location > .wrap > .sec-head { display: none; }

  /* cards and split panels that were taller than the screen */
  .tw-row { padding-top: 24px; }
  .tw-card { flex-basis: min(46vw, 400px); aspect-ratio: auto; height: min(86svh, 340px); }
  .tw-card .tx > p:not(.eyebrow):not(.av) { display: none; } /* name, line, price, link: the long sentence ran up over the bright towers (his 4 Nov shot) */
  .bro2 .bro-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
  .bro2 .bro-cover { aspect-ratio: auto; min-height: 0; }
  .bro2 .bro-body { padding: 24px var(--gutter) 24px 24px; }
  .bro2 .bro-list .eyebrow { margin: 18px 0 10px; padding-top: 14px; }
  .bro2 .bro-acts { margin: 14px 0 0; }
  /* the lock on the 360, in one short screen */
  .orbit-lock { padding: 12px var(--gutter) 10px; }
  .orbit-lock svg { width: 24px; margin-bottom: 6px; }
  section.ivory .orbit-lock .eyebrow { margin-bottom: 4px; font-size: .62rem; }
  #orbit .orbit-lock .h2 { font-size: clamp(1.3rem, 3.4vw, 1.7rem); margin-bottom: 6px; }
  #orbit .orbit-lock .lede { font-size: .78rem; line-height: 1.35; max-width: 56ch; }
  .orbit-lock .act { margin-top: 10px; }
  .orbit-lock .btn { min-height: 38px; font-size: .8rem; }
  /* Have a question for us: the picture beside the words, as on a wide screen */
  .ct-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "media head" "media form" "info form"; gap: 18px 24px; }
  .ct-media { aspect-ratio: auto; margin-inline: 0; border-radius: 6px; }
  .pg-card { height: 74svh; }
  .pg-card .t { bottom: 36px; font-size: 1.25rem; }
  .pg-card .s { bottom: 14px; font-size: .72rem; }

  /* the menu */
  .dr-inner { padding-top: 60px; }
  .dr-links { columns: 2; column-gap: 32px; }
  .dr-links a { padding: 4px 0; font-size: 1.2rem; }
}