/* ==========================================================================
   form.css - the lead-capture form itself: card, fields, honeypot, status.
   Shared by the contact page and the homepage's closing band, so it lives
   apart from contact.css (which holds that page's grid, side card and
   newsletter).
   ========================================================================== */
.vr-form{background:#fff; border:1px solid var(--vr-line); border-radius:8px; padding:2.2rem; box-shadow:0 10px 30px rgba(31,42,46,.07);}
/* align-items:end keeps the inputs on a shared baseline even if a label wraps
   to two lines at narrow widths. */
.vr-form__row{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; align-items:end;}
.vr-form label{
  display:block; font-family:var(--vr-ui); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--vr-stone); line-height:1.4; min-height:1.4em;
  margin-bottom:.4rem;
}
.vr-form input[type="text"], .vr-form input[type="email"], .vr-form input[type="tel"], .vr-form select, .vr-form textarea{
  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:.7rem .9rem; background:var(--vr-cream);
  transition:border-color .2s;
}
/* Native select chrome renders at a different height than the text inputs, so
   we draw our own caret and match the box exactly. */
.vr-form select{
  appearance:none; -webkit-appearance:none; padding-right:2.4rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%2372736F' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .95rem center;
}
.vr-form select:invalid{color:var(--vr-stone);}
.vr-form input:focus, .vr-form select:focus, .vr-form textarea:focus{outline:none; border-color:var(--vr-blush);}
.vr-form__field{margin-bottom:1.2rem;}
.vr-form textarea{min-height:120px; resize:vertical;}
.vr-form__guides{display:flex; flex-wrap:wrap; gap:1.2rem; margin-bottom:1.4rem;}
.vr-form__check{display:flex; align-items:center; gap:.5rem; font-family:var(--vr-ui); font-size:.85rem; color:var(--vr-charcoal);}
.vr-form__check input{width:auto;}
/* Turnstile renders at data-size="flexible", so it fills the card's width and
   only needs the same gap the fields above it use. The newsletter card's form
   is a flex column with its own gap, so it needs nothing. */
.vr-form .cf-turnstile{margin-bottom:1.2rem;}
.vr-form__submit{width:100%; border:0;}
.vr-form__note{font-size:.8rem; color:var(--vr-stone); margin-top:1rem; text-align:center;}
.vr-form__status{margin-top:1rem; font-family:var(--vr-ui); font-size:.9rem; display:none;}
.vr-form__status.is-success{display:block; color:var(--vr-teal);}
.vr-form__status.is-error{display:block; color:#a8433a;}
/* Honeypot. Selector has to out-specify `.vr-form input[type="text"]{width:100%}`
   above, or it renders a full-width element parked off-canvas. */
.vr-form input.vr-hp, .vr-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}

@media (max-width:520px){
  .vr-form__row{grid-template-columns:1fr;}
  /* Turnstile's iframe will not render below 300px, whatever the container
     does, and at data-size="flexible" that floor becomes the widget's
     min-content width. On a phone the card's content box is ~255px, so the
     widget widened the card itself: the left edge stayed pinned to the gutter
     and the right edge ran past the viewport, which reads as the form sitting
     off to the right. Trim the card's padding here and let just this one row
     borrow it back, so the widget clears 300px and the card stays inside the
     gutters. Holds down to a ~350px viewport, below every current phone. */
  .vr-form{padding:1.5rem;}
  .vr-form .cf-turnstile{margin-inline:-1.5rem;}
}