/* ==========================================================================
   cta.css, closing "a better way to get home" band. On the homepage it also
   carries the contact form and is the hero CTA's scroll target.
   ========================================================================== */
.vr-cta{
  position:relative; text-align:center; padding-block:clamp(72px,10vw,120px);
  background:url('../images/cta.jpg') center/cover no-repeat;
}
.vr-cta__overlay{position:absolute; inset:0; background:rgba(31,42,46,.6);}
.vr-cta__inner{position:relative; color:#fff; padding-inline:var(--vr-gutter);}
.vr-cta__head{font-weight:500; font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.1; margin:.2rem 0 .6rem;}
.vr-cta__head em{font-style:italic; color:var(--vr-canvas);}
.vr-cta__sub{font-family:var(--vr-ui); font-weight:300; letter-spacing:.06em; font-size:1.05rem; margin-bottom:2rem; color:rgba(255,255,255,.9);}

/* --------------------------------------------------------------------------
   Form variant. The homepage's closing band doubles as its contact
   destination, so the copy moves left and the form card sits beside it.
   -------------------------------------------------------------------------- */
.vr-cta--form{
  text-align:left;
  /* cleared by the sticky header when the hero CTA scrolls here */
  scroll-margin-top:clamp(60px,8vw,84px);
}
.vr-cta--form .vr-cta__inner{
  max-width:var(--vr-maxw); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
/* Reversed lockup in place of the text eyebrow: on a photograph the actual
   mark does more for the boutique feel than a line of letter-spaced caps. */
.vr-cta__logo{display:block; width:clamp(190px,24vw,270px); height:auto; margin-bottom:1.5rem;}
/* The copy sits over the porch railings and columns, which are the brightest
   part of cta.jpg. A flat 60% wash left the smaller lines barely legible, and
   darkening the whole thing evenly just dulls the photograph -- so the scrim is
   weighted toward the copy column and lifts off the picture on the right. */
.vr-cta--form .vr-cta__overlay{
  background:linear-gradient(100deg,
    rgba(18,25,28,.90) 0%,
    rgba(18,25,28,.82) 34%,
    rgba(26,35,39,.60) 56%,
    rgba(31,42,46,.44) 100%);
}
.vr-cta--form .vr-cta__sub{margin-bottom:0; color:rgba(255,255,255,.94);}
.vr-cta--form .vr-cta__note{
  font-family:var(--vr-ui); font-weight:300; font-size:.85rem; letter-spacing:.04em;
  color:rgba(255,255,255,.88); margin-top:1.6rem; padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.26);
}
.vr-cta--form .vr-cta__note a{color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.45);}
.vr-cta--form .vr-cta__note a:hover{border-bottom-color:#fff;}
/* The form card is a light surface, so its own type colours apply unchanged. */
.vr-cta--form .vr-form{color:var(--vr-charcoal);}

@media (max-width:860px){
  /* minmax(0,1fr), not 1fr: a bare 1fr track takes an `auto` minimum, so any
     item with a min-content wider than the screen (the Turnstile row) widens
     the track instead of being constrained by it. */
  .vr-cta--form .vr-cta__inner{grid-template-columns:minmax(0,1fr);}
  /* Stacked, the copy is full width with the form under it, so the scrim has to
     run top-to-bottom instead of left-to-right. */
  .vr-cta--form .vr-cta__overlay{
    background:linear-gradient(180deg, rgba(18,25,28,.88) 0%, rgba(18,25,28,.78) 45%, rgba(31,42,46,.62) 100%);
  }
}