/* ==========================================================================
   contact.css - contact page layout.
   The form's own styles are in form.css, shared with the homepage and the
   buyers/sellers closing bands.

   The page used to be a photo hero over a two-column grid whose right-hand
   column stacked the address card on top of a newsletter card. Three problems:
   the newsletter competed with the address for the one spot a visitor looks
   for a phone number, the hero's scrim flattened its photograph, and the
   photography of the team had nowhere to live. Now: a monogram hero, the team
   portrait beside the form, and the newsletter in its own band underneath.
   ========================================================================== */
.vr-contact{padding-block:var(--vr-section-y); background:var(--vr-cream);}
.vr-contact__grid{
  max-width:var(--vr-maxw); margin:0 auto; padding-inline:var(--vr-gutter);
  display:grid; grid-template-columns:1.35fr 1fr; gap:3rem; align-items:start;
}


/* ==========================================================================
   Team portrait. Shot on a white seamless, which is why it is framed rather
   than bled: against the cream canvas an unframed white backdrop has no edge
   and the figures read as floating. The hairline and radius are the same ones
   .vr-nmap__frame uses on the neighborhood pages.
   ========================================================================== */
.vr-contact__photo{
  margin:0; border:1px solid var(--vr-line); border-radius:8px; overflow:hidden;
  background:var(--vr-ivory); box-shadow:0 12px 32px rgba(31,42,46,.08);
}
.vr-contact__photo img{display:block; width:100%; height:auto;}

/* ==========================================================================
   Details row. Hairline-framed 3-up, the same device the stats band uses, so
   the two read as one family. Sits under the grid rather than beside the form,
   which is what lets the photo and the form finish level.
   ========================================================================== */
.vr-contact__details{
  max-width:var(--vr-maxw); margin:3.2rem auto 0; padding-inline:var(--vr-gutter);
  display:grid; grid-template-columns:repeat(3,1fr);
}
.vr-contact__details > div{border-block:1px solid var(--vr-line);}
.vr-contact__detail{padding:1.8rem 1.5rem; text-align:center;}
.vr-contact__details > div + div{border-left:1px solid var(--vr-line);}
.vr-contact__detail h2{
  font-family:var(--vr-ui); font-weight:500; font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--vr-blush); margin-bottom:.7rem;
}
.vr-contact__detail a{
  display:block; font-family:var(--vr-serif); font-size:1.18rem; line-height:1.45;
  color:var(--vr-teal); text-decoration:none; transition:color .2s;
}
.vr-contact__detail a:hover{color:var(--vr-blush);}

/* ==========================================================================
   Newsletter band. Deliberately quiet and deliberately last: it is the least
   important thing on the page. Sand rather than Ink, because the footer
   directly below is Ink and two dark blocks in a row merge into one.
   ========================================================================== */
.vr-nl{background:var(--vr-sand); padding-block:var(--vr-section-y); text-align:center;}
.vr-nl__wrap{max-width:540px; margin:0 auto; padding-inline:var(--vr-gutter);}
.vr-nl__head{
  font-weight:500; font-size:clamp(1.6rem,3.2vw,2.1rem); color:var(--vr-teal);
  line-height:1.2; margin-bottom:.6rem; text-wrap:balance;
}
.vr-nl__sub{font-size:1rem; color:var(--vr-charcoal); margin:0 auto; max-width:46ch;}
.vr-nl form{display:flex; flex-direction:column; gap:.8rem; margin-top:1.9rem; text-align:left;}
.vr-nl input[type="email"]{
  width:100%; font-family:var(--vr-ui); font-size:.95rem; line-height:1.5;
  color:var(--vr-charcoal); border:1px solid var(--vr-line); border-radius:4px;
  padding:.8rem .9rem; background:#fff; transition:border-color .2s;
}
.vr-nl input[type="email"]::placeholder{color:var(--vr-stone);}
.vr-nl input[type="email"]:focus{outline:none; border-color:var(--vr-blush);}
.vr-nl .vr-btn{border:0; width:100%;}
.vr-nl .vr-form__status{margin-top:.2rem; font-family:var(--vr-ui); font-size:.9rem; display:none; text-align:center;}
.vr-nl .vr-form__status.is-success{display:block; color:var(--vr-teal);}
.vr-nl .vr-form__status.is-error{display:block; color:#a8433a;}

@media (max-width:860px){
  /* minmax(0,1fr): see the note in cta.css -- a bare 1fr lets the form card's
     min-content push the track past the viewport. */
  .vr-contact__grid{grid-template-columns:minmax(0,1fr);}
  /* Stacked, constrain the WIDTH rather than capping the height: a full-bleed
     3:4 portrait is ~930px tall at the 860px breakpoint, but cropping it to fit
     cuts the figures off at the waist, and full length is the whole point of
     this frame. Centred at 420px it stays intact at every stacked width. */
  .vr-contact__photo{max-width:420px; margin-inline:auto;}
  .vr-contact__details{grid-template-columns:1fr;}
  .vr-contact__details > div + div{border-left:0; border-top:0;}
  .vr-contact__details > div{border-block:0; border-top:1px solid var(--vr-line);}
  .vr-contact__details > div:last-child{border-bottom:1px solid var(--vr-line);}
}