/* =========================================================================
   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,
.nav-contact::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,
.nav-contact:hover::after {
  transform: scaleX(1);
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
}

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

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

.lang.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
}

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

.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
   ========================================================================= */
@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: none;
  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.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); }

.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: flex; }
  .site-ui { opacity: 1; }                 /* header (logo + hamburger) always reachable on phones */
  .site-ui-right .nav-contact,
  .site-ui-right .lang-toggle { display: none; }  /* these live in the hamburger menu */
  /* 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; }
}
@media (min-width: 861px) {
  .mobile-menu { display: 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-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);
}

.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;
}