.vhero{position:relative;isolation:isolate;background:#F5F3EF;overflow:hidden}
.vhero__media{position:absolute;inset:0;background-image:var(--vhero-img);
  background-size:cover;background-position:center right;z-index:0}
.vhero__media::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    #F5F3EF 0%,
    rgba(245,243,239,.97) 26%,
    rgba(245,243,239,.86) 38%,
    rgba(245,243,239,.45) 50%,
    rgba(245,243,239,0) 62%)}
.vhero__inner{position:relative;z-index:1;display:flex;align-items:center;min-height:64vh}
.vhero__copy{max-width:33rem;padding-block:88px}
.vhero__eyebrow{margin:0 0 16px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.5;color:#1A1A1A}
.vhero__title{margin:0 0 20px;font-size:clamp(2rem,3.9vw,3.25rem);line-height:1.08;
  letter-spacing:-.022em;font-weight:500;color:#1A1A1A}
.vhero__text{margin:0 0 32px;font-size:17px;line-height:1.62;color:#5A5A5A;max-width:31ch}

.vhero .vhero__cta,
.vhero a.vhero__cta{display:inline-block;background:#1A1A1A;color:#FFFFFF;text-decoration:none;
  padding:16px 34px;border-radius:4px;font-size:15px;line-height:1;border:1px solid #1A1A1A;
  transition:background .15s,border-color .15s}
.vhero .vhero__cta:hover,
.vhero a.vhero__cta:hover{background:#333333;border-color:#333333;color:#FFFFFF}
.vhero .vhero__cta:focus-visible{outline:2px solid #1A1A1A;outline-offset:3px}

@media (max-width:900px){
  .vhero__media::before{background:rgba(0,0,0,.46)}
  .vhero__inner{min-height:auto}
  .vhero__copy{padding-block:72px;max-width:none}
  .vhero__eyebrow{opacity:.85;color:#fff}
  .vhero__title{color:#fff}
  .vhero__text{color:rgba(255,255,255,.9)}
  .vhero .vhero__cta,
  .vhero a.vhero__cta{background:#fff;color:#1A1A1A;border-color:#fff}
  .vhero .vhero__cta:hover,
  .vhero a.vhero__cta:hover{background:#EDEDED;color:#1A1A1A;border-color:#EDEDED}
}
