/* ============================================================
   VYNE REALTOR · SITE STYLESHEET  (shared page components)
   ------------------------------------------------------------
   The shared component layer for every page. tokens.css holds
   ONLY tokens; this file holds component styles built from those
   tokens (var(--*) everywhere, never hardcoded colors).

   Ships: base/reset, layout primitives, the sticky nav (+ mobile
   overlay), and the single luxury cinematic hero. Collapsed 2026-06
   from a dual-package system to one luxury site; the [data-pkg="estate"]
   markup is retained as the single, only version.
   ============================================================ */

/* ============================================================
   BASE / RESET
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

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

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

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* ---- Skip-to-content link ----
   Visually hidden until focused, then anchors to the top-left so a
   keyboard user can jump straight past the nav into <main>. */
.v-skip {
  position: fixed;
  left: var(--space-md);
  top: var(--space-md);
  z-index: 1000;
  background: var(--accent);
  color: var(--on-accent);
  font: var(--weight-medium) var(--step-0)/1 var(--font-body);
  padding: 0.75em 1.1em;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  transform: translateY(-150%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.v-skip:focus,
.v-skip:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--on-accent);
  outline-offset: 2px;
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.v-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Shared eyebrow (mono label) ------------------------------- */
.v-eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.v-btn {
  --_pad-y: 0.85em;
  --_pad-x: 1.6em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  line-height: 1;
  padding: var(--_pad-y) var(--_pad-x);
  border-radius: var(--radius-pill);
  border: var(--hairline) solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.v-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.v-btn:hover { transform: translateY(-2px); }
.v-btn:active { transform: translateY(0) scale(0.985); }

.v-btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-accent);
}
.v-btn--primary:hover {
  box-shadow:
    var(--shadow-accent),
    0 14px 38px rgba(0, 0, 0, 0.35);
}
.v-btn--primary:active { background: var(--accent-press); }

.v-btn--ghost {
  background: color-mix(in srgb, var(--text) 4%, transparent);
  color: var(--text);
  border-color: var(--line-strong);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.v-btn--ghost:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.v-btn--sm { --_pad-y: 0.65em; --_pad-x: 1.2em; font-size: var(--step--1); }

/* ============================================================
   STICKY NAV
   ============================================================ */
.v-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition:
    background-color var(--dur-slow) var(--ease),
    box-shadow var(--dur-slow) var(--ease),
    border-color var(--dur-slow) var(--ease),
    backdrop-filter var(--dur-slow) var(--ease);
  border-bottom: var(--hairline) solid transparent;
}
/* Elevated state once scrolled (toggled by data-scrolled in JS). */
.v-nav[data-scrolled="true"] {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.v-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  height: 4.5rem;
}
@media (min-width: 900px) {
  .v-nav__inner { height: 5.25rem; }
}

/* Brand wordmark -------------------------------------------- */
.v-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.02em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-1);
  letter-spacing: var(--tracking-head);
  line-height: 1;
  white-space: nowrap;
  color: var(--text);
  transition: transform var(--dur) var(--ease);
}
.v-brand:hover { transform: translateY(-1px); }
.v-brand__accent {
  color: var(--accent-text);
  /* the accent initial reads as the mark */
  font-style: italic;
}
.v-brand__dot {
  color: var(--accent-text);
  margin-left: 0.04em;
}

/* Desktop nav links ----------------------------------------- */
.v-nav__links {
  display: none;
  align-items: center;
  gap: clamp(0.85rem, 1.5vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 1080px) {
  .v-nav__links { display: flex; }
}
.v-nav__link {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--text-muted);
  padding: 0.4em 0;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.v-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--hairline);
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-out);
}
.v-nav__link:hover,
.v-nav__link:focus-visible { color: var(--text); }
.v-nav__link:hover::after,
.v-nav__link:focus-visible::after { transform: scaleX(1); }

/* Right cluster (phone + CTA + menu toggle) ----------------- */
.v-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.v-nav__phone {
  display: none;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--text);
  padding: 0.4em 0.2em;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
/* Only surface the nav phone once there's room (with 6 links it crowds). */
@media (max-width: 1200px) { .v-nav__phone { display: none !important; } }
.v-nav__phone svg { width: 0.95em; height: 0.95em; color: var(--accent-text); }
.v-nav__phone:hover { color: var(--accent-text); }
@media (min-width: 720px) { .v-nav__phone { display: inline-flex; } }

.v-nav__cta { display: none; }
@media (min-width: 1080px) { .v-nav__cta { display: inline-flex; } }

/* Mobile menu toggle (hamburger) ---------------------------- */
.v-nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.v-nav__toggle:hover { border-color: var(--accent-line); }
.v-nav__toggle::before,
.v-nav__toggle::after,
.v-nav__toggle span {
  content: "";
  display: block;
  width: 1.15rem;
  height: 1.6px;
  margin-inline: auto;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease);
}
@media (min-width: 1080px) { .v-nav__toggle { display: none; } }

/* Open state: morph to an X. */
.v-nav__toggle[aria-expanded="true"]::before { transform: translateY(6.6px) rotate(45deg); }
.v-nav__toggle[aria-expanded="true"] span { opacity: 0; }
.v-nav__toggle[aria-expanded="true"]::after { transform: translateY(-6.6px) rotate(-45deg); }

/* ============================================================
   MOBILE MENU OVERLAY
   ============================================================ */
.v-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 6rem var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 86%, #000);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  background-image: var(--glow);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -1.5%, 0);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease-out),
    visibility 0s linear var(--dur);
}
.v-menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur-slow) var(--ease-out),
    visibility 0s;
}
.v-menu__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-self: center;
}
.v-menu__link {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-3);
  letter-spacing: var(--tracking-head);
  color: var(--text);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.v-menu__link .v-menu__idx {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--accent-text);
  margin-right: 0.8em;
  vertical-align: middle;
}
.v-menu__link:hover,
.v-menu__link:focus-visible { color: var(--accent-text); transform: translateX(4px); }

.v-menu__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: var(--hairline) solid var(--line);
}
.v-menu__call {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  color: var(--text-muted);
}
.v-menu__call svg { width: 1em; height: 1em; color: var(--accent-text); }
.v-menu__cta { width: 100%; }

/* ============================================================
   HERO  (shared shell)
   ============================================================ */
.v-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

/* ---- ESTATE hero: full-bleed cinematic SCROLL-THROUGH ----
   The section itself is the tall scroll runway; JS pins the inner
   .v-hero__stage (a single 100svh viewport) and scrubs the film +
   text across the runway. Without JS / under reduced motion the
   runway collapses to one viewport (the stage is statically sized)
   so there is no empty scroll gap. */
.v-hero--estate {
  position: relative;
  min-height: 100svh;
  padding: 0;
}
/* The pinned cinematic stage: one viewport, content bottom-anchored
   (mobile) / centered (desktop), exactly like the old hero box. */
.v-hero__stage {
  position: relative;
  min-height: 100svh;
  height: 100svh;
  display: grid;
  align-items: end;
  padding: calc(5rem + var(--space-2xl)) 0 var(--space-3xl);
  overflow: clip;
}
@media (min-width: 900px) {
  .v-hero__stage {
    align-items: center;
    padding: 6rem 0;
  }
}
/* The runway height that drives the scrub. JS pins the stage for the
   whole runway; ~210svh gives a generous, unhurried camera push.
   Only armed when JS motion + a fine setup can actually pin/scrub;
   collapsed to one viewport otherwise so nothing scrolls into a void. */
/* ~320svh: a generous two-act runway. Act 1 (~top 55%) scrubs the film
   so the house rises; act 2 (~last 45%) recedes the film + raises the
   image-filled name INSIDE the same pinned stage - one continuous motion,
   no second section/pin/seam. */
html.js-motion .v-hero--estate.is-runway { min-height: 320svh; }
@media (prefers-reduced-motion: reduce) {
  html.js-motion .v-hero--estate.is-runway { min-height: 100svh; }
}

/* The cinematic media layer (video / poster). Sits behind content. */
.v-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.v-hero__media video,
.v-hero__media .v-hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Bright, airy placeholder until the real film drops in (light base). */
.v-hero__poster {
  background:
    radial-gradient(120% 90% at 78% 14%, rgba(179, 146, 90, 0.07), transparent 55%),
    linear-gradient(180deg, #cfe2f0 0%, #e2eef5 40%, #eef3ef 72%, var(--bg) 100%);
}
/* Legibility + depth on the bright base: a soft luminous veil that lifts
   the ink without darkening the field, plus a clean fade into --bg at the
   foot. (Estate's .is-bright re-skins this further.) */
.v-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(0deg, var(--bg) 2%, rgba(246, 244, 239, 0.5) 28%, transparent 64%);
}
/* SVG noise grain for film texture. */
.v-hero__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  /* a slow, near-imperceptible grain drift so the film never reads as a
     frozen JPEG (transform only). */
  animation: v-grain-drift 7s steps(6) infinite;
}
@keyframes v-grain-drift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-3%, 2%, 0); }
}

/* Soft accent-tinted light bloom for depth + brand warmth. Sits over the
   media but under the scrim/content; a slow breathing drift keeps it
   filmic. opacity/transform only. */
.v-hero__light {
  position: absolute;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 50% at 72% 24%, var(--hero-light), transparent 70%),
    radial-gradient(46% 56% at 18% 88%, rgba(10, 10, 11, 0.5), transparent 72%);
  mix-blend-mode: screen;
  opacity: 0.7;
  animation: v-hero-light 14s ease-in-out infinite alternate;
}
@keyframes v-hero-light {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; }
  100% { transform: translate3d(2.5%, -2%, 0) scale(1.08); opacity: 0.8; }
}


/* ============================================================
   HERO · MEDIA MOTION POLICY  (clean scroll, no gimmicks)
   ------------------------------------------------------------
   The hero has NO cursor/mouse parallax and NO Ken Burns zoom or
   pan. The owner wants a CLEAN interactive scroll: the only hero
   media motion is the scroll-scrubbed cloud film (its currentTime
   is driven by heroFilm()'s lerp). Nothing drifts, zooms, or
   follows the pointer. The media is rendered at a steady 1:1 scale
   so the camera move you see is purely the scrubbed footage.

   (Former --mx/--my cursor parallax, the .v-hero__sheen layer, and
   the perpetual v-hero-kenburns scale drift were removed here.) - */

/* ---- Cinematic entrance: the media fades in after the loader.
   OPACITY ONLY - no scale - so there is zero zoom on load. Armed only
   when JS confirms motion (html.js-motion) so no-JS shows the hero
   immediately. .is-entered (set by the page) plays it. ---- */
html.js-motion .v-hero__media {
  opacity: 0;
  transition: opacity 1100ms var(--ease-out, cubic-bezier(.16, 1, .3, 1));
  will-change: opacity;
}
html.js-motion .v-hero.is-entered .v-hero__media {
  opacity: 1;
}
/* Eyebrow + sub + CTAs + trust fade up last, after the headline rises.
   Staged via --enter-delay set inline per element below. */
html.js-motion .v-hero__eyebrow,
html.js-motion .v-hero__sub,
html.js-motion .v-hero__ctas,
html.js-motion .v-hero__trust,
html.js-motion .v-hero .v-statbar,
html.js-motion .v-hero .v-valcard {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 620ms var(--ease-out, cubic-bezier(.16, 1, .3, 1)) var(--enter-delay, 0ms),
    transform 760ms var(--ease-out, cubic-bezier(.16, 1, .3, 1)) var(--enter-delay, 0ms);
  will-change: opacity, transform;
}
html.js-motion .v-hero.is-entered .v-hero__eyebrow,
html.js-motion .v-hero.is-entered .v-hero__sub,
html.js-motion .v-hero.is-entered .v-hero__ctas,
html.js-motion .v-hero.is-entered .v-hero__trust,
html.js-motion .v-hero.is-entered .v-statbar,
html.js-motion .v-hero.is-entered .v-valcard {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Estate content column - comfortable width; only the headline
   gets the immense, tightly-wrapped editorial treatment. */
.v-hero__content {
  position: relative;
}
.v-hero--estate .v-hero__content { max-width: min(94vw, 44rem); }

.v-hero__eyebrow { margin-bottom: var(--space-lg); }

/* The immense editorial headline. */
.v-hero__headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-5);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: 0;
  text-wrap: balance;
}
/* Estate headline wraps tight for the cinematic stacked look. */
.v-hero--estate .v-hero__headline { max-width: 13ch; }
.v-hero__headline em {
  font-style: italic;
  color: var(--accent-text);
}

/* Kinetic word reveal: each word rises from a clipped line. --------
   The mask is padded generously on the TOP and BOTTOM and pulled back
   with matching negative margins, so the serif ascenders (S, l, t) and
   descenders (g, y, p) are NEVER clipped at rest. The riser still slides
   up out of the bottom of the mask during the reveal; --kmask is the
   pad/margin amount (large enough to clear Fraunces' tallest letterforms
   and deepest descenders at the hero's optical size). */
.v-kinetic { display: inline; --kmask: 0.22em; }
.v-kinetic .v-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Pad the clip box out past every glyph edge, then negate the pad in
     layout so spacing/leading are unchanged. Horizontal stays at 0 so
     italic side-bearings are never cut. */
  padding: var(--kmask) 0;
  margin: calc(var(--kmask) * -1) 0;
}
.v-kinetic .v-word > span {
  display: inline-block;
  /* Rise far enough to start fully below the (now taller) mask, plus a
     soft blur-to-focus for the cinematic settle. */
  transform: translate3d(0, calc(100% + var(--kmask)), 0);
  opacity: 0;
  filter: blur(10px);
  will-change: transform, opacity, filter;
}
.v-kinetic.is-played .v-word > span {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  filter: blur(0);
}
/* Per-word transition + stagger set inline via --d in JS. Longer, more
   cinematic settle than a stock UI tween (the hero entrance is allowed
   to breathe per the motion rules). */
.v-kinetic .v-word > span {
  transition:
    transform 940ms var(--ease-out, cubic-bezier(.16, 1, .3, 1)) var(--d, 0ms),
    opacity 620ms ease var(--d, 0ms),
    filter 720ms var(--ease-out, cubic-bezier(.16, 1, .3, 1)) var(--d, 0ms);
}

.v-hero__sub {
  margin: var(--space-xl) 0 0;
  max-width: 46ch;
  font-size: var(--step-1);
  color: var(--text-muted);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}
.v-hero--estate .v-hero__sub { max-width: 40ch; }

.v-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

/* Estate trust line built from stats/reviews. */
.v-hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em var(--space-md);
  margin-top: var(--space-2xl);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.v-hero__trust .v-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-faint);
}
.v-hero__trust b { color: var(--text); font-weight: var(--weight-medium); }
.v-hero__trust .v-stars { color: var(--accent-text); letter-spacing: 0.1em; }

/* Estate scroll cue */
.v-hero__cue {
  position: absolute;
  left: var(--gutter);
  bottom: var(--space-lg);
  display: none;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.v-hero__cue::after {
  content: "";
  width: 1px;
  height: 2.4rem;
  background: linear-gradient(var(--text-faint), transparent);
  animation: v-cue 2.4s var(--ease) infinite;
  transform-origin: top center;
}
@keyframes v-cue {
  0% { transform: scaleY(0.2); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
.v-hero--estate .v-hero__cue {
  /* On the film hero the cue is positioned against the stage and reads
     as a "scroll to enter" prompt; it fades out as the camera moves. */
  display: inline-flex;
  text-transform: uppercase;
}
/* The "scroll to enter" cue only belongs to the desktop scroll-through.
   On the static path (mobile <=700px / reduced motion) there is no
   scrub, so the cue would overlap the trust line - hide it there. */
.v-hero--estate.is-static .v-hero__cue { display: none; }
@media (max-width: 700px) { .v-hero--estate .v-hero__cue { display: none; } }
/* Reduced motion never runs the scroll-through, so neither the scroll
   cue nor the scrub HUD apply - hide both for a clean static hero. */
@media (prefers-reduced-motion: reduce) {
  .v-hero--estate .v-hero__cue,
  .v-hero--estate .v-hero__hud { display: none; }
}
@media (min-width: 1100px) { .v-hero__cue { display: inline-flex; } }
@media (prefers-reduced-motion: reduce) { .v-hero__cue::after { animation: none; } }

/* ---- Estate film: letterbox bars (cinema crop) ---- */
.v-hero__bars { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.v-hero__bars::before,
.v-hero__bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: clamp(0.7rem, 2.4svh, 1.6rem);
  background: #050507;
  opacity: 0.94;
}
.v-hero__bars::before { top: 0; box-shadow: 0 1px 0 0 color-mix(in srgb, var(--text) 7%, transparent); }
.v-hero__bars::after  { bottom: 0; box-shadow: 0 -1px 0 0 color-mix(in srgb, var(--text) 7%, transparent); }
/* ---- Estate film: scrub HUD (slim progress scrubber) ---- */
.v-hero__hud {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--space-lg) + 0.2rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.v-hero__hudLabel { white-space: nowrap; }
.v-hero__hudTrack {
  position: relative;
  width: clamp(4rem, 9vw, 7.5rem);
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--text) 14%, transparent);
  overflow: hidden;
}
.v-hero__hudFill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--accent-text), color-mix(in srgb, var(--accent-text) 60%, #fff));
  will-change: transform;
}
@media (max-width: 700px) { .v-hero__hud { display: none; } }

/* ============================================================
   HERO · BRIGHT  "HOUSE IN THE CLOUDS"  (estate hybrid)
   ------------------------------------------------------------
   The estate hero runs a bright, airy cinematic of a glass home
   floating over a sea of clouds in a blue sky. The scroll-through
   scrubs the camera up through the clouds toward the home, then the
   page transitions DOWN into the existing dark luxe body. Everything
   here is scoped to .is-bright so the dark estate styling above is
   the untouched default and PRO is never affected.

   Legibility first: on the open sky we use a deep ink charcoal for
   type with a soft top-gradient veil only where the nav + headline
   sit, mirroring the reference's bold dark type on bright sky. ----- */

/* Tokens for the bright stage. Deep slate ink reads premium on sky
   and clears AAA against the bright cloud field at the top. */
.v-hero--estate.is-bright {
  --bright-ink:        #10151c;   /* headline / primary type */
  --bright-ink-soft:   #2c3744;   /* sub / supporting type   */
  --bright-ink-faint:  #4a576704; /* (unused placeholder)    */
  --bright-mute:       #3a4654;   /* mono labels on sky      */
}

/* The cloud film/poster runs CLEAN and bright. The bright sky-wash
   GRADIENT that frames the real cloud image is painted by heroVideo()
   in index.html (inline style, which beats this rule); this fallback
   gradient stands in only before/without the image. */
.v-hero--estate.is-bright .v-hero__poster {
  background:
    linear-gradient(0deg, var(--bg) 0%, rgba(10,10,11,0) 26%),
    linear-gradient(180deg, #bcd9ef 0%, #d8e9f4 40%, #eef4f3 70%, #f3efe6 100%);
}

/* Suppress the dark cinematic furniture (heavy bottom scrim, letterbox
   bars, screen-blend warm bloom, film grain) - the bright stage is light
   and open, not a dark film frame. */
.v-hero--estate.is-bright .v-hero__bars,
.v-hero--estate.is-bright .v-hero__grain,
.v-hero--estate.is-bright .v-hero__light { display: none; }

/* Scrim -> a soft luminous veil. A gentle white wash at the very top
   (under the nav + headline) lifts contrast for the dark type without
   darkening the sky; a faint warm floor anchors the composition. No
   heavy black gradient. */
.v-hero--estate.is-bright .v-hero__scrim {
  background:
    linear-gradient(180deg, rgba(247,250,252,0.78) 0%, rgba(247,250,252,0.22) 14%, rgba(247,250,252,0) 34%),
    radial-gradient(150% 80% at 22% 0%, rgba(255,255,255,0.45), transparent 52%),
    /* soft lower veil: the estate footage is busier than the old cloud
       field, so the trust strip + scroll cue get a lifted band */
    linear-gradient(0deg, rgba(246,244,239,0.6) 0%, rgba(246,244,239,0.34) 18%, rgba(246,244,239,0) 46%);
}

/* The seam-killer: a tall gradient from transparent sky down into the
   exact page --bg, pinned to the foot of the stage. As the camera
   arrives at the home and the stage releases, the sky has already
   dissolved into the dark interior - no hard edge into the proof band. */
.v-hero--estate.is-bright .v-hero__descend {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26svh;
  z-index: -1;
  pointer-events: none;
  /* Dissolve the bright cloud sky cleanly into the cream page --bg
     (the body is light/airy now, not dark) so there is no gray seam. */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg) 0%, transparent) 0%,
    color-mix(in srgb, var(--bg) 55%, transparent) 62%,
    var(--bg) 100%
  );
}

/* Type on the bright sky: deep ink, legible + premium. */
.v-hero--estate.is-bright .v-hero__headline { color: var(--bright-ink); }
.v-hero--estate.is-bright .v-hero__headline em { color: #1f6f54; } /* deep brand green accent */
.v-hero--estate.is-bright .v-hero__eyebrow {
  color: var(--bright-mute);
}
.v-hero--estate.is-bright .v-hero__sub { color: #1d2733; }
.v-hero--estate.is-bright .v-hero__trust { color: #283340; }
.v-hero--estate.is-bright .v-hero__trust b { color: var(--bright-ink); }
.v-hero--estate.is-bright .v-hero__trust .v-stars { color: #b07a1e; } /* brass star on light */
.v-hero--estate.is-bright .v-hero__trust .v-dot { background: rgba(58,70,84,0.5); }

/* A whisper-soft legibility wash behind the text. Anchored to the stage
   (full-bleed, left-weighted) so it lifts the ink off the busy window
   glow WITHOUT drawing a rectangular seam around the content column.
   Pure, diffuse, edge-free. */
.v-hero--estate.is-bright .v-hero__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    100% 72% at 50% 36%,
    rgba(245,249,252,0.62) 0%,
    rgba(245,249,252,0.40) 40%,
    rgba(245,249,252,0.16) 60%,
    rgba(245,249,252,0.04) 72%,
    transparent 82%
  );
}

/* Scroll cue + HUD recolored for the bright field. */
.v-hero--estate.is-bright .v-hero__cue { color: var(--bright-mute); }
.v-hero--estate.is-bright .v-hero__cue::after {
  background: linear-gradient(rgba(58,70,84,0.7), transparent);
}
.v-hero--estate.is-bright .v-hero__hud { color: var(--bright-mute); }
.v-hero--estate.is-bright .v-hero__hudTrack {
  background: color-mix(in srgb, var(--bright-ink) 16%, transparent);
}
.v-hero--estate.is-bright .v-hero__hudFill {
  background: linear-gradient(90deg, #1f6f54, #b07a1e);
}

/* CTA buttons on the bright sky. The primary keeps the brand fill; the
   ghost gets a dark outline so it reads against the cloud field. */
.v-hero--estate.is-bright .v-hero__ctas .v-btn--ghost {
  color: var(--bright-ink);
  border-color: color-mix(in srgb, var(--bright-ink) 30%, transparent);
}
.v-hero--estate.is-bright .v-hero__ctas .v-btn--ghost:hover {
  border-color: color-mix(in srgb, var(--bright-ink) 55%, transparent);
  background: rgba(16,21,28,0.05);
}

/* ============================================================
   BRIGHT ESTATE HERO · CLEAN CENTERED GROTESK COMPOSITION
   ------------------------------------------------------------
   Matches the owner reference: a clean bold grotesk headline,
   CENTERED, large, with a small centered eyebrow + sub + pill
   CTAs and lots of open sky. Scoped to .is-bright so the dark
   editorial estate hero and PRO are untouched. The reference
   style is airy + minimal: the type is the only furniture, the
   clouds + home own the rest of the frame. ----------------- */

/* The stage centers the column horizontally and seats it in the
   upper-middle of the sky so the home reads cleanly below it. */
.v-hero--estate.is-bright .v-hero__stage {
  align-items: center;
  justify-items: center;
}
@media (min-width: 900px) {
  /* Lift the column up off dead-center so the glass home below
     stays visible and uncrowded, mirroring the reference. */
  .v-hero--estate.is-bright .v-hero__stage { align-items: start; padding-top: 16vh; }
}

/* Centered, generously-spaced column. */
.v-hero--estate.is-bright .v-hero__content {
  max-width: min(92vw, 60rem);
  margin-inline: auto;
  text-align: center;
}

/* Clean GROTESK headline (not the Fraunces serif): Schibsted
   Grotesk 700, tight tracking, balanced wrap. This is the single
   most important match to the reference. */
.v-hero--estate.is-bright .v-hero__headline {
  font-family: var(--font-body);   /* Schibsted Grotesk */
  font-weight: 700;
  font-size: clamp(2.9rem, 1.7rem + 5.4vw, 6.1rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 18ch;
  margin-inline: auto;
  text-wrap: balance;
}
/* No italic-serif accent on the grotesk headline; keep it one ink,
   one weight, perfectly clean. */
.v-hero--estate.is-bright .v-hero__headline em {
  font-style: normal;
  color: inherit;
}

/* Eyebrow: small centered uppercase mono, quiet. */
.v-hero--estate.is-bright .v-hero__eyebrow {
  margin-inline: auto;
  margin-bottom: var(--space-md);
  letter-spacing: 0.22em;
}

/* Sub: short, centered, comfortable measure, generous air. */
.v-hero--estate.is-bright .v-hero__sub {
  max-width: 46ch;
  margin: var(--space-lg) auto 0;
  text-align: center;
}

/* CTAs: clean centered pills with breathing room. */
.v-hero--estate.is-bright .v-hero__ctas {
  justify-content: center;
  margin-top: var(--space-2xl);
}

/* Trust line: centered, understated. */
.v-hero--estate.is-bright .v-hero__trust {
  justify-content: center;
  margin-top: var(--space-2xl);
}

/* The grotesk headline has shallow ascenders/descenders vs Fraunces,
   so the kinetic clip mask can be tighter (no glyph clipping) and the
   centered words wrap cleanly. */
.v-hero--estate.is-bright .v-kinetic { --kmask: 0.14em; }

/* Scroll cue: center it under the column for the clean reference look
   instead of pinning it to the bottom-left gutter. */
.v-hero--estate.is-bright .v-hero__cue {
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  gap: 0.55em;
}

/* HUD: keep it quiet and out of the way; the clean scroll is the
   star, not a progress chrome. Tuck it to the bottom-right corner. */
.v-hero--estate.is-bright .v-hero__hud { opacity: 0.8; }

/* --- Nav legibility over the bright hero -------------------------
   While the (unscrolled) nav sits on the bright sky, switch its text
   to the dark ink. Once scrolled (data-scrolled="true") the nav gets
   its normal blurred dark panel back and reverts to light text. The
   body sets data-hero-bright-top on <html> while the bright hero is in
   view AND the nav is not yet elevated. */
/* The ink tokens are scoped to the hero element; the nav lives outside
   it, so re-declare them on the html-level marker the nav can inherit. */
html.hero-bright-top {
  --bright-ink: #10151c;
  --bright-ink-soft: #2c3744;
}
html.hero-bright-top .v-nav:not([data-scrolled="true"]) .v-brand { color: var(--bright-ink); }
html.hero-bright-top .v-nav:not([data-scrolled="true"]) .v-brand__accent,
html.hero-bright-top .v-nav:not([data-scrolled="true"]) .v-brand__dot { color: #1f6f54; }
html.hero-bright-top .v-nav:not([data-scrolled="true"]) .v-nav__link { color: rgba(16,21,28,0.62); }
html.hero-bright-top .v-nav:not([data-scrolled="true"]) .v-nav__link:hover,
html.hero-bright-top .v-nav:not([data-scrolled="true"]) .v-nav__link:focus-visible { color: var(--bright-ink); }
html.hero-bright-top .v-nav:not([data-scrolled="true"]) .v-nav__phone { color: var(--bright-ink); }
html.hero-bright-top .v-nav:not([data-scrolled="true"]) .v-nav__phone svg { color: #1f6f54; }
html.hero-bright-top .v-nav:not([data-scrolled="true"]) .v-nav__toggle {
  border-color: rgba(16,21,28,0.22);
}
html.hero-bright-top .v-nav:not([data-scrolled="true"]) .v-nav__toggle::before,
html.hero-bright-top .v-nav:not([data-scrolled="true"]) .v-nav__toggle::after,
html.hero-bright-top .v-nav:not([data-scrolled="true"]) .v-nav__toggle span {
  background: var(--bright-ink);
}
/* Smooth the nav color swap so the bright->dark handoff isn't a snap. */
html.hero-bright-top .v-nav .v-brand,
html.hero-bright-top .v-nav .v-nav__link,
html.hero-bright-top .v-nav .v-nav__phone {
  transition: color var(--dur-slow) var(--ease);
}

/* Mobile / static bright hero: the descend fade still lands us in the
   dark body, and the soft top veil keeps the headline legible. The
   static path has no pin, so cap the stage to one viewport. */
.v-hero--estate.is-bright.is-static .v-hero__descend { height: 30svh; }
/* On the static scene there is no scrub, so the progress HUD + scroll
   cue are meaningless - hide them for a clean composed frame. */
.v-hero--estate.is-static .v-hero__hud,
.v-hero--estate.is-static .v-hero__cue { display: none; }

/* ============================================================
   IN-STAGE NAME REVEAL  (.v-hero__name)  ·  THE SEAMLESS SECOND ACT
   ------------------------------------------------------------
   This layer lives INSIDE the pinned hero stage, so the house->name
   transition happens within ONE pinned frame (no section seam). It is
   centered + full-stage, sits ABOVE the film/scrim, and starts hidden
   (the timeline raises it as the film recedes). The agent name is
   filled with the hero's final frame (background-clip:text) so the
   risen house visually BECOMES the letters. Only used on the scrub
   path; the standalone .v-namereveal below is the static fallback.
   ============================================================ */
.v-hero__name {
  position: absolute;
  inset: 0;
  z-index: 3;                 /* above content (2) + scrim, below nav */
  display: grid;
  place-items: center;
  text-align: center;
  padding: 7rem var(--space-lg);
  pointer-events: none;
  /* Hidden + slightly scaled-up until the timeline drives it in. GSAP
     owns these on the scrub path; this is just the resting/idle state so
     it never flashes before the timeline builds. */
  opacity: 0;
  visibility: hidden;
}
/* Once the scrub path is armed, GSAP controls visibility via autoAlpha;
   reveal the layer for compositing. */
.v-hero--estate.is-namestage .v-hero__name { visibility: visible; }

.v-hero__nameInner {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 64rem);
  margin-inline: auto;
}
/* Oversized ghost monogram behind the name (agent initials), faint. */
.v-hero__nameGhost {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(14rem, 7rem + 30vw, 34rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: rgba(16,21,28,0.06);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.v-hero__nameEyebrow {
  display: block;
  margin: 0 auto var(--space-lg);
  letter-spacing: 0.28em;
  color: var(--bright-mute, #3a4654);
}
.v-hero__nameName {
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(3rem, 1.2rem + 8.4vw, 9rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
  color: var(--bright-ink, #10151c);
  margin: 0;
  text-wrap: balance;
}
/* Legibility vignette behind the image-filled (transparent) letters so
   they read crisply over the bright sky regardless of the frame tone. */
.v-hero__nameName.has-clip::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 118%;
  height: 156%;
  transform: translate(-50%, -50%);
  background: radial-gradient(58% 60% at 50% 50%,
    rgba(247,250,252,0.82) 0%,
    rgba(247,250,252,0.5) 46%,
    rgba(247,250,252,0) 74%);
  pointer-events: none;
}
/* THE SIGNATURE: the hero's final frame clipped INSIDE the letters. The
   fill (--name-fill, set inline from heroPoster) matches the film's last
   scrubbed frame, so the house carries straight through into the name. */
.v-hero__nameName.has-clip .v-nword > span {
  background-image:
    linear-gradient(180deg, rgba(20,16,12,0.14), rgba(20,16,12,0.14)),
    var(--name-fill);
  background-size: auto, 130vw auto;
  background-position: center, center 44%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 12px rgba(20,16,12,0.34)) drop-shadow(0 1px 1px rgba(20,16,12,0.4));
}
.v-hero__nameRule {
  display: block;
  width: clamp(56px, 8vw, 92px);
  height: 2px;
  margin: var(--space-xl) auto var(--space-lg);
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.85;
}
.v-hero__nameBrand {
  margin: 0 auto;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.v-hero__nameLine {
  max-width: 42ch;
  margin: var(--space-md) auto 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  color: #2c3744;
  text-wrap: balance;
}
/* Per-word clip box (each word rises out of its own mask). */
.v-hero__nameName .v-nword {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.12em 0;
  margin: -0.12em 0;
}
.v-hero__nameName .v-nword > span { display: inline-block; }

/* When the in-stage name path is active, the standalone fallback section
   is fully suppressed (the reveal now happens inside the pinned stage). */
.v-namereveal.is-superseded { display: none; }

/* ============================================================
   HERO -> NAME HANDOFF  (.v-namereveal)  ·  STATIC FALLBACK
   ------------------------------------------------------------
   Used ONLY on mobile / reduced-motion / no-GSAP. On the desktop
   scrub path the reveal happens inside .v-hero__name above and this
   section is .is-superseded (display:none).
   The transition out of the clouds: a big, bold, clean-grotesk
   reveal of the realtor's name as the hero releases. Bright +
   airy, centered, immense type, generous air. Scroll-driven: the
   words rise from a clip mask and the brand fades up. The JS sets
   --np (0..1 scrub progress) for the scrubbed path; the static
   path uses .is-in. transform/opacity only.
   ============================================================ */
.v-namereveal {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(var(--space-3xl), 16vh, var(--space-4xl));
  /* A soft backing tint + a faint hairline frame at top/bottom give the
     band a composed, intentional surface (no longer empty cream). */
  background:
    radial-gradient(72% 80% at 50% 50%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 72%),
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 60%),
    var(--bg);
  border-top: var(--hairline) solid color-mix(in srgb, var(--accent) 14%, transparent);
}
@media (min-width: 900px) {
  .v-namereveal { min-height: 84svh; }
}

/* The handoff sky: the SAME cloud-rise still that closed the hero, sitting
   as a soft band across the top of the section and DISSOLVING down into the
   bright body - so the risen-house frame reads as flowing into the name.
   Its image is set inline by site.js from heroPoster; the mask fades it out
   toward the centre so the name's image-filled letters carry the imagery the
   rest of the way down. transform/opacity only on the scrubbed reveal. */
.v-namereveal__sky {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 0;
  height: 62%;
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
/* A bright wash over the sky band so the eyebrow + airy top stay legible and
   the section still reads as the bright body, not a second photo hero. */
.v-namereveal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 30%, transparent) 0%,
    color-mix(in srgb, var(--bg) 64%, transparent) 38%,
    var(--bg) 72%);
  pointer-events: none;
}
.v-namereveal__inner {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 64rem);
}

/* Oversized ghosted monogram behind the name. Faint, brand-tinted,
   clipped to the band - a designed backing mark, not clutter. */
.v-namereveal__ghost {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(14rem, 7rem + 30vw, 34rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: color-mix(in srgb, var(--accent) 8%, transparent);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.v-namereveal__eyebrow {
  display: block;
  margin: 0 auto var(--space-lg);
  letter-spacing: 0.28em;
  color: var(--text-faint);
}
.v-namereveal__name {
  position: relative;
  font-family: var(--font-body);          /* clean grotesk, like the reference */
  font-weight: 700;
  font-size: clamp(3rem, 1.2rem + 8.4vw, 9rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}
/* Legibility vignette: a soft darker pad directly BEHIND the type so the
   image-filled (transparent) letters read crisply on the bright page even
   where the house imagery is light. Sized to hug the name, sits under the
   glyphs. Image-filled text can wash out; this is the contrast floor. */
.v-namereveal__name.has-clip::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 116%;
  height: 150%;
  transform: translate(-50%, -50%);
  background: radial-gradient(60% 62% at 50% 50%,
    color-mix(in srgb, var(--ink, #14110d) 26%, transparent) 0%,
    color-mix(in srgb, var(--ink, #14110d) 12%, transparent) 48%,
    transparent 74%);
  pointer-events: none;
}
/* THE SIGNATURE: the house+sky imagery clipped INSIDE the letters. The
   cloud-rise still (--name-fill, set inline from heroPoster) fills each
   word's glyphs via background-clip:text; the house band is positioned into
   the letters and a drop-shadow gives the transparent type an edge so it
   never melts into the page. The fill is shared/positioned consistently
   across words so it reads as ONE image showing through the whole name. */
.v-namereveal__name.has-clip .v-nword > span {
  background-image:
    linear-gradient(180deg, rgba(20,16,12,0.18), rgba(20,16,12,0.18)),
    var(--name-fill);
  background-size: auto, 130vw auto;
  background-position: center, center 46%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(20,16,12,0.42)) drop-shadow(0 1px 1px rgba(20,16,12,0.5));
}
/* Thin brand-gradient accent rule between the name and the brand line. */
.v-namereveal__rule {
  display: block;
  width: clamp(56px, 8vw, 92px);
  height: 2px;
  margin: var(--space-xl) auto var(--space-lg);
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.85;
}
.v-namereveal__brand {
  margin: 0 auto;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-text);
}
/* Refined one-line positioning statement under the name. */
.v-namereveal__line {
  max-width: 42ch;
  margin: var(--space-md) auto 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  color: var(--text-muted);
  text-wrap: balance;
}

/* The per-word clip-rise. Each word sits in an overflow-hidden box and
   rises into place. Resting (no-JS) state = fully visible. */
.v-namereveal__name .v-nword {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.12em 0;
  margin: -0.12em 0;
}
.v-namereveal__name .v-nword > span { display: inline-block; }

/* Armed only when JS confirms motion: start words below the mask + brand
   lowered/faded, then .is-in drives them home (static path). On the scrubbed
   path GSAP owns the transform entirely (.is-scrub removes the CSS start
   state so GSAP's fromTo isn't fighting a percent transform it can't parse). */
html.js-motion .v-namereveal[data-armed]:not(.is-scrub) .v-nword > span {
  transform: translate3d(0, 110%, 0);
  opacity: 0;
}
html.js-motion .v-namereveal[data-armed]:not(.is-scrub) .v-namereveal__eyebrow,
html.js-motion .v-namereveal[data-armed]:not(.is-scrub) .v-namereveal__brand,
html.js-motion .v-namereveal[data-armed]:not(.is-scrub) .v-namereveal__line {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}

/* Static (no-scrub) reveal: a clean staggered rise when the band enters. */
html.js-motion .v-namereveal[data-armed].is-in .v-nword > span {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition:
    transform 900ms var(--ease-out) var(--nd, 0ms),
    opacity 640ms ease var(--nd, 0ms);
}
html.js-motion .v-namereveal[data-armed].is-in .v-namereveal__eyebrow,
html.js-motion .v-namereveal[data-armed].is-in .v-namereveal__brand,
html.js-motion .v-namereveal[data-armed].is-in .v-namereveal__line {
  opacity: 1;
  transform: none;
  transition:
    transform 720ms var(--ease-out) var(--nd, 0ms),
    opacity 620ms ease var(--nd, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html.js-motion .v-namereveal[data-armed] .v-nword > span,
  html.js-motion .v-namereveal[data-armed] .v-namereveal__eyebrow,
  html.js-motion .v-namereveal[data-armed] .v-namereveal__brand,
  html.js-motion .v-namereveal[data-armed] .v-namereveal__line {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ============================================================
   PRO hero · BRIGHT treatment
   ------------------------------------------------------------
   PRO keeps its conversion split (copy + valuation card) but now
   sits on the same bright/airy base. The left copy reads in deep
   ink on the bright cloud poster; the ghost CTA gets an ink outline
   so it reads on the sky; the dark filmic bloom is dialed out.
   ============================================================ */
/* Hero stat bar directly under the headline copy. */
.v-statbar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg) var(--space-md);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--hairline) solid var(--line);
}
@media (min-width: 560px) { .v-statbar { grid-template-columns: repeat(4, 1fr); } }
.v-statbar .v-stat__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-3);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--text);
}
.v-statbar .v-stat__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.35;
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

/* Valuation card embedded in the hero. */
.v-valcard {
  position: relative;
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
}
.v-valcard::before {
  /* accent hairline glow at the top edge */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
}
.v-valcard__head { margin-bottom: var(--space-lg); }
.v-valcard__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  margin: var(--space-sm) 0 var(--space-xs);
}
.v-valcard__note {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-faint);
  margin: 0;
}

/* Form fields shared (used by the embedded valuation form). */
.v-field { margin-top: var(--space-md); }
.v-field:first-of-type { margin-top: 0; }
.v-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: var(--space-2xs);
}
.v-input,
.v-select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--text);
  background: var(--surface-2);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.72em 0.9em;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.v-input::placeholder { color: var(--text-faint); }
.v-input:focus-visible,
.v-select:focus-visible,
.v-input:focus,
.v-select:focus {
  outline: none;
  border-color: var(--accent);
  /* Clearly visible focus ring (was --accent-soft @14% - too faint for AA). */
  box-shadow: 0 0 0 3px var(--ring);
}
.v-field-row { display: grid; gap: var(--space-md); }
/* Fields inside a row sit in their own grid columns; the row's gap handles
   spacing, so cancel the per-field top margin that would otherwise drop the
   second column ~16px below the first. */
.v-field-row .v-field { margin-top: 0; }
@media (min-width: 460px) { .v-field-row.is-two { grid-template-columns: 1fr 1fr; } }

.v-hero__vnav { /* maps to forms.js .vf-nav, kept for spacing parity */ }

/* ============================================================
   SECTION RHYTHM (shared)
   ------------------------------------------------------------
   Vertical rhythm for the home body sections. Sections set their
   own block padding from this scale.
   ============================================================ */
.v-proof,
.v-value,
.v-val {
  position: relative;
  isolation: isolate;
}

/* ============================================================
   PROOF BAND  (.v-proof)
   ------------------------------------------------------------
   Estate (default): a primary proof moment - large editorial
   numbers on hairline-divided columns.
   Pro: a slim reinforcing strip (hero already carries the stats),
   reframed and quieter so it never reads as a duplicate.
   ============================================================ */
.v-proof {
  padding-block: var(--space-2xl);
  border-block: var(--hairline) solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 60%, transparent), transparent 60%);
}
@media (min-width: 900px) {
  .v-proof { padding-block: var(--space-3xl); }
}
.v-proof__head {
  max-width: 40ch;
  margin-bottom: var(--space-xl);
}
.v-proof__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  margin: var(--space-md) 0 0;
  text-wrap: balance;
}

/* The stat strip (site.js renders .v-stat children into [data-stats]). */
.v-proof__strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl) var(--space-md);
}
@media (min-width: 720px) {
  .v-proof__strip { grid-template-columns: repeat(4, 1fr); }
}
.v-proof__strip .v-stat {
  position: relative;
  padding-left: var(--space-lg);
}
.v-proof__strip .v-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  bottom: 0.1em;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 8%, transparent));
  opacity: 0.85;
}
.v-proof__strip .v-stat__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-4);
  line-height: 0.96;
  letter-spacing: var(--tracking-display);
  color: var(--text);
}
.v-proof__strip .v-stat__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--text-muted);
  margin-top: var(--space-sm);
  max-width: 18ch;
}

/* ============================================================
   VALUE  (.v-value)  ·  3-card "why work with me"
   ============================================================ */
.v-value {
  padding-block: var(--space-3xl);
}
@media (min-width: 900px) {
  .v-value { padding-block: var(--space-4xl); }
}
.v-value__head {
  max-width: 48ch;
  margin-bottom: var(--space-2xl);
}
.v-value__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-md) 0 0;
  text-wrap: balance;
}
.v-value__lede {
  margin: var(--space-lg) 0 0;
  max-width: 52ch;
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--text-muted);
  text-wrap: pretty;
}

.v-value__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-lg);
}
@media (min-width: 760px) {
  .v-value__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Card: elevated surface, layered shadow, accent numeral + top rule. */
.v-vcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-xl);
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.v-vcard::before {
  /* accent corner glow - atmosphere, not flat fill */
  content: "";
  position: absolute;
  inset: auto auto 0 0;
  width: 70%;
  height: 60%;
  background: radial-gradient(120% 120% at 0% 100%, var(--accent-soft), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
  z-index: -1;
}
.v-vcard:hover {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-lg);
}
.v-vcard:hover::before { opacity: 1; }
.v-vcard__num {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  color: var(--accent-text);
  margin-bottom: var(--space-lg);
}
.v-vcard__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  margin: 0 0 var(--space-sm);
  text-wrap: balance;
}
.v-vcard__body {
  margin: 0;
  color: var(--text-muted);
  line-height: var(--leading-body);
  max-width: 34ch;
}

/* ============================================================
   VALUATION SECTION  (.v-val)
   ------------------------------------------------------------
   Estate: discreet editorial intro + the full multi-step form.
   Pro:    compact re-CTA band (the hero already has the form).
   ============================================================ */
.v-val {
  padding-block: var(--space-3xl);
}
@media (min-width: 900px) {
  .v-val { padding-block: var(--space-4xl); }
}
/* Soft atmospheric glow centered behind the section. */
.v-val__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--glow);
  opacity: 0.7;
}

/* ---- Estate: editorial split (intro | form panel) ---- */
.v-val__grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}
@media (min-width: 940px) {
  .v-val__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
  }
}
.v-val__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-md) 0 0;
  max-width: 16ch;
  text-wrap: balance;
}
.v-val__body {
  margin: var(--space-lg) 0 0;
  max-width: 46ch;
  color: var(--text-muted);
  line-height: var(--leading-body);
  text-wrap: pretty;
}
.v-val__sign {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-xl) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--text);
}
.v-val__rule {
  width: 2.4rem;
  height: var(--hairline);
  background: var(--accent);
  opacity: 0.8;
}

/* The form panel: floating surface, deeper than the cards. */
.v-val__panel {
  position: relative;
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
}
.v-val__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
}

/* ---- Pro: compact re-CTA band ---- */
.v-val__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  align-items: flex-start;
  padding: var(--space-2xl);
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}
.v-val__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(90% 140% at 100% 0%, var(--accent-soft), transparent 60%);
}
@media (min-width: 760px) {
  .v-val__cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xl);
  }
}
.v-val__ctaText { max-width: 52ch; }
.v-val__ctaTitle {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  margin: var(--space-md) 0 0;
  text-wrap: balance;
}
.v-val__ctaBody {
  margin: var(--space-md) 0 0;
  color: var(--text-muted);
  line-height: var(--leading-body);
}
.v-btn--lg { --_pad-y: 1em; --_pad-x: 2em; font-size: var(--step-1); white-space: nowrap; }

/* ============================================================
   WALKTHROUGH BAND  (.v-walk)  ·  signature feature, both packages
   ------------------------------------------------------------
   Cinematic full-bleed film still with a play affordance. The
   real Higgsfield video drops into [data-walk-video] later.
   ============================================================ */
.v-walk {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 78svh;
  display: grid;
  align-items: end;
  padding-block: var(--space-2xl);
}
@media (min-width: 900px) {
  .v-walk { min-height: 86svh; align-items: center; padding-block: var(--space-3xl); }
}
.v-walk__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.v-walk__video,
.v-walk__poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* The autoplay teaser film: a slow Ken-Burns drift so it reads as a moving
   wall even at a glance (transform only). */
.v-walk__video {
  transform-origin: 60% 45%;
  animation: v-walk-kenburns 30s var(--ease, cubic-bezier(.2,.7,.2,1)) infinite alternate;
}
@keyframes v-walk-kenburns {
  0%   { transform: scale(1.06) translate3d(0, 0, 0); }
  100% { transform: scale(1.14) translate3d(-1.6%, -1%, 0); }
}
/* Film-still placeholder: warm directional light raking a dark interior.
   When config provides a poster, [style] sets the real image on top of
   this gradient (JS), so the band is never an empty dark box. */
.v-walk__poster {
  background:
    radial-gradient(80% 70% at 72% 28%, var(--media-tint), transparent 58%),
    var(--media-1);
  background-size: cover;
  background-position: center;
}
/* Cinematic letterbox bars + vignette over the walkthrough teaser so it
   reads as a film frame, not a background image. pointer-events off. */
.v-walk__bars { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.v-walk__bars::before,
.v-walk__bars::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: clamp(1.1rem, 3.2svh, 2.4rem);
  background: #060608;
  opacity: 0.9;
}
.v-walk__bars::before { top: 0; }
.v-walk__bars::after { bottom: 0; }
.v-walk__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(130% 110% at 32% 50%, transparent 38%, rgba(6, 6, 9, 0.5) 100%),
    linear-gradient(90deg, rgba(8, 8, 10, 0.82) 0%, rgba(8, 8, 10, 0.42) 42%, transparent 72%),
    linear-gradient(0deg, var(--bg) 2%, rgba(8, 8, 10, 0.4) 30%, transparent 64%);
}
/* The walkthrough is a full-bleed cinematic FILM (dark by nature), so the
   overlaid copy stays light for legibility even though the site base is
   bright. Scoped locally so the bright tokens elsewhere are untouched. */
.v-walk__title { color: #ffffff; }
.v-walk__body { color: rgba(255, 255, 255, 0.92); }
.v-walk .v-eyebrow { color: #ffffff; }
.v-walk__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.4; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.v-walk__inner {
  display: grid;
  gap: var(--space-2xl);
  align-items: end;
}
@media (min-width: 900px) {
  .v-walk__inner { grid-template-columns: 1fr auto; align-items: center; }
}
.v-walk__copy { max-width: 38ch; }
.v-walk__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-md) 0 0;
  text-wrap: balance;
}
.v-walk__body {
  margin: var(--space-lg) 0 var(--space-xl);
  /* Legible over the dark cinematic scrim. Color is set above to a
     near-solid white; do NOT fall back to the muted dark-grey token,
     which is illegible on this band. */
  color: rgba(255, 255, 255, 0.92);
  line-height: var(--leading-body);
  text-wrap: pretty;
}

/* Scroll cue (replaces the old play button). A quiet, legible link that
   tells the visitor the walkthroughs are scroll-to-move, NOT a film, and
   sends them to the Listings page. No play triangle, no video framing. */
.v-walk__cue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  max-width: 22ch;
  padding: var(--space-md) var(--space-lg);
  border: var(--hairline) solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill, 999px);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.v-walk__cueLabel {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.v-walk__cueArrow {
  flex: none;
  display: inline-flex;
  width: 1.6rem; height: 1.6rem;
  color: #ffffff;
  transition: transform var(--dur) var(--ease);
}
.v-walk__cueArrow svg { width: 100%; height: 100%; }
.v-walk__cue:hover,
.v-walk__cue:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.12);
}
.v-walk__cue:hover .v-walk__cueArrow,
.v-walk__cue:focus-visible .v-walk__cueArrow { transform: translateX(3px); }
.v-walk__cue:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
@keyframes v-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  70% { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}

/* ============================================================
   FEATURED LISTINGS  (.v-listings)  ·  3-up card grid
   ============================================================ */
.v-listings { padding-block: var(--space-3xl); }
@media (min-width: 900px) { .v-listings { padding-block: var(--space-4xl); } }
.v-listings__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}
.v-listings__heading { max-width: 46ch; }
.v-listings__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-md) 0 0;
  text-wrap: balance;
}
.v-listings__lede {
  margin: var(--space-md) 0 0;
  max-width: 52ch;
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}
.v-listings__all { flex: none; }

.v-listings__grid {
  display: grid;
  gap: var(--space-lg);
}
@media (min-width: 680px) { .v-listings__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .v-listings__grid { grid-template-columns: repeat(3, 1fr); } }

/* Card */
.v-listing {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.v-listing:hover {
  transform: translateY(-6px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-lg);
}
.v-listing:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.v-listing:active { transform: translateY(-2px); }

.v-listing__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 70% 10%, var(--media-tint), transparent 60%),
    var(--media-1);
}
.v-listing__media[data-tilt="2"] {
  background:
    radial-gradient(120% 100% at 30% 20%, var(--media-tint), transparent 60%),
    var(--media-2);
}
.v-listing__media[data-tilt="3"] {
  background:
    radial-gradient(120% 100% at 80% 80%, var(--media-tint), transparent 60%),
    var(--media-3);
}
.v-listing__img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.v-listing:hover .v-listing__img { transform: scale(1.05); }
.v-listing__badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--accent);
  padding: 0.4em 0.85em;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-accent);
}
.v-listing__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-lg);
}
.v-listing__price {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  letter-spacing: var(--tracking-head);
  line-height: 1;
  margin: 0;
  color: var(--text);
}
.v-listing__addr {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--step-0);
  line-height: var(--leading-snug);
  margin: var(--space-2xs) 0 0;
  color: var(--text);
}
.v-listing__specs {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin: var(--space-xs) 0 0;
}

/* ============================================================
   GALLERY PAGE HEADER  (.v-pagehead)  ·  interior-page hero band
   ------------------------------------------------------------
   Lighter than the homepage hero: a quiet editorial header that
   sits under the fixed nav. Atmospheric glow + grain for depth,
   eyebrow + immense title + a short sub line + a live count.
   Used by listings.html (and reusable by future interior pages).
   ============================================================ */
.v-pagehead {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: calc(4.5rem + var(--space-3xl));
  padding-bottom: var(--space-2xl);
  border-bottom: var(--hairline) solid var(--line);
}
@media (min-width: 900px) {
  .v-pagehead {
    padding-top: calc(5.25rem + var(--space-3xl));
    padding-bottom: var(--space-3xl);
  }
}
/* Soft, top-anchored accent glow - atmosphere without weight. */
.v-pagehead__glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(80% 120% at 84% -10%, var(--accent-soft), transparent 56%),
    radial-gradient(70% 100% at 6% -20%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 55%, transparent), transparent 62%);
  opacity: 0.9;
}
.v-pagehead__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.v-pagehead__inner { max-width: 56ch; }
.v-pagehead__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-5);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-md) 0 0;
  max-width: 16ch;
  text-wrap: balance;
}
.v-pagehead__title em { font-style: italic; color: var(--accent-text); }
.v-pagehead__sub {
  margin: var(--space-lg) 0 0;
  max-width: 52ch;
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--text-muted);
  text-wrap: pretty;
}
/* Live "N active listings" count line under the sub. */
.v-pagehead__count {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: var(--space-xl) 0 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.v-pagehead__count b { color: var(--text); font-weight: var(--weight-medium); }
.v-pagehead__count::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* ============================================================
   LISTINGS GALLERY  (.v-gallery)  ·  full grid of all listings
   ------------------------------------------------------------
   Reuses the .v-listing card + renderer from the home grid; this
   block just owns the page-level rhythm + the count footer line.
   ============================================================ */
.v-gallery { padding-block: var(--space-2xl) var(--space-3xl); }
@media (min-width: 900px) { .v-gallery { padding-block: var(--space-3xl) var(--space-4xl); } }
.v-gallery__foot {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--hairline) solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-wrap: pretty;
}
.v-gallery__foot a { color: var(--text); transition: color var(--dur) var(--ease); }
.v-gallery__foot a:hover,
.v-gallery__foot a:focus-visible { color: var(--accent-text); }

/* ============================================================
   NEIGHBORHOODS  (.v-hoods)  ·  editorial area cards
   ============================================================ */
.v-hoods {
  padding-block: var(--space-3xl);
  border-top: var(--hairline) solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 50%, transparent), transparent 50%);
}
@media (min-width: 900px) { .v-hoods { padding-block: var(--space-4xl); } }
.v-hoods__head { max-width: 48ch; margin-bottom: var(--space-2xl); }
.v-hoods__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-md) 0 0;
  text-wrap: balance;
}
.v-hoods__lede {
  margin: var(--space-md) 0 0;
  max-width: 54ch;
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}
.v-hoods__grid {
  display: grid;
  gap: var(--space-md);
}
@media (min-width: 620px) { .v-hoods__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .v-hoods__grid { grid-template-columns: repeat(3, 1fr); } }
.v-hoods__foot {
  margin: var(--space-2xl) 0 0;
  display: flex;
  justify-content: center;
}

.v-area {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.v-area::before {
  content: "";
  position: absolute;
  inset: auto auto -40% -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(120% 120% at 0% 100%, var(--accent-soft), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.v-area:hover {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-md);
}
.v-area:hover::before { opacity: 1; }
.v-area:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.v-area__idx {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  color: var(--accent-text);
}
.v-area__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  letter-spacing: var(--tracking-head);
  line-height: 1.1;
  margin: var(--space-md) 0 0;
  color: var(--text);
}
.v-area__tag {
  margin: var(--space-sm) 0 var(--space-lg);
  color: var(--text-muted);
  line-height: var(--leading-body);
  font-size: var(--step-0);
}
.v-area__link {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.03em;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.v-area__link::after {
  content: "\2192";
  transition: transform var(--dur) var(--ease-out);
}
.v-area:hover .v-area__link { color: var(--accent-text); }
.v-area:hover .v-area__link::after { transform: translateX(4px); }

/* ============================================================
   REVIEWS  (.v-reviews)  ·  recent-first wall + CTA
   ============================================================ */
.v-reviews { padding-block: var(--space-3xl); }
@media (min-width: 900px) { .v-reviews { padding-block: var(--space-4xl); } }
.v-reviews__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}
.v-reviews__heading { max-width: 40ch; }
.v-reviews__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-md) 0 0;
  text-wrap: balance;
}
.v-reviews__more { flex: none; }
.v-reviews__wall {
  display: grid;
  gap: var(--space-lg);
}
@media (min-width: 760px) { .v-reviews__wall { grid-template-columns: repeat(3, 1fr); } }

.v-review {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-xl);
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.v-review:hover { transform: translateY(-3px); border-color: var(--accent-line); }
.v-review__stars {
  color: var(--accent-text);
  letter-spacing: 0.12em;
  font-size: var(--step-0);
  margin-bottom: var(--space-md);
}
.v-review__quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--text);
  margin: 0 0 var(--space-lg);
  text-wrap: pretty;
}
.v-review__meta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-top: var(--space-md);
  border-top: var(--hairline) solid var(--line);
}
.v-review__name {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  color: var(--text);
}
.v-review__detail {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

/* ============================================================
   REVIEWS STRIP  (.v-rstrip)  ·  compact home band, reviews + CTA
   Reuses the .v-review card; only the section frame differs. Sits
   high on the homepage so the strongest trust lever is not buried.
   ============================================================ */
.v-rstrip {
  padding-block: var(--space-3xl);
  border-top: var(--hairline) solid var(--line);
}
@media (min-width: 900px) { .v-rstrip { padding-block: var(--space-4xl); } }
.v-rstrip__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}
.v-rstrip__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-md) 0 0;
  text-wrap: balance;
}
.v-rstrip__all { flex: none; }
.v-rstrip__grid {
  display: grid;
  gap: var(--space-lg);
}
@media (min-width: 760px) { .v-rstrip__grid { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   ABOUT TEASER  (.v-about)
   ============================================================ */
.v-about {
  padding-block: var(--space-3xl);
  border-top: var(--hairline) solid var(--line);
}
@media (min-width: 900px) { .v-about { padding-block: var(--space-4xl); } }
.v-about__grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}
@media (min-width: 880px) {
  .v-about__grid { grid-template-columns: 0.85fr 1fr; gap: var(--space-4xl); }
}
.v-about__portrait { position: relative; }
.v-about__photo {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  border: var(--hairline) solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  background:
    radial-gradient(90% 70% at 50% 8%, var(--media-tint), transparent 60%),
    var(--media-1);
}
.v-about__badge {
  position: absolute;
  left: var(--space-lg);
  bottom: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.v-about__badgeName {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-0);
  color: var(--text);
}
.v-about__badgeLic {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.v-about__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-md) 0 0;
  max-width: 16ch;
  text-wrap: balance;
}
.v-about__body {
  margin: var(--space-lg) 0 0;
  max-width: 52ch;
  color: var(--text-muted);
  line-height: var(--leading-body);
  text-wrap: pretty;
}
.v-about__proof {
  margin: var(--space-lg) 0 var(--space-xl);
  padding-left: var(--space-lg);
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--text);
  line-height: var(--leading-snug);
  max-width: 40ch;
}

/* ============================================================
   FINAL CTA + CONTACT  (.v-cta)
   ============================================================ */
.v-cta {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-3xl);
  border-top: var(--hairline) solid var(--line);
  overflow: clip;
}
@media (min-width: 900px) { .v-cta { padding-block: var(--space-4xl); } }
.v-cta__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--glow); opacity: 0.9;
}
.v-cta__grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}
@media (min-width: 880px) {
  .v-cta__grid { grid-template-columns: 1fr 0.9fr; gap: var(--space-4xl); }
}
.v-cta__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-5);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-md) 0 0;
  max-width: 14ch;
  text-wrap: balance;
}
.v-cta__body {
  margin: var(--space-lg) 0 0;
  max-width: 46ch;
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}
.v-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.v-cta__call {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  color: var(--text);
  transition: color var(--dur) var(--ease);
}
.v-cta__call svg { width: 1em; height: 1em; color: var(--accent-text); }
.v-cta__call:hover { color: var(--accent-text); }

.v-cta__panel {
  position: relative;
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
}
.v-cta__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
}
.v-textarea {
  resize: vertical;
  min-height: 5.5rem;
  line-height: var(--leading-snug);
  font-family: var(--font-body);
}

/* ============================================================
   FOOTER  (.v-foot)
   ============================================================ */
.v-foot {
  border-top: var(--hairline) solid var(--line);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 60%, transparent));
  padding-top: var(--space-3xl);
}
.v-foot__grid {
  display: grid;
  gap: var(--space-2xl);
}
@media (min-width: 720px) {
  .v-foot__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-2xl); }
}
.v-foot__mark { font-size: var(--step-3); }
.v-foot__tag {
  margin: var(--space-md) 0 var(--space-lg);
  max-width: 36ch;
  color: var(--text-muted);
  line-height: var(--leading-body);
}
.v-foot__call,
.v-foot__email {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  color: var(--text);
  transition: color var(--dur) var(--ease);
}
.v-foot__call { display: inline-flex; align-items: center; gap: 0.6em; margin-bottom: var(--space-xs); }
.v-foot__call svg { width: 1em; height: 1em; color: var(--accent-text); }
.v-foot__call:hover,
.v-foot__email:hover { color: var(--accent-text); }
.v-foot__h {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 var(--space-lg);
}
.v-foot__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.v-foot__links a {
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}
.v-foot__links a:hover,
.v-foot__links a:focus-visible { color: var(--text); }

.v-foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  padding-block: var(--space-lg);
  border-top: var(--hairline) solid var(--line);
}
.v-foot__legal {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-faint);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em;
}
.v-foot__sep { color: var(--text-faint); }
.v-foot__vyne {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.03em;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}
.v-foot__vyne:hover { color: var(--text); }
.v-foot__vyneMark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--accent-text);
}

/* ============================================================
   SINGLE PROPERTY PAGE  (listing.html)
   ============================================================ */

/* ------------------------------------------------------------
   THE CINEMATIC TOUR  (.v-tour)  ·  THE STAR
   The real walkthrough film, watched like a normal video. It
   autoplays muted + loops as an ambient teaser; a clear overlay
   button restarts it unmuted with native controls; a sound toggle
   is always visible. No scroll-pinning, no scrub.
   ------------------------------------------------------------ */
.v-tour {
  position: relative;
  padding-top: calc(var(--nav-h, 4.5rem) + var(--space-xl));
  padding-bottom: var(--space-2xl);
}
@media (min-width: 900px) {
  .v-tour {
    padding-top: calc(var(--nav-h, 4.5rem) + var(--space-2xl));
    padding-bottom: var(--space-3xl);
  }
}
.v-tour__head { margin-bottom: var(--space-lg); }
.v-tour__eyebrow { color: var(--accent-text); }
.v-tour__address {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-sm) 0 0;
  text-wrap: balance;
}
.v-tour__city {
  display: block;
  font-size: var(--step-1);
  color: var(--text-muted);
  letter-spacing: var(--tracking-head);
  margin-top: 0.35rem;
}

/* ---- The film frame ---- */
.v-tour__frame {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: clip;
  isolation: isolate;
  background: #060608;
  border: var(--hairline) solid var(--line-strong);
  box-shadow: var(--shadow-lg);
}
.v-tour__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #060608;
  z-index: 0;
}
/* When the visitor takes control, native controls + sound show; let
   pointer events through to the <video> chrome. */
.v-tour.is-playing .v-tour__play,
.v-tour.is-playing .v-tour__scrim { opacity: 0; pointer-events: none; }
.v-tour.is-playing .v-tour__hud { opacity: 0; }

/* Letterbox bars + grain + scrim: cinematic atmosphere + readability. */
.v-tour__bars { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.v-tour__bars::before,
.v-tour__bars::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 5%;
  background: #050507;
}
.v-tour__bars::before { top: 0; }
.v-tour__bars::after { bottom: 0; }
.v-tour__grain {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0.14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.v-tour__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  transition: opacity var(--dur) var(--ease);
  background:
    radial-gradient(120% 80% at 50% 40%, transparent 40%, rgba(5,5,8,0.34) 100%),
    linear-gradient(0deg, rgba(5,5,8,0.62) 0%, transparent 34%);
}

/* ---- Big "Watch the full tour" affordance ---- */
.v-tour__play {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}
.v-tour__playRing {
  width: clamp(4.5rem, 9vw, 6rem);
  height: clamp(4.5rem, 9vw, 6rem);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 90%, #000 10%);
  color: #fff;
  box-shadow:
    0 18px 50px -12px color-mix(in srgb, var(--accent) 60%, transparent),
    0 4px 16px rgba(0,0,0,0.4);
  position: relative;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.v-tour__playRing::after {
  content: "";
  position: absolute; inset: -10px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  animation: v-tour-pulse 2.6s var(--ease) infinite;
}
@keyframes v-tour-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  70% { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}
.v-tour__playIcon { width: 42%; height: 42%; margin-left: 6%; }
.v-tour__playText { display: grid; gap: 0.15rem; text-align: center; }
.v-tour__playTitle {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  letter-spacing: var(--tracking-head);
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}
.v-tour__playSub {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}
.v-tour__play:hover .v-tour__playRing,
.v-tour__play:focus-visible .v-tour__playRing { transform: scale(1.06); }
.v-tour__play:active .v-tour__playRing { transform: scale(0.99); }
.v-tour__play:focus-visible { outline: none; }
.v-tour__play:focus-visible .v-tour__playRing { outline: 2px solid var(--ring); outline-offset: 4px; }

/* ---- Overlay HUD: status + price (bottom-left) ---- */
.v-tour__hud {
  position: absolute;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.v-tour__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.42em 0.85em;
  border-radius: var(--radius-pill);
  background: rgba(8,8,11,0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: var(--hairline) solid color-mix(in srgb, var(--text) 16%, transparent);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}
.v-tour__badgeDot {
  width: 0.5em; height: 0.5em; border-radius: 50%;
  background: var(--accent-text);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent);
  animation: v-tour-rec 2.4s var(--ease) infinite;
}
@keyframes v-tour-rec {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.v-tour__price {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  letter-spacing: var(--tracking-head);
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}

/* ---- Sound toggle (top-right) ---- */
.v-tour__sound {
  position: absolute;
  top: clamp(0.9rem, 3vw, 1.5rem);
  right: clamp(0.9rem, 3vw, 1.5rem);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.85em;
  border-radius: var(--radius-pill);
  background: rgba(8,8,11,0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: var(--hairline) solid color-mix(in srgb, var(--text) 18%, transparent);
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.v-tour__sound svg { width: 1.05rem; height: 1.05rem; flex: none; }
.v-tour__soundOn { display: none; }
.v-tour__sound.is-on { color: var(--accent-text); border-color: var(--accent-line); background: color-mix(in srgb, var(--accent) 16%, rgba(8,8,11,0.55)); }
.v-tour__sound.is-on .v-tour__soundOff { display: none; }
.v-tour__sound.is-on .v-tour__soundOn { display: block; }
.v-tour__sound:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--text) 30%, transparent); }
.v-tour__sound:active { transform: translateY(0); }
.v-tour__sound:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
@media (max-width: 540px) {
  .v-tour__soundLabel { display: none; }
  .v-tour__sound { padding: 0.55em; }
}

.v-tour__cue {
  margin: var(--space-lg) 0 0;
  max-width: 52ch;
  color: var(--text-muted);
  font-size: var(--step-0);
  line-height: var(--leading-body);
}

/* ============================================================
   THE INTERACTIVE WALKTHROUGH  (.v-tourwalk)  ·  scroll to move
   ------------------------------------------------------------
   The centerpiece of listing.html. The visitor SCROLLS to move
   through the home: the walkthrough footage's currentTime is
   scrubbed from scroll (no play button, no "watch the film").
   Bright/airy frame, a clean LIGHT HUD (room chips + progress),
   and a "scroll to walk" cue. On desktop the stage pins and the
   page scroll drives the camera; on mobile / reduced motion it
   degrades to a simple poster frame (no janky pin, no scrub).
   ============================================================ */
.v-tourwalk {
  position: relative;
  padding-top: calc(var(--nav-h, 4.5rem) + var(--space-xl));
  padding-bottom: var(--space-2xl);
}
@media (min-width: 900px) {
  .v-tourwalk {
    padding-top: calc(var(--nav-h, 4.5rem) + var(--space-2xl));
    padding-bottom: var(--space-3xl);
  }
}
.v-tourwalk__head { margin-bottom: var(--space-lg); max-width: 60ch; }
.v-tourwalk__eyebrow { color: var(--accent-text); }
.v-tourwalk__address {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-sm) 0 0;
  text-wrap: balance;
}
.v-tourwalk__city {
  display: block;
  font-size: var(--step-1);
  color: var(--text-muted);
  letter-spacing: var(--tracking-head);
  margin-top: 0.35rem;
}

/* The runway: on desktop this is tall so the pinned stage has scroll
   to scrub against. Until JS arms it, it stays one stage tall so a
   failed boot never opens an empty gap. */
.v-tourwalk__runway { position: relative; }
.v-tourwalk__runway.is-runway { height: 320vh; }

/* The stage: the framed walkthrough. Pinned by JS while scrubbing. */
.v-tourwalk__stage {
  position: relative;
  display: grid;
  gap: var(--space-md);
}
@media (min-width: 900px) {
  .v-tourwalk__runway.is-runway .v-tourwalk__stage {
    min-height: 100svh;
    align-content: start;
    padding-top: var(--space-lg);
  }
}

.v-tourwalk__frame {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: clip;
  isolation: isolate;
  background: var(--surface-2);
  border: var(--hairline) solid var(--line-strong);
  box-shadow: var(--shadow-lg);
}
.v-tourwalk__video,
.v-tourwalk__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.v-tourwalk__poster {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
/* Once the film paints, lift it above the poster. */
.v-tourwalk.is-ready .v-tourwalk__video { z-index: 1; }

/* A whisper-soft readability scrim so the LIGHT HUD chips read on any
   frame. Kept gentle to preserve the bright, airy feel. */
.v-tourwalk__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(8,10,14,0.40) 0%, transparent 30%),
    linear-gradient(180deg, rgba(8,10,14,0.22) 0%, transparent 22%);
}

/* ---- The HUD: room chips (top) + progress + scroll cue (bottom) ---- */
.v-tourwalk__hud {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(0.85rem, 2.4vw, 1.4rem);
  pointer-events: none;
}
.v-tourwalk__chips {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  pointer-events: auto;
}
.v-tourwalk__chip {
  appearance: none;
  border: var(--hairline) solid rgba(255,255,255,0.34);
  background: rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.42em 0.8em;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.v-tourwalk__chip:hover { background: rgba(255,255,255,0.3); }
.v-tourwalk__chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.v-tourwalk__chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  text-shadow: none;
}
.v-tourwalk__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-md);
}
.v-tourwalk__cue {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
  transition: opacity var(--dur) var(--ease);
}
.v-tourwalk.is-moving .v-tourwalk__cue { opacity: 0; }
.v-tourwalk__cueIcon {
  width: 1.1rem; height: 1.1rem;
  animation: v-tourwalk-nudge 1.8s var(--ease) infinite;
}
@keyframes v-tourwalk-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
.v-tourwalk__price {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  letter-spacing: var(--tracking-head);
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.55);
  margin-left: auto;
}
/* Slim progress bar across the very bottom of the frame. */
.v-tourwalk__progress {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  height: 4px;
  background: rgba(255,255,255,0.22);
}
.v-tourwalk__progressFill {
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: var(--accent);
  transition: width 80ms linear;
}

/* The room caption above the frame on the stage. */
.v-tourwalk__room {
  display: flex; align-items: baseline; gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  min-height: 1.4em;
}
.v-tourwalk__roomName { color: var(--accent-text); }

/* ------------------------------------------------------------
   KEY FACTS AT A GLANCE  (.v-facts)
   ------------------------------------------------------------ */
.v-facts {
  border-top: var(--hairline) solid var(--line);
  border-bottom: var(--hairline) solid var(--line);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.v-facts__row {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg) var(--space-md);
  padding-block: var(--space-xl);
}
@media (min-width: 620px) { .v-facts__row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .v-facts__row { grid-template-columns: repeat(6, 1fr); } }
.v-fact { display: grid; gap: 0.3rem; }
.v-fact dt {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  order: 2;
}
.v-fact dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  line-height: 1;
  letter-spacing: var(--tracking-head);
  color: var(--text);
  order: 1;
}
.v-fact--price dd { color: var(--accent-text); }

/* ------------------------------------------------------------
   ABOUT THIS HOME  (.v-about-home)
   ------------------------------------------------------------ */
.v-about-home { padding-block: var(--space-3xl); }
@media (min-width: 900px) { .v-about-home { padding-block: var(--space-4xl); } }
.v-about-home__grid { display: grid; gap: var(--space-xl); }
@media (min-width: 900px) {
  .v-about-home__grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-3xl);
    align-items: start;
  }
}
.v-about-home__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  margin: var(--space-sm) 0 0;
  text-wrap: balance;
  max-width: 18ch;
}
.v-about-home__lede {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: var(--leading-body);
  text-wrap: pretty;
  max-width: 60ch;
}
.v-about-home__features {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
}
@media (min-width: 560px) { .v-about-home__features { grid-template-columns: 1fr 1fr; } }

/* Feature row (shared with hydrated markup). */
.v-pdp-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  color: var(--text);
  line-height: var(--leading-snug);
}
.v-pdp-feature__mark {
  flex: none;
  margin-top: 0.15em;
  width: 1.25rem; height: 1.25rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: var(--hairline) solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-text);
}
.v-pdp-feature__mark svg { width: 0.7rem; height: 0.7rem; }

/* ------------------------------------------------------------
   PHOTO GALLERY  (.v-photos)
   ------------------------------------------------------------ */
.v-photos { padding-bottom: var(--space-3xl); }
@media (min-width: 900px) { .v-photos { padding-bottom: var(--space-4xl); } }
.v-photos__head { margin-bottom: var(--space-xl); }
.v-photos__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  margin: var(--space-sm) 0 0;
}
.v-photos__grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 760px) {
  .v-photos__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
  }
  .v-photos__grid > :first-child { grid-column: span 2; grid-row: span 2; }
}
.v-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: clip;
  border: var(--hairline) solid var(--line);
  isolation: isolate;
}
.v-photo__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform var(--dur-slow) var(--ease);
}
.v-photo__label {
  position: absolute;
  left: var(--space-md); bottom: var(--space-md);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}
.v-photo:hover .v-photo__img { transform: scale(1.05); }

/* ------------------------------------------------------------
   RUN THE NUMBERS  (.v-numbers)  ·  compact mortgage card
   Reuses .v-mort__affix / .v-mort__input / .v-mort__stamp.
   ------------------------------------------------------------ */
.v-numbers { padding-bottom: var(--space-3xl); }
@media (min-width: 900px) { .v-numbers { padding-bottom: var(--space-4xl); } }
.v-numbers__card {
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: clip;
  display: grid;
  gap: 0;
}
@media (min-width: 860px) {
  .v-numbers__card { grid-template-columns: 1.15fr 0.85fr; }
}
.v-numbers__intro { padding: var(--space-xl); }
@media (min-width: 900px) { .v-numbers__intro { padding: var(--space-2xl); } }
.v-numbers__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  margin: var(--space-sm) 0 0;
}
.v-numbers__lede {
  margin: var(--space-sm) 0 var(--space-lg);
  color: var(--text-muted);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  max-width: 46ch;
}
.v-numbers__form { display: grid; gap: var(--space-md); }
.v-numbers__form .v-mort__stamp {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--text-faint);
}

/* Result pane: glowing readout. */
.v-numbers__result {
  position: relative;
  padding: var(--space-xl);
  display: grid;
  align-content: center;
  gap: var(--space-sm);
  background:
    radial-gradient(120% 90% at 80% 0%, var(--accent-soft), transparent 60%),
    var(--surface-2);
  border-top: var(--hairline) solid var(--line-strong);
}
@media (min-width: 860px) {
  .v-numbers__result {
    padding: var(--space-2xl);
    border-top: 0;
    border-left: var(--hairline) solid var(--line-strong);
  }
}
.v-numbers__resultLabel {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.v-numbers__payment {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-4);
  line-height: 1;
  letter-spacing: var(--tracking-head);
  color: var(--accent-text);
}
.v-numbers__resultSub {
  margin: 0;
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: var(--leading-body);
  max-width: 36ch;
}
.v-numbers__break {
  margin: var(--space-md) 0 0;
  display: grid;
  gap: 0.4rem;
}
.v-numbers__breakRow {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: 0.35rem;
  border-top: var(--hairline) solid var(--line);
  font-size: var(--step-0);
}
.v-numbers__breakRow dt { color: var(--text-muted); }
.v-numbers__breakRow dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.v-numbers__cta { margin-top: var(--space-md); justify-self: start; }

/* ------------------------------------------------------------
   LIST WITH ME  (.v-list)  ·  seller lead capture + why-list copy
   ------------------------------------------------------------ */
.v-list {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--space-3xl);
  border-top: var(--hairline) solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 55%, transparent), transparent 55%);
}
@media (min-width: 900px) { .v-list { padding-block: var(--space-4xl); } }
.v-list__glow {
  position: absolute;
  z-index: -1;
  top: -16%; left: 14%;
  width: min(80vw, 52rem); height: 52rem;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, var(--accent-soft), transparent 70%);
  pointer-events: none;
}
.v-list__grid { display: grid; gap: var(--space-2xl); }
/* Grid items default to min-width:auto, which lets long content force the
   single mobile column wider than the viewport. Pin to 0 so the column
   tracks the available width. */
.v-list__grid > * { min-width: 0; }
@media (min-width: 980px) {
  .v-list__grid {
    grid-template-columns: 1.08fr 0.92fr;
    gap: var(--space-3xl);
    align-items: start;
  }
}
.v-list__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-sm) 0 0;
  text-wrap: balance;
}
.v-list__lede {
  margin: var(--space-lg) 0 var(--space-xl);
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: var(--leading-body);
  max-width: 46ch;
}
.v-list__reasons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-lg);
}
.v-lreason {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  align-items: start;
}
.v-lreason__mark {
  margin-top: 0.55em;
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.v-lreason__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  line-height: var(--leading-tight);
  margin: 0;
  color: var(--text);
}
.v-lreason__body {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
  line-height: var(--leading-body);
  max-width: 50ch;
}
.v-list__call {
  margin: var(--space-xl) 0 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--text-faint);
}
.v-list__call a { color: var(--accent-text); text-decoration: none; border-bottom: 1px solid var(--accent-line); }
.v-list__call a:hover { border-bottom-color: var(--accent-text); }
.v-list__panel {
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
}
@media (min-width: 900px) { .v-list__panel { padding: var(--space-2xl); } }
.v-list__panel .v-btn--lg { width: 100%; }
.v-list__panelHead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  line-height: var(--leading-tight);
  margin: 0;
  color: var(--text);
}
.v-list__panelNote {
  margin: 0.5rem 0 var(--space-lg);
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: var(--leading-body);
}

/* ------------------------------------------------------------
   BOOK A PRIVATE SHOWING  (.v-book)  ·  the conversion goal
   ------------------------------------------------------------ */
.v-book {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--space-3xl);
  border-top: var(--hairline) solid var(--line);
}
@media (min-width: 900px) { .v-book { padding-block: var(--space-4xl); } }
.v-book__glow {
  position: absolute;
  z-index: -1;
  top: -20%; left: 50%;
  width: min(90vw, 60rem); height: 60rem;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, var(--accent-soft), transparent 70%);
  pointer-events: none;
}
.v-book__grid { display: grid; gap: var(--space-xl); }
/* Keep the single mobile column from blowing out past the viewport. */
.v-book__grid > * { min-width: 0; }
@media (min-width: 900px) {
  .v-book__grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-3xl);
    align-items: center;
  }
}
.v-book__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-sm) 0 0;
  text-wrap: balance;
}
.v-book__note {
  margin: var(--space-lg) 0 0;
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: var(--leading-body);
  max-width: 40ch;
}
.v-book__call {
  margin: var(--space-lg) 0 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--text-faint);
}
.v-book__call a { color: var(--accent-text); text-decoration: none; border-bottom: 1px solid var(--accent-line); }
.v-book__call a:hover { border-bottom-color: var(--accent-text); }
.v-book__panel {
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
}
@media (min-width: 900px) { .v-book__panel { padding: var(--space-2xl); } }
.v-book__panel .v-btn--lg { width: 100%; }

/* ============================================================
   BUYERS PAGE  (buyers.html)
   ------------------------------------------------------------
   Reuses .v-nh (page header), .v-numbers (mortgage calc, moved
   here from listing.html), .v-cta (consultation). Adds two small
   components: .v-journey (the buyer-journey steps) and .v-guide
   (the gated buyer-guide download band).
   ============================================================ */

/* ---- Buyer journey: what to expect, step by step ---- */
.v-journey { padding-block: var(--space-3xl); }
@media (min-width: 900px) { .v-journey { padding-block: var(--space-4xl); } }
.v-journey__head { max-width: 56ch; margin-bottom: var(--space-2xl); }
.v-journey__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  margin: var(--space-sm) 0 0;
  text-wrap: balance;
}
.v-journey__sub {
  margin: var(--space-md) 0 0;
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: var(--leading-body);
}
.v-journey__grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .v-journey__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .v-journey__grid { grid-template-columns: repeat(4, 1fr); } }
.v-journey__step {
  position: relative;
  padding: var(--space-lg);
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.v-journey__step:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.v-journey__num {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  color: var(--accent-text);
}
.v-journey__stepTitle {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  margin: 0;
}
.v-journey__stepBody {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--step-0);
  line-height: var(--leading-body);
}

/* ---- Gated buyer guide download band ---- */
.v-guide {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--space-3xl);
  border-top: var(--hairline) solid var(--line);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
@media (min-width: 900px) { .v-guide { padding-block: var(--space-4xl); } }
.v-guide__glow {
  position: absolute; z-index: -1;
  top: -25%; left: 8%;
  width: min(80vw, 48rem); height: 48rem;
  background: radial-gradient(50% 50% at 50% 50%, var(--accent-soft), transparent 70%);
  pointer-events: none;
}
.v-guide__grid { display: grid; gap: var(--space-xl); }
@media (min-width: 900px) {
  .v-guide__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-3xl); align-items: center; }
}
.v-guide__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-sm) 0 0;
  text-wrap: balance;
}
.v-guide__body {
  margin: var(--space-lg) 0 0;
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: var(--leading-body);
  max-width: 44ch;
}
.v-guide__list {
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-sm);
}
.v-guide__list li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  color: var(--text);
  font-size: var(--step-0);
  line-height: var(--leading-body);
}
.v-guide__check {
  flex: none;
  width: 1.25rem; height: 1.25rem;
  margin-top: 0.15rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.v-guide__check svg { width: 0.8rem; height: 0.8rem; }
.v-guide__panel {
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
}
@media (min-width: 900px) { .v-guide__panel { padding: var(--space-2xl); } }
.v-guide__panel .v-btn--lg { width: 100%; }
.v-guide__legal {
  margin: var(--space-md) 0 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--text-faint);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* Listing tour: kill the perpetual pulse/rec animations; the film
     does not autoplay (the inline script returns before play() under
     reduced motion) so the poster simply stays until the visitor acts. */
  .v-tour__playRing::after,
  .v-tour__badgeDot { animation: none !important; }
  .v-tour__playRing,
  .v-tour__sound,
  .v-tour__scrim,
  .v-tour__play { transition: none; }
  .v-photo__img { transition: none; }
  /* Interactive walkthrough: no pin/scrub runway, no nudge, just the
     poster frame. JS also returns before arming the scrub here. */
  .v-tourwalk__runway.is-runway { height: auto !important; }
  .v-tourwalk__cueIcon { animation: none !important; }
  .v-tourwalk__progressFill { transition: none !important; }
  .v-walk__cue,
  .v-journey__step,
  .v-listing,
  .v-listing__img,
  .v-area,
  .v-review,
  .v-foot__links a { transition: none; }
  .v-kinetic .v-word > span {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }
  .v-nav,
  .v-menu,
  .v-btn,
  .v-nav__link::after,
  .v-brand,
  .v-vcard { transition: none; }

  /* Hero cinematic layers: no perpetual motion, no entrance offsets. */
  .v-hero__grain,
  .v-hero__light,
  .v-hero__media video,
  .v-hero__media .v-hero__poster { animation: none !important; transform: none !important; }
  html.js-motion .v-hero__media {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.js-motion .v-hero__eyebrow,
  html.js-motion .v-hero__sub,
  html.js-motion .v-hero__ctas,
  html.js-motion .v-hero__trust,
  html.js-motion .v-hero .v-statbar,
  html.js-motion .v-hero .v-valcard {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   VALUATION LANDING PAGE  (valuation.html)
   ------------------------------------------------------------
   A focused seller-capture page. ONE job: the valuation lead.
   Hero band (pitch + the multi-step form), a 3-point "what you'll
   get" reassurance row, and a slim review strip for trust.
   Mobile-first, transform/opacity only, layered surfaces.
   ============================================================ */

/* Screen-reader-only utility (used for the trust section heading). */
.v-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- Hero band -------------------------------------------- */
.v-vp {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: calc(4.5rem + var(--space-3xl));
  padding-bottom: var(--space-3xl);
}
@media (min-width: 900px) {
  .v-vp {
    padding-top: calc(5.25rem + var(--space-3xl));
    padding-bottom: calc(var(--space-3xl) + var(--space-xl));
  }
}
/* Atmospheric accent glow, anchored to the form side. */
.v-vp__glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(72% 90% at 92% -8%, var(--accent-soft), transparent 58%),
    radial-gradient(60% 80% at 4% 8%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 60%, transparent), transparent 58%);
  opacity: 0.92;
}
.v-vp__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

.v-vp__grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}
@media (min-width: 960px) {
  .v-vp__grid {
    grid-template-columns: 1fr minmax(380px, 460px);
    gap: var(--space-3xl);
    align-items: center;
  }
}

/* Left: the pitch */
.v-vp__intro { max-width: 60ch; }
.v-vp__headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-5);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-md) 0 0;
  max-width: 18ch;
  text-wrap: balance;
}
.v-vp__headline em { font-style: italic; color: var(--accent-text); }
.v-vp__sub {
  margin: var(--space-lg) 0 0;
  max-width: 50ch;
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--text-muted);
  text-wrap: pretty;
}

/* "Prepared by hand" honesty line. */
.v-vp__hand {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin: var(--space-xl) 0 0;
  max-width: 48ch;
  font-size: var(--step-0);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}
.v-vp__hand b { color: var(--text); font-weight: var(--weight-medium); }
.v-vp__handIcon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-top: 0.05em;
  border-radius: var(--radius-sm);
  color: var(--accent-text);
  background: var(--accent-soft);
  border: var(--hairline) solid var(--accent-line);
}
.v-vp__handIcon svg { width: 1.05rem; height: 1.05rem; }

/* Slim proof strip near the form. */
.v-vp__proof {
  margin: var(--space-2xl) 0 0;
  padding-top: var(--space-lg);
  border-top: var(--hairline) solid var(--line);
}
.v-vp__proofLabel {
  margin: 0 0 var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.v-vp__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg) var(--space-md);
}
@media (min-width: 560px) { .v-vp__stats { grid-template-columns: repeat(4, 1fr); } }
.v-vp__stats .v-stat__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-3);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--text);
}
.v-vp__stats .v-stat__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.35;
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

/* Right: the form card. Floats above with a layered shadow + accent
   hairline at the top edge (matches the homepage valcard language). */
.v-vp__card {
  position: relative;
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 600px) { .v-vp__card { padding: var(--space-2xl); } }
.v-vp__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
}
.v-vp__cardHead { margin-bottom: var(--space-lg); }
.v-vp__cardTitle {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  margin: var(--space-sm) 0 var(--space-xs);
  text-wrap: balance;
}
.v-vp__cardNote {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-faint);
  margin: 0;
}

/* ---- Reassurance row -------------------------------------- */
.v-vp-trust {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-3xl);
  border-top: var(--hairline) solid var(--line);
  border-bottom: var(--hairline) solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 40%, transparent), transparent 70%);
}
.v-vp-trust__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-xl);
}
@media (min-width: 760px) {
  .v-vp-trust__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
}
.v-vp-trust__card {
  padding: var(--space-xl);
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.4));
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.v-vp-trust__card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-line);
}
.v-vp-trust__icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-sm);
  color: var(--accent-text);
  background: var(--accent-soft);
  border: var(--hairline) solid var(--accent-line);
}
.v-vp-trust__icon svg { width: 1.3rem; height: 1.3rem; }
.v-vp-trust__h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  margin: var(--space-lg) 0 var(--space-sm);
  text-wrap: balance;
}
.v-vp-trust__b {
  margin: 0;
  color: var(--text-muted);
  line-height: var(--leading-body);
}

/* ---- Review strip ----------------------------------------- */
.v-vp-quote {
  padding-block: var(--space-3xl);
}
.v-vp-quote__fig {
  margin: 0 auto;
  max-width: 60ch;
  text-align: center;
}
.v-vp-quote__stars {
  color: var(--accent-text);
  letter-spacing: 0.18em;
  font-size: var(--step-0);
}
.v-vp-quote__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--step-3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  color: var(--text);
  margin: var(--space-lg) 0 0;
  text-wrap: balance;
}
.v-vp-quote__cite {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-top: var(--space-lg);
}
.v-vp-quote__name {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text);
}
.v-vp-quote__detail {
  font-size: var(--step--1);
  color: var(--text-faint);
}

@media (prefers-reduced-motion: reduce) {
  .v-vp-trust__card { transition: none; }
  .v-vp-trust__card:hover { transform: none; }
}

/* ============================================================
   NEIGHBORHOOD GUIDE  (neighborhood.html)
   ------------------------------------------------------------
   The hyperlocal editorial / SEO page. Magazine rhythm: a quiet
   header band ("Living in [Town]"), a market-snapshot strip, an
   editorial body with a drop-cap lead and pull-quotes, lifestyle
   cards, sub-neighborhood cards, an IDX-stub listings grid, a
   valuation CTA, and an FAQ accordion. Mobile-first, transform/
   opacity only, layered surfaces built from tokens.
   ============================================================ */

/* ---- Header band ------------------------------------------- */
.v-nh {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: calc(4.5rem + var(--space-3xl));
  padding-bottom: var(--space-2xl);
  border-bottom: var(--hairline) solid var(--line);
}
@media (min-width: 900px) {
  .v-nh {
    padding-top: calc(5.25rem + var(--space-3xl));
    padding-bottom: var(--space-3xl);
  }
}
.v-nh__glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(82% 120% at 84% -12%, var(--accent-soft), transparent 56%),
    radial-gradient(70% 100% at 4% -18%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 55%, transparent), transparent 62%);
  opacity: 0.92;
}
.v-nh__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.34;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.v-nh__inner { max-width: 62ch; }
.v-nh__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-5);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-md) 0 0;
  max-width: 14ch;
  text-wrap: balance;
}
.v-nh__title em { font-style: italic; color: var(--accent-text); }
.v-nh__lede {
  margin: var(--space-lg) 0 0;
  max-width: 56ch;
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--text-muted);
  text-wrap: pretty;
}
/* Quick meta row under the lede (county + commute). */
.v-nh__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em var(--space-md);
  margin: var(--space-xl) 0 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.v-nh__meta b { color: var(--text); font-weight: var(--weight-medium); }
.v-nh__meta .v-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--text-faint);
}

/* ---- Editorial section frame (shared by body sections) ----- */
.v-nh-sec { padding-block: var(--space-3xl); }
@media (min-width: 900px) { .v-nh-sec { padding-block: var(--space-4xl); } }
.v-nh-sec--tint {
  border-top: var(--hairline) solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 50%, transparent), transparent 52%);
}
.v-nh-head { max-width: 52ch; margin-bottom: var(--space-2xl); }
.v-nh-head__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-md) 0 0;
  text-wrap: balance;
}
.v-nh-head__body {
  margin: var(--space-md) 0 0;
  max-width: 54ch;
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}

/* ---- Overview: drop-cap lead + reading column -------------- */
.v-nh-overview__col { max-width: 64ch; }
.v-nh-prose p {
  margin: 0 0 var(--space-lg);
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: var(--leading-body);
  text-wrap: pretty;
}
.v-nh-prose p:last-child { margin-bottom: 0; }
/* Large editorial lead with a serif drop-cap. */
.v-nh-prose__lead {
  color: var(--text) !important;
}
.v-nh-prose__lead::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3.6em;
  line-height: 0.78;
  padding: 0.04em 0.12em 0 0;
  margin: 0.02em 0.02em 0 0;
  color: var(--accent-text);
}

/* ---- Pull-quote (editorial break) -------------------------- */
.v-nh-quote {
  padding-block: var(--space-2xl);
}
@media (min-width: 900px) { .v-nh-quote { padding-block: var(--space-3xl); } }
.v-nh-quote__fig {
  margin: 0;
  max-width: 30ch;
  padding-left: var(--space-xl);
  border-left: 3px solid var(--accent);
}
@media (min-width: 760px) {
  .v-nh-quote__fig { max-width: 26ch; margin-left: auto; margin-right: auto; }
}
.v-nh-quote__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--step-3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}

/* ---- Lifestyle cards (dining / schools / parks / commute) -- */
.v-nh-life {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-lg);
}
@media (min-width: 720px) { .v-nh-life { grid-template-columns: repeat(2, 1fr); } }
.v-nh-life__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-xl);
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.v-nh-life__card::before {
  content: "";
  position: absolute;
  inset: auto auto -30% -10%;
  width: 60%;
  height: 70%;
  background: radial-gradient(120% 120% at 0% 100%, var(--accent-soft), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
  z-index: -1;
}
.v-nh-life__card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-lg);
}
.v-nh-life__card:hover::before { opacity: 1; }
.v-nh-life__kicker {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-text);
}
.v-nh-life__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  margin: var(--space-md) 0 var(--space-sm);
  text-wrap: balance;
}
.v-nh-life__body {
  margin: 0;
  color: var(--text-muted);
  line-height: var(--leading-body);
}

/* ---- Market snapshot strip --------------------------------- */
.v-nh-market__strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl) var(--space-md);
}
@media (min-width: 720px) { .v-nh-market__strip { grid-template-columns: repeat(4, 1fr); } }
.v-nh-market__strip .v-stat {
  position: relative;
  padding-left: var(--space-lg);
}
.v-nh-market__strip .v-stat::before {
  content: "";
  position: absolute;
  left: 0; top: 0.1em; bottom: 0.1em;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 8%, transparent));
  opacity: 0.85;
}
.v-nh-market__strip .v-stat__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-4);
  line-height: 0.96;
  letter-spacing: var(--tracking-display);
  color: var(--text);
}
.v-nh-market__strip .v-stat__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--text-muted);
  margin-top: var(--space-sm);
  max-width: 18ch;
}
.v-nh-market__note {
  margin: var(--space-2xl) 0 0;
  padding-top: var(--space-lg);
  border-top: var(--hairline) solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--text-faint);
  text-wrap: pretty;
}

/* ---- Where to live: sub-neighborhood cards ----------------- */
.v-nh-pockets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
}
@media (min-width: 620px) { .v-nh-pockets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .v-nh-pockets { grid-template-columns: repeat(3, 1fr); } }
.v-nh-pocket {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.v-nh-pocket:hover {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-md);
}
.v-nh-pocket__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  letter-spacing: var(--tracking-head);
  line-height: 1.1;
  margin: 0;
  color: var(--text);
}
.v-nh-pocket__note {
  margin: var(--space-sm) 0 var(--space-lg);
  color: var(--text-muted);
  line-height: var(--leading-body);
  font-size: var(--step-0);
}
.v-nh-pocket__posture {
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: var(--hairline) solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--accent-text);
}

/* ---- IDX-stub listings grid (reuses .v-listing renderer) --- */
.v-nh-listings__foot {
  margin-top: var(--space-2xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}
.v-nh-idx-note {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--text-faint);
}

/* ---- Valuation CTA band (estate full form / pro re-CTA) ---- */
.v-nh-cta {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-3xl);
  border-top: var(--hairline) solid var(--line);
  overflow: clip;
}
@media (min-width: 900px) { .v-nh-cta { padding-block: var(--space-4xl); } }
.v-nh-cta__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--glow); opacity: 0.85;
}
.v-nh-cta__grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}
@media (min-width: 940px) {
  .v-nh-cta__grid { grid-template-columns: 1fr minmax(360px, 460px); gap: var(--space-4xl); }
}
.v-nh-cta__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-md) 0 0;
  max-width: 16ch;
  text-wrap: balance;
}
.v-nh-cta__body {
  margin: var(--space-lg) 0 0;
  max-width: 48ch;
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}
.v-nh-cta__sign {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-xl) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--text);
}
.v-nh-cta__rule {
  width: 2.4rem; height: var(--hairline);
  background: var(--accent); opacity: 0.8;
}
/* The form card / CTA card reuses the valuation card language. */
.v-nh-cta__card {
  position: relative;
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 600px) { .v-nh-cta__card { padding: var(--space-2xl); } }
.v-nh-cta__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
}
.v-nh-cta__cardHead { margin-bottom: var(--space-lg); }
.v-nh-cta__cardTitle {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  margin: var(--space-sm) 0 var(--space-xs);
  text-wrap: balance;
}
.v-nh-cta__cardNote {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-faint);
  margin: 0;
}

/* ---- FAQ accordion (details/summary) ----------------------- */
.v-nh-faq__list {
  display: grid;
  gap: var(--space-md);
  max-width: 72ch;
}
.v-nh-faq__item {
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.v-nh-faq__item[open] { border-color: var(--accent-line); }
.v-nh-faq__item:hover { border-color: var(--accent-line); }
.v-nh-faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  color: var(--text);
}
.v-nh-faq__q::-webkit-details-marker { display: none; }
.v-nh-faq__q:focus-visible { outline: 2px solid var(--ring); outline-offset: -3px; border-radius: var(--radius-md); }
/* Plus / minus toggle icon (transform only). */
.v-nh-faq__icon {
  flex: none;
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2em;
  color: var(--accent-text);
}
.v-nh-faq__icon::before,
.v-nh-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 0.9rem; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease);
}
.v-nh-faq__icon::before { transform: translate(-50%, -50%); }
.v-nh-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.v-nh-faq__item[open] .v-nh-faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.v-nh-faq__a {
  margin: 0;
  padding: 0 var(--space-xl) var(--space-xl);
  color: var(--text-muted);
  line-height: var(--leading-body);
  max-width: 64ch;
}

@media (prefers-reduced-motion: reduce) {
  .v-nh-life__card,
  .v-nh-pocket,
  .v-nh-faq__item,
  .v-nh-faq__icon::before,
  .v-nh-faq__icon::after { transition: none; }
  .v-nh-life__card:hover,
  .v-nh-pocket:hover { transform: none; }
}

/* ============================================================
   ABOUT PAGE  (about.html)
   Task 4.3. Trust / closing page. Portrait hero, editorial bio
   with drop cap, approach principle cards, credentials + stats,
   trimmed reviews, then the shared final CTA.
   ============================================================ */

/* ---- About hero: portrait + positioning ---- */
.v-abouthero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: calc(4.5rem + var(--space-2xl));
  padding-bottom: var(--space-2xl);
  border-bottom: var(--hairline) solid var(--line);
}
@media (min-width: 900px) {
  .v-abouthero {
    padding-top: calc(5.25rem + var(--space-3xl));
    padding-bottom: var(--space-3xl);
  }
}
.v-abouthero__glow {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(70% 100% at 88% -10%, var(--accent-soft), transparent 56%),
    radial-gradient(60% 90% at 4% 4%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 55%, transparent), transparent 60%);
  opacity: 0.9;
}
.v-abouthero__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.32; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.v-abouthero__grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}
@media (min-width: 860px) {
  .v-abouthero__grid { grid-template-columns: 0.8fr 1fr; gap: var(--space-4xl); }
}
.v-abouthero__portrait { position: relative; max-width: 26rem; }
.v-abouthero__photo {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  border: var(--hairline) solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  background:
    url("../img/agent-portrait.webp") 50% 18% / cover no-repeat,
    var(--media-1);
}
.v-abouthero__badge {
  position: absolute;
  left: var(--space-lg);
  bottom: var(--space-lg);
  display: flex; flex-direction: column; gap: 0.1em;
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.v-abouthero__badgeName {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-0); color: var(--text);
}
.v-abouthero__badgeLic {
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.02em; color: var(--text-muted);
}
.v-abouthero__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-5); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-md) 0 0; text-wrap: balance;
}
.v-abouthero__line {
  margin: var(--space-lg) 0 0; max-width: 46ch;
  font-size: var(--step-1); line-height: var(--leading-snug);
  color: var(--text-muted); text-wrap: pretty;
}
.v-abouthero__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl);
  margin-top: var(--space-xl);
}
.v-abouthero__metaItem {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.02em; color: var(--text-muted);
}
.v-abouthero__metaIcon { color: var(--accent-text); display: inline-flex; }
.v-abouthero__metaIcon svg { width: 1.05rem; height: 1.05rem; }
.v-abouthero__ctas {
  display: flex; flex-wrap: wrap; gap: var(--space-md);
  margin-top: var(--space-xl);
}

/* ---- Story: editorial bio with drop cap ---- */
.v-story {
  padding-block: var(--space-3xl);
  border-bottom: var(--hairline) solid var(--line);
}
@media (min-width: 900px) { .v-story { padding-block: var(--space-4xl); } }
.v-story__grid {
  display: grid; gap: var(--space-xl);
}
@media (min-width: 940px) {
  .v-story__grid { grid-template-columns: 0.6fr 1fr; gap: var(--space-4xl); align-items: start; }
}
.v-story__head { position: sticky; top: calc(4.5rem + var(--space-lg)); }
@media (max-width: 939px) { .v-story__head { position: static; } }
.v-story__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-3); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-md) 0 0; max-width: 18ch; text-wrap: balance;
}
.v-story__body { max-width: 62ch; }
.v-story__p {
  margin: 0 0 var(--space-lg);
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: var(--leading-body);
  text-wrap: pretty;
}
.v-story__p:last-child { margin-bottom: 0; }
.v-story__p--lead { color: var(--text); }
.v-story__p--lead::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3.4em;
  line-height: 0.78;
  padding: 0.06em 0.12em 0 0;
  margin-right: 0.02em;
  color: var(--accent-text);
}

/* ---- Approach / standard: 3 principle cards ---- */
.v-approach {
  padding-block: var(--space-3xl);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 50%, transparent), transparent 55%);
  border-bottom: var(--hairline) solid var(--line);
}
@media (min-width: 900px) { .v-approach { padding-block: var(--space-4xl); } }
.v-approach__head { max-width: 46ch; margin-bottom: var(--space-2xl); }
.v-approach__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-3); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-md) 0 0; text-wrap: balance;
}
.v-approach__grid {
  display: grid; gap: var(--space-md);
  list-style: none; padding: 0; margin: 0;
}
@media (min-width: 760px) { .v-approach__grid { grid-template-columns: repeat(3, 1fr); } }
.v-acard {
  position: relative;
  padding: var(--space-xl);
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.v-acard::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.v-acard:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: var(--shadow-md); }
.v-acard:hover::before { opacity: 1; }
.v-acard__num {
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: var(--tracking-label); color: var(--accent-text);
}
.v-acard__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-2); letter-spacing: var(--tracking-head);
  line-height: 1.12; margin: var(--space-md) 0 0; color: var(--text);
}
.v-acard__body {
  margin: var(--space-sm) 0 0; color: var(--text-muted);
  line-height: var(--leading-body); font-size: var(--step-0);
}

/* ---- Credentials + by the numbers ---- */
.v-cred {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: var(--space-3xl);
  border-bottom: var(--hairline) solid var(--line);
}
@media (min-width: 900px) { .v-cred { padding-block: var(--space-4xl); } }
.v-cred__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--glow); opacity: 0.7;
}
.v-cred__head { max-width: 50ch; margin-bottom: var(--space-2xl); }
.v-cred__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-3); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display); margin: var(--space-md) 0 0;
  text-wrap: balance;
}
.v-cred__body {
  margin: var(--space-md) 0 0; max-width: 54ch;
  color: var(--text-muted); line-height: var(--leading-body);
  font-size: var(--step-1); text-wrap: pretty;
}
/* The stat strip reuses .v-stat children from the renderer. */
.v-cred__strip {
  display: grid; gap: var(--space-md);
  grid-template-columns: repeat(2, 1fr);
  padding: var(--space-xl);
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
@media (min-width: 760px) { .v-cred__strip { grid-template-columns: repeat(4, 1fr); } }
.v-cred__strip .v-stat { text-align: left; }
.v-cred__strip .v-stat__value {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-3); line-height: 1; letter-spacing: var(--tracking-head);
  color: var(--text);
}
.v-cred__strip .v-stat__label {
  margin-top: var(--space-xs); font-family: var(--font-mono);
  font-size: var(--step--1); letter-spacing: 0.02em;
  line-height: 1.4; color: var(--text-muted);
}
.v-cred__proof {
  display: flex; align-items: flex-start; gap: var(--space-md);
  margin: var(--space-xl) 0 0; max-width: 56ch;
  font-family: var(--font-display); font-style: italic;
  font-size: var(--step-1); line-height: var(--leading-snug); color: var(--text);
}
.v-cred__proofMark {
  flex: none; width: 2px; height: 1.6em; margin-top: 0.15em;
  background: var(--accent); border-radius: 2px;
}

/* ============================================================
   REVIEWS PAGE  (reviews.html)
   Aggregate-rating line under the page header + a refined
   masonry wall reusing the .v-review card from the renderer.
   ============================================================ */
.v-rating {
  display: inline-flex; align-items: baseline;
  gap: 0.55em; flex-wrap: wrap;
  margin: var(--space-xl) 0 0;
}
.v-rating__stars { color: var(--accent-text); letter-spacing: 0.1em; font-size: var(--step-1); align-self: center; }
.v-rating__score {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-2); color: var(--text); letter-spacing: var(--tracking-head);
}
.v-rating__from {
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted);
}
.v-wall { padding-block: var(--space-2xl) var(--space-3xl); }
@media (min-width: 900px) { .v-wall { padding-block: var(--space-3xl) var(--space-4xl); } }
/* CSS columns for a true masonry flow; cards never break across columns. */
.v-wall__masonry { column-gap: var(--space-lg); }
@media (min-width: 680px) { .v-wall__masonry { column-count: 2; } }
@media (min-width: 1040px) { .v-wall__masonry { column-count: 3; } }
.v-wall__masonry .v-review {
  break-inside: avoid;
  margin-bottom: var(--space-lg);
}

/* ============================================================
   CONTACT PAGE  (contact.html)
   Page header + a split: lead form on one side, contact channels
   (call / book / email / NAP) on the other. Mobile-first stack.
   ============================================================ */
.v-contact {
  position: relative; isolation: isolate; overflow: clip;
  padding-top: calc(4.5rem + var(--space-3xl));
  padding-bottom: var(--space-3xl);
}
@media (min-width: 900px) {
  .v-contact {
    padding-top: calc(5.25rem + var(--space-3xl));
    padding-bottom: var(--space-4xl);
  }
}
.v-contact__glow {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(70% 90% at 92% -8%, var(--accent-soft), transparent 56%),
    radial-gradient(60% 80% at 4% 6%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 58%, transparent), transparent 58%);
  opacity: 0.92;
}
.v-contact__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.3; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.v-contact__head { max-width: 54ch; margin-bottom: var(--space-2xl); }
.v-contact__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-5); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-md) 0 0; max-width: 16ch; text-wrap: balance;
}
.v-contact__sub {
  margin: var(--space-lg) 0 0; max-width: 52ch;
  font-size: var(--step-1); line-height: var(--leading-snug);
  color: var(--text-muted); text-wrap: pretty;
}
.v-contact__grid {
  display: grid; gap: var(--space-xl);
  align-items: start;
}
@media (min-width: 920px) {
  .v-contact__grid { grid-template-columns: 1fr 0.85fr; gap: var(--space-2xl); }
}
/* The form card: floating surface, accent top rule. */
.v-contact__formCard {
  position: relative;
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 600px) { .v-contact__formCard { padding: var(--space-2xl); } }
.v-contact__formCard::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
}
.v-contact__formHead { margin-bottom: var(--space-lg); }
.v-contact__formTitle {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-2); line-height: 1.12;
  letter-spacing: var(--tracking-head);
  margin: var(--space-sm) 0 0; color: var(--text);
}
.v-contact__formNote {
  margin: var(--space-sm) 0 0; color: var(--text-muted);
  font-size: var(--step-0); line-height: var(--leading-snug);
}
.v-contact__channels {
  display: flex; flex-direction: column; gap: var(--space-md);
}
/* A channel row: icon + body + arrow. Links get hover lift. */
.v-chan {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--text);
  text-align: left;
}
a.v-chan {
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.v-chan:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: var(--shadow-md); }
a.v-chan:active { transform: translateY(0); }
a.v-chan:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.v-chan--call {
  background:
    radial-gradient(120% 120% at 0% 0%, var(--accent-soft), transparent 60%),
    var(--surface);
  border-color: var(--accent-line);
}
.v-chan__icon {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-text);
  flex: none;
}
.v-chan__icon svg { width: 1.25rem; height: 1.25rem; }
.v-chan__body { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; }
.v-chan__label {
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted);
}
.v-chan__value {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-1); line-height: 1.15; color: var(--text);
  overflow-wrap: anywhere;
}
.v-chan__note {
  margin-top: var(--space-2xs); color: var(--text-muted);
  font-size: var(--step--1); line-height: var(--leading-snug);
}
.v-chan__arrow {
  align-self: center; color: var(--text-faint); font-size: var(--step-1);
  transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease);
}
a.v-chan:hover .v-chan__arrow { transform: translateX(4px); color: var(--accent-text); }
.v-chan--nap { align-items: start; }
.v-chan__areas {
  font-family: var(--font-body); font-weight: var(--weight-medium);
  font-size: var(--step-0); color: var(--text); line-height: 1.4;
}
.v-chan__hours {
  display: flex; flex-direction: column; gap: 0.1em;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: var(--hairline) solid var(--line);
  font-size: var(--step--1); color: var(--text-muted);
}
.v-chan__hours b {
  font-family: var(--font-mono); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  font-size: var(--step--1); color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .v-acard, a.v-chan, .v-chan__arrow { transition: none; }
  .v-acard:hover, a.v-chan:hover { transform: none; }
  a.v-chan:hover .v-chan__arrow { transform: none; }
}

/* ============================================================
   CAMPAIGN LANDING PAGE  (campaign.html)
   ------------------------------------------------------------
   Nav-stripped, single-goal paid-traffic page. Deliberately quiet
   chrome (minimal bar + minimal footer) so the gated guide form is
   the only thing competing for attention. Reuses the .v-vp hero
   language; adds a tactile guide "cover", an inside-checklist, a
   centered proof, and one reinforcing CTA. Mobile-first, transform/
   opacity motion only.
   ============================================================ */

/* ---- Minimal top bar -------------------------------------- */
.v-camp-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: var(--hairline) solid var(--line);
}
.v-camp-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 4.25rem;
}
.v-camp-bar__brand { font-size: var(--step-1); }
.v-camp-bar__call {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.01em;
  color: var(--text-muted);
  padding: 0.5em 0.85em;
  border-radius: var(--radius-pill);
  border: var(--hairline) solid var(--line-strong);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.v-camp-bar__call svg { width: 1rem; height: 1rem; color: var(--accent-text); }
.v-camp-bar__call:hover {
  color: var(--text);
  border-color: var(--accent-line);
  background: var(--accent-soft);
  transform: translateY(-1px);
}
.v-camp-bar__call:active { transform: translateY(0) scale(0.98); }
.v-camp-bar__call:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }

/* ---- Hero  (.v-camp) -------------------------------------- */
.v-camp {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}
@media (min-width: 900px) {
  .v-camp {
    padding-top: calc(var(--space-3xl) + var(--space-md));
    padding-bottom: calc(var(--space-3xl) + var(--space-xl));
  }
}
.v-camp__glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(70% 86% at 90% -10%, var(--accent-soft), transparent 56%),
    radial-gradient(58% 78% at 2% 6%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 55%, transparent), transparent 56%);
  opacity: 0.92;
}
.v-camp__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.v-camp__grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}
@media (min-width: 960px) {
  .v-camp__grid {
    grid-template-columns: 1fr minmax(380px, 440px);
    gap: var(--space-3xl);
    align-items: center;
  }
}

/* Left: the pitch */
.v-camp__intro { max-width: 60ch; }
.v-camp__headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-5);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-md) 0 0;
  max-width: 17ch;
  text-wrap: balance;
}
.v-camp__sub {
  margin: var(--space-lg) 0 0;
  max-width: 52ch;
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--text-muted);
  text-wrap: pretty;
}

/* The guide "cover" - a tactile object so the magnet feels real. */
.v-camp__cover {
  margin: var(--space-2xl) 0 0;
  width: clamp(8.5rem, 30vw, 11rem);
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-xs) var(--radius-md) var(--radius-md) var(--radius-xs);
  padding: 2px;
  background:
    linear-gradient(135deg, var(--accent-line), transparent 45%),
    linear-gradient(315deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 50%),
    var(--line-strong);
  box-shadow:
    -10px 16px 28px -16px rgba(0, 0, 0, 0.75),
    -2px 4px 0 0 color-mix(in srgb, var(--surface-2) 80%, transparent);
  transform: rotate(-3deg);
  transition: transform var(--dur-slow) var(--ease-out);
}
.v-camp__cover:hover { transform: rotate(-1deg) translateY(-3px); }
.v-camp__coverInner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-md);
  border-radius: var(--radius-xs) calc(var(--radius-md) - 2px) calc(var(--radius-md) - 2px) var(--radius-xs);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 92%, var(--accent)), var(--surface));
  overflow: hidden;
}
.v-camp__coverInner::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  opacity: 0.85;
}
.v-camp__coverKicker {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.v-camp__coverTitle {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  line-height: 1.1;
  letter-spacing: var(--tracking-head);
  color: var(--text);
  text-wrap: balance;
}
.v-camp__coverFoot {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-text);
}

/* Assurance line. */
.v-camp__hand {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin: var(--space-2xl) 0 0;
  max-width: 46ch;
  font-size: var(--step-0);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}
.v-camp__hand b { color: var(--text); font-weight: var(--weight-medium); }
.v-camp__handIcon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-top: 0.05em;
  border-radius: var(--radius-sm);
  color: var(--accent-text);
  background: var(--accent-soft);
  border: var(--hairline) solid var(--accent-line);
}
.v-camp__handIcon svg { width: 1rem; height: 1rem; }

/* Right: the form card. */
.v-camp__card {
  position: relative;
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg, 0 24px 60px -24px rgba(0,0,0,0.7));
}
@media (min-width: 600px) { .v-camp__card { padding: var(--space-2xl); } }
.v-camp__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
}
.v-camp__cardHead { margin-bottom: var(--space-lg); }
.v-camp__cardTitle {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  margin: var(--space-sm) 0 0;
  text-wrap: balance;
}
.v-camp__submit { width: 100%; margin-top: var(--space-lg); }
.v-camp__legal {
  margin: var(--space-md) 0 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--text-faint);
  text-align: center;
}

/* ---- What's inside  (.v-camp-inside) ---------------------- */
.v-camp-inside {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-3xl);
  border-top: var(--hairline) solid var(--line);
  border-bottom: var(--hairline) solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 38%, transparent), transparent 72%);
}
.v-camp-inside__head { max-width: 46ch; margin-bottom: var(--space-2xl); }
.v-camp-inside__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  margin: var(--space-md) 0 0;
  text-wrap: balance;
}
.v-camp-inside__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
}
@media (min-width: 760px) {
  .v-camp-inside__list { grid-template-columns: repeat(2, 1fr); gap: var(--space-md) var(--space-2xl); }
}
.v-camp-inside__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-top: var(--hairline) solid var(--line);
}
.v-camp-inside__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-top: 0.1em;
  border-radius: var(--radius-pill);
  color: var(--accent-text);
  background: var(--accent-soft);
  border: var(--hairline) solid var(--accent-line);
}
.v-camp-inside__mark svg { width: 0.9rem; height: 0.9rem; }
.v-camp-inside__text {
  font-size: var(--step-0);
  line-height: var(--leading-body);
  color: var(--text);
}

/* ---- Proof  (.v-camp-proof) ------------------------------- */
.v-camp-proof { padding-block: var(--space-3xl); }
.v-camp-proof__fig {
  margin: 0 auto;
  max-width: 60ch;
  text-align: center;
}
.v-camp-proof__stars {
  color: var(--accent-text);
  letter-spacing: 0.18em;
  font-size: var(--step-0);
}
.v-camp-proof__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--step-3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  color: var(--text);
  margin: var(--space-lg) 0 0;
  text-wrap: balance;
}
.v-camp-proof__text::before { content: "\201C"; }
.v-camp-proof__text::after { content: "\201D"; }
.v-camp-proof__cite {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-top: var(--space-lg);
}
.v-camp-proof__name {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text);
}
.v-camp-proof__detail {
  font-size: var(--step--1);
  color: var(--text-faint);
}

/* ---- Reinforcing CTA  (.v-camp-cta) ----------------------- */
.v-camp-cta {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--space-3xl);
  border-top: var(--hairline) solid var(--line);
}
.v-camp-cta__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 120% at 50% 120%, var(--accent-soft), transparent 60%);
}
.v-camp-cta__inner {
  max-width: 56ch;
  margin-inline: auto;
  text-align: center;
}
.v-camp-cta__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: 0;
  text-wrap: balance;
}
.v-camp-cta__body {
  margin: var(--space-lg) auto var(--space-xl);
  max-width: 48ch;
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ---- Minimal legal footer  (.v-camp-foot) ----------------- */
.v-camp-foot {
  border-top: var(--hairline) solid var(--line);
  padding-block: var(--space-xl);
  background: var(--surface);
}
.v-camp-foot__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
  text-align: center;
}
.v-camp-foot__legal {
  margin: 0;
  max-width: 60ch;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--text-faint);
}
.v-camp-foot__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-faint);
}
.v-camp-foot__sep { color: var(--line-strong); }
.v-camp-foot__vyne {
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}
.v-camp-foot__vyne:hover { color: var(--text); }
.v-camp-foot__vyne:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .v-camp__cover,
  .v-camp__cover:hover,
  .v-camp-bar__call,
  .v-camp-bar__call:hover { transition: none; transform: none; }
}

/* ============================================================
   PROOF / AUTHORITY COMPONENTS  (Task 5.1)
   ------------------------------------------------------------
   1. Recently Sold portfolio   (.v-sold-sec / .v-sold)
   2. As Seen In press bar       (.v-press)
   3. Video testimonials         (.v-vtest-sec / .v-vtest)
   4. Awards / designations      (.v-awards / .v-award)
   All read tokens, flex accent per package, transform/opacity
   motion only, layered shadows, hover+focus-visible+active.
   ============================================================ */

/* ---- 1. RECENTLY SOLD ------------------------------------- */
.v-sold-sec {
  padding-block: var(--space-3xl);
  border-top: var(--hairline) solid var(--line);
}
@media (min-width: 900px) { .v-sold-sec { padding-block: var(--space-4xl); } }
.v-sold-sec__head { margin-bottom: var(--space-2xl); }
.v-sold-sec__heading { max-width: 48ch; }
.v-sold-sec__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-md) 0 0;
  text-wrap: balance;
}
.v-sold-sec__lede {
  margin: var(--space-md) 0 0;
  max-width: 54ch;
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}
.v-sold-sec__grid { display: grid; gap: var(--space-lg); }
@media (min-width: 620px) { .v-sold-sec__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .v-sold-sec__grid { grid-template-columns: repeat(3, 1fr); } }

.v-sold {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.v-sold:hover {
  transform: translateY(-6px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-lg);
}
.v-sold__media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 70% 10%, var(--media-tint), transparent 60%),
    var(--media-1);
}
.v-sold__media[data-tilt="2"] {
  background:
    radial-gradient(120% 100% at 30% 20%, var(--media-tint), transparent 60%),
    var(--media-2);
}
.v-sold__media[data-tilt="3"] {
  background:
    radial-gradient(120% 100% at 80% 80%, var(--media-tint), transparent 60%),
    var(--media-3);
}
.v-sold__img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.v-sold:hover .v-sold__img { transform: scale(1.05); }
/* The "SOLD" tag: tasteful, on-surface, accent ring (not a loud pill). */
.v-sold__tag {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: var(--hairline) solid var(--accent-line);
  padding: 0.42em 0.85em 0.42em 0.7em;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.v-sold__tag::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.v-sold__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-lg);
}
.v-sold__price {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  letter-spacing: var(--tracking-head);
  line-height: 1;
  margin: 0;
  color: var(--text);
}
.v-sold__addr {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--step-0);
  line-height: var(--leading-snug);
  margin: var(--space-2xs) 0 0;
  color: var(--text);
}
.v-sold__meta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--accent-text);
  margin: var(--space-xs) 0 0;
}

/* ---- 2. AS SEEN IN PRESS BAR ----------------------------- */
.v-press {
  padding-block: var(--space-2xl);
  border-top: var(--hairline) solid var(--line);
  border-bottom: var(--hairline) solid var(--line);
  background: var(--surface);
}
.v-press__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  align-items: flex-start;
}
@media (min-width: 980px) {
  .v-press__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xl);
  }
}
.v-press__copy { flex: none; max-width: 22ch; }
.v-press__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  margin: var(--space-sm) 0 0;
  color: var(--text);
  text-wrap: balance;
}
.v-press__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg) var(--space-2xl);
}
@media (min-width: 980px) {
  .v-press__row {
    flex: 1;
    justify-content: flex-end;
  }
}
.v-press__logo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  letter-spacing: 0.01em;
  color: var(--text-faint);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.78;
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.v-press__logo:hover { color: var(--text); opacity: 1; }

/* ---- 3. VIDEO TESTIMONIALS ------------------------------- */
.v-vtest-sec {
  padding-block: var(--space-3xl);
  border-top: var(--hairline) solid var(--line);
}
@media (min-width: 900px) { .v-vtest-sec { padding-block: var(--space-4xl); } }
.v-vtest-sec__head { margin-bottom: var(--space-2xl); max-width: 52ch; }
.v-vtest-sec__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-md) 0 0;
  text-wrap: balance;
}
.v-vtest-sec__lede {
  margin: var(--space-md) 0 0;
  max-width: 52ch;
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}
.v-vtest-sec__grid { display: grid; gap: var(--space-lg); }
@media (min-width: 700px) { .v-vtest-sec__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .v-vtest-sec__grid { grid-template-columns: repeat(3, 1fr); } }

.v-vtest {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.v-vtest:hover {
  transform: translateY(-6px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-lg);
}
.v-vtest__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--media-tint), transparent 62%),
    var(--media-1);
}
.v-vtest__media[data-tone="amber"] {
  background:
    radial-gradient(120% 90% at 50% 0%, var(--media-tint), transparent 62%),
    var(--media-2);
}
.v-vtest__media[data-tone="verdant"] {
  background:
    radial-gradient(120% 90% at 50% 0%, var(--media-tint), transparent 62%),
    var(--media-3);
}
.v-vtest__poster {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.v-vtest__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000;
  z-index: 2;
}
.v-vtest__play {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: var(--text);
}
.v-vtest__play:focus-visible { outline: 2px solid var(--ring); outline-offset: 6px; border-radius: 50%; }
.v-vtest__playRing {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: var(--shadow-accent), var(--shadow-md);
  transition: transform var(--dur) var(--ease-out);
}
.v-vtest__playRing svg { width: 1.5rem; height: 1.5rem; margin-left: 2px; }
.v-vtest__play:hover .v-vtest__playRing { transform: scale(1.08); }
.v-vtest__play:active .v-vtest__playRing { transform: scale(0.97); }
.v-vtest__media[data-pinged="true"] .v-vtest__playRing { animation: vtestPing 0.6s var(--ease); }
@keyframes vtestPing {
  0% { transform: scale(1); }
  40% { transform: scale(1.14); }
  100% { transform: scale(1); }
}
.v-vtest__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
}
.v-vtest__quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--text);
  margin: 0;
  text-wrap: pretty;
}
.v-vtest__meta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-top: var(--space-md);
  border-top: var(--hairline) solid var(--line);
}
.v-vtest__name {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  color: var(--text);
}
.v-vtest__detail {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

/* ---- 4. AWARDS / DESIGNATIONS ---------------------------- */
.v-awards {
  padding-block: var(--space-2xl);
  border-top: var(--hairline) solid var(--line);
}
.v-awards__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
@media (min-width: 980px) {
  .v-awards__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xl);
  }
}
.v-awards__copy { flex: none; max-width: 22ch; }
.v-awards__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  margin: var(--space-sm) 0 0;
  color: var(--text);
  text-wrap: balance;
}
.v-awards__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
}
@media (min-width: 980px) { .v-awards__row { flex: 1; justify-content: flex-end; } }
.v-award {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 0.55em 0.95em;
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text) 3%, transparent);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.v-award:hover { border-color: var(--accent-line); color: var(--text); }
.v-award__mark {
  width: 0.5em;
  height: 0.5em;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.v-award__label { line-height: 1.2; }

/* ---- Reduced motion for Task 5.1 components -------------- */
@media (prefers-reduced-motion: reduce) {
  .v-sold,
  .v-sold__img,
  .v-vtest,
  .v-vtest__playRing,
  .v-press__logo,
  .v-award { transition: none; }
  .v-vtest__media[data-pinged="true"] .v-vtest__playRing { animation: none; }
}

/* ============================================================
   EXCLUSIVE / OFF-MARKET  (Task 5.2)  ·  data-section="exclusive"
   ------------------------------------------------------------
   The private-collection gate. Veiled, locked teaser cards
   (status tag + blurred veil + lock; neighborhood + price BAND
   only, never an address) beside an email gate form. Exclusivity
   reads as a luxury signal AND a strong lead capture. Reads tokens,
   flexes accent per package, transform/opacity motion only, layered
   shadows, hover+focus-visible+active.
   ============================================================ */
.v-excl-sec {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-3xl);
  border-top: var(--hairline) solid var(--line);
}
@media (min-width: 900px) { .v-excl-sec { padding-block: var(--space-4xl); } }
.v-excl-sec__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--glow); opacity: 0.85;
}
.v-excl-sec__head { max-width: 52ch; margin-bottom: var(--space-2xl); }
.v-excl-sec__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: var(--space-md) 0 0;
  text-wrap: balance;
}
.v-excl-sec__lede {
  margin: var(--space-md) 0 0;
  max-width: 54ch;
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}

/* Layout: cards stack above the gate on mobile, gate sits aside on wide. */
.v-excl-sec__layout { display: grid; gap: var(--space-xl); }
@media (min-width: 1000px) {
  .v-excl-sec__layout {
    grid-template-columns: 1.55fr 0.95fr;
    gap: var(--space-2xl);
    align-items: start;
  }
}
.v-excl-sec__grid { display: grid; gap: var(--space-lg); }
@media (min-width: 560px) { .v-excl-sec__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .v-excl-sec__grid { grid-template-columns: 1fr; } }
/* On the widest breakpoint show the three cards in a tidy stacked rail
   next to the gate, but let the first one lead taller for hierarchy. */
@media (min-width: 1280px) {
  .v-excl-sec__grid { grid-template-columns: repeat(2, 1fr); }
  .v-excl-sec__grid .v-excl:first-child { grid-column: 1 / -1; }
}

/* ---- Veiled teaser card ---------------------------------- */
.v-excl {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.v-excl:hover {
  transform: translateY(-6px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-lg);
}
.v-excl__media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 100% at 70% 12%, var(--media-tint), transparent 60%),
    var(--media-1);
}
.v-excl__media[data-tilt="2"] {
  background:
    radial-gradient(120% 100% at 30% 22%, var(--media-tint), transparent 60%),
    var(--media-2);
}
.v-excl__media[data-tilt="3"] {
  background:
    radial-gradient(120% 100% at 80% 80%, var(--media-tint), transparent 60%),
    var(--media-3);
}
/* The veil: a frosted, striped overlay that reads as "obscured on
   purpose." Pure visual layer, no media to leak. */
.v-excl__veil {
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  background:
    repeating-linear-gradient(
      135deg,
      color-mix(in srgb, var(--text) 7%, transparent) 0 10px,
      color-mix(in srgb, var(--text) 2%, transparent) 10px 20px
    );
  -webkit-mask-image: radial-gradient(120% 120% at 50% 40%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 120% at 50% 40%, #000 55%, transparent 100%);
}
.v-excl__tag {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: var(--hairline) solid var(--accent-line);
  padding: 0.42em 0.85em 0.42em 0.7em;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.v-excl__tag::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.v-excl__lock {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: var(--hairline) solid var(--accent-line);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out);
}
.v-excl__lock svg { width: 1.4rem; height: 1.4rem; }
.v-excl:hover .v-excl__lock { transform: scale(1.06); }
.v-excl__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-lg);
}
.v-excl__area {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0;
}
.v-excl__teaser {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  color: var(--text);
  margin: var(--space-2xs) 0 0;
  text-wrap: balance;
}
.v-excl__band {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--text-muted);
  margin: var(--space-xs) 0 0;
}

/* ---- The email gate -------------------------------------- */
.v-excl-gate {
  position: relative;
  background: var(--surface-2);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 1000px) { .v-excl-gate { position: sticky; top: calc(var(--space-4xl)); } }
.v-excl-gate::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--hairline);
  background: linear-gradient(150deg, var(--accent-line), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.v-excl-gate__mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: var(--shadow-accent), var(--shadow-sm);
  margin-bottom: var(--space-md);
}
.v-excl-gate__mark svg { width: 1.4rem; height: 1.4rem; }
.v-excl-gate__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}
.v-excl-gate__note {
  margin: var(--space-sm) 0 var(--space-lg);
  color: var(--text-muted);
  font-size: var(--step-0);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}
.v-excl-gate form { margin: 0; }
.v-field__opt {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--text-faint);
  letter-spacing: 0.02em;
  text-transform: none;
}
.v-excl-gate .vf-nav { margin-top: var(--space-lg); }
.v-excl-gate .vf-nav .v-btn { width: 100%; }

/* ---- Reduced motion -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .v-excl,
  .v-excl__lock { transition: none; }
}

/* ============================================================
   MORTGAGE CALCULATOR  (.v-mort)
   ------------------------------------------------------------
   Lives in the PDP body, between the about/showing grid and the
   gallery. Two-pane card: editable inputs (left) + a glowing
   result readout (right). The interest rate is an open <input>
   with a "Rate as of ..." stamp under it (mortgage.js fills it
   from VYNE.rateAsOf) so the number never reads as stale.
   Accent flexes per package via var(--accent).
   ============================================================ */
.v-mort {
  margin-top: var(--space-4xl);
}
.v-mort__head { margin-bottom: var(--space-xl); max-width: 48ch; }
.v-mort__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  margin: var(--space-sm) 0 0;
  text-wrap: balance;
}
.v-mort__lede {
  margin: var(--space-md) 0 0;
  color: var(--text-muted);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  text-wrap: pretty;
}

/* The card: single column on mobile, split on desktop. */
.v-mort__panel {
  display: grid;
  gap: 0;
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
@media (min-width: 880px) {
  .v-mort__panel { grid-template-columns: 1.05fr 0.95fr; }
}

/* ---- Left: the form ---- */
.v-mort__form {
  padding: var(--space-xl);
}
@media (min-width: 880px) { .v-mort__form { padding: var(--space-2xl); } }

/* Currency / percent affix around the input. */
.v-mort__affix { position: relative; }
.v-mort__affix::before,
.v-mort__affix::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: var(--step-0);
  color: var(--text-faint);
  pointer-events: none;
}
.v-mort__affix[data-affix]::before { content: attr(data-affix); left: 0.9em; }
.v-mort__affix[data-affix] .v-mort__input { padding-left: 1.7em; }
.v-mort__affix[data-affix-end]::after { content: attr(data-affix-end); right: 0.9em; }
.v-mort__affix[data-affix-end] .v-mort__input { padding-right: 2em; }

/* Trim the native number spinners for a cleaner, editorial field. */
.v-mort__input[type="number"]::-webkit-outer-spin-button,
.v-mort__input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.v-mort__input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.v-mort__stamp {
  margin: var(--space-2xs) 0 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--text-faint);
}

/* ---- Right: the result readout ---- */
.v-mort__result {
  position: relative;
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  border-top: var(--hairline) solid var(--line);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--accent-soft), transparent 60%),
    var(--surface-2);
}
@media (min-width: 880px) {
  .v-mort__result {
    padding: var(--space-2xl);
    border-top: 0;
    border-left: var(--hairline) solid var(--line);
  }
}
.v-mort__resultLabel {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.v-mort__payment {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-5);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--accent-text);
}
.v-mort__resultSub {
  margin: var(--space-sm) 0 0;
  font-size: var(--step--1);
  line-height: var(--leading-snug);
  color: var(--text-muted);
  max-width: 34ch;
}

/* Loan / down breakdown. */
.v-mort__break {
  margin: var(--space-lg) 0 0;
  padding: var(--space-md) 0 0;
  border-top: var(--hairline) solid var(--line-strong);
  display: grid;
  gap: var(--space-sm);
}
.v-mort__breakRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
}
.v-mort__breakRow dt {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.v-mort__breakRow dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  letter-spacing: var(--tracking-head);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.v-mort__cta {
  margin-top: auto;
  align-self: flex-start;
}
@media (max-width: 879px) {
  .v-mort__cta { width: 100%; margin-top: var(--space-lg); }
}

/* ============================================================
   FLOATING AI CONCIERGE  (assets/js/concierge.js)
   Quiet-money chat widget. Launcher bottom-right, panel sheet.
   Dark surface, accent ring, layered shadows. Transform/opacity
   only, custom easing < 300ms. Mobile = full-width bottom sheet.
   ============================================================ */
.v-cc {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;                 /* below nav (100) + mobile menu (99 sits above) */
  pointer-events: none;        /* children re-enable */
}
.v-cc__launcher,
.v-cc__panel { pointer-events: auto; }

/* ---- Launcher ------------------------------------------------ */
.v-cc__launcher {
  position: relative;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent-line);
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--accent) 22%, var(--surface-2)), var(--surface-2));
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-lg), var(--shadow-accent);
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.v-cc__launcher:hover { transform: translateY(-2px) scale(1.03); border-color: var(--accent); }
.v-cc__launcher:focus-visible {
  outline: none;
  box-shadow: var(--shadow-lg), 0 0 0 3px var(--ring);
}
.v-cc__launcher:active { transform: translateY(0) scale(0.97); }

.v-cc__launchIcon {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.v-cc__launchIcon svg { width: 1.45rem; height: 1.45rem; }
.v-cc__launchIcon--chat { color: var(--accent-text); }
.v-cc__launchIcon--close { opacity: 0; transform: rotate(-30deg) scale(0.6); }
.v-cc[data-open="true"] .v-cc__launchIcon--chat { opacity: 0; transform: rotate(30deg) scale(0.6); }
.v-cc[data-open="true"] .v-cc__launchIcon--close { opacity: 1; transform: none; }

/* Soft attract pulse (decorative, paused for reduced motion) */
.v-cc__launchPulse {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--accent);
  opacity: 0;
  animation: v-cc-pulse 3.4s var(--ease) infinite;
  pointer-events: none;
}
.v-cc[data-open="true"] .v-cc__launchPulse { animation: none; opacity: 0; }
@keyframes v-cc-pulse {
  0%   { opacity: 0.5; transform: scale(1); }
  70%  { opacity: 0; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* ---- Panel --------------------------------------------------- */
.v-cc__panel {
  position: absolute;
  right: 0;
  bottom: calc(3.5rem + var(--space-md));
  width: min(23rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100vh - 7rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  background-image:
    radial-gradient(80% 50% at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
  box-shadow: var(--shadow-lg);
  transform-origin: bottom right;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 12px, 0) scale(0.98);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease-out),
    visibility 0s linear var(--dur);
}
.v-cc[data-open="true"] .v-cc__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease-out),
    visibility 0s;
}

/* ---- Head ---------------------------------------------------- */
.v-cc__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}
.v-cc__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-text);
}
.v-cc__avatar svg { width: 1.15rem; height: 1.15rem; }
.v-cc__headText { min-width: 0; flex: 1 1 auto; }
.v-cc__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  letter-spacing: var(--tracking-head);
  color: var(--text);
  line-height: 1.1;
}
.v-cc__subtitle {
  margin: 0.15rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v-cc__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--radius-pill);
  background: #36d07f;
  box-shadow: 0 0 0 0 rgba(54, 208, 127, 0.5);
  animation: v-cc-live 2.4s var(--ease) infinite;
}
@keyframes v-cc-live {
  0%   { box-shadow: 0 0 0 0 rgba(54, 208, 127, 0.45); }
  70%  { box-shadow: 0 0 0 5px rgba(54, 208, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(54, 208, 127, 0); }
}
.v-cc__close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-out);
}
.v-cc__close svg { width: 1.05rem; height: 1.05rem; }
.v-cc__close:hover { color: var(--text); background: var(--surface-2); }
.v-cc__close:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.v-cc__close:active { transform: scale(0.92); }

/* ---- Log ----------------------------------------------------- */
.v-cc__log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.v-cc__log:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ring); }
.v-cc__log::-webkit-scrollbar { width: 6px; }
.v-cc__log::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

.v-cc__msg {
  display: flex;
  flex-direction: column;
  max-width: 88%;
  animation: v-cc-bubble 260ms var(--ease-out);
}
.v-cc__msg--bot { align-self: flex-start; align-items: flex-start; }
.v-cc__msg--user { align-self: flex-end; align-items: flex-end; }
@keyframes v-cc-bubble {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}

.v-cc__bubble {
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-md);
  font-size: var(--step-0);
  line-height: 1.5;
  border: 1px solid var(--line);
}
.v-cc__msg--bot .v-cc__bubble {
  background: var(--surface-2);
  color: var(--text);
  border-bottom-left-radius: var(--radius-xs);
}
.v-cc__msg--user .v-cc__bubble {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--text);
  border-bottom-right-radius: var(--radius-xs);
}
.v-cc__p { margin: 0; }
.v-cc__p + .v-cc__p { margin-top: 0.5em; }

.v-cc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}
.v-cc__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.v-cc__chip:hover { transform: translateY(-1px); border-color: var(--text-muted); }
.v-cc__chip:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.v-cc__chip:active { transform: translateY(0); }
.v-cc__chip--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.v-cc__chip--accent:hover { background: var(--accent-press); border-color: var(--accent-press); }

/* ---- Typing indicator --------------------------------------- */
.v-cc__bubble--typing {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  padding: 0.7rem 0.85rem;
}
.v-cc__typeDot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--text-faint);
  animation: v-cc-type 1.2s var(--ease) infinite;
}
.v-cc__typeDot:nth-child(2) { animation-delay: 0.18s; }
.v-cc__typeDot:nth-child(3) { animation-delay: 0.36s; }
@keyframes v-cc-type {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ---- Composer ------------------------------------------------ */
.v-cc__form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}
.v-cc__input {
  flex: 1 1 auto;
  resize: none;
  max-height: 120px;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.v-cc__input::placeholder { color: var(--text-faint); }
.v-cc__input:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 2px var(--ring); }
.v-cc__send {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.v-cc__send svg { width: 1.2rem; height: 1.2rem; }
.v-cc__send:hover:not(:disabled) { background: var(--accent-press); transform: translateY(-1px); }
.v-cc__send:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.v-cc__send:active:not(:disabled) { transform: translateY(0) scale(0.95); }
.v-cc__send:disabled { opacity: 0.4; cursor: not-allowed; }

.v-cc__legal {
  margin: 0;
  padding: 0 var(--space-md) var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  color: var(--text-faint);
  text-align: center;
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}

.v-cc__srOnly {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- Mobile: full-width bottom sheet ------------------------- */
@media (max-width: 560px) {
  .v-cc { right: 0; bottom: 0; left: 0; }
  .v-cc__launcher { position: fixed; right: 1rem; bottom: 1rem; }
  .v-cc__panel {
    position: fixed;
    right: 0; left: 0; bottom: 0;
    width: 100%;
    max-height: 86vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform-origin: bottom center;
    transform: translate3d(0, 100%, 0);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .v-cc[data-open="true"] .v-cc__panel { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .v-cc__launcher,
  .v-cc__panel,
  .v-cc__msg,
  .v-cc__launchIcon { transition: none; animation: none; }
  .v-cc__launchPulse,
  .v-cc__dot,
  .v-cc__typeDot { animation: none; }
}

/* ============================================================
   EXIT-INTENT MODAL  (assets/js/exit-intent.js)
   Once-per-visitor capture. Elegant, dismissible. Reuses the
   valuation form styling. Transform/opacity only, custom easing.
   ============================================================ */
.v-exit {
  position: fixed;
  inset: 0;
  z-index: 9000;              /* above nav + menu; loader (9999) is gone by now */
  display: grid;
  place-items: center;
  padding: var(--gutter);
  visibility: hidden;
  pointer-events: none;
}
.v-exit[data-open="true"] { visibility: visible; pointer-events: auto; }

.v-exit__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 80%, #000);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.v-exit[data-open="true"] .v-exit__backdrop { opacity: 1; }

.v-exit__dialog {
  position: relative;
  width: min(34rem, 100%);
  max-height: calc(100vh - 2 * var(--gutter));
  overflow-y: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(0.98);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.v-exit[data-open="true"] .v-exit__dialog { opacity: 1; transform: none; }

.v-exit__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--glow);
  pointer-events: none;
}
.v-exit__inner {
  position: relative;
  z-index: 1;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.v-exit__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 2;
  display: grid;
  place-items: center;
  /* 44px min tap target (Apple HIG) + high contrast so it's clearly
     visible against the light dialog surface on mobile. */
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-out);
}
.v-exit__close svg { width: 1.25rem; height: 1.25rem; }
.v-exit__close:hover { color: var(--text); border-color: var(--text-muted); }
.v-exit__close:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.v-exit__close:active { transform: scale(0.92); }

.v-exit__eyebrow { margin: 0 0 var(--space-sm); }
.v-exit__title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
  color: var(--text);
  max-width: 18ch;
}
.v-exit__body {
  margin: 0 0 var(--space-lg);
  color: var(--text-muted);
  line-height: var(--leading-body);
  max-width: 46ch;
}
.v-exit__form { margin: 0; }
.v-exit__submit { width: 100%; justify-content: center; }
.v-exit__note {
  margin: var(--space-md) 0 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-faint);
  text-align: center;
}

@media (max-width: 560px) {
  /* Compact centered card on phones. The full-width bottom sheet read as
     oversized; this is smaller and tidy, with the X aligned to the content
     (no floating gap). dvh cap keeps it clear of Safari's UI. */
  .v-exit { place-items: center; padding: var(--gutter); }
  .v-exit__dialog {
    width: 100%;
    max-width: 22rem;
    max-height: 85dvh;
  }
  .v-exit__inner { padding: var(--space-lg); }
  .v-exit__close { top: var(--space-sm); right: var(--space-sm); width: 2.5rem; height: 2.5rem; }
  .v-exit__title { font-size: var(--step-2); }
}

@media (prefers-reduced-motion: reduce) {
  .v-exit__backdrop,
  .v-exit__dialog { transition: none; }
}

/* ============================================================
   TASK 5.5 · SIGNATURE SCROLL MOMENTS (per-page, restrained)
   ------------------------------------------------------------
   Each interior page gets ONE quiet, expensive-feeling moment,
   wired in the page's inline boot via VyneMotion.onReady:
     - header-band glow PARALLAX (valuation, listings, contact)
     - stat / rating COUNT-UP (about, neighborhood, reviews)
   These rules only add GPU hints; the motion itself is JS
   (transform-only) and no-ops under reduced motion. The glow
   layers live behind clipped (.overflow:clip) bands, so a
   downward translate never exposes a hard edge.
   ============================================================ */
.js-motion .v-vp__glow,
.js-motion .v-pagehead__glow,
.js-motion .v-contact__glow {
  will-change: transform;
}

/* Reduced motion: drop any GPU promotion; content is fully static. */
@media (prefers-reduced-motion: reduce) {
  .v-vp__glow,
  .v-pagehead__glow,
  .v-contact__glow {
    will-change: auto;
    transform: none !important;
  }
}

/* ============================================================
   EARLY VALUATION CAPTURE  (.v-quickval)
   A slim, bright band right after the hero handoff so a scroller
   hits a lead capture within ~1 screen, not 7. On-brand: cream
   card, hairline border, accent button. Hands off to the full
   multi-step valuation form (data-quickval in index.html script).
   ============================================================ */
.v-quickval {
  padding-block: var(--space-xl, 2.5rem);
}
.v-quickval__card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg, 1.5rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  border: var(--hairline, 1px) solid var(--line-strong);
  border-radius: var(--radius-lg, 18px);
  background:
    radial-gradient(120% 160% at 0% 0%, var(--accent-soft), transparent 60%),
    var(--surface-1, #fff);
  box-shadow: var(--shadow-lg);
}
.v-quickval__copy { flex: 1 1 18rem; min-width: 0; }
.v-quickval__title {
  font-family: var(--font-display, serif);
  font-weight: 500;
  font-size: var(--step-2, 1.7rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-head, -0.02em);
  margin: 0.35rem 0 0.4rem;
  color: var(--text);
}
.v-quickval__sub {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--step--1, 0.92rem);
  line-height: 1.55;
  max-width: 44ch;
}
.v-quickval__form {
  flex: 1 1 22rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm, 0.75rem);
}
.v-quickval__input { flex: 1 1 14rem; min-width: 0; }
.v-quickval__btn { flex: 0 0 auto; white-space: nowrap; }
.v-quickval__srOnly {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
@media (max-width: 640px) {
  /* Stack the card; keep controls at their natural height (no vertical
     flex-grow stretching the input / button into giant blocks). */
  .v-quickval__card { flex-direction: column; align-items: stretch; text-align: left; }
  .v-quickval__copy,
  .v-quickval__form { flex: 0 0 auto; }
  .v-quickval__form { flex-direction: column; align-items: stretch; }
  .v-quickval__input { flex: 0 0 auto; }
  .v-quickval__btn { flex: 0 0 auto; width: 100%; }
}

/* ============================================================
   STICKY VALUATION PILL  (.v-valpill)
   Floating fast-capture, BOTTOM-LEFT (concierge owns bottom-right).
   Hidden until the hero pin releases (<html class="hero-released">).
   Slides up + fades in; transform/opacity only, < 300ms, custom
   easing, reduced-motion safe.
   ============================================================ */
.v-valpill {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 88;                 /* below nav (100) + concierge (90) */
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--radius-pill);
  background:
    radial-gradient(140% 140% at 20% 10%, color-mix(in srgb, var(--accent) 92%, #000 0%), var(--accent));
  color: var(--on-accent);
  box-shadow: var(--shadow-lg), var(--shadow-accent);
  /* hidden-until-released resting state */
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.96);
  pointer-events: none;
  transition:
    opacity var(--dur, 240ms) var(--ease-out),
    transform var(--dur, 240ms) var(--ease-out);
}
.v-valpill[hidden] { display: none; }
/* Revealed only after the hero releases. */
html.hero-released .v-valpill.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
}
.v-valpill__link {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.85em 0.55em 0.85em 1.15em;
  color: var(--on-accent);
  text-decoration: none;
  font-family: var(--font-mono, monospace);
  font-size: var(--step--1, 0.85rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  transition: transform var(--dur-fast, 140ms) var(--ease-out);
}
.v-valpill__link:hover { transform: translateX(2px); }
.v-valpill__link:focus-visible {
  outline: 2px solid var(--on-accent);
  outline-offset: -4px;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}
.v-valpill__icon { display: inline-grid; place-items: center; }
.v-valpill__icon svg { width: 1.15rem; height: 1.15rem; }
.v-valpill__text { white-space: nowrap; }
.v-valpill__close {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  padding-right: 0.35rem;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--on-accent) 78%, transparent);
  cursor: pointer;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  transition: color var(--dur-fast, 140ms) var(--ease-out), transform var(--dur-fast, 140ms) var(--ease-out);
}
.v-valpill__close svg { width: 0.95rem; height: 0.95rem; }
.v-valpill__close:hover { color: var(--on-accent); transform: scale(1.08); }
.v-valpill__close:focus-visible { outline: 2px solid var(--on-accent); outline-offset: -3px; }

@media (max-width: 460px) {
  /* Keep the pill compact on phones; trim the close hit area only. */
  .v-valpill__link { padding-left: 0.95rem; font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .v-valpill {
    transition: none;
    transform: none;
  }
  html.hero-released .v-valpill.is-in { transform: none; }
  .v-valpill__link:hover,
  .v-valpill__close:hover { transform: none; }
}

/* ============================================================
   FLOATING-LAYER TRUCE
   The demo chip (#vyne-getyours) yields while the concierge or
   the exit-intent dialog is open - on phones they share the same
   bottom-right corner and the chip was covering the chat input.
   ============================================================ */
body:has(.v-cc[data-open="true"]) #vyne-getyours,
body:has(.v-exit[data-open="true"]) #vyne-getyours {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================================
   THE DETAILS  (.v-details)  ·  listing.html
   Full property data grid. NAR 2024: detailed property info is
   the #2 most-valued listing feature (39% "very useful").
   ============================================================ */
.v-details { padding-block: var(--space-3xl); border-top: 1px solid var(--line); }
.v-details__head { max-width: 34ch; }
.v-details__title {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
}
.v-details__grid {
  margin: var(--space-2xl) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line-strong);
}
@media (min-width: 620px) { .v-details__grid { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-2xl); } }
@media (min-width: 960px) { .v-details__grid { grid-template-columns: repeat(3, 1fr); } }
.v-detail {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--line);
}
.v-detail dt {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.v-detail dd {
  margin: 0;
  font-weight: var(--weight-medium);
  font-size: var(--step-0);
  color: var(--text);
  text-align: right;
}

/* ============================================================
   THE FLOOR PLAN  (.v-plan)  ·  listing.html
   Hand-drawn SVG center-hall plan. NAR 2024: floor plans are the
   #3 most-valued listing feature (31% "very useful").
   ============================================================ */
.v-plan { padding-block: var(--space-3xl); border-top: 1px solid var(--line); }
.v-plan__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
@media (min-width: 960px) { .v-plan__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.v-plan__title {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
}
.v-plan__lede {
  margin: var(--space-lg) 0 0;
  max-width: 44ch;
  color: var(--text-muted);
  line-height: var(--leading-body);
}
.v-plan__levels { margin: var(--space-xl) 0 0; border-top: 1px solid var(--line-strong); }
.v-plan__level {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--line);
}
.v-plan__level dt {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.v-plan__level dd { margin: 0; font-weight: var(--weight-medium); color: var(--text); }
.v-plan__card {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg, 14px);
  padding: clamp(1rem, 3vw, 2rem);
  box-shadow: var(--shadow-md, 0 10px 30px -18px rgba(16, 21, 28, 0.25));
}
.v-plan__svg { display: block; width: 100%; height: auto; }
.v-plan__lbl {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  fill: var(--text);
}
.v-plan__lbl--dim { font-size: 11.5px; letter-spacing: 0.08em; fill: var(--text-muted); }
.v-plan__lbl--muted { font-size: 10.5px; fill: var(--text-faint); }
.v-plan__cap {
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
}

/* ============================================================
   PRESS BAND  (.v-press)  ·  "As seen in" wordmarks
   Trust layer: press logos, per the 2026 luxury trust stack
   (press band + success stories + milestone stats + face).
   ============================================================ */
.v-press { padding-block: var(--space-xl); border-top: 1px solid var(--line); }
.v-press__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-lg) var(--space-2xl);
  justify-content: center;
}
.v-press__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.v-press__row {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-lg) var(--space-2xl);
  justify-content: center;
}
.v-press__mark { color: var(--text-muted); opacity: 0.75; white-space: nowrap; }
.v-press__mark--serif { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; }
.v-press__mark--ital { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.1rem; }
.v-press__mark--caps {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ============================================================
   CASE STUDY  (.v-case)  ·  one sale told with numbers
   ============================================================ */
.v-case { padding-block: var(--space-2xl); }
.v-case__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg, 14px);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  box-shadow: var(--shadow-md, 0 10px 30px -18px rgba(16, 21, 28, 0.25));
}
@media (min-width: 880px) { .v-case__card { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.v-case__title {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-head);
}
.v-case__body {
  margin: var(--space-lg) 0 var(--space-xl);
  max-width: 52ch;
  color: var(--text-muted);
  line-height: var(--leading-body);
}
.v-case__stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl) var(--space-lg);
}
.v-case__stat { display: grid; gap: 0.3rem; border-left: 2px solid var(--accent-line); padding-left: var(--space-md); }
.v-case__stat dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-3);
  line-height: 1;
  color: var(--text);
}
.v-case__stat dt {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Listing mode chooser (walkthrough vs photography) ---------- */
.v-tourwalk__modes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }