/* ==========================================================================
   process.css - your-next-move.html: step-by-step process + routing cards
   ========================================================================== */
.vr-steps{padding-block:var(--vr-section-y); background:var(--vr-cream); text-align:center;}
.vr-steps__head{font-weight:500; font-size:clamp(1.9rem,4vw,2.6rem); color:var(--vr-teal); line-height:1.15; margin-bottom:.6rem;}
.vr-steps__sub{font-size:1.1rem; max-width:56ch; margin:0 auto 3rem; color:var(--vr-charcoal);}
.vr-steps__grid{
  max-width:var(--vr-maxw); margin:0 auto; padding-inline:var(--vr-gutter);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:left;
}
.vr-step{background:#fff; border:1px solid var(--vr-line); border-radius:8px; padding:1.8rem 1.6rem;}
.vr-step__num{
  display:flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem;
  border-radius:50%; background:var(--vr-teal); color:#fff; font-family:var(--vr-ui);
  font-weight:500; font-size:.95rem; margin-bottom:1.1rem;
}
.vr-step__title{font-family:var(--vr-serif); font-weight:600; font-size:1.25rem; color:var(--vr-teal); margin-bottom:.5rem;}
.vr-step__text{font-size:.98rem; line-height:1.55; color:var(--vr-charcoal);}

.vr-routes{padding-block:var(--vr-section-y); background:var(--vr-sand);}
.vr-routes__wrap{max-width:var(--vr-maxw); margin:0 auto; padding-inline:var(--vr-gutter); text-align:center;}
.vr-routes__head{font-weight:500; font-size:clamp(1.9rem,4vw,2.6rem); color:var(--vr-teal); margin-bottom:3rem;}
.vr-routes__grid{display:grid; grid-template-columns:1fr 1fr; gap:2rem;}
/* Typographic cards, deliberately photo-free so they don't compete with the
   photographic CTA band that follows this section. */
.vr-route{
  position:relative; display:flex; text-align:left;
  min-height:300px; border-radius:8px; overflow:hidden; text-decoration:none;
  padding:2.6rem 2.4rem 2.4rem; background:var(--vr-ivory);
  border:1px solid var(--vr-line); color:var(--vr-charcoal);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.vr-route::before{content:''; position:absolute; inset:0 0 auto 0; height:3px; background:var(--vr-blush);}
/* outlined circle motif, echoes the neighborhood pages */
.vr-route::after{
  content:''; position:absolute; right:-130px; bottom:-150px; width:360px; height:360px;
  border-radius:50%; border:1px solid rgba(var(--vr-peacock-rgb),.22); pointer-events:none;
}
.vr-route:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(31,42,46,.1); border-color:var(--vr-blush);}
.vr-route__inner{position:relative; display:flex; flex-direction:column; width:100%;}
.vr-route__eyebrow{font-family:var(--vr-ui); font-weight:500; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--vr-stone); margin-bottom:.6rem;}
.vr-route__title{font-family:var(--vr-serif); font-weight:600; font-size:clamp(1.7rem,3vw,2.1rem); line-height:1.15; color:var(--vr-teal); margin-bottom:.7rem;}
.vr-route__title::after{content:''; display:block; width:40px; height:2px; background:var(--vr-blush); margin-top:.9rem;}
.vr-route__text{font-size:1.02rem; color:var(--vr-charcoal); margin:.9rem 0 auto; max-width:34ch;}
.vr-route__arrow{font-family:var(--vr-ui); font-weight:500; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--vr-blush); margin-top:1.8rem;}
.vr-route:hover .vr-route__arrow{color:var(--vr-teal);}

@media (max-width:960px){
  .vr-steps__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .vr-steps__grid{grid-template-columns:1fr;}
  .vr-routes__grid{grid-template-columns:1fr;}
  /* the decorative arc reads as a stray line behind narrow copy */
  .vr-route{min-height:0; padding:2.2rem 1.8rem 2rem;}
  .vr-route::after{display:none;}
  .vr-route__text{margin-bottom:0;}
  .vr-route__arrow{margin-top:1.4rem;}
}

/* The two cards above are the whole point of this section, but a reader who is
   buying AND selling -- or who just wants a person -- had no route out of here
   except by picking one of them. */
.vr-routes__skip{
  margin-top:2.2rem; font-family:var(--vr-ui); font-weight:300; font-size:.95rem;
  letter-spacing:.02em; color:var(--vr-charcoal);
}
.vr-routes__skip a{color:var(--vr-blush); text-decoration:none; border-bottom:1px solid currentColor;}
.vr-routes__skip a:hover{color:var(--vr-teal);}