@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500&family=Hanken+Grotesk:wght@300;400;600&display=swap');

/* ===== ZAVEN Reality — Design tokens ===== */
:root{
  /* neutrals */
  --ivory:#F4F1E9; --ivory-deep:#EFEBE0; --sand:#E3DDCE;
  --sand-line:#D9D4C6; --sand-line-deep:#CFC9BA;
  --warm-grey:#8A867C; --charcoal:#383837;
  /* ink */
  --ink-strong:#44423D; --ink:#57554F; --ink-faint:#75726A;
  /* pastels */
  --sage:#B9C9BF; --sky:#BCCCD6; --clay:#E2CABF; --olive:#D8CFA8;
  /* aliases */
  --bg:var(--ivory); --text:var(--charcoal);
  --border:var(--sand-line); --border-strong:var(--sand-line-deep);
  /* type */
  --font-display:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fw-thin:200; --fw-light:300; --fw-regular:400; --fw-medium:500;
  --fs-h2:clamp(26px,3.4vw,36px); --fs-h3:22px; --fs-h4:19px;
  --fs-numeral:clamp(44px,5.4vw,60px); --fs-numeral-ghost:64px;
  --fs-lead:17px; --fs-body:15.5px; --fs-body-sm:14.5px; --fs-eyebrow:12px;
  --ls-eyebrow:.42em; --ls-label:.30em; --ls-caption:.34em; --ls-list:.24em;
  --ls-name:.06em; --ls-heading:.02em;
  --lh-tight:1.12; --lh-snug:1.5; --lh-body:1.7;
  --measure:640px;
  /* motion */
  --ease-expo:cubic-bezier(.22,1,.36,1);
  --dur-fast:.35s; --dur:.5s; --dur-slow:.9s; --dur-reveal:1.1s;
}

/* ===== base ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ivory);color:var(--charcoal);
  font-family:var(--font-body);font-weight:var(--fw-light);font-size:var(--fs-body);
  line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;position:relative;
}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:var(--fw-light);
  letter-spacing:var(--ls-heading);line-height:var(--lh-tight);margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:#57554F;text-decoration:none;transition:color var(--dur-fast) var(--ease-expo)}
a:hover{color:#383837}
img{max-width:100%;display:block}
::selection{background:#B9C9BF;color:#33352F}
:focus-visible{outline:2px solid var(--charcoal);outline-offset:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ===== Eyebrow ===== */
.zvn-eyebrow{display:inline-flex;align-items:center;gap:14px;
  font-family:var(--font-display);font-weight:var(--fw-regular);font-size:var(--fs-eyebrow);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--warm-grey);line-height:1}
.zvn-eyebrow::before{content:"";width:34px;height:1px;background:currentColor;flex:none}
.zvn-eyebrow--center{justify-content:center}

/* ===== Section heading ===== */
.zvn-sechead{display:flex;flex-direction:column;gap:18px}
.zvn-sechead--center{align-items:center;text-align:center}
.zvn-sechead__title{font-family:var(--font-display);font-weight:var(--fw-light);
  font-size:var(--fs-h2);letter-spacing:var(--ls-heading);line-height:var(--lh-tight);
  color:var(--text);max-width:18ch;margin:0}
.zvn-sechead--center .zvn-sechead__title{max-width:22ch}
.zvn-sechead__sub{font-family:var(--font-body);font-weight:var(--fw-light);
  font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--ink);max-width:var(--measure);margin:0}

/* ===== Button ===== */
.zvn-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:var(--fw-regular);text-transform:uppercase;
  text-decoration:none;cursor:pointer;border:0;background:none;overflow:hidden;border-radius:0;
  transition:color var(--dur-fast) var(--ease-expo);-webkit-font-smoothing:antialiased}
.zvn-btn>span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.7em}
.zvn-btn::before{content:"";position:absolute;inset:0;background:var(--sage);transform:translateY(101%);
  transition:transform var(--dur) var(--ease-expo);z-index:0}
.zvn-btn:hover::before{transform:none}
.zvn-btn:focus-visible{outline:2px solid var(--charcoal);outline-offset:4px}
.zvn-btn--solid{background:var(--charcoal);color:var(--ivory)}
.zvn-btn--solid:hover{color:var(--charcoal)}
.zvn-btn--line{color:var(--charcoal);box-shadow:inset 0 0 0 1px var(--charcoal)}
.zvn-btn--line:hover{color:var(--charcoal)}
.zvn-btn--md{font-size:14px;letter-spacing:.28em;padding:22px 52px}
.zvn-btn--sm{font-size:12px;letter-spacing:.24em;padding:15px 34px}
.zvn-btn__arr{transition:transform var(--dur-fast) var(--ease-expo)}
.zvn-btn:hover .zvn-btn__arr{transform:translateX(4px)}

/* ===== Tag ===== */
.zvn-tag{display:inline-flex;align-items:center;gap:6px;border-radius:0;
  font-family:var(--font-display);font-weight:var(--fw-regular);text-transform:uppercase;
  letter-spacing:.2em;line-height:1;white-space:nowrap}
.zvn-tag--sm{font-size:10px;padding:5px 9px;letter-spacing:.16em}
.zvn-tag--sage{background:var(--sage);color:var(--charcoal)}
.zvn-tag--sky{background:var(--sky);color:var(--charcoal)}
.zvn-tag--clay{background:var(--clay);color:var(--charcoal)}

/* ===== PhotoFrame ===== */
.zvn-photo{position:relative;display:inline-block;width:100%;margin:0}
.zvn-photo__block{position:absolute;z-index:0;border-radius:0;transition:transform var(--dur) var(--ease-expo)}
.zvn-photo--lg .zvn-photo__block{inset:30px -30px -30px 30px}
.zvn-photo--sm .zvn-photo__block{inset:20px -20px -20px 20px}
.zvn-photo__block--sage{background:var(--sage)}
.zvn-photo__block--clay{background:var(--clay)}
.zvn-photo__block--sky{background:var(--sky)}
.zvn-photo__mask{position:relative;z-index:1;overflow:hidden;border-radius:0;background:var(--sand)}
.zvn-photo__mask img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-reveal) var(--ease-expo)}
.zvn-photo:hover .zvn-photo__mask img{transform:scale(1.05)}
.zvn-photo:hover .zvn-photo__block{transform:translate(-8px,8px)}
.zvn-photo__cap{margin-top:34px;text-align:center;font-family:var(--font-display);
  font-weight:var(--fw-regular);font-size:13px;letter-spacing:var(--ls-caption);
  text-transform:uppercase;color:var(--warm-grey)}
.zvn-photo--sm .zvn-photo__cap{margin-top:22px}

/* ===== Marquee ===== */
.zvn-marquee{border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:18px 0;overflow:hidden;white-space:nowrap;background:var(--ivory)}
.zvn-marquee__track{display:inline-flex;animation:zvn-mq 26s linear infinite}
.zvn-marquee:hover .zvn-marquee__track{animation-play-state:paused}
.zvn-marquee__group{display:inline-flex;align-items:center}
.zvn-marquee__item{font-family:var(--font-display);font-weight:var(--fw-light);font-size:15px;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--warm-grey);padding:0 34px;
  display:inline-flex;align-items:center}
.zvn-marquee__sep{color:var(--clay);font-size:10px;padding:0 4px}
@keyframes zvn-mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.zvn-marquee__track{animation:none}}

/* ===== PropertyCard ===== */
.zvn-prop{display:flex;flex-direction:column;text-decoration:none;color:var(--charcoal);
  background:var(--ivory);border-radius:0;transition:transform var(--dur) var(--ease-expo)}
.zvn-prop:hover{transform:translateY(-6px)}
.zvn-prop__media{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--sand)}
.zvn-prop__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-reveal) var(--ease-expo)}
.zvn-prop:hover .zvn-prop__media img{transform:scale(1.05)}
.zvn-prop__ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;background:var(--sand);color:var(--warm-grey)}
.zvn-prop__ph span{font-family:var(--font-display);font-size:10px;letter-spacing:.24em;text-transform:uppercase}
.zvn-prop__tags{position:absolute;top:14px;left:14px;display:flex;gap:6px}
.zvn-prop__body{padding:20px 2px 4px;display:flex;flex-direction:column;gap:10px}
.zvn-prop__loc{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);
  font-weight:var(--fw-regular);font-size:11px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--warm-grey)}
.zvn-prop__title{font-family:var(--font-display);font-weight:var(--fw-light);font-size:20px;
  letter-spacing:.01em;line-height:1.25;margin:0;color:var(--charcoal)}
.zvn-prop__price{font-family:var(--font-display);font-weight:var(--fw-regular);font-size:18px;
  letter-spacing:.02em;color:var(--charcoal)}
.zvn-prop__specs{display:flex;gap:20px;padding-top:14px;margin-top:2px;border-top:1px solid var(--border)}
.zvn-prop__spec{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-body);
  font-size:13px;font-weight:var(--fw-light);color:var(--ink)}
.zvn-prop__spec svg{color:var(--warm-grey);flex:none}

/* ===== ValueCard ===== */
.zvn-value{position:relative;overflow:hidden;border-radius:0;padding:36px 30px 40px;
  transition:transform var(--dur) var(--ease-expo)}
.zvn-value--sage{background:var(--sage)}
.zvn-value--sand{background:var(--sand)}
.zvn-value--clay{background:var(--clay)}
.zvn-value__num{position:absolute;top:14px;right:18px;font-family:var(--font-display);
  font-weight:var(--fw-thin);font-size:var(--fs-numeral-ghost);line-height:1;color:rgba(56,56,55,.14)}
.zvn-value__title{font-family:var(--font-display);font-weight:var(--fw-regular);font-size:var(--fs-h4);
  letter-spacing:.05em;margin:0 0 10px;color:var(--charcoal)}
.zvn-value__body{font-family:var(--font-body);font-weight:var(--fw-light);font-size:var(--fs-body-sm);
  line-height:1.55;color:var(--ink-strong);margin:0}
.zvn-value::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:var(--charcoal);transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease-expo)}
.zvn-value:hover{transform:translateY(-6px)}
.zvn-value:hover::after{transform:scaleX(1)}

/* ===== StatCard ===== */
.zvn-stat{border:1px solid var(--border);border-radius:0;padding:42px 20px 38px;text-align:center;
  transition:background var(--dur-fast) var(--ease-expo)}
.zvn-stat:hover{background:var(--ivory-deep)}
.zvn-stat__n{font-family:var(--font-display);font-weight:var(--fw-thin);font-size:var(--fs-numeral);
  line-height:1;letter-spacing:.02em;color:var(--charcoal);display:inline-flex;align-items:baseline}
.zvn-stat__n em{font-style:normal;font-size:.55em;color:var(--warm-grey);margin-left:4px}
.zvn-stat__l{margin-top:12px;font-family:var(--font-display);font-weight:var(--fw-regular);
  font-size:12px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--warm-grey)}

/* ===== ContactRow ===== */
.zvn-crow{display:flex;align-items:center;gap:14px;padding:15px 2px;text-decoration:none;
  color:var(--charcoal);position:relative;border-bottom:1px solid var(--border-strong);
  transition:padding-left var(--dur) var(--ease-expo)}
.zvn-crow:first-child{border-top:1px solid var(--border-strong)}
.zvn-crow::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--charcoal);transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease-expo)}
.zvn-crow:hover{padding-left:12px;color:var(--charcoal)}
.zvn-crow:hover::after{transform:scaleX(1)}
.zvn-crow__ico{flex:none;color:var(--warm-grey);display:inline-flex;transition:color var(--dur-fast),transform var(--dur-fast)}
.zvn-crow:hover .zvn-crow__ico{color:var(--charcoal);transform:scale(1.12)}
.zvn-crow__lbl{font-family:var(--font-display);font-weight:var(--fw-regular);font-size:12px;
  letter-spacing:var(--ls-list);text-transform:uppercase}
.zvn-crow__val{margin-left:auto;font-family:var(--font-body);font-size:13.5px;font-weight:var(--fw-light);
  color:var(--ink-faint);white-space:nowrap;transition:color var(--dur-fast)}
.zvn-crow:hover .zvn-crow__val{color:var(--charcoal)}
.zvn-crow__arr{flex:none;color:var(--charcoal);opacity:0;transform:translateX(-8px);
  transition:opacity var(--dur-fast),transform var(--dur-fast) var(--ease-expo)}
.zvn-crow:hover .zvn-crow__arr{opacity:1;transform:none}

/* ===== AgentCard ===== */
.zvn-agent{display:flex;flex-direction:column}
.zvn-agent__photo{margin-bottom:34px}
.zvn-agent__name{position:relative;z-index:1;font-family:var(--font-display);font-weight:var(--fw-regular);
  font-size:var(--fs-h3);letter-spacing:var(--ls-name);margin:30px 0 4px;color:var(--charcoal)}
.zvn-agent__role{position:relative;z-index:1;font-family:var(--font-display);font-weight:var(--fw-regular);
  font-size:12px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--warm-grey);margin:0 0 18px}
.zvn-agent__list{position:relative;z-index:1;margin-top:8px}

/* ===== QuoteBand ===== */
.zvn-quote{position:relative;overflow:hidden;background:var(--charcoal);color:var(--ivory);
  padding:84px 48px;text-align:center;border-radius:0}
.zvn-quote__wm{position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);
  font-family:var(--font-display);font-weight:var(--fw-thin);font-size:340px;line-height:1;
  color:rgba(244,241,233,.05);user-select:none;pointer-events:none}
.zvn-quote__text{position:relative;font-family:var(--font-display);font-weight:var(--fw-light);
  font-size:clamp(20px,2.8vw,28px);line-height:var(--lh-snug);letter-spacing:.03em;max-width:640px;margin:0 auto}
.zvn-quote__cite{position:relative;display:block;margin-top:26px;font-family:var(--font-display);
  font-weight:var(--fw-regular);font-size:12px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--warm-grey)}
@media (max-width:760px){.zvn-quote{padding:60px 26px}.zvn-quote__wm{font-size:200px}}

/* ===== Hero drifting "Z" ===== */
.hero-z{
  position:absolute;
  top:50%;
  left:0;
  transform:translate(-30%,-50%);
  font-family:var(--font-display);
  font-weight:200;
  font-size:clamp(320px, 55vw, 640px);
  line-height:.85;
  letter-spacing:-.02em;
  color:#D9CFB8;
  opacity:0;
  pointer-events:none;
  user-select:none;
  z-index:1;
  will-change:transform,opacity;
  animation:hero-z-drift 42s linear infinite;
}
@keyframes hero-z-drift{
  0%   { transform:translate(-40%,-50%); opacity:0; }
  20%  { opacity:.14; }
  50%  { opacity:.16; }
  80%  { opacity:.14; }
  100% { transform:translate(120vw,-50%); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .hero-z{ animation:none; transform:translate(20vw,-50%); opacity:.10; }
}

/* ===== page layout ===== */
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease-expo),transform .8s var(--ease-expo)}
.reveal.is-in{opacity:1;transform:none}

.bg-shapes{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-shapes>div{position:absolute}

.site-header{position:sticky;top:0;z-index:40;background:#F4F1E9;border-bottom:1px solid transparent;transition:border-color .4s ease}
.site-header.scrolled{border-bottom-color:#D9D4C6}
.nav{max-width:1180px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.brand{display:inline-flex;flex-direction:column;align-items:center;gap:4px;color:#383837}
.brand__z{font-family:var(--font-display);font-weight:300;font-size:25px;letter-spacing:.3em;margin-right:-0.3em;line-height:1}
.brand__r{font-family:var(--font-display);font-weight:400;font-size:9px;letter-spacing:.5em;margin-right:-0.5em;text-transform:uppercase;color:#8A867C;line-height:1}
.nav__links{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.nav__links a{font-family:var(--font-display);font-weight:400;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8A867C}
.nav__links a:hover{color:#383837}
.nav__right{display:flex;align-items:center;gap:34px;flex-wrap:wrap}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.grid-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px}
.grid-values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:960px;margin:0 auto}
.grid-agents{display:grid;grid-template-columns:1fr 1fr;gap:64px}

@media (max-width:860px){
  .grid-3,.grid-values{grid-template-columns:1fr}
  .grid-agents{grid-template-columns:1fr;gap:56px}
  .nav__links{display:none}
}