/* ===================================================================
   ZONE REAL ESTATE — liquid motion build
   -------------------------------------------------------------------
   DIRECTION OF FLOW: down and to the right. Every animation in this
   file obeys it — waves travel right, ambient masses rise and drift
   right, content surfaces from below. One body of water, not effects.

   PALETTE: molten rather than oceanic. Aubergine-black ground with
   magenta/amber masses moving through it — warm light in dark space,
   which for property reads as lit windows at night.
   =================================================================== */

:root {
  --void:      #140C1C;
  --void-2:    #1E1229;
  --void-3:    #241435;

  --flux-1:    #E0518A;   /* magenta rose  */
  --flux-2:    #F2874E;   /* amber         */
  --flux-3:    #8B5CD6;   /* violet        */
  --gold:      #F6C56B;

  --lume:      #FFF1E2;
  --lume-mid:  rgba(255, 241, 226, 0.66);
  --lume-dim:  rgba(255, 241, 226, 0.40);

  --glass:      rgba(255, 241, 226, 0.045);
  --glass-edge: rgba(255, 241, 226, 0.12);

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Outfit", system-ui, sans-serif;
  --font-mono:    "DM Mono", ui-monospace, monospace;

  --shell: 1180px;

  /* Scroll velocity, written by liquid.js. 0 = still, 1 = churning. */
  --churn: 0;

  /* Settle: overshoot then come to rest, the way liquid does. */
  --settle: cubic-bezier(0.22, 1.28, 0.36, 1);
  --pour:   cubic-bezier(0.65, 0, 0.20, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--lume);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

/* ===================================================================
   AMBIENT LIQUID FIELD
   Five blurred masses on long, deliberately unequal cycles (37s–61s)
   so the composite pattern effectively never repeats.
   =================================================================== */
.flux {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.flux__mass {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  will-change: transform;
}

.flux__mass--a {
  width: 46vw; height: 46vw;
  left: -8vw; top: 8vh;
  background: radial-gradient(circle at 40% 40%, var(--flux-3), transparent 68%);
  animation: rise-a 47s ease-in-out infinite;
}

.flux__mass--b {
  width: 38vw; height: 38vw;
  left: 42vw; top: 26vh;
  background: radial-gradient(circle at 50% 50%, var(--flux-1), transparent 66%);
  animation: rise-b 61s ease-in-out infinite;
}

.flux__mass--c {
  width: 30vw; height: 30vw;
  left: 66vw; top: 4vh;
  background: radial-gradient(circle at 50% 50%, var(--flux-2), transparent 64%);
  animation: rise-c 53s ease-in-out infinite;
  opacity: 0.36;
}

.flux__mass--d {
  width: 34vw; height: 34vw;
  left: 14vw; top: 58vh;
  background: radial-gradient(circle at 50% 50%, var(--flux-1), transparent 68%);
  animation: rise-d 41s ease-in-out infinite;
  opacity: 0.3;
}

.flux__mass--e {
  width: 26vw; height: 26vw;
  left: 74vw; top: 62vh;
  background: radial-gradient(circle at 50% 50%, var(--gold), transparent 62%);
  animation: rise-e 37s ease-in-out infinite;
  opacity: 0.22;
}

/* Each drifts RIGHT as it rises — the flow rule, applied to ambience. */
@keyframes rise-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(7vw, -9vh, 0) scale(1.16); }
  66%      { transform: translate3d(13vw, 5vh, 0) scale(0.92); }
}
@keyframes rise-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  40%      { transform: translate3d(9vw, -13vh, 0) scale(0.86); }
  70%      { transform: translate3d(-3vw, 7vh, 0) scale(1.2); }
}
@keyframes rise-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(6vw, 15vh, 0) scale(1.28); }
}
@keyframes rise-d {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  45%      { transform: translate3d(11vw, -11vh, 0) scale(1.14); }
  75%      { transform: translate3d(4vw, -3vh, 0) scale(0.9); }
}
@keyframes rise-e {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-8vw, -14vh, 0) scale(1.22); }
}

/* Fine grain stops the gradients banding on large screens. */
.flux__grain {
  position: absolute;
  inset: -50%;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Pointer wake — desktop only, added by liquid.js */
.wake {
  position: fixed;
  top: 0; left: 0;
  width: 460px; height: 460px;
  margin: -230px 0 0 -230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 135, 78, 0.16), transparent 62%);
  filter: blur(42px);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.7s ease;
  will-change: transform;
}

.wake.is-live { opacity: 1; }

/* ===================================================================
   SIGNATURE — the liquid gauge
   =================================================================== */
.gauge {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.gauge__tube {
  position: relative;
  width: 9px;
  height: 168px;
  border-radius: 20px;
  background: rgba(255, 241, 226, 0.07);
  border: 1px solid var(--glass-edge);
  overflow: hidden;
}

.gauge__fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0%;
  background: linear-gradient(180deg, var(--flux-1), var(--flux-2) 60%, var(--gold));
  color: var(--flux-1);
}

.gauge__meniscus {
  position: absolute;
  left: -2px;
  right: -2px;
  top: -7px;
  width: calc(100% + 4px);
  height: 12px;
  overflow: visible;
}

.gauge__readout {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--lume-dim);
}

@media (max-width: 900px) { .gauge { display: none; } }

/* ===================================================================
   SURFACING — content rises through the meniscus into focus
   =================================================================== */
.js .surface {
  opacity: 0;
  transform: translate3d(-14px, 34px, 0);
  filter: blur(9px);
}

.js .surface.is-surfaced {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    opacity 0.85s var(--pour),
    transform 1.15s var(--settle),
    filter 0.85s var(--pour);
}

/* Stagger, so a group arrives like liquid filling a mould */
.surface[data-delay="1"].is-surfaced { transition-delay: 0.07s; }
.surface[data-delay="2"].is-surfaced { transition-delay: 0.14s; }
.surface[data-delay="3"].is-surfaced { transition-delay: 0.21s; }
.surface[data-delay="4"].is-surfaced { transition-delay: 0.28s; }
.surface[data-delay="5"].is-surfaced { transition-delay: 0.35s; }

/* ===================================================================
   Wordmark
   =================================================================== */
.wordmark {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.055em;
  white-space: nowrap;
}

.wordmark--small { font-size: 15px; }

/* The dot in the wordmark is a droplet that never stops falling */
.wordmark__drop {
  width: 7px;
  height: 7px;
  margin: 0 7px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--flux-1), var(--gold));
  animation: droplet 3.4s var(--settle) infinite;
}

@keyframes droplet {
  0%, 62%  { transform: translateY(0) scale(1, 1); }
  70%      { transform: translateY(-5px) scale(0.86, 1.2); }
  84%      { transform: translateY(3px) scale(1.24, 0.8); }
  92%      { transform: translateY(0) scale(0.94, 1.08); }
  100%     { transform: translateY(0) scale(1, 1); }
}

/* ===================================================================
   Top bar
   =================================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(20, 12, 28, 0.55);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--glass-edge);
}

.topbar__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 15px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Call button — a bead of liquid with a ripple that pulses outward */
.callbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  border-radius: 40px;
  color: var(--void);
  background: linear-gradient(120deg, var(--gold), var(--flux-2) 55%, var(--flux-1));
  background-size: 220% 220%;
  animation: bead 9s ease-in-out infinite;
  overflow: hidden;
  transition: transform 0.5s var(--settle), box-shadow 0.5s ease;
  box-shadow: 0 6px 22px rgba(224, 81, 138, 0.24);
}

@keyframes bead {
  0%, 100% { background-position: 0% 50%; border-radius: 40px 40px 40px 40px; }
  50%      { background-position: 100% 50%; border-radius: 44px 40px 44px 40px; }
}

.callbtn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 32px rgba(224, 81, 138, 0.4);
}

.callbtn__ripple {
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(20, 12, 28, 0.5);
  animation: ripple 3.6s ease-out infinite;
}

@keyframes ripple {
  0%   { transform: scale(1); opacity: 0.55; }
  70%  { transform: scale(22); opacity: 0; }
  100% { transform: scale(22); opacity: 0; }
}

.callbtn__icon { position: relative; font-size: 17px; line-height: 1; }
.callbtn__text { position: relative; display: flex; flex-direction: column; line-height: 1.15; }

.callbtn__label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  opacity: 0.72;
}

.callbtn__number {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13.5px;
  white-space: nowrap;
}

@media (max-width: 430px) {
  .card__price { font-size: 18px; }
  .card__stats { font-size: 10.5px; }
  .card__body { padding: 20px 18px 22px; }
  .detail__spec-value { font-size: 14.5px; }
}

@media (max-width: 560px) {
  .callbtn__label { display: none; }
  .callbtn { padding: 8px 15px; gap: 8px; }
  .callbtn__number { font-size: 12.5px; }
  .callbtn__icon { font-size: 15px; }
  .wordmark { font-size: 12.5px; letter-spacing: 0.03em; }
  .wordmark__drop { width: 6px; height: 6px; margin: 0 5px; }
  .topbar__inner { padding: 12px 16px; }
  .filterbar__inner { padding: 12px 16px; }
  .hero__inner, .listings, .footer__inner { padding-left: 18px; padding-right: 18px; }
}

/* Sticky offsets have to track the real header height, or the filter
   bar sits over the top of it on small screens. */
@media (max-width: 560px) {
  .filterbar { top: 51px; }
}

/* ===================================================================
   Hero
   =================================================================== */
.hero {
  position: relative;
  z-index: 2;
  padding: 92px 0 186px;
}

.hero__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: 56px;
  align-items: center;
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 0; }
}

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin: 0 0 22px;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 7.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
}

.hero__line { display: block; }

/* The second line has liquid running through the letterforms */
.hero__line--flow {
  background: linear-gradient(100deg,
    var(--lume) 0%, var(--flux-1) 26%, var(--flux-2) 44%,
    var(--gold) 58%, var(--lume) 82%);
  background-size: 320% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: flow 13s linear infinite;
}

@keyframes flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 320% 50%; }
}

.hero__tagline {
  max-width: 490px;
  color: var(--lume-mid);
  margin: 0 0 34px;
}

.hero__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--lume);
  border: 1px solid var(--glass-edge);
  background: var(--glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 13px 26px;
  border-radius: 40px;
  overflow: hidden;
  transition: border-color 0.5s ease, transform 0.6s var(--settle);
}

.hero__cta:hover { border-color: var(--gold); transform: translateY(-2px); }

/* A droplet slides across the button on hover, left to right */
.hero__cta-drop {
  position: absolute;
  left: -30%;
  top: 0; bottom: 0;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(246, 197, 107, 0.22), transparent);
  transition: left 0.9s var(--pour);
}

.hero__cta:hover .hero__cta-drop { left: 110%; }

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin: 52px 0 0;
  padding: 0;
}

.fact { margin: 0; }

.fact dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--lume-dim);
  margin-bottom: 6px;
}

.fact dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--gold);
}

/* -------------------------------------------------------------------
   Featured drop — a bead of liquid holding the first listing. Its
   outline never settles: four border-radius values on a slow cycle,
   with the image clipped inside so the photo deforms with the skin.
   ------------------------------------------------------------------- */
.drop {
  position: relative;
  display: block;
  width: 100%;
  max-width: 430px;
  aspect-ratio: 1 / 1.06;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  justify-self: end;
}

.drop__skin {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  box-shadow: 0 30px 70px rgba(10, 4, 18, 0.6);
  animation: wobble 19s ease-in-out infinite;
  transition: transform 0.9s var(--settle);
}

@keyframes wobble {
  0%, 100% { border-radius: 58% 42% 44% 56% / 52% 48% 52% 48%; }
  25%      { border-radius: 44% 56% 58% 42% / 46% 58% 42% 54%; }
  50%      { border-radius: 52% 48% 40% 60% / 60% 44% 56% 40%; }
  75%      { border-radius: 46% 54% 56% 44% / 42% 52% 48% 58%; }
}

.drop__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--pour);
}

.drop:hover .drop__skin { transform: translateY(-6px) scale(1.02); }
.drop:hover .drop__photo { transform: scale(1.07); }

/* Light travelling across the bead, left to right — the flow rule */
.drop__sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg,
    transparent 34%, rgba(246, 197, 107, 0.26) 50%, transparent 66%);
  background-size: 280% 100%;
  animation: sheen 9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sheen {
  0%, 100% { background-position: 190% 0; }
  50%      { background-position: -70% 0; }
}

.drop__tag {
  position: absolute;
  left: 11%;
  bottom: 7%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 13px 20px;
  border-radius: 22px;
  background: rgba(20, 12, 28, 0.72);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-radius 0.8s var(--settle), border-color 0.5s ease;
}

.drop:hover .drop__tag {
  border-radius: 28px 18px 28px 18px;
  border-color: rgba(246, 197, 107, 0.45);
}

.drop__tag-label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: var(--lume-dim);
}

.drop__tag-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--lume);
}

.drop__tag-price {
  font-family: var(--font-mono);
  font-size: 13px;
  background: linear-gradient(100deg, var(--gold), var(--flux-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 900px) {
  .drop { max-width: 340px; justify-self: start; margin-top: 46px; }
}

/* ===================================================================
   WAVE DIVIDERS
   Two paths travelling right at different speeds. Vertical scale is
   driven by --churn, so scroll velocity makes the water choppier.
   =================================================================== */
.divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  pointer-events: none;
  overflow: hidden;
}

/* Footer wave is flipped vertically only. Using rotate(180deg) here
   would mirror it horizontally too and send the water flowing left,
   which breaks the one rule the whole page follows. */
.divider--footer {
  position: relative;
  height: 140px;
  z-index: 2;
  transform: scaleY(-1);
}

/* Churn lives on the container, not the animated paths: a custom
   property changing inside a running keyframe isn't reliably picked
   up, but a transform on the parent is. */
.divider__svg {
  display: block;
  width: 200%;
  height: 100%;
  transform-origin: 50% 100%;
  transform: scaleY(calc(1 + var(--churn) * 0.5));
  transition: transform 0.55s var(--settle);
}

.divider__back,
.divider__front {
  will-change: transform;
}

.divider__back {
  fill: rgba(139, 92, 214, 0.30);
  animation: travel 26s linear infinite;
}

/* Same direction, different speed. Parallax, not opposition. */
.divider__front {
  fill: rgba(224, 81, 138, 0.20);
  animation: travel 17s linear infinite;
}

/* -50% is exactly two of the four wave periods, so the loop is seamless.
   Travel is rightward: the flow rule, applied to the section joins. */
@keyframes travel {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===================================================================
   Filter bar
   =================================================================== */
.filterbar {
  position: sticky;
  top: 58px;
  z-index: 25;
  background: rgba(20, 12, 28, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--glass-edge);
  border-bottom: 1px solid var(--glass-edge);
}

.filterbar__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.filterbar__buttons { display: flex; gap: 9px; }

.filter {
  position: relative;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--lume-mid);
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  padding: 8px 19px;
  border-radius: 40px;
  overflow: hidden;
  transition: color 0.45s ease, border-color 0.45s ease, transform 0.55s var(--settle);
}

.filter span { position: relative; z-index: 2; }

/* The active state floods in from the left rather than switching */
.filter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--gold), var(--flux-2) 60%, var(--flux-1));
  transform: translateX(-101%);
  transition: transform 0.65s var(--pour);
  z-index: 1;
}

.filter:hover { color: var(--lume); border-color: rgba(246, 197, 107, 0.5); }

.filter.is-active {
  color: var(--void);
  border-color: transparent;
  font-weight: 500;
}

.filter.is-active::before { transform: translateX(0); }

.filterbar__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--lume-dim);
}

@media (max-width: 560px) {
  .filterbar__count { display: none; }
  .filterbar__buttons { width: 100%; }
  .filter { flex: 1; text-align: center; padding: 9px 10px; }
}

/* ===================================================================
   Listing cards
   =================================================================== */
.listings {
  position: relative;
  z-index: 2;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 62px 24px 96px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(316px, 1fr));
  gap: 32px;
  align-items: start;
}

.card {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-radius: 26px;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 0.75s var(--settle),
    border-color 0.5s ease,
    box-shadow 0.6s ease,
    border-radius 0.75s var(--settle);
}

.card:hover {
  transform: translateY(-8px);
  border-color: rgba(246, 197, 107, 0.42);
  box-shadow: 0 26px 60px rgba(10, 4, 18, 0.62);
  /* Corners go asymmetric, as though the card is deforming */
  border-radius: 34px 24px 34px 24px;
}

.card__figure {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.card__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.5s var(--pour);
}

.card:hover .card__photo { transform: scale(1.07); }

/* Light refracting across the image, left to right */
.card__caustic {
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg,
    transparent 32%, rgba(246, 197, 107, 0.20) 48%, transparent 64%);
  background-size: 260% 100%;
  background-position: 190% 0;
  transition: background-position 1.3s var(--pour);
  pointer-events: none;
}

.card:hover .card__caustic { background-position: -60% 0; }

.card__stamp {
  position: absolute;
  top: 15px; right: 15px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--void);
  background: linear-gradient(120deg, var(--gold), var(--flux-2));
  padding: 5px 13px;
  border-radius: 30px;
  z-index: 2;
}

.card__stamp--rent {
  background: linear-gradient(120deg, var(--flux-3), var(--flux-1));
  color: var(--lume);
}

.card__body { padding: 22px 24px 24px; }

.card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.22;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}

.card__location {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--lume-dim);
  margin: 0 0 16px;
}

.card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  margin-bottom: 15px;
  border-top: 1px solid var(--glass-edge);
  border-bottom: 1px solid var(--glass-edge);
}

.card__price {
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 500;
  /* "268.000 €" is wider than "$268,000" and was dropping the euro
     sign onto its own line on narrow phones. */
  white-space: nowrap;
  background: linear-gradient(100deg, var(--gold), var(--flux-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card__stats {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--lume-dim);
  text-align: right;
  white-space: nowrap;
}

.card__summary {
  font-size: 14.5px;
  color: var(--lume-mid);
  margin: 0 0 20px;
}

.card__actions { display: flex; gap: 9px; }

.card__call {
  position: relative;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 14px;
  border-radius: 40px;
  color: var(--void);
  background: linear-gradient(120deg, var(--gold), var(--flux-2) 58%, var(--flux-1));
  background-size: 200% 200%;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13.5px;
  overflow: hidden;
  transition: background-position 0.9s var(--pour), transform 0.5s var(--settle);
}

.card__call:hover { background-position: 100% 50%; transform: scale(1.02); }

.card__more {
  padding: 13px 18px;
  border-radius: 40px;
  background: none;
  border: 1px solid var(--glass-edge);
  color: var(--lume-mid);
  font-family: var(--font-mono);
  font-size: 13px;
  transition: border-color 0.45s ease, color 0.45s ease;
}

.card__more:hover { border-color: var(--gold); color: var(--lume); }

.listings__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 72px 20px;
  color: var(--lume-dim);
  font-family: var(--font-mono);
  font-size: 13.5px;
}

/* ===================================================================
   Detail panel — pours open, drains closed
   =================================================================== */
.detail {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.detail[hidden] { display: none; }

.detail__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 5, 16, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fade-in 0.5s ease both;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.detail__panel {
  position: relative;
  width: min(780px, 100%);
  max-height: min(88vh, 940px);
  background: rgba(30, 18, 41, 0.86);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(26px) saturate(1.3);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(6, 2, 12, 0.72);
  animation: pour 0.72s var(--settle) both;
}

/* Opens as a blob that rounds out into a panel */
@keyframes pour {
  0%   { opacity: 0; transform: translateY(40px) scale(0.9); border-radius: 50% 46% 52% 44%; }
  55%  { opacity: 1; border-radius: 40px 28px 40px 28px; }
  100% { opacity: 1; transform: none; border-radius: 30px; }
}

.detail__scroll {
  overflow-y: auto;
  max-height: min(88vh, 940px);
}

.detail__close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 3;
  width: 40px; height: 40px;
  border: 1px solid var(--glass-edge);
  border-radius: 50%;
  background: rgba(20, 12, 28, 0.7);
  color: var(--lume);
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background 0.45s ease, transform 0.6s var(--settle), border-radius 0.6s var(--settle);
}

.detail__close:hover {
  background: linear-gradient(120deg, var(--flux-1), var(--flux-2));
  transform: rotate(90deg);
  border-radius: 42% 58% 46% 54%;
}

.detail__photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.detail__body { padding: 28px 32px 34px; }

.detail__stamp {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--void);
  background: linear-gradient(120deg, var(--gold), var(--flux-2));
  padding: 5px 13px;
  border-radius: 30px;
  margin-bottom: 14px;
}

.detail__stamp--rent {
  background: linear-gradient(120deg, var(--flux-3), var(--flux-1));
  color: var(--lume);
}

.detail__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0 0 5px;
}

.detail__location {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--lume-dim);
  margin: 0 0 24px;
}

.detail__specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--glass-edge);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 26px;
}

.detail__spec {
  padding: 15px 16px;
  background: rgba(20, 12, 28, 0.55);
}

.detail__spec-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--lume-dim);
  margin-bottom: 6px;
}

.detail__spec-value {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--lume);
}

.detail__spec-value--price {
  background: linear-gradient(100deg, var(--gold), var(--flux-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.detail__text {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--lume-mid);
  margin: 0 0 26px;
}

.detail__subhead {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--lume-dim);
  margin: 0 0 12px;
}

.detail__features {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: grid;
  gap: 9px;
}

.detail__features li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  color: var(--lume-mid);
}

/* Bullets are droplets, each bobbing on its own offset */
.detail__features li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 9px; height: 9px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: linear-gradient(140deg, var(--gold), var(--flux-1));
  animation: bob 4.2s ease-in-out infinite;
}

.detail__features li:nth-child(2)::before { animation-delay: 0.4s; }
.detail__features li:nth-child(3)::before { animation-delay: 0.8s; }
.detail__features li:nth-child(4)::before { animation-delay: 1.2s; }
.detail__features li:nth-child(5)::before { animation-delay: 1.6s; }

@keyframes bob {
  0%, 100% { transform: rotate(-45deg) translateY(0); }
  50%      { transform: rotate(-45deg) translateY(-3px); }
}

.detail__call {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  padding: 17px 20px;
  border-radius: 40px;
  color: var(--void);
  background: linear-gradient(120deg, var(--gold), var(--flux-2) 55%, var(--flux-1));
  background-size: 200% 200%;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 15.5px;
  overflow: hidden;
  transition: background-position 0.9s var(--pour), transform 0.5s var(--settle);
}

.detail__call:hover { background-position: 100% 50%; transform: scale(1.015); }

.detail__callnote {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--lume-dim);
  margin: 12px 0 0;
}

@media (max-width: 560px) {
  .detail { padding: 0; }
  .detail__panel { width: 100%; height: 100%; max-height: 100vh; border-radius: 0; }
  .detail__scroll { max-height: 100vh; }
  .detail__body { padding: 22px 20px 30px; }
  .detail__specs { grid-template-columns: repeat(2, 1fr); }
  .detail__title { font-size: 24px; }
  @keyframes pour {
    0%   { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: none; }
  }
}

/* ===================================================================
   Footer
   =================================================================== */
.footer {
  position: relative;
  z-index: 2;
  padding: 20px 24px 72px;
}

.footer__inner {
  max-width: var(--shell);
  margin: 0 auto;
  text-align: center;
}

.footer__note {
  color: var(--lume-mid);
  font-size: 14px;
  margin: 14px 0 22px;
}

.footer__phone {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 16.5px;
  color: var(--lume);
  border: 1px solid var(--glass-edge);
  background: var(--glass);
  padding: 14px 30px;
  border-radius: 40px;
  transition: border-color 0.5s ease, transform 0.6s var(--settle), border-radius 0.7s var(--settle);
}

.footer__phone:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  border-radius: 46px 38px 46px 38px;
}

/* ===================================================================
   REDUCED MOTION
   Everything ambient stops. Content stays legible and in place —
   nothing is left stuck invisible.
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }

  .js .surface { opacity: 1; transform: none; filter: none; }
  .flux__mass { opacity: 0.34; }
  .wake { display: none; }
  .card:hover { transform: none; }
}