/* =================================================================
   Wall Street Real Estate: shared styles
   Luxury-minimal: black / white sections, color photography,
   Manrope for UI, Bodoni Moda italic for accent words (matches logo).
================================================================= */
:root{
  --black:#0a0a0a;
  --black-2:#141414;
  --black-3:#1d1d1d;
  --white:#ffffff;
  --off:#f4f3ef;
  --gray:#8b8a86;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;
  --max:1360px;
  --gutter:clamp(16px,4vw,56px);
  --r:20px;
  --ease:cubic-bezier(.22,.8,.18,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* active section colors (light by default) */
  --bg:var(--white);
  --fg:var(--black);
  --muted:#6e6d69;
  --line:rgba(10,10,10,.12);
  --card:var(--off);
}
.dark{--bg:var(--black);--fg:#f5f5f3;--muted:rgba(245,245,243,.58);--line:rgba(255,255,255,.12);--card:var(--black-2);background:var(--bg);color:var(--fg)}
.light{--bg:var(--white);--fg:var(--black);--muted:#6e6d69;--line:rgba(10,10,10,.12);--card:var(--off);background:var(--bg);color:var(--fg)}
.off{--bg:var(--off);--card:var(--white);background:var(--off);color:var(--fg)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--black);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--fg);color:var(--bg)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pad{padding:clamp(88px,10vw,150px) 0}

/* ---------- type ---------- */
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.035em;line-height:1.02}
h2{font-size:clamp(2.4rem,5.4vw,4.8rem)}
h3{font-size:clamp(1.3rem,1.8vw,1.6rem);letter-spacing:-.02em}
.it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.label{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:500;color:var(--muted)}
.label b{color:var(--fg);font-weight:600}
.lede{font-size:clamp(1.02rem,1.25vw,1.15rem);color:var(--muted);max-width:52ch;margin:0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,72px)}
.sec-head h2{margin-top:18px}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;white-space:nowrap;min-height:50px;padding:14px 24px;border-radius:999px;border:1px solid var(--fg);background:transparent;color:var(--fg);font-size:.9rem;font-weight:600;letter-spacing:-.005em;cursor:pointer;overflow:hidden;isolation:isolate;transition:color .45s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--fg);transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1;border-radius:inherit}
.btn:hover{color:var(--bg)}
.btn:hover::before{transform:none}
.btn .arr{width:16px;height:16px;transition:transform .45s var(--ease)}
.btn:hover .arr{transform:rotate(45deg)}
.btn--fill{background:var(--fg);color:var(--bg)}
.btn--fill::before{background:var(--bg)}
.btn--fill:hover{color:var(--fg)}
.btn--sm{min-height:42px;padding:10px 18px;font-size:.84rem}
.circle-arr{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;flex:none;transition:background .4s,color .4s,border-color .4s,transform .5s var(--ease)}
.circle-arr svg{width:20px;height:20px;transition:transform .5s var(--ease)}
a:hover > .circle-arr,.circle-arr:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
a:hover > .circle-arr svg{transform:rotate(45deg)}

/* ---------- motion ---------- */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.clip{clip-path:inset(12% 8% 12% 8% round var(--r));transition:clip-path 1.4s var(--ease-out)}
.clip img,.clip video{transform:scale(1.18);transition:transform 1.8s var(--ease-out)}
.clip.in{clip-path:inset(0 0 0 0 round var(--r))}
.clip.in img,.clip.in video{transform:scale(1)}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .w > span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease-out);transition-delay:calc(var(--i,0) * 55ms + var(--d,0s))}
.split.in .w > span{transform:none}
.words .wd{opacity:.14;transition:opacity .25s linear}
.words .wd.on{opacity:1}
[data-speed]{will-change:transform}

/* page loader */
.loader{position:fixed;inset:0;z-index:200;background:var(--black);display:flex;align-items:center;justify-content:center;transition:transform 1.1s var(--ease) .15s}
.loader img{width:84px;opacity:0;transform:translateY(14px);animation:ldIn .9s var(--ease-out) .1s forwards}
.loader .bar{position:absolute;left:50%;bottom:18%;width:140px;height:1px;background:rgba(255,255,255,.15);transform:translateX(-50%);overflow:hidden}
.loader .bar::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;animation:ldBar 1s var(--ease) .2s forwards}
.loaded .loader{transform:translateY(-100%)}
@keyframes ldIn{to{opacity:1;transform:none}}
@keyframes ldBar{to{transform:scaleX(1)}}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:60;padding:18px 0;--fg:#fff;--bg:#0a0a0a;color:var(--fg);transition:transform .6s var(--ease),padding .4s}
.nav.hide{transform:translateY(-110%)}
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.nav.solid{padding:10px 0}
.nav.solid .nav-in{width:calc(100% - 24px);padding:8px 8px 8px 20px;background:rgba(12,12,12,.72);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.08);border-radius:999px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.brand{display:flex;align-items:center;gap:12px;justify-self:start}
.brand img{height:36px;width:auto}
.brand span{font-family:var(--serif);font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.15}
.menu{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.menu a{position:relative;display:block;padding:8px 14px;border-radius:999px;font-size:.9rem;font-weight:500;transition:background .3s}
.menu a:hover,.menu a[aria-current="page"]{background:rgba(255,255,255,.1)}
.nav-cta{display:flex;align-items:center;gap:8px;justify-self:end}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;cursor:pointer;position:relative}
.burger i{position:absolute;left:14px;right:14px;height:1.5px;background:#fff;transition:transform .4s var(--ease),opacity .3s}
.burger i:nth-child(1){top:17px}.burger i:nth-child(2){top:22px}.burger i:nth-child(3){top:27px}
.nav.open .burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav.open .burger i:nth-child(2){opacity:0}
.nav.open .burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:55;background:var(--black);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:110px var(--gutter) 40px;clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease)}
.nav.open + .drawer{clip-path:inset(0 0 0 0)}
.drawer a{font-size:clamp(2.2rem,10vw,3.6rem);font-weight:500;letter-spacing:-.04em;line-height:1.15;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.drawer .d-foot{margin-top:28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:rgba(255,255,255,.6);font-size:.9rem}
@media (max-width:1320px){.nav-cta .btn:not(.btn--fill){display:none}}
@media (max-width:1060px){.menu{display:none}.burger{display:block}.nav-in{grid-template-columns:1fr auto}}
@media (max-width:560px){.nav .btn{display:none}.brand span{display:none}}

/* ---------- property card (shared) ---------- */
.pcard{position:relative;display:flex;flex-direction:column;border-radius:var(--r);background:var(--card);overflow:hidden;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.pcard:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(0,0,0,.18)}
.pcard .ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--black-3)}
.pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out),opacity .6s}
.pcard:hover .ph img{transform:scale(1.07)}
.pcard .ph .no-photo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;color:rgba(255,255,255,.7);font-family:var(--serif);font-style:italic;font-size:1.3rem;background:radial-gradient(80% 80% at 50% 30%,#242424,#121212)}
.pcard .ph .no-photo img{position:absolute;width:56px;height:auto;opacity:.18;top:22%;transform:none!important}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:.72rem;font-weight:600;background:rgba(255,255,255,.92);color:#0a0a0a;backdrop-filter:blur(8px)}
.chip.dark-chip{background:rgba(10,10,10,.75);color:#fff}
.chip .dot{width:6px;height:6px;border-radius:50%;background:#22c55e}
.chip.pending .dot{background:#f59e0b}
.pcard .chips{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;gap:8px;z-index:2}
.fav{width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#0a0a0a;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .3s}
.fav:hover{transform:scale(1.08)}
.fav svg{width:18px;height:18px}
.fav.on svg{fill:#e11d48;stroke:#e11d48}
.pcard .bd{padding:20px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard .price{font-size:1.5rem;font-weight:600;letter-spacing:-.03em}
.pcard .ttl{font-weight:600;letter-spacing:-.01em}
.pcard .addr{font-size:.88rem;color:var(--muted)}
.pcard .meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;gap:16px;font-size:.84rem;color:var(--muted)}
.pcard .meta b{color:var(--fg);font-weight:600}
.pcard .lnk{position:absolute;inset:0;z-index:1}
.pcard .fav{position:relative;z-index:3}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:.78rem;font-weight:600;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:transparent;outline:none;transition:border-color .3s,background .3s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--fg)}
.field select option{background:#fff;color:#0a0a0a}
.field textarea{min-height:110px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.f-err{min-height:1.2em;margin-top:8px;font-size:.85rem;color:#e11d48}
.dark .f-err{color:#ff8fa3}
@media (max-width:520px){.row2{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.foot{padding:clamp(70px,8vw,110px) 0 36px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:56px;border-bottom:1px solid var(--line)}
.foot-top img{height:110px;width:auto;margin-bottom:22px}
.foot h4{font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:16px;letter-spacing:0}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.foot ul a{transition:opacity .3s}.foot ul a:hover{opacity:.6}
.foot-giant{font-size:clamp(3.6rem,13.5vw,13rem);font-weight:600;letter-spacing:-.06em;line-height:.85;margin:44px 0 26px;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);white-space:nowrap;overflow:hidden}
.legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.legal .trec{display:flex;gap:18px;flex-wrap:wrap}
.legal .trec a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.foot-top{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-top{grid-template-columns:1fr}}

.fab{position:fixed;right:16px;bottom:16px;z-index:40;display:none;align-items:center;gap:8px;padding:14px 20px;border-radius:999px;background:#fff;color:#0a0a0a;font-size:.86rem;font-weight:600;box-shadow:0 12px 30px rgba(0,0,0,.35)}
@media (max-width:700px){.fab{display:inline-flex}}

/* ---------- phones & tablets: same look, cheaper effects ---------- */
@media (hover:none),(pointer:coarse),(max-width:900px){
  /* backdrop blur is the most expensive effect on mobile GPUs: use solid tints */
  .nav.solid .nav-in,.chip,.qsearch,.form-card,.agent-photo .tag,.fbar,.hero-meta{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .nav.solid .nav-in{background:rgba(14,14,14,.94)}
  .qsearch{background:rgba(18,18,18,.78)!important}
  .form-card{background:rgba(18,18,18,.9)!important}
  .agent-photo .tag{background:rgba(10,10,10,.82)!important}
  .fbar{background:#fff!important}
  /* image reveals: a simple fade-up instead of animated clip-path + zoom */
  .clip{clip-path:none!important;opacity:0;transform:translate3d(0,28px,0);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
  .clip.in{opacity:1;transform:none}
  .clip img,.clip video{transform:none!important;transition:none!important}
  .rv{transform:translate3d(0,24px,0);transition-duration:.8s}
  .split .w > span{transition-duration:.85s}
  [data-speed]{transform:none!important}
  /* no hover lifts on touch */
  .pcard:hover{transform:none;box-shadow:none}
  .pcard:hover .ph img,.comm:hover .im img,.sold-card:hover img,.tm:hover .ph img,.feat-row:hover .im img{transform:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.split .w > span,.words .wd{opacity:1!important;transform:none!important}
  .clip{clip-path:none!important}.clip img{transform:none!important}
  .loader{display:none}
}