/* Start custom CSS for html, class: .elementor-element-dfbf870 *//* ==========================================================
   VANTAGE AV — LUXURY SYSTEM INQUIRY FORM
========================================================== */

.vx-contact{
  background:#000;
  padding:120px 20px;
  position:relative;
}

.vx-contact::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.08), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%);
  pointer-events:none;
}

.vx-contact__wrap{
  max-width:920px;
  margin:0 auto;
  position:relative;
  z-index:2;
}

.vx-form{
  padding:56px 48px 44px;
  border-radius:34px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(18px) saturate(1.1);
  box-shadow:
    0 70px 160px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* Header */
.vx-form__header{
  text-align:center;
  margin-bottom:24px;
}

.vx-form__title{
  font-size:clamp(24px,2.3vw,34px);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:760;
  color:#fff;
  margin:0 0 12px;
}

.vx-form__sub{
  max-width:58ch;
  margin:0 auto;
  font-size:14px;
  line-height:1.6;
  color:rgba(255,255,255,.62);
}

.vx-form__note{
  margin:18px auto 34px;
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,.56);
}

/* Grid */
.vx-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.vx-field{ position:relative; }
.vx-field--full{ grid-column:1/-1; }

/* Inputs */
.vx-input{
  width:100%;
  padding:18px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.42);
  color:#fff;
  font-size:14px;
  outline:none;
  transition:.22s;
}

.vx-input:hover{ background:rgba(0,0,0,.55); }
.vx-input:focus{
  border-color:rgba(255,255,255,.42);
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}

/* Floating labels */
.vx-label{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  pointer-events:none;
  transition:.22s;
}

.vx-label--textarea{
  top:22px;
  transform:none;
}

.vx-input:focus + .vx-label,
.vx-input:not(:placeholder-shown) + .vx-label{
  top:-10px;
  color:rgba(255,255,255,.8);
  background:#000;
  padding:0 8px;
  border-radius:999px;
}

/* Select */
.vx-select{
  appearance:none;
  cursor:pointer;
  background-image:
    linear-gradient(45deg,transparent 50%,rgba(255,255,255,.6) 50%),
    linear-gradient(135deg,rgba(255,255,255,.6) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;
  background-size:6px 6px;
  background-repeat:no-repeat;
}

.vx-textarea{ min-height:170px; resize:none; }

.vx-hint{
  margin-top:8px;
  font-size:12px;
  color:rgba(255,255,255,.48);
}

/* Button */
.vx-btn{
  margin-top:30px;
  width:100%;
  height:58px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  color:#fff;
  letter-spacing:.22em;
  text-transform:uppercase;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:.2s;
}

.vx-btn:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.16);
}

.vx-btn__arrow{ font-size:18px; }

.vx-micro{
  margin-top:14px;
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,.45);
}

/* Status */
.vx-status{
  margin-top:18px;
  padding:16px;
  border-radius:18px;
  display:none;
}

.vx-status--loading,
.vx-status--success,
.vx-status--error{ display:block; }

.vx-status--success{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.22);
}

.vx-status--error{
  background:rgba(255,80,80,.08);
  border:1px solid rgba(255,80,80,.35);
}

.vx-status__title{
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
  margin-bottom:6px;
}

.vx-status__sub{
  margin-top:10px;
  font-size:12px;
  color:rgba(255,255,255,.55);
}

/* Mobile */
@media (max-width:720px){
  .vx-form{ padding:42px 22px 34px; }
  .vx-grid{ grid-template-columns:1fr; }
}


/* ==========================================================
   CONTRAST & READABILITY PASS — LUXURY SAFE
   Paste at the very bottom
========================================================== */

/* Headline */
.vx-form__title{
  color: rgba(255,255,255,.98);
}

/* Subhead */
.vx-form__sub{
  color: rgba(255,255,255,.78);
}

/* Builder/Homeowner note */
.vx-form__note{
  color: rgba(255,255,255,.70);
}

/* Inputs background brighter */
.vx-input{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.26);
  color: rgba(255,255,255,.96);
}

/* Hover */
.vx-input:hover{
  background: rgba(255,255,255,.08);
}

/* Focus */
.vx-input:focus{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,.30);
}

/* Floating labels */
.vx-label{
  color: rgba(255,255,255,.70);
}

/* Active floating label */
.vx-input:focus + .vx-label,
.vx-input:not(:placeholder-shown) + .vx-label{
  color: rgba(255,255,255,.90);
  background: #000;
}

/* Placeholder text */
.vx-input::placeholder{
  color: rgba(255,255,255,.60);
}

/* Helper / hint text */
.vx-hint{
  color: rgba(255,255,255,.68);
}

/* Textarea placeholder */
.vx-textarea::placeholder{
  color: rgba(255,255,255,.65);
}

/* Select arrow */
.vx-select{
  background-color: rgba(255,255,255,.06);
}

/* Button — more contrast */
.vx-btn{
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.22),
    rgba(255,255,255,.10)
  );
  border-color: rgba(255,255,255,.38);
  color: #fff;
}

/* Button hover */
.vx-btn:hover{
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.30),
    rgba(255,255,255,.14)
  );
}

/* Micro copy */
.vx-micro{
  color: rgba(255,255,255,.70);
}

/* Success message */
.vx-status--success{
  color: rgba(255,255,255,.92);
}

/* Error message */
.vx-status--error{
  color: rgba(255,200,200,.95);
}


/* ==========================================================
   FINAL INPUT CONTRAST FIX — READABILITY FIRST
========================================================== */

/* Stronger input background */
.vx-input,
.vx-select,
.vx-textarea{
  background: rgba(255,255,255,.14) !important;
  color: #ffffff !important;
  font-weight: 500;
}

/* On hover */
.vx-input:hover,
.vx-select:hover,
.vx-textarea:hover{
  background: rgba(255,255,255,.18) !important;
}

/* On focus */
.vx-input:focus,
.vx-select:focus,
.vx-textarea:focus{
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.65) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.45),
    0 8px 30px rgba(0,0,0,.45);
}

/* Typed text (this is the key fix) */
.vx-input,
.vx-textarea,
.vx-select{
  -webkit-text-fill-color: #ffffff !important; /* Safari / autofill */
  caret-color: #ffffff;
}

/* Placeholder text */
.vx-input::placeholder,
.vx-textarea::placeholder{
  color: rgba(255,255,255,.65) !important;
}

/* Floating labels */
.vx-label{
  color: rgba(255,255,255,.85) !important;
}

/* Active floating label */
.vx-input:focus + .vx-label,
.vx-input:not(:placeholder-shown) + .vx-label{
  color: #ffffff !important;
  background: #000;
}

/* Autofill fix (CRITICAL for Safari & Chrome) */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 0 0px 1000px rgba(255,255,255,.22) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}/* End custom CSS */