/* =========================================================
   TourVoz Contact
   Hero + Contact Form
   ========================================================= */


/* =========================================================
   Container
   ========================================================= */

.tv-contact-container{
  width:min(1200px,calc(100% - 48px));
  margin:0 auto;
}


/* =========================================================
   Hero
   ========================================================= */

.tv-contact-hero{
  position:relative;
  overflow:hidden;

  padding:104px 0 112px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #fbfaff 50%,
      #f6f3ff 100%
    );
}

.tv-contact-hero::before{
  content:"";

  position:absolute;
  top:-180px;
  right:-160px;

  width:560px;
  height:560px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(105,86,232,.11) 0%,
      rgba(105,86,232,0) 70%
    );

  pointer-events:none;
}

.tv-contact-hero::after{
  content:"";

  position:absolute;
  left:-180px;
  bottom:-260px;

  width:520px;
  height:520px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(240,168,90,.07) 0%,
      rgba(240,168,90,0) 72%
    );

  pointer-events:none;
}


/* =========================================================
   Layout
   ========================================================= */

.tv-contact-hero__grid{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(480px,1.08fr);
  gap:76px;

  align-items:start;
}


/* =========================================================
   Left Content
   ========================================================= */

.tv-contact-hero__content{
  min-width:0;
  max-width:620px;
}

.tv-contact-eyebrow{
  display:inline-flex;
  align-items:center;

  margin-bottom:22px;

  color:#6956e8;

  font-size:12px;
  font-weight:700;
  line-height:1;
  letter-spacing:.14em;
}

.tv-contact-hero h1{
  margin:0;

  color:#0c1020;

  font-size:clamp(46px,4.7vw,64px);
  font-weight:750;
  line-height:1.08;
  letter-spacing:-.045em;
}

.tv-contact-gradient{
  display:block;

  margin-top:6px;

  background:
    linear-gradient(
      120deg,
      #6956e8 0%,
      #8c75f4 52%,
      #f0a85a 118%
    );

  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.tv-contact-hero__lead{
  max-width:600px;

  margin:28px 0 0;

  color:#6f7485;

  font-size:17px;
  line-height:1.85;
}


/* =========================================================
   Contact Points
   ========================================================= */

.tv-contact-hero__points{
  display:grid;

  margin-top:38px;

  border-top:1px solid #dedfe7;
}

.tv-contact-hero__point{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:14px;

  padding:18px 0;

  border-bottom:1px solid #dedfe7;
}

.tv-contact-hero__point > span{
  padding-top:3px;

  color:#6956e8;

  font-size:9px;
  font-weight:750;
  line-height:1.5;
  letter-spacing:.08em;
}

.tv-contact-hero__point strong{
  display:block;

  color:#25293a;

  font-size:15px;
  font-weight:700;
  line-height:1.45;
}

.tv-contact-hero__point small{
  display:block;

  margin-top:5px;

  color:#818697;

  font-size:12px;
  line-height:1.65;
}


/* =========================================================
   Trial CTA Row
   ========================================================= */

.tv-contact-hero__note{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;

  margin-top:28px;

  color:#858a99;

  font-size:11px;
  line-height:1.6;
}

.tv-contact-hero__note-dot{
  flex:0 0 auto;

  width:6px;
  height:6px;

  border-radius:50%;

  background:#6956e8;
}

/*
 * Text CTA uses the global .tv-text-link component
 * defined in global.css.
 */
.tv-contact-hero__note .tv-text-link{
  margin-left:2px;
}


/* =========================================================
   Form Card
   ========================================================= */

.tv-contact-form-card{
  position:relative;

  overflow:hidden;

  border:1px solid rgba(105,86,232,.14);
  border-radius:26px;

  background:#fff;

  box-shadow:
    0 28px 70px rgba(27,31,50,.08),
    0 8px 24px rgba(105,86,232,.04);
}

.tv-contact-form-card__head{
  padding:30px 32px 26px;

  border-bottom:1px solid #e8e9f0;

  background:
    linear-gradient(
      135deg,
      #fbfaff,
      #f5f2ff
    );
}

.tv-contact-form-card__head > span{
  display:block;

  color:#6956e8;

  font-size:9px;
  font-weight:750;
  line-height:1.4;
  letter-spacing:.12em;
}

.tv-contact-form-card__head h2{
  margin:8px 0 0;

  color:#171b2c;

  font-size:26px;
  font-weight:750;
  line-height:1.3;
}

.tv-contact-form-card__head p{
  margin:10px 0 0;

  color:#74798a;

  font-size:13px;
  line-height:1.75;
}

.tv-contact-form-card__body{
  padding:30px 32px;
}

.tv-contact-form-card__footer{
  padding:16px 32px 20px;

  border-top:1px solid #e8e9f0;

  background:#fafbfc;
}

.tv-contact-form-card__footer span{
  color:#8a8f9e;

  font-size:11px;
  line-height:1.6;
}


/* =========================================================
   Contact Form Wrapper
   ========================================================= */

.tourvoz-contact-form-wrap{
  width:100%;
  min-width:0;
}

.tourvoz-contact-form{
  display:grid;
  gap:18px;

  width:100%;
}


/* =========================================================
   Form Fields
   ========================================================= */

.tourvoz-contact-field{
  min-width:0;
}

.tourvoz-contact-field label{
  display:block;

  margin:0 0 7px;

  color:#34394a;

  font-size:12px;
  font-weight:650;
  line-height:1.5;
}

.tourvoz-contact-field label > span{
  margin-left:2px;

  color:#6956e8;
}


/* =========================================================
   Inputs
   ========================================================= */

.tv-contact-form-card input[type="text"],
.tv-contact-form-card input[type="email"],
.tv-contact-form-card input[type="url"],
.tv-contact-form-card input[type="tel"],
.tv-contact-form-card select,
.tv-contact-form-card textarea{
  display:block;

  box-sizing:border-box;

  width:100%;
  margin:0;

  border:1px solid #dedfe7;
  border-radius:11px;

  background:#fff;

  color:#25293a;

  font-family:inherit;
  font-size:13px;

  outline:none;

  box-shadow:none;

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.tv-contact-form-card input[type="text"],
.tv-contact-form-card input[type="email"],
.tv-contact-form-card input[type="url"],
.tv-contact-form-card input[type="tel"],
.tv-contact-form-card select{
  min-height:48px;

  padding:0 14px;
}

.tv-contact-form-card textarea{
  min-height:140px;

  padding:13px 14px;

  line-height:1.65;

  resize:vertical;
}

.tv-contact-form-card input::placeholder,
.tv-contact-form-card textarea::placeholder{
  color:#a5a9b5;
  opacity:1;
}

.tv-contact-form-card input:focus,
.tv-contact-form-card select:focus,
.tv-contact-form-card textarea:focus{
  border-color:rgba(105,86,232,.55);

  box-shadow:
    0 0 0 3px rgba(105,86,232,.08);
}


/* =========================================================
   Select
   ========================================================= */

.tv-contact-form-card select{
  cursor:pointer;

  color:#25293a;

  background-color:#fff;
}


/* =========================================================
   Submit Button
   ========================================================= */

.tourvoz-contact-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  width:auto;
  min-height:48px;

  margin-top:2px;
  padding:0 20px;

  border:1px solid #6956e8;
  border-radius:11px;

  background:#6956e8;

  color:#fff;

  font-family:inherit;
  font-size:13px;
  font-weight:700;
  line-height:1;

  cursor:pointer;

  box-shadow:
    0 10px 24px rgba(105,86,232,.20);

  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.tourvoz-contact-submit > span:last-child{
  display:inline-block;

  transition:transform 180ms ease;
}

.tourvoz-contact-submit:hover{
  border-color:#5846d6;
  background:#5846d6;

  color:#fff;

  transform:translateY(-1px);

  box-shadow:
    0 14px 28px rgba(105,86,232,.26);
}

.tourvoz-contact-submit:hover > span:last-child{
  transform:translateX(4px);
}

.tourvoz-contact-submit:focus-visible{
  outline:3px solid rgba(105,86,232,.18);
  outline-offset:2px;
}


/* =========================================================
   Success / Error Messages
   ========================================================= */

.tourvoz-contact-message{
  display:flex;
  align-items:flex-start;
  gap:11px;

  width:100%;

  padding:14px 15px;

  border:1px solid #e5e7ef;
  border-radius:11px;

  font-size:12px;
  line-height:1.65;
}

.tourvoz-contact-message__icon{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;

  width:22px;
  height:22px;

  margin-top:1px;

  border-radius:50%;

  font-size:11px;
  font-weight:800;
  line-height:1;
}

.tourvoz-contact-message strong{
  display:block;

  margin:0 0 3px;

  color:#202437;

  font-size:13px;
  font-weight:700;
}

.tourvoz-contact-message p{
  margin:0;

  color:#6f7485;

  font-size:12px;
  line-height:1.65;
}


/* Success */

.tourvoz-contact-message.is-success{
  border-color:#ded9ff;

  background:#faf9ff;
}

.tourvoz-contact-message.is-success
.tourvoz-contact-message__icon{
  background:#f0edff;

  color:#6956e8;
}


/* Error */

.tourvoz-contact-message.is-error{
  border-color:#f1d5d5;

  background:#fffafa;

  color:#8f3b3b;
}

.tourvoz-contact-message.is-error
.tourvoz-contact-message__icon{
  background:#fbeaea;

  color:#a34343;
}


/* =========================================================
   Honeypot
   Never visible to real users
   ========================================================= */

.tourvoz-contact-honeypot{
  position:absolute !important;

  left:-9999px !important;
  top:auto !important;

  width:1px !important;
  height:1px !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;

  opacity:0 !important;

  pointer-events:none !important;

  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;

  white-space:nowrap !important;
}

.tourvoz-contact-honeypot label,
.tourvoz-contact-honeypot input{
  position:absolute !important;

  width:1px !important;
  height:1px !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
}


/* =========================================================
   Responsive — Tablet
   ========================================================= */

@media (max-width:1024px){

  .tv-contact-hero{
    padding:88px 0 96px;
  }

  .tv-contact-hero__grid{
    grid-template-columns:1fr;
    gap:52px;
  }

  .tv-contact-hero__content{
    max-width:760px;
  }

  .tv-contact-form-card{
    max-width:760px;
  }

}


/* =========================================================
   Responsive — Mobile
   ========================================================= */

@media (max-width:767px){

  .tv-contact-container{
    width:min(100% - 32px,1200px);
  }

  .tv-contact-hero{
    padding:54px 0 68px;
  }

  .tv-contact-hero__grid{
    gap:36px;
  }

  .tv-contact-eyebrow{
    margin-bottom:17px;

    font-size:10px;
    letter-spacing:.13em;
  }

  .tv-contact-hero h1{
    font-size:36px;
    line-height:1.08;
  }

  .tv-contact-hero__lead{
    margin-top:20px;

    font-size:14px;
    line-height:1.75;
  }

  .tv-contact-hero__points{
    margin-top:28px;
  }

  .tv-contact-hero__point{
    padding:16px 0;
  }

  .tv-contact-hero__note{
    margin-top:22px;
  }

  .tv-contact-form-card{
    border-radius:20px;
  }

  .tv-contact-form-card__head{
    padding:24px 22px 22px;
  }

  .tv-contact-form-card__head h2{
    font-size:23px;
  }

  .tv-contact-form-card__body{
    padding:24px 22px;
  }

  .tv-contact-form-card__footer{
    padding:15px 22px 18px;
  }

  .tourvoz-contact-form{
    gap:16px;
  }

  .tourvoz-contact-submit{
    width:100%;
  }

}


/* =========================================================
   Responsive — Small Mobile
   ========================================================= */

@media (max-width:544px){

  .tv-contact-hero{
    padding:48px 0 62px;
  }

  .tv-contact-hero h1{
    font-size:34px;
  }

  .tv-contact-form-card__head{
    padding:22px 20px 20px;
  }

  .tv-contact-form-card__body{
    padding:22px 20px;
  }

  .tv-contact-form-card__footer{
    padding:14px 20px 17px;
  }

}