/* =========================================================================
   NOMAD Residences — styles
   Loft-style dark + warm. Cinematic frame-scrub hero.
   ========================================================================= */

:root {
  --bg: #0c0a09;          /* warm near-black */
  --surface: #16130f;
  --text: #fafafa;
  --muted: #9a938c;
  --accent: #c2a878;      /* warm gold */
  --hairline: rgba(250, 250, 250, 0.14);

  --serif: "Noto Serif Display", Georgia, serif;
  --script: "Caveat", cursive;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "Fragment Mono", ui-monospace, monospace;

  --gutter: clamp(20px, 5vw, 64px);
  --inset: clamp(24px, 3.5vw, 44px);
  --section-pad: clamp(80px, 12vh, 180px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--bg);
  /* stop the rubber-band / scroll-chain that lets a drag escape the page on iPad */
  overscroll-behavior-y: none;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(0.95rem, 0.5vw + 0.85rem, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Focus visibility against dark UI */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
  border-radius: 2px;
}

/* =========================================================================
   NOISE / GRAIN OVERLAY
   ========================================================================= */
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================================
   CUSTOM CURSOR
   ========================================================================= */
.cursor,
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10000;
  border-radius: 50%;
  mix-blend-mode: difference;
  will-change: transform;
}

.cursor {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--text);
  transition: width 0.22s ease, height 0.22s ease, margin 0.22s ease, opacity 0.3s ease;
}

.cursor-dot {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--text);
}

.cursor.is-hover {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
}

body.cursor-active * {
  cursor: none;
}

/* Hide custom cursor on coarse pointers */
@media (pointer: coarse), (hover: none) {
  .cursor,
  .cursor-dot {
    display: none !important;
  }
  body.cursor-active * {
    cursor: auto;
  }
}

/* =========================================================================
   PRELOADER
   ========================================================================= */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #050403;
  display: grid;
  place-items: center;
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

#preloader.is-done {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

.preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
}

.preloader-mark {
  width: clamp(160px, 26vw, 320px);
  height: auto;
  /* black wordmark -> white on dark */
  filter: brightness(0) invert(1);
}

/* count + progress line, pinned to the lower third like the reference */
.preloader-foot {
  position: absolute;
  left: 50%;
  bottom: clamp(40px, 8vh, 84px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.preloader-count {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.preloader-track {
  width: min(46vw, 360px);
  height: 1px;
  background: var(--hairline);
  overflow: hidden;
}
.preloader-bar {
  height: 100%;
  width: 100%;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: center center;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

/* =========================================================================
   PERSISTENT UI
   ========================================================================= */
.site-ui {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--inset) var(--gutter);
  z-index: 5000;
  opacity: 0;
  transition: opacity 0.8s ease 0.2s;
}

.site-ui.is-visible {
  opacity: 1;
}

.wordmark img {
  width: clamp(96px, 11vw, 140px);
  height: auto;
  filter: brightness(0) invert(1);
  transition: opacity 0.3s ease;
}

.wordmark:hover img {
  opacity: 0.72;
}

/* header clusters: logo + nav left, contact + language right */
.site-ui-left,
.site-ui-right {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 44px);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 38px);
}

.nav-links a,
.nav-contact,
.lang {
  position: relative;
  font-family: var(--sans);
  font-size: clamp(0.82rem, 1vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
  padding-bottom: 4px;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

.lang-toggle {
  position: relative;
  display: flex;
  align-items: center;
}

.lang {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--muted);
}

.lang.is-active {
  color: var(--text);
}

/* Language selector (five editions): the current code in the bar, a small panel with the
   endonyms on hover / focus / tap. The links stay plain <a class="lang"> so the broker
   editions (partners.js) keep recording the visitor's choice. Installed on every page by
   tools/i18n/build.js. */
.lang-cur {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: clamp(0.82rem, 1vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
  transition: color 0.3s ease;
}
.lang-cur svg {
  width: 9px;
  height: 6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lang-toggle:hover .lang-cur svg,
.lang-toggle:focus-within .lang-cur svg,
.lang-toggle.is-open .lang-cur svg { transform: rotate(180deg); }
.lang-cur:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
/* keep the panel reachable across the gap under the button */
.lang-toggle::after { content: ""; position: absolute; left: -12px; right: -12px; top: 100%; height: 14px; }
.lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: -14px;
  min-width: 156px;
  padding: 8px 0;
  border-radius: 3px;
  background: rgba(12, 10, 9, 0.94);
  border: 1px solid var(--hairline);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.25s;
  z-index: 20;
}
.lang-toggle:hover .lang-menu,
.lang-toggle:focus-within .lang-menu,
.lang-toggle.is-open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lang-menu .lang {
  display: block;
  padding: 8px 22px 8px 18px;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-shadow: none;
  white-space: nowrap;
}
.lang-menu .lang:hover,
.lang-menu .lang:focus-visible,
.lang-menu .lang.is-active { color: var(--text); }
.lang-menu .lang.is-active::after { display: none; }
.lang-menu .lang.is-active { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .lang-cur svg, .lang-menu { transition: none; }
}

/* Header since 2026-10-20 (third pass, Eugenio: "NOMAD in the middle, the menu very obvious"):
   [≡ Menu] on the left · the wordmark centred · language + a gold Contact button on the right. The old link
   bar stays in the DOM, hidden (the home script wires the availability overlay through #navAvailability).
   Built by tools/nav/apply_nav.py. */
.site-ui { position: fixed; }
.site-ui .wordmark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; line-height: 0; }
.site-ui .nav-links { display: none !important; }
.site-ui-right .nav-contact { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 30px; background: #c2a878; color: #1a140c;
  font-family: var(--sans); font-size: clamp(0.72rem, 0.85vw, 0.82rem); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-shadow: none;
  transition: background 0.25s ease, transform 0.25s ease; }
.site-ui-right .nav-contact::after { content: "→"; }
.site-ui-right .nav-contact:hover { background: #d4bd93; }
.site-ui-right .nav-contact::before { display: none; }
.site-ui-right .nav-contact:hover::after { transform: none; }

/* vertical social rail (right edge, mid height) */
.social-rail {
  position: fixed;
  right: clamp(14px, 2.2vw, 38px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 4500;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 22px);
  opacity: 0;
  transition: opacity 0.8s ease 0.5s;
}

.social-rail.is-visible {
  opacity: 1;
}

.social-rail.rail-hidden {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* Broker editions with no social accounts keep only WhatsApp; partners.js flags
   that case. One circle at mid-height reads as a stray dot, so it moves to the
   corner — the transform has to go too, or it sits half a button too high. */
.social-rail.rail-solo {
  top: auto;
  bottom: clamp(18px, 3.4vh, 34px);
  transform: none;
}

.social-ic {
  width: clamp(40px, 3vw, 46px);
  height: clamp(40px, 3vw, 46px);
  border-radius: 50%;
  background: #ece7de;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  transition: transform 0.3s ease, background 0.3s ease;
}

.social-ic img {
  width: 55%;
  height: 55%;
  object-fit: contain;
}

.social-ic:hover {
  transform: scale(1.08);
  background: #fff;
}

/* Bottom scroll progress bar */
.hero-progress {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--hairline);
  z-index: 5000;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero-progress.is-visible {
  opacity: 1;
}

.hero-progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* =========================================================================
   HERO SCRUBBER
   ========================================================================= */
.hero {
  position: relative;
  /* 900vh for the 80s film. 800vh of scrub carries 933 frames, i.e. 1.17
     frames per vh against the old set's 0.96, so the scrub is denser than it
     was even though the film is 2.16x longer. */
  height: 900vh;
}

.hero-pin {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #000;
  /* The hero is a pinned, full-screen canvas. Without this, a drag across it on
     iPad is ambiguous and Safari resolves it as pinch/double-tap zoom rather than
     a scroll, which leaves the visitor stuck on the first beat. */
  touch-action: pan-y;
}

#frameCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 6, 5, 0.62) 0%, rgba(8, 6, 5, 0) 30%),
    linear-gradient(0deg, rgba(8, 6, 5, 0.95) 0%, rgba(8, 6, 5, 0.58) 24%, rgba(8, 6, 5, 0.18) 50%, rgba(8, 6, 5, 0) 72%),
    radial-gradient(135% 110% at 0% 100%, rgba(8, 6, 5, 0.62) 0%, rgba(8, 6, 5, 0) 58%),
    radial-gradient(118% 130% at 50% 30%, rgba(8, 6, 5, 0) 50%, rgba(8, 6, 5, 0.52) 100%),
    rgba(8, 6, 5, 0.32);
}

/* Text beats — bottom left */
.beats {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(64px, 11vh, 120px);
  width: min(58vw, 900px);
  max-width: calc(100vw - var(--gutter) * 2);
  z-index: 30;
}

.beat {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}

.beat.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Minimal beats: headline + subline only. */
.beat-head {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.85rem, 3.3vw + 0.3rem, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--text);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.45);
  text-wrap: balance;
}

.beat-head .script {
  font-family: var(--script);
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
  font-size: 1.18em;
  letter-spacing: 0;
  padding: 0 0.04em;
}

.beat-sub {
  margin-top: 16px;
  font-family: var(--sans);
  font-size: clamp(1rem, 0.6vw + 0.85rem, 1.2rem);
  line-height: 1.5;
  color: #e9e4dd;
  max-width: 44ch;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
}

/* Returns line on the money beat. Deliberately quieter than .beat-sub: it is a
   projection, not a promise, and the gold rule ties it to the brand accent. */
.beat-note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(198, 164, 106, 0.42);
  display: inline-block;
  font-family: var(--sans);
  font-size: clamp(0.82rem, 0.3vw + 0.74rem, 0.95rem);
  letter-spacing: 0.04em;
  line-height: 1.45;
  color: #d8d2c8;
  max-width: 44ch;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
}

/* Scroll-reveal for closing sections (appear on enter) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.95s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.95s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
}

/* ===================== INTRO LANDING (START HERE) ===================== */
body.landing-active {
  overflow: hidden;
}
#landing {
  position: fixed;
  inset: 0;
  z-index: 8000;
  /* The facade, not black. Safari (and any browser with autoplay blocked or a
     Low Power Mode) will not start the cinemagraph on its own, and the visitor
     must never open the site onto an empty black screen. The poster covers the
     video element; this covers the moment before the poster decodes. */
  background: #050403 url("assets/poster-facade.jpg") center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 1.3s ease;
}
#landing.is-hidden {
  opacity: 0;
  pointer-events: none;
}
/* on START HERE: fade the mark + button fast, keep the cinemagraph as the
   base for the boom crossfade */
#landing.starting .landing-inner {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* smooth facade -> aerial boom clip, crossfaded over the cinemagraph */
#introBoom {
  position: fixed;
  inset: 0;
  z-index: 8050;
  background: #050403;
  opacity: 0;
  pointer-events: none;
  display: none;
  transition: opacity 0.8s ease;
}
#introBoom.is-active {
  opacity: 1;
}
.boom-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.landing-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* same still behind the video, so a blocked autoplay shows the facade */
  background: url("assets/poster-facade.jpg") center / cover no-repeat;
}
.landing-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 6, 5, 0.4) 0%, rgba(8, 6, 5, 0) 34%),
    linear-gradient(0deg, rgba(8, 6, 5, 0.48) 0%, rgba(8, 6, 5, 0) 42%),
    radial-gradient(125% 105% at 50% 58%, rgba(8, 6, 5, 0) 50%, rgba(8, 6, 5, 0.42) 100%);
}
.landing-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(26px, 4.5vh, 50px);
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1s ease 0.25s, transform 1s ease 0.25s;
}
#landing.is-ready .landing-inner {
  opacity: 1;
  transform: none;
}
.landing-mark {
  width: clamp(170px, 17vw, 248px);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.97;
}
.start-here {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.72rem;
  color: #0c0a09;
  background: #fafafa;
  border: 0;
  padding: 17px 34px;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    background 0.45s ease;
}
.start-here:hover {
  background: var(--accent);
  transform: translateY(-2px);
}

/* Scroll hint */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 5vh, 48px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 25;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  transition: opacity 0.5s ease;
}

.scroll-hint.is-hidden {
  opacity: 0;
}

.scroll-hint-line {
  width: 1px;
  height: 38px;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}

.scroll-hint-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  animation: scroll-drip 1.8s ease-in-out infinite;
}

@keyframes scroll-drip {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* =========================================================================
   CLOSING SECTIONS
   ========================================================================= */
.script-accent {
  font-family: var(--script);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  color: var(--accent);
  margin-bottom: 0.2em;
}

.layered-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.92;
  margin: 0.1em 0 0.55em;
}

.head-outline,
.head-fill {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.8rem, 13vw, 9.5rem);
  letter-spacing: -0.02em;
  line-height: 0.92;
}

.head-outline {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--text);
  text-stroke: 1.4px var(--text);
}

.head-fill {
  color: var(--text);
  margin-top: -0.06em;
}

/* =========================================================================
   CLOSING: INQUIRY (brand statement + contact form over a dusk backdrop)
   ========================================================================= */
.inquiry {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(72px, 11vh, 150px) var(--gutter) clamp(40px, 6vh, 68px);
  border-top: 1px solid var(--hairline);
}

.inquiry-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("assets/inquiry-bg.jpg") center/cover no-repeat;
}

.inquiry-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(12, 10, 9, 0.9) 0%, rgba(12, 10, 9, 0.8) 55%, rgba(12, 10, 9, 0.92) 100%),
    radial-gradient(130% 130% at 22% 30%, rgba(12, 10, 9, 0.45) 0%, rgba(12, 10, 9, 0.92) 70%);
}

.inquiry-inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}

/* left: brand statement */
.inquiry-left {
  max-width: 32ch;
}

.inquiry .script-accent {
  margin-bottom: 0.35em;
}

.inquiry .layered-head {
  align-items: flex-start;
  margin: 0;
}

.inquiry .head-outline,
.inquiry .head-fill {
  font-size: clamp(2.4rem, 5.4vw, 4.8rem);
}

.inquiry-lead {
  margin-top: clamp(20px, 3vh, 34px);
  max-width: 30ch;
  font-family: var(--sans);
  font-size: clamp(0.98rem, 1.05vw, 1.12rem);
  line-height: 1.6;
  color: #d8d2ca;
}

.inquiry-where {
  margin-top: clamp(34px, 6vh, 72px);
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2vw, 28px);
}

.where-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.where-val {
  font-family: var(--sans);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  color: var(--text);
}

/* right: form */
/* clean, flat panel (no glass) so the fields read clearly over the photo */
.inquiry-form {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vh, 26px);
  background: rgba(14, 12, 9, 0.82);
  border: 1px solid rgba(250, 250, 250, 0.08);
  border-radius: 2px;
  padding: clamp(30px, 3vw, 52px);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 1.8vw, 28px);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field label,
.field-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Realtor / Investor toggle */
.toggle-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.toggle-opt {
  cursor: pointer;
}

.toggle-opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.toggle-opt span {
  display: block;
  text-align: center;
  padding: 13px 14px;
  border: 1px solid rgba(250, 250, 250, 0.22);
  border-radius: 2px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.95rem;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.toggle-opt:hover span {
  border-color: rgba(250, 250, 250, 0.42);
  color: var(--text);
}

.toggle-opt input:checked + span {
  border-color: var(--accent);
  background: rgba(194, 168, 120, 0.16);
  color: var(--text);
}

.toggle-opt input:focus-visible + span {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.toggle-group.invalid span {
  border-color: #c98b7a;
}

/* clearly-defined fields — crisp thin border, no fill */
.field input,
.field textarea {
  background: transparent;
  border: 1px solid rgba(250, 250, 250, 0.22);
  border-radius: 2px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  padding: 14px 16px;
  transition: border-color 0.3s ease;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(250, 250, 250, 0.3);
}

.field textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* flat, crisp send button */
.send-inquiry {
  width: 100%;
  margin-top: clamp(8px, 1.4vh, 16px);
  background: var(--text);
  color: var(--bg);
  border: 0;
  border-radius: 2px;
  padding: 17px 24px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: background 0.3s ease, color 0.3s ease;
}

.send-inquiry span {
  transition: transform 0.3s ease;
}

.send-inquiry:hover {
  background: var(--accent);
}

.send-inquiry:hover span {
  transform: translateX(4px);
}

.form-success {
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--accent);
}

/* footer row + disclaimer */
.inquiry-footer {
  position: relative;
  max-width: 1280px;
  margin: clamp(56px, 9vh, 110px) auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.inq-foot-left {
  color: var(--muted);
}

.inq-foot-right {
  color: var(--accent);
}

.inquiry-address {
  position: relative;
  max-width: 1280px;
  margin: 16px auto 0;
  font-family: var(--sans);
  font-size: 0.72rem;
  line-height: 1.6;
  color: rgba(154, 147, 140, 0.95);
}

.inquiry-disclaimer {
  position: relative;
  max-width: 1280px;
  margin: 16px auto 0;
  font-family: var(--sans);
  font-size: 0.72rem;
  line-height: 1.6;
  color: rgba(154, 147, 140, 0.7);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
/* Five items in the header since the "Discover" group (2026-10-20; seven before): the row still
   tightens between the phone breakpoint and ~1280px so nothing touches "Contacto". */
@media (min-width: 861px) and (max-width: 1280px) {
  .site-ui-left { gap: clamp(14px, 1.8vw, 28px); }
  .nav-links { gap: clamp(10px, 1.35vw, 22px); }
  .nav-links a, .nav-contact, .lang { font-size: clamp(0.76rem, 0.9vw, 0.9rem); }
}

@media (max-width: 860px) {
  /* stack the inquiry into one column */
  .inquiry-inner {
    grid-template-columns: 1fr;
    gap: clamp(40px, 7vh, 64px);
  }
  .inquiry-left {
    max-width: none;
  }

  /* the full nav + social rail collapse on smaller screens
     (logo + Contact + language stay) */
  .nav-links,
  .social-rail {
    display: none;
  }
}

@media (max-width: 760px) {
  .beats {
    max-width: 80vw;
  }
}

@media (max-width: 480px) {
  /* keep the subline on phones (it carries real copy); just trim it down */
  .beat-sub {
    margin-top: 12px;
    font-size: clamp(0.92rem, 3.4vw, 1rem);
    max-width: 32ch;
  }

  /* single-column form fields on phones */
  .field-row {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .scroll-hint-line::after {
    animation: none;
    transform: none;
  }

  /* Static hero: show first frame, reduce the tall track so the page is
     navigable without scrubbing. */
  .hero {
    height: auto;
  }

  .hero-pin {
    position: relative;
    height: 100vh;
  }

  .scroll-hint {
    display: none;
  }
}

/* =========================================================================
   REDUCED MOTION — static, stacked beats (set via JS body.rm-static)
   The scrubber never advances past frame 1, so without this every beat after
   the first would be unreachable. Stack all six messages + proof lines in
   normal flow below the static frame so no copy is lost.
   ========================================================================= */
body.rm-static .hero-pin {
  height: auto;
  min-height: 100vh;
  overflow: visible;
}

body.rm-static #frameCanvas {
  position: absolute;
  height: 100vh;
}

body.rm-static .hero-scrim {
  height: 100vh;
}

body.rm-static .beats {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  max-width: none;
  width: 100%;
  text-align: left;
  padding: clamp(40px, 8vh, 96px) var(--gutter) clamp(56px, 10vh, 120px);
  z-index: 30;
}

body.rm-static .beat {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  max-width: 46ch;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  margin-bottom: clamp(28px, 5vh, 56px);
  text-align: left;
}

/* ===================== AVAILABILITY OVERLAY (embedded, keeps the menu) ===================== */
.avail-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;               /* above all main-site content (noise 9000, landing 8000); below cursor/preloader */
  background: #0c0a09;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}
.avail-overlay.is-open { opacity: 1; visibility: visible; }
.avail-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #0c0a09;
}
.avail-close {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 9994;               /* above the overlay + menu so it's always reachable */
  display: none;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(10, 8, 6, 0.55);
  color: #efe9df;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(5px);
  transition: 0.2s;
}
.avail-overlay.is-open .avail-close { display: inline-flex; }
.avail-close:hover { border-color: #c2a878; background: rgba(194, 168, 120, 0.18); }
html.avail-open { overflow: hidden; }
/* keep the menu visible, legible and on top of the availability animation */
html.avail-open .site-ui {
  opacity: 1;
  z-index: 9992;               /* above the overlay (9990) so the menu stays put */
  background: linear-gradient(180deg, rgba(8, 6, 5, 0.6), rgba(8, 6, 5, 0));
}
/* the custom cursor can't track inside the iframe — drop it and restore the native
   cursor whenever we've left the homepage into the availability overlay */
html.avail-open .cursor,
html.avail-open .cursor-dot { display: none !important; }
html.avail-open body.cursor-active,
html.avail-open body.cursor-active * { cursor: auto !important; }

/* ===================== MOBILE MENU (hamburger) ===================== */
.nav-toggle {
  display: flex;                   /* every size since the mega menu (2026-10-20) */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 8, 6, 0.4);
  backdrop-filter: blur(4px);
  cursor: pointer;
  position: relative;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #efe9df;
  border-radius: 2px;
  transition: transform 0.28s ease, opacity 0.2s ease;
}
html.avail-open .nav-toggle { display: flex; }   /* the ✕ closes the availability on every screen size (2026-10-20) */
html.menu-open .nav-toggle span:nth-child(1),
html.avail-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
html.menu-open .nav-toggle span:nth-child(2),
html.avail-open .nav-toggle span:nth-child(2) { opacity: 0; }
html.menu-open .nav-toggle span:nth-child(3),
html.avail-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 861px) {
  .nav-toggle { flex-direction: row; gap: 12px; width: auto; height: 44px; padding: 0 20px 0 18px; border-radius: 30px; border-color: rgba(255, 255, 255, 0.34); }
  .nav-toggle .nt-label { font-family: var(--sans); font-size: clamp(0.78rem, 0.95vw, 0.9rem); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #efe9df; }
  .nav-toggle span { width: 18px; }
  .nav-toggle span:nth-child(2) { width: 12px; align-self: flex-start; }
  .nav-toggle:hover { border-color: rgba(194, 168, 120, 0.7); }
  .nav-toggle > span { position: static; }
  /* the three lines sit in a 18px column; the label follows */
  .nav-toggle { display: grid; grid-template-columns: 18px auto; grid-template-rows: repeat(3, 2px); row-gap: 4px; column-gap: 12px; align-items: center; align-content: center; }
  .nav-toggle .nt-label { grid-column: 2; grid-row: 1 / 4; }
  html.menu-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  html.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  html.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}
@media (max-width: 860px) {
  /* phones: the same pill as on desktop, smaller — three lines in a 16px column, the label beside them */
  .nav-toggle { display: grid; grid-template-columns: 16px auto; grid-template-rows: repeat(3, 2px); row-gap: 3px; column-gap: 9px;
    align-items: center; align-content: center; width: auto; height: 40px; padding: 0 14px 0 12px; border-radius: 30px; border-color: rgba(255, 255, 255, 0.34); }
  .nav-toggle span { width: 16px; position: static; }
  .nav-toggle span:nth-child(2) { width: 11px; justify-self: start; }
  .nav-toggle .nt-label { grid-column: 2; grid-row: 1 / 4; font-family: var(--sans); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #efe9df; }
  html.menu-open .nav-toggle span:nth-child(1), html.avail-open .nav-toggle span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  html.menu-open .nav-toggle span:nth-child(2), html.avail-open .nav-toggle span:nth-child(2) { opacity: 0; }
  html.menu-open .nav-toggle span:nth-child(3), html.avail-open .nav-toggle span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
  .site-ui-right .nav-contact { padding: 10px 13px; font-size: 0.64rem; letter-spacing: 0.1em; }
  .site-ui-right .nav-contact::after { display: none; }
  .site-ui .wordmark img { width: 84px; }
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 9995;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(8, 6, 5, 0.96);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu a {
  color: #efe9df;
  font-family: "Noto Serif Display", serif;
  font-size: clamp(26px, 7vw, 40px);
  font-weight: 500;
  padding: 9px 0;
  letter-spacing: 0.01em;
}
.mobile-menu a:hover,
.mobile-menu a.is-active { color: #c2a878; }
.mm-lang { display: flex; gap: 10px; margin-top: 26px; }
.mm-lang .lang {
  color: #9b9389;
  font-size: 14px;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  cursor: pointer;
}
.mm-lang .lang.is-active { color: #1a140c; background: #c2a878; border-color: #c2a878; }
/* keep the hamburger tappable above the open menu and the availability overlay */
html.menu-open .site-ui { opacity: 1; z-index: 9996; }

@media (max-width: 860px) {
  .nav-toggle { display: grid; }            /* the pill layout defined above */
  .site-ui { opacity: 1; }                 /* header (logo + hamburger) always reachable on phones */
  .site-ui-right .lang-toggle { display: none; }  /* the languages live in the menu on phones; Contact stays in the bar */
  /* over the availability the iframe owns the screen — drop the parent logo so the
     room detail's own controls (back ×) aren't crowded; the ✕ toggle stays top-right */
  html.avail-open .wordmark { display: none; }
}
/* ===================== MEGA MENU (every size, 2026-10-20, cleaned up the same evening) =====================
   #mobileMenu keeps its id/class so pages.js and the home script toggle it untouched.
   Desktop: two panels — the links on a solid dark panel (left), a photo panel (right) that follows the
   hovered link with its own caption. Nothing is written over the photo. While it is open the header
   shows only the logo and the Close button. Phones: one column, no photo. Photos load on the first open. */
.mobile-menu.mega { display: grid; grid-template-columns: minmax(0, 0.56fr) minmax(0, 0.44fr); align-items: stretch; justify-content: stretch; gap: 0; background: #0c0a09; backdrop-filter: none; overflow: hidden; }
.mega-inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-height: 100%;
  padding: calc(var(--inset) * 2 + 40px) clamp(28px, 4vw, 64px) calc(var(--inset) + 10px) var(--gutter); overflow-y: auto; }
.mega-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
.mega-k { margin: 0 0 10px; font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #c2a878; }
.mobile-menu.mega a.mega-link { display: block; padding: 11px 0 12px; font-size: clamp(22px, 2.1vw, 32px); line-height: 1.1; letter-spacing: 0; color: #efe9df;
  opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.25s ease; }
.mobile-menu.mega.open a.mega-link { opacity: 1; transform: none; }
.mega-col a.mega-link:nth-child(2) { transition-delay: 0.06s; } .mega-col a.mega-link:nth-child(3) { transition-delay: 0.12s; }
.mega-col a.mega-link:nth-child(4) { transition-delay: 0.18s; } .mega-col a.mega-link:nth-child(5) { transition-delay: 0.24s; }
.mega-col:nth-child(2) a.mega-link { transition-delay: 0.12s; } .mega-col:nth-child(2) a.mega-link:nth-child(3) { transition-delay: 0.18s; }
.mega-col:nth-child(2) a.mega-link:nth-child(4) { transition-delay: 0.24s; } .mega-col:nth-child(2) a.mega-link:nth-child(5) { transition-delay: 0.30s; }
.mega-t { display: block; font-family: "Noto Serif Display", serif; font-weight: 500; position: relative; padding-right: 28px; }
.mega-t::after { content: "→"; position: absolute; right: 2px; top: 0; font-family: var(--sans); font-size: 0.6em; color: #c2a878; opacity: 0; transform: translateX(-8px); transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); }
.mobile-menu.mega a.mega-link:hover .mega-t::after, .mobile-menu.mega a.mega-link.is-active .mega-t::after { opacity: 1; transform: none; }
.mobile-menu.mega a.mega-link:hover, .mobile-menu.mega a.mega-link.is-active { color: #c2a878; }
.mega-d { display: block; margin-top: 3px; font-family: var(--sans); font-size: 0.78rem; line-height: 1.4; letter-spacing: 0.01em; color: #8f877c; transition: color 0.25s ease; }
.mobile-menu.mega a.mega-link:hover .mega-d { color: #cfc7bb; }
.mega-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: clamp(26px, 5vh, 56px); padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.mobile-menu.mega a.mega-contact { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #1a140c; background: #c2a878; padding: 13px 24px; border-radius: 30px; transition: background 0.25s ease; }
.mobile-menu.mega a.mega-contact::after { content: "→"; }
.mobile-menu.mega a.mega-contact:hover { background: #d4bd93; color: #1a140c; }
.mobile-menu.mega .mm-lang { margin-top: 0; gap: 6px; }
.mobile-menu.mega .mm-lang .lang { font-family: var(--sans); font-size: 12px; letter-spacing: 0.08em; padding: 6px 12px; }
/* photo panel */
.mega-bg { position: relative; z-index: 0; overflow: hidden; background: #171310; }
.mega-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); filter: brightness(0.82) saturate(0.95);
  transition: opacity 0.8s ease, transform 8s linear; }
.mega-bg img.is-on { opacity: 1; transform: scale(1); }
.mega-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 10, 9, 0) 55%, rgba(12, 10, 9, 0.82) 100%); pointer-events: none; }
.mega-cap { position: absolute; left: clamp(26px, 3.4vw, 54px); right: clamp(26px, 3.4vw, 54px); bottom: clamp(26px, 4vh, 48px); z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.mega-cap-t { font-family: "Noto Serif Display", serif; font-size: clamp(22px, 2vw, 30px); color: #efe9df; }
.mega-cap-d { font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.02em; color: #cfc7bb; }
/* header while the menu is open: logo + Close only */
html.menu-open .nav-links, html.menu-open .site-ui-right .nav-contact, html.menu-open .site-ui-right .lang-toggle { opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
html.menu-open .nav-toggle { background: rgba(10, 8, 6, 0.55); border-color: rgba(255, 255, 255, 0.28); }
html.menu-open .nt-label, html.avail-open .nt-label { font-size: 0; }
html.menu-open .nt-label::after, html.avail-open .nt-label::after { content: attr(data-close); font-size: clamp(0.78rem, 0.95vw, 0.9rem); }
@media (max-width: 860px) { html.menu-open .nt-label::after, html.avail-open .nt-label::after { font-size: 0.7rem; } }
html.menu-open .site-ui-right .nav-contact { opacity: 0; pointer-events: none; }
@media (max-width: 1099px) {   /* tablets and phones: one column, no photo panel */
  .mobile-menu.mega { display: flex; flex-direction: column; }
  .mega-bg { display: none; }
}
@media (max-width: 860px) {
  .mega-inner { justify-content: flex-start; padding: calc(var(--inset) + 68px) var(--gutter) 22px; }
  .mega-cols { grid-template-columns: 1fr; gap: 22px; }
  .mega-k { font-size: 0.68rem; }
  .mobile-menu.mega a.mega-link { font-size: clamp(22px, 6vw, 28px); padding: 9px 0 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
  .mega-t { padding-right: 24px; }
  .mega-t::after { opacity: 0.6; transform: none; }
  .mega-d { font-size: 0.74rem; }
  .mega-foot { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) { .mega-bg img, .mobile-menu.mega a.mega-link { transition: none; } }

/* =====================================================================
   COLOUR CODA — the concept read-out for the morphing suite (movement 7).

   The palette is a RULE, not an object: the five colours become the hairline
   that already sits above the returns line on the money beat, so the swatches
   stop being a separate thing to look at and read as part of the type. Name and
   its three words sit on one line beneath it. Two rows, genuinely horizontal.

   The subline keeps its box (visibility, not display) and this is positioned
   over it, so beat 5's headline lands at exactly the same height as every
   other beat no matter how tall the read-out gets.
   ===================================================================== */
.beat-slot {
  position: relative;
}

.beat.is-coda .beat-sub {
  visibility: hidden;
}

.coda {
  position: absolute;
  left: 0;
  top: 0;
  width: max-content;
  max-width: calc(100vw - var(--gutter) * 2);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.coda.is-open {
  opacity: 1;
  transform: translateY(0);
}

/* the palette, as the rule */
.coda-rule {
  display: flex;
  width: 100%;
  height: clamp(7px, 0.62vw, 11px);
  margin-bottom: clamp(10px, 1.1vh, 16px);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

.coda-rule i {
  flex: 1;
  /* no CSS transition: JS interpolates every tick so the rule tracks the wall
     exactly rather than lagging a fixed duration behind it */
}

.coda-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: clamp(12px, 1.4vw, 24px);
}

.coda-no {
  font-family: var(--mono);
  font-size: clamp(0.54rem, 0.3vw + 0.44rem, 0.7rem);
  letter-spacing: 0.28em;
  color: var(--accent);
  white-space: nowrap;
}

.coda-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.45rem, 1.75vw + 0.7rem, 2.4rem);
  line-height: 1;
  letter-spacing: 0.13em;
  white-space: nowrap;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.75);
}

.coda-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;
  font-family: var(--mono);
  font-size: clamp(0.64rem, 0.4vw + 0.5rem, 0.85rem);
  letter-spacing: 0.2em;
  color: #d8d1c7;
  white-space: nowrap;
}

.coda-key + .coda-key::before {
  content: "\00b7";
  margin-right: 0.8em;
  opacity: 0.55;
}

/* Card turn: the text blinks out for a beat so a new concept reads as a new
   card rather than two labels dissolving through each other. The rule does not
   blink -- it flows colour continuously, which is the point of it. */
.coda-no,
.coda-name,
.coda-key {
  transition: opacity 0.22s ease;
}

.coda.is-turning .coda-no,
.coda.is-turning .coda-name,
.coda.is-turning .coda-key {
  opacity: 0;
}

@media (max-width: 640px) {
  .coda-line {
    gap: 10px;
  }
}

/* Reduced motion: the coda is decoration on a scrub that no longer runs. */
.rm-static .coda {
  display: none;
}

.lang{text-decoration:none}

/* =========================================================================
   PAGE FAQ — the contextual block above the contact form
   Colours come from whatever the page already defines, so the same markup is
   ink-on-paper on the editorial pages and light-on-dark on the home page.
   Only the page's own theme is rendered server-side; the other chips pull
   their questions from /assets/faq.json on click, and fall back to links into
   the full FAQ when JavaScript is off.
   ========================================================================= */
.pfaq { padding: clamp(60px, 9vh, 120px) 0; border-top: 1px solid var(--hairline); }
.pfaq-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(16px, 2.4vw, 34px);
  padding-bottom: clamp(20px, 2.6vh, 30px);
}
.pfaq-h {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text);
}
.pfaq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pfaq-chip {
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 8px 15px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.pfaq-chip:hover { color: var(--text); border-color: var(--accent); }
.pfaq-chip[aria-selected="true"] {
  color: var(--bg, #0c0a09);
  background: var(--text);
  border-color: var(--text);
}
.pfaq-list { max-width: 82ch; border-top: 1px solid var(--hairline); }
.pfaq-item { border-bottom: 1px solid var(--hairline); }
.pfaq-item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 2vh, 22px) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(1.06rem, 1.5vw, 1.3rem);
  line-height: 1.3;
  color: var(--text);
  transition: color 0.25s ease;
}
.pfaq-item summary::-webkit-details-marker { display: none; }
.pfaq-item summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--accent);
  flex: 0 0 auto;
}
.pfaq-item[open] summary::after { content: "–"; }
.pfaq-item summary:hover { color: var(--accent); }
.pfaq-a {
  padding: 0 0 clamp(18px, 2.4vh, 26px);
  max-width: 70ch;
  color: var(--muted);
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
  line-height: 1.75;
}
.pfaq-a p + p, .pfaq-a ul + p, .pfaq-a p + ul, .pfaq-a p + ol { margin-top: 10px; }
.pfaq-a ul, .pfaq-a ol { margin: 0; padding-left: 1.3em; }
.pfaq-a li + li { margin-top: 4px; }
.pfaq-a li::marker { color: var(--accent); }
.pfaq-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: baseline;
  margin-top: clamp(22px, 3vh, 32px);
}
.pfaq-all {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.pfaq-all:hover { text-decoration: underline; text-underline-offset: 4px; }
.pfaq-note { font-size: 0.8rem; line-height: 1.5; color: var(--muted); opacity: 0.85; max-width: 70ch; }
@media (max-width: 720px) {
  .pfaq-head { flex-direction: column; align-items: flex-start; }
  .pfaq-item summary { font-size: 1.02rem; }
}

/* =========================================================================
   BROKER EDITIONS (477.nomadcollectiondr.com, innova.nomadcollectiondr.com)
   assets/partners.js removes the inquiry form on these hosts and drops this
   block in its place: the broker's own logo, WhatsApp, email and phone. It
   deliberately reuses the form panel's frame and the .send-inquiry button
   treatment so the section reads as designed, not patched.
   ========================================================================= */
.partner-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.6vh, 30px);
  background: rgba(14, 12, 9, 0.82);
  border: 1px solid rgba(250, 250, 250, 0.08);
  border-radius: 2px;
  padding: clamp(30px, 3vw, 52px);
}

.pc-logo {
  height: clamp(44px, 4.6vw, 62px);
  width: auto;
  max-width: 100%;
}

.pc-wa {
  width: 100%;
  background: var(--text);
  color: var(--bg);
  border: 0;
  border-radius: 2px;
  padding: 17px 24px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: background 0.3s ease, color 0.3s ease;
}

.pc-wa:hover {
  background: var(--accent);
  color: var(--bg);
}

.pc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.pc-row a {
  color: var(--text);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--hairline);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.pc-row a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.pc-sep {
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

/* The editorial pages (amenities, financing, FAQ) invert the inquiry panel to
   cream, which would swallow a white logo. brightness(0) knocks the same
   lockup to black and keeps its transparency. */
.editorial .partner-contact {
  background: #fbf8f2;
  border-color: rgba(28, 22, 14, 0.1);
}

.editorial .pc-logo {
  filter: brightness(0);
}

/* Unless the lockup is coloured. Patrimonial's orange is the brand, so it
   stays orange on cream too and partners.js swaps in the file whose bracket
   is dark instead. */
[data-partner="patrimonial"] .editorial .pc-logo {
  filter: none;
}

.editorial .pc-wa {
  background: #241d13;
  color: #f5f1e9;
}

.editorial .pc-wa:hover {
  background: #5d0000;
  color: #f5f1e9;
}

.editorial .pc-row a {
  color: #241d13;
  border-bottom-color: rgba(28, 22, 14, 0.25);
}

.editorial .pc-row a:hover {
  color: #5d0000;
  border-bottom-color: #5d0000;
}