/* The shared components (24 Oct 2026), loaded after site.css by the home, buyers, agencies and
   pricing pages: the base type, rows, steps, cards and figures, the app mockups and the logos, the
   chips, the reveal, the FAQ and the step scenes. A page's own styles come after this file. */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{ margin:0; background:#ffffff; color:#0a0a0a; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a{ color:#0a0a0a; }
/* reduced motion stops transitions as well as animations */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto !important; }
}
.nv-sec{ padding:120px 32px; }
.nv-h1{ margin:0 auto; max-width:15ch; font-size:76px; font-weight:400; letter-spacing:-0.05em; line-height:1.02; color:#0a0a0a; text-wrap:balance; }
.nv-h2{ margin:0; font-size:44px; font-weight:400; letter-spacing:-0.04em; line-height:1.06; color:#0a0a0a; text-wrap:balance; }
.nv-lead{ margin:0; font-size:20px; font-weight:400; letter-spacing:-0.015em; line-height:1.5; color:rgba(10,10,10,0.6); text-wrap:pretty; }
.nv-k{ margin:0 0 14px; font-size:16px; font-weight:400; letter-spacing:-0.01em; color:rgba(10,10,10,0.5); }
.nv-note{ font-size:14px; letter-spacing:-0.01em; color:rgba(10,10,10,0.5); }
/* rows: the title on the left, the line that explains it on the right */
.nv-rows{ margin-top:48px; }
.nv-row{ display:grid; grid-template-columns:1fr 1fr; gap:64px; padding:30px 0; border-top:1px solid rgba(10,10,10,0.08); }
.nv-row h3{ margin:0; font-size:24px; font-weight:400; letter-spacing:-0.03em; line-height:1.2; color:#0a0a0a; }
.nv-row p{ margin:0; font-size:17px; font-weight:400; letter-spacing:-0.01em; line-height:1.55; color:rgba(10,10,10,0.6); }
/* numbered steps beside a mockup */
.nv-two{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.nv-steps{ list-style:none; margin:36px 0 0; padding:0; }
.nv-steps li{ display:grid; grid-template-columns:40px 1fr; gap:6px 14px; padding:22px 0; border-top:1px solid rgba(10,10,10,0.08); }
.nv-step-n{ font-size:15px; color:rgba(10,10,10,0.4); padding-top:3px; }
.nv-steps h3{ margin:0; font-size:20px; font-weight:500; letter-spacing:-0.02em; color:#0a0a0a; }
.nv-steps p{ grid-column:2; margin:0; font-size:16px; line-height:1.55; letter-spacing:-0.01em; color:rgba(10,10,10,0.6); }
/* the soft cards of "everything in between" */
.nv-soft{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:48px; }
.nv-soft > div{ background:#F7F6F2; border-radius:20px; padding:32px 30px; }
.nv-soft h3{ margin:0; font-size:20px; font-weight:500; letter-spacing:-0.02em; color:#0a0a0a; }
.nv-soft p{ margin:10px 0 0; font-size:16px; line-height:1.55; letter-spacing:-0.01em; color:rgba(10,10,10,0.6); }
/* an odd number of cards: the last one takes the whole row instead of leaving a hole */
.nv-soft > div:last-child:nth-child(odd){ grid-column:1 / -1; }
/* the research figures, quiet: a number, its line, its source */
.nv-stats{ max-width:1000px; margin:56px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; text-align:left; }
.nv-stats-2{ max-width:720px; grid-template-columns:repeat(2,1fr); }
.nv-stat-n{ font-size:48px; font-weight:300; letter-spacing:-0.05em; line-height:1; color:#0a0a0a; }
.nv-stat-t{ margin:14px 0 0; font-size:16px; line-height:1.5; letter-spacing:-0.01em; color:rgba(10,10,10,0.6); }
.nv-stat-s{ margin-top:10px; font-size:12.5px; color:rgba(10,10,10,0.4); }
@media (max-width:900px){
  .nv-two{ grid-template-columns:1fr !important; gap:48px !important; }
  .nv-row{ grid-template-columns:1fr !important; gap:10px !important; }
}
@media (max-width:640px){
  .nv-sec{ padding:80px 22px !important; }
  .nv-h1{ font-size:44px !important; }
  .nv-h2{ font-size:32px !important; }
  .nv-lead{ font-size:18px !important; }
  .nv-soft, .nv-stats{ grid-template-columns:1fr !important; }
  .nv-soft > div{ padding:26px 22px !important; }
  .nv-trust{ padding:56px 22px 0 !important; }
}
/* product mockups: an app window rising out of a paper-grid frame, the way the pages show the product */
.nv-frame{ position:relative; display:block; aspect-ratio:5 / 4; border-radius:24px; overflow:hidden; text-decoration:none;
           background-color:#F4F3EE;
           background-image:linear-gradient(rgba(10,10,10,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(10,10,10,0.05) 1px, transparent 1px);
           background-size:28px 28px; background-position:-1px -1px; }
.nv-app{ position:absolute; left:10%; right:10%; top:11%; bottom:-6%; background:#ffffff; border-radius:16px; overflow:hidden; text-align:left;
         box-shadow:0 1px 2px rgba(10,10,10,0.06), 0 24px 60px -30px rgba(10,10,10,0.35); transition:transform 300ms cubic-bezier(0.16,1,0.3,1); }
a.nv-frame:hover .nv-app{ transform:translateY(-6px); }
.nv-app-bar{ display:flex; align-items:center; gap:10px; height:38px; padding:0 14px; border-bottom:1px solid rgba(10,10,10,0.06); }
.nv-dots{ display:inline-flex; gap:5px; }
.nv-dots i{ display:block; width:7px; height:7px; border-radius:9999px; background:rgba(10,10,10,0.12); }
.nv-app-title{ font-size:12.5px; font-weight:500; color:rgba(10,10,10,0.6); }
.nv-app-body{ padding:18px; display:flex; flex-direction:column; gap:10px; font-family:'Inter',-apple-system,sans-serif; }
.nv-msg{ max-width:84%; padding:10px 13px; border-radius:16px; font-size:13px; line-height:1.45; letter-spacing:-0.005em; }
.nv-msg-me{ align-self:flex-end; background:#0a0a0a; color:#ffffff; border-bottom-right-radius:5px; }
.nv-msg-ai{ display:flex; gap:9px; align-items:flex-start; background:#F4F3EE; color:#0a0a0a; border-bottom-left-radius:5px; }
.nv-av{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:9999px; background:#0a0a0a; }
.nv-av img{ display:block; width:11px; height:11px; filter:brightness(0) invert(1); }
.nv-listing{ border:1px solid rgba(10,10,10,0.08); border-radius:14px; overflow:hidden; }
.nv-listing img{ display:block; width:100%; height:auto; aspect-ratio:16 / 8; object-fit:cover; }
.nv-listing-b{ padding:12px 14px 14px; }
.nv-listing-t{ display:flex; justify-content:space-between; gap:10px; font-size:14px; font-weight:500; color:#0a0a0a; }
.nv-listing-s{ margin-top:3px; font-size:12px; color:rgba(10,10,10,0.55); }
.nv-fit{ display:inline-flex; align-items:center; gap:5px; margin-top:9px; padding:4px 9px; border-radius:9999px; background:#EEF3EC; color:#2f5a2a; font-size:11.5px; font-weight:500; }
.nv-prof{ border:1px solid rgba(10,10,10,0.08); border-radius:14px; padding:14px 16px; }
.nv-prof-h{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:15px; font-weight:500; color:#0a0a0a; }
.nv-tag{ font-size:11px; font-weight:500; padding:3px 8px; border-radius:9999px; background:#F4F3EE; color:rgba(10,10,10,0.7); }
.nv-kv{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid rgba(10,10,10,0.06); font-size:12.5px; }
.nv-kv span{ color:rgba(10,10,10,0.55); }
.nv-kv b{ font-weight:500; color:#0a0a0a; text-align:right; }
.nv-prof-a{ display:flex; gap:8px; margin-top:10px; }
.nv-fake{ display:inline-flex; align-items:center; height:30px; padding:0 13px; border-radius:9999px; border:1px solid rgba(10,10,10,0.14); font-size:12.5px; font-weight:500; color:#0a0a0a; }
.nv-fake.dark{ background:#0a0a0a; border-color:#0a0a0a; color:#ffffff; }
.nv-prof-dim{ opacity:0.5; }
@media (max-width:760px){ .nv-frame{ aspect-ratio:4 / 5; } .nv-app{ left:6%; right:6%; top:8%; } }
.nv-trust{ padding:72px 32px 8px; }
.nv-trust-l{ margin:0 0 30px; text-align:center; font-size:14px; letter-spacing:-0.01em; color:rgba(10,10,10,0.5); }
.nv-logos{ list-style:none; margin:0 auto; padding:0; max-width:820px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:26px 44px; }
.nv-logos img{ display:block; height:var(--h); width:auto; filter:grayscale(1); opacity:0.7; }
@media (max-width:640px){
  .nv-logos{ gap:18px 24px !important; }
  .nv-logos li{ flex:0 0 calc(50% - 14px); display:flex; justify-content:center; }
  .nv-logos img{ height:calc(var(--h) * 0.78) !important; }
}
/* ---- icons, chips, reveal, the step scenes ---- */
.nv-ico{ display:block; margin-bottom:18px; }
.nv-chip{ position:absolute; z-index:3; display:flex; align-items:center; gap:10px; padding:11px 15px 11px 11px; border-radius:16px;
          background:#070A16; color:#ffffff; font-size:13px; line-height:1.3; letter-spacing:-0.01em; text-align:left;
          box-shadow:0 20px 40px -18px rgba(7,10,22,0.7); animation:nvFloat 6s ease-in-out infinite; }
.nv-chip b{ display:block; font-weight:500; }
.nv-chip i{ display:block; font-style:normal; font-size:12px; color:rgba(255,255,255,0.62); }
.nv-chip-l{ left:5%; bottom:9%; }
.nv-chip-r{ right:5%; bottom:12%; animation-delay:-3s; }
.nv-chip-ico{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:9999px; background:#ffffff; color:#070A16; }
@keyframes nvFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* reveal: the first frame only exists once the script is running */
.nv-js .nv-reveal{ opacity:0; transform:translateY(16px); transition:opacity 700ms cubic-bezier(0.16,1,0.3,1), transform 700ms cubic-bezier(0.16,1,0.3,1); transition-delay:var(--d, 0ms); }
.nv-js .nv-reveal.is-in{ opacity:1; transform:none; }
/* a FAQ answer starts closed only when the script that opens it runs; without it every answer shows */
.nv-js .nv-acc-a{ max-height:0; overflow:hidden; }

/* the step scenes: a paper-grid tile, the final frame is the base style */
.nv-srow{ display:grid; grid-template-columns:1fr 360px; gap:56px; align-items:center; padding:36px 0; border-top:1px solid rgba(10,10,10,0.08); text-align:left; }
.nv-srow h3{ margin:0; font-size:24px; font-weight:400; letter-spacing:-0.03em; line-height:1.2; color:#0a0a0a; }
.nv-srow p{ margin:10px 0 0; max-width:44ch; font-size:17px; line-height:1.55; letter-spacing:-0.01em; color:rgba(10,10,10,0.6); }
.nv-scene{ position:relative; width:100%; aspect-ratio:16 / 9; border-radius:18px; overflow:hidden; font-family:'Inter',-apple-system,sans-serif;
           background-color:#F4F3EE;
           background-image:linear-gradient(rgba(10,10,10,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(10,10,10,0.05) 1px, transparent 1px);
           background-size:24px 24px; background-position:-1px -1px; }

/* b1: the brief types itself, then Novo answers */
.nv-sc-b1{ display:flex; flex-direction:column; justify-content:center; gap:10px; padding:0 22px; }
.nv-sc-b1 .sc-me{ align-self:flex-end; max-width:92%; padding:10px 13px; border-radius:16px; border-bottom-right-radius:5px; background:#0a0a0a; color:#ffffff; font-size:13px; }
.nv-sc-b1 .sc-type{ display:inline-block; white-space:nowrap; }
.nv-sc-b1 .sc-ai{ align-self:flex-start; display:flex; align-items:center; gap:8px; padding:9px 13px 9px 9px; border-radius:16px; border-bottom-left-radius:5px; background:#ffffff; color:#0a0a0a; font-size:13px; box-shadow:0 8px 24px -16px rgba(10,10,10,0.5); }
.nv-js .nv-sc-b1:not(.is-in) .sc-type{ clip-path:inset(0 100% 0 0); }
.nv-js .nv-sc-b1:not(.is-in) .sc-ai{ opacity:0; transform:translateY(8px); }
.nv-sc-b1.is-in .sc-type{ animation:scType 1.6s steps(36, end) both; }
.nv-sc-b1.is-in .sc-ai{ animation:scRise 500ms 1.9s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes scType{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes scRise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* b2: six homes, the three that do not fit fade, the three that do get a tick */
.nv-sc-b2{ display:flex; align-items:center; justify-content:center; padding:16px; }
.nv-sc-b2 .sc-grid{ width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.nv-sc-b2 .sc-home{ position:relative; border-radius:10px; overflow:hidden; aspect-ratio:4 / 3; background:#e8e6df; }
.nv-sc-b2 .sc-home img{ display:block; width:100%; height:100%; object-fit:cover; }
.nv-sc-b2 .sc-drop{ opacity:0.18; transform:scale(0.92); filter:grayscale(1); }
.nv-sc-b2 .sc-ok{ position:absolute; right:6px; top:6px; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:9999px; background:#2f5a2a; color:#ffffff; }
.nv-js .nv-sc-b2:not(.is-in) .sc-drop{ opacity:1; transform:none; filter:none; }
.nv-js .nv-sc-b2:not(.is-in) .sc-ok{ opacity:0; transform:scale(0.4); }
.nv-sc-b2.is-in .sc-drop{ animation:scDrop 700ms 600ms ease both; }
.nv-sc-b2.is-in .sc-ok{ animation:scPop 400ms 1.3s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes scDrop{ from{ opacity:1; transform:none; filter:none; } to{ opacity:0.18; transform:scale(0.92); filter:grayscale(1); } }
@keyframes scPop{ from{ opacity:0; transform:scale(0.4); } to{ opacity:1; transform:none; } }

/* b3: you and the agent, joined; then the viewing is booked */
.nv-sc-b3{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.nv-sc-b3 .sc-pair{ display:flex; align-items:center; gap:0; }
.nv-sc-b3 .sc-face{ display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:9999px; background:#ffffff; color:#0a0a0a; font-size:12px; font-weight:500; box-shadow:0 8px 24px -14px rgba(10,10,10,0.5); }
.nv-sc-b3 .sc-agent{ background:#0a0a0a; color:#ffffff; }
.nv-sc-b3 .sc-link{ width:110px; height:10px; }
.nv-sc-b3 .sc-link line{ stroke:#0a0a0a; stroke-width:2; stroke-dasharray:4 5; }
.nv-sc-b3 .sc-pop, .nv-sc-a3 .sc-pop, .nv-sc-a0 .sc-pop{ display:inline-flex; align-items:center; gap:8px; padding:8px 13px 8px 8px; border-radius:14px; background:#070A16; color:#ffffff; font-size:12.5px; box-shadow:0 14px 30px -16px rgba(7,10,22,0.7); }
.nv-js .nv-sc-b3:not(.is-in) .sc-link{ clip-path:inset(0 100% 0 0); }
.nv-js .nv-sc-b3:not(.is-in) .sc-pop{ opacity:0; transform:translateY(8px) scale(0.96); }
.nv-sc-b3.is-in .sc-link{ animation:scType 900ms 300ms ease both; }
.nv-sc-b3.is-in .sc-pop{ animation:scRise 500ms 1.3s cubic-bezier(0.16,1,0.3,1) both; }

/* a0: one agreement, signed once (22 Oct 2026: the ticks on budget, financing and timeline went,
   since those are what the buyer says, not what anyone checked) */
.nv-sc-a0{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:14px; }
.nv-sc-a2{ display:flex; align-items:center; justify-content:center; padding:14px; }
.sc-card{ width:86%; padding:14px 16px; border-radius:14px; background:#ffffff; box-shadow:0 10px 30px -18px rgba(10,10,10,0.5); }
.nv-sc-a0 .sc-card{ width:78%; padding:12px 16px 8px; }
.sc-card-h{ font-size:14px; font-weight:500; color:#0a0a0a; margin-bottom:6px; }
.sc-line{ padding:6px 0; border-top:1px solid rgba(10,10,10,0.06); font-size:12px; color:rgba(10,10,10,0.6); }
.sc-sig{ display:block; width:116px; height:26px; margin-top:2px; }
.sc-sig path{ fill:none; stroke:#0a0a0a; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:260; stroke-dashoffset:0; }
.nv-js .nv-sc-a0:not(.is-in) .sc-sig path{ stroke-dashoffset:260; }
.nv-js .nv-sc-a0:not(.is-in) .sc-pop{ opacity:0; transform:translateY(8px) scale(0.96); }
.nv-sc-a0.is-in .sc-sig path{ animation:scSign 1.2s 300ms ease both; }
.nv-sc-a0.is-in .sc-pop{ animation:scRise 500ms 1.6s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes scSign{ from{ stroke-dashoffset:260; } to{ stroke-dashoffset:0; } }

/* a2: the agent accepts, the buyer is introduced. Two layers in one slot, cross-faded. */
.sc-brief{ font-size:12px; color:rgba(10,10,10,0.55); }
.sc-swap{ position:relative; height:30px; margin-top:12px; }
.sc-actions{ position:absolute; left:0; top:0; display:flex; gap:8px; opacity:0; }
.sc-btn{ display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:9999px; border:1px solid rgba(10,10,10,0.14); font-size:12px; font-weight:500; color:#0a0a0a; }
.sc-accept{ background:#0a0a0a; border-color:#0a0a0a; color:#ffffff; }
.sc-done{ position:absolute; left:0; top:0; display:inline-flex; align-items:center; gap:8px; padding:4px 12px 4px 4px; border-radius:9999px; background:#EEF3EC; color:#2f5a2a; font-size:12.5px; font-weight:500; }
.sc-done .nv-chip-ico{ background:#2f5a2a; color:#ffffff; }
.sc-cursor{ position:absolute; left:22%; top:60%; opacity:0; }
.nv-js .nv-sc-a2:not(.is-in) .sc-actions{ opacity:1; }
.nv-js .nv-sc-a2:not(.is-in) .sc-done{ opacity:0; }
.nv-sc-a2.is-in .sc-cursor{ animation:scCursor 1.6s ease both; }
.nv-sc-a2.is-in .sc-accept{ animation:scPress 300ms 1.1s ease both; }
.nv-sc-a2.is-in .sc-actions{ animation:scFadeOut 300ms 1.45s ease both; }
.nv-sc-a2.is-in .sc-done{ animation:scShow 400ms 1.55s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes scCursor{ 0%{ transform:translate(140px, 40px); opacity:0; } 20%{ opacity:1; } 65%{ transform:translate(0, 0); opacity:1; } 100%{ transform:translate(0, 0); opacity:0; } }
@keyframes scPress{ 0%,100%{ transform:none; } 50%{ transform:scale(0.92); } }
@keyframes scFadeOut{ from{ opacity:1; } to{ opacity:0; } }
@keyframes scShow{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* a3: viewing, offer, sold; then the fee */
.nv-sc-a3{ display:flex; flex-direction:column; justify-content:center; gap:12px; padding:0 26px; }
.nv-sc-a3 .sc-track{ position:relative; height:6px; border-radius:9999px; background:#E7E5DF; overflow:hidden; }
.nv-sc-a3 .sc-fill{ position:absolute; inset:0; background:#0a0a0a; border-radius:9999px; }
.nv-sc-a3 .sc-stops{ display:flex; justify-content:space-between; font-size:12px; font-weight:500; color:rgba(10,10,10,0.7); }
.nv-sc-a3 .sc-pop{ align-self:center; margin-top:6px; }
.nv-js .nv-sc-a3:not(.is-in) .sc-fill{ transform:scaleX(0); transform-origin:left; }
.nv-js .nv-sc-a3:not(.is-in) .sc-pop{ opacity:0; transform:translateY(8px) scale(0.96); }
.nv-sc-a3.is-in .sc-fill{ transform-origin:left; animation:scFill 1.4s 300ms cubic-bezier(0.65,0,0.35,1) both; }
.nv-sc-a3.is-in .sc-pop{ animation:scRise 500ms 1.8s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes scFill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

@media (max-width:900px){
  .nv-srow{ grid-template-columns:1fr !important; gap:24px !important; }
  .nv-scene{ max-width:420px; }
}
@media (max-width:640px){
  .nv-chip{ font-size:12px !important; padding:9px 12px 9px 9px !important; }
  .nv-chip i{ font-size:11px !important; }
  .nv-srow h3{ font-size:21px !important; }
  .nv-sc-b1 .sc-me{ font-size:12px !important; }
}