/* ===== Hero / Contact Form Module ===== */
[data-chero] {
  --chero-band: 360px;
  position: relative;
  background: #F4F6FA;
  padding: 50px 40px clamp(48px, 5vw, 64px);
  text-align: center;
}

[data-chero-band] {
  position: absolute; left: 0; right: 0; top: 0;
  height: var(--chero-band);
  background:
    radial-gradient(120% 160% at 50% -30%, rgba(47,107,255,.20) 0%, rgba(47,107,255,0) 60%),
    linear-gradient(180deg, #F6F9FF 0%, #FBFCFF 46%, #fff 100%);
  pointer-events: none;
}
/* --chero-band is kept in sync with [data-chero-upper]'s real bottom edge
   by module.js (ResizeObserver), so this full-width line always lands
   exactly at the same height as the content below it - not a fixed guess. */
[data-chero-band]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: rgba(47,107,255,.14);
}

[data-chero-grid] {
  position: relative;
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.04fr .96fr;
  gap: clamp(44px, 6vw, 92px);
  align-items: start; text-align: left;
}

[data-chero-copy]  { padding-top: 0; }
[data-chero-copy] h1 { max-width: 662px; }

.hero-heading {
  font-size: clamp(30px, 3.55vw, 49px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.07;
  color: #10141F;
  text-wrap: balance;
  margin-top: 10px;
}

.chero-eyebrow {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #2F6BFF;
  opacity: 0;
  animation: slideFromLeft .5s .2s cubic-bezier(.22,.61,.36,1) both;
}
.chero-eyebrow + .hero-heading { margin-top: 14px; }
.chero-eyebrow + h2 { margin-top: 10px; }

[data-chero-upper] {
  display: flex; flex-direction: column; justify-content: flex-start;
  padding-bottom: 24px;
}
[data-chero-lower] { margin-top: 0; padding-top: 52px; }

/* ---- Trust points ---- */

[data-chero-points] {
  margin-top: 24px; max-width: 512px; list-style: none;
  display: flex; flex-direction: column; gap: 13px; padding: 0;
}
/* [data-chero-points] li {
  display: flex; align-items: center; gap: 11px;
  font-size: 15.5px; font-weight: 600; color: #39414F;
  text-wrap: pretty;
} */

[data-chero-points] li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 15.5px; font-weight: 600; color: #39414F;
  text-wrap: pretty;
}

/* .chero-icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; color: #2F6BFF;
} */
.chero-icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; color: #2F6BFF;
  margin-top: 2px;
}
.chero-intro p
{
 margin-top:10px !important;
}

/* ---- Intro paragraph / contact list ---- */

.chero-intro {
  
  max-width: 512px; font-size: 15.5px; line-height: 1.7; color: #5A6472; padding: 0px 70px;
  text-wrap: pretty; margin: 0;
}


.chero-contact-list {
  margin-top: 18px; list-style: none; padding: 0;
  display: flex; flex-direction: column; gap: 12px; font-size: 15.5px; 
}
.chero-contact-list li {
  display: flex; align-items: center; gap: 11px; color: #39414F;
}
.chero-contact-list a {
  color: #2F6BFF; font-weight: 600;
}

/* ---- Trusted-by logo strip ---- */

.chero-logos {
  margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(47,107,255,.12);
}
.chero-logos-eyebrow {
  margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #2F6BFF;
}
.chero-logos-heading {
  margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #10141F;
}
.chero-logos-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
}
.chero-logo-img {
  height: 68px; width: auto; opacity: .55; filter: grayscale(1);
  transition: opacity .2s, filter .2s;
}
.chero-logo-img:hover {
  opacity: .9; filter: grayscale(0);
}

/* ---- Form card ---- */

[data-form-card] {
  margin-top: 0; background: #fff; border: 1px solid #E6EAF1; border-radius: 24px;
  box-shadow: 0 30px 70px -40px rgba(16,30,80,.42); padding: 30px 28px; align-self: start;
}
[data-form-card] h2 {
  font-size: 23px; font-weight: 800; letter-spacing: -.02em; color: #10141F; margin: 0;
}
.chero-form-description {
  margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: #5A6472;
}

.form-success {
  display: none; margin-top: 22px; border: 1px solid #CFE6D6; background: #F1FAF3;
  border-radius: 16px; padding: 26px 22px; text-align: center;
}
.form-success.is-visible { display: block; }
.form-success-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; background: #1F9D55; color: #fff;
}
.form-success h3 { margin-top: 16px; font-size: 19px; font-weight: 800; color: #10141F; }
.form-success p  { margin-top: 8px; font-size: 15px; line-height: 1.6; color: #5A6472; }

/* ---- Form layout ----
   A single, even gap between every field-cell keeps Company Name and
   Describe Your Project Needs spaced exactly like the rest. */
.chero-contact-form { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
[data-form-row] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-cell { min-width: 0; }

[data-form-card] input,
[data-form-card] select,
[data-form-card] textarea { font-family: 'Inter', system-ui, sans-serif; }
[data-form-card] input::placeholder,
[data-form-card] textarea::placeholder { color: #9AA6BA; }

/* ---- Floating label fields ---- */

.fl { position: relative; }
.fl input,
.fl textarea {
  width:100%; height: 54px; padding: 19px 14px 0; font-size: 15px; color: #10141F;
  background: #fff; border: 1px solid #E6EAF1; border-radius: 12px; outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.fl.fl-area textarea {
  min-height: 92px; height: auto; padding: 24px 14px 10px; line-height: 1.6; resize: vertical; display: block;
}
.fl-label {
  position: absolute; left: 14px; top: 17px; font-size: 15px; font-weight: 500;
  color: #8A94A6; pointer-events: none; transform-origin: left top;
  transition: font-size .15s ease, top .15s ease, color .15s ease;
}
.fl.fl-area .fl-label { top: 10px; }
.fl input:focus ~ .fl-label,
.fl input:not(:placeholder-shown) ~ .fl-label,
.fl textarea:focus ~ .fl-label,
.fl textarea:not(:placeholder-shown) ~ .fl-label {
  top: 12px; font-size: 11.5px; color: #5A6472;
}
.fl .req { color: #EF3E2E; }

/* ---- Single consolidated error line above submit ----
   Space is reserved permanently (min-height) and only opacity/visibility
   toggles, so showing/hiding the message never shifts the submit button. */
.form-error-summary {
  margin: 0; font-size: 13px; font-weight: 600; color: #EF3E2E; line-height: 1.4;
  min-height: 18px;
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease;
}
.form-error-summary.is-visible { opacity: 1; visibility: visible; }

/* Invalid-field outline (set by JS via .has-error) */
.field-cell.has-error .fl input,
.field-cell.has-error .fl textarea {
  border-color: #EF3E2E;
}
.field-cell.has-error .phone-field-wrap {
  border-color: #EF3E2E;
}
.field-error {
  margin: 5px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #EF3E2E;
  min-height: 15px;
  line-height: 1.3;
}
/* ---- Phone field ---- */

.phone-field-wrap {
  display: flex; align-items: stretch; border: 1px solid #E6EAF1; border-radius: 12px;
  background: #fff; overflow: hidden; position: relative;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.phone-dial {
  flex: 0 0 auto; position: relative; display: flex; align-items: center; gap: 6px;
  padding: 0 20px 0 12px; border-right: 1px solid #EEF1F6;
  border-top-left-radius: 11px; border-bottom-left-radius: 11px;
  background-color: #F7F9FD;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2339414F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
}
.phone-dial__flag {
  flex: 0 0 auto; width: 20px; height: 15px; border-radius: 2px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(16, 30, 80, .08);
}
.phone-field-wrap select {
  width: auto !important; flex: 0 0 auto; max-width: 60px;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  border: 0; background: transparent;
  color: #39414F; font-size: 13.5px; font-weight: 600;
  padding: 0; outline: none; cursor: pointer;
  position: absolute; inset: 0; opacity: 0;
}
.phone-dial__label {
  flex: 0 0 auto; font-size: 13.5px; font-weight: 600; color: #39414F; white-space: nowrap;
  pointer-events: none;
}
.fl-phone { flex: 1 1 auto; min-width: 0; position: relative; }
.fl-phone input {
  border: 0; height: 54px; padding: 19px 8px 0 11px; font-size: 15px;
}
/* Rest state: vertically centered, like the other fields' rest state, but
   smaller - the dial pill eats into this field's width, so at 15px
   "Contact Number *" overflowed and the wrap's overflow:hidden clipped the
   asterisk off the end. */
.fl-phone .fl-label {
  left: 11px; font-size: 13.5px; white-space: nowrap;
}
.fl-phone input:focus ~ .fl-label,
.fl-phone input:not(:placeholder-shown) ~ .fl-label {
  top: 12px; font-size: 11.5px;
}
.phone-field-wrap:focus-within {
  border-color: #2F6BFF;
}
/* Same rounded left accent bar as the other fields' :focus-within style,
   but as a ::before instead of an inset box-shadow: .phone-dial paints its
   own opaque background over that same left strip, so an inset shadow on
   the wrap would just get covered - this sits above it (z-index) instead. */
.phone-field-wrap:focus-within::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: #2F6BFF; border-top-left-radius: 12px; border-bottom-left-radius: 12px; z-index: 2;
}

/* ---- Focus: left blue bar — scoped to ONLY the focused cell ----
   Previously the selector chain matched sibling cells and painted the
   blue bar / border on adjacent fields (e.g. focusing First Name lit up
   Last Name). Scoping strictly to .field-cell:focus-within fixes that:
   :focus-within is true only for the cell that actually contains focus. */
.field-cell:focus-within .fl input,
.field-cell:focus-within .fl textarea {
  border-color: #2F6BFF;
  box-shadow: inset 3px 0 0 0 #2F6BFF;
}
/* The phone number field's own focus ring lives on .phone-field-wrap (it
   wraps both the dial pill and this input), so it must not also get the
   generic inset left-bar above - that doubled up into a broken-looking
   border curl where the two met. */
.field-cell:focus-within .fl-phone input {
  box-shadow: none;
}

/* ---- Captcha row ---- */

.captcha-row {
  display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px;
  border: 1px solid #E6EAF1; border-radius: 12px; background: #F7F9FD; cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.captcha-row input[name="captcha"] {
  width: 20px; height: 20px; flex: 0 0 auto; accent-color: #2F6BFF; cursor: pointer;
}
.captcha-text { font-size: 14px; font-weight: 600; color: #39414F; }
.captcha-badge {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9AA6BA;
}
.captcha-row:has(input[name="captcha"]:focus) {
  border-color: #2F6BFF;
  box-shadow: inset 3px 0 0 0 #2F6BFF;
}
.field-cell.has-error .captcha-row {
  border-color: #EF3E2E;
}
.captcha-row:has(input[name="captcha"]:checked) {
  animation: captchaPulse .5s ease-out;
}
.captcha-row input[name="captcha"]:checked {
  animation: checkPop .35s cubic-bezier(.34, 1.56, .64, 1);
}

/* ---- Submit button ---- */

.chero-submit-btn {
  width: 100%; min-height: 50px; background: #EF3E2E; color: #fff;
  font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 16.5px;
  border: 0; border-radius: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 14px 34px rgba(239,62,46,.30);
  transition: transform .25s ease, box-shadow .25s ease, opacity .2s ease;
}
.chero-submit-arrow { font-size: 18px; }

.chero-disclaimer {
  margin-top: 0; font-size: 12.5px; line-height: 1.55; color: #8A94A6;
}
.chero-disclaimer .req { color: #EF3E2E; }

/* ============================================================
   Animations
   ============================================================ */

@keyframes fieldFadeUp    { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes headingDrop    { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes checkPop       { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 70% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes captchaPulse   { 0% { box-shadow: 0 0 0 0 rgba(47,107,255,.35); } 100% { box-shadow: 0 0 0 12px rgba(47,107,255,0); } }
@keyframes heroHeadingIn  { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideFromLeft  { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes bangJump       { 0% { opacity: 0; transform: translateY(-14px) scale(.5); } 50% { opacity: 1; transform: translateY(-14px) scale(1.15); } 70% { transform: translateY(0) scale(.9); } 85% { transform: translateY(-6px) scale(1.05); } 100% { transform: translateY(0) scale(1); } }

[data-chero] h1.hero-heading { animation: heroHeadingIn .6s cubic-bezier(.22,.61,.36,1) both; }
/* Highlight word stays BLACK to match the design (red underline SVG supplies the accent) */
[data-chero] h1.hero-heading .u-scribble { color: #10141F; }
[data-chero] h1.hero-heading .u-bang { display: inline-block; opacity: 1; animation: bangJump .6s cubic-bezier(.34,1.56,.64,1) .7s backwards; }

[data-chero-points] li { opacity: 0; animation: slideFromLeft .5s cubic-bezier(.22,.61,.36,1) both; }
[data-chero-points] li:nth-child(1) { animation-delay: .45s; }
[data-chero-points] li:nth-child(2) { animation-delay: .60s; }
[data-chero-points] li:nth-child(3) { animation-delay: .75s; }
[data-chero-points] li:nth-child(4) { animation-delay: .90s; }
[data-chero-points] li:nth-child(5) { animation-delay: 1.05s; }
[data-chero-points] li:nth-child(6) { animation-delay: 1.20s; }

.chero-intro { opacity: 0; animation: slideFromLeft .5s .6s cubic-bezier(.22,.61,.36,1) both; }

.chero-contact-list li { opacity: 0; animation: slideFromLeft .5s cubic-bezier(.22,.61,.36,1) both; }
.chero-contact-list li:nth-child(1) { animation-delay: .75s; }
.chero-contact-list li:nth-child(2) { animation-delay: .90s; }
.chero-contact-list li:nth-child(3) { animation-delay: 1.05s; }
.chero-contact-list li:nth-child(4) { animation-delay: 1.20s; }
.chero-contact-list li:nth-child(5) { animation-delay: 1.35s; }
.chero-contact-list li:nth-child(6) { animation-delay: 1.50s; }

.chero-logo-img { opacity: 0; animation: slideFromLeft .5s cubic-bezier(.22,.61,.36,1) both; }
.chero-logo-img:nth-child(1)  { animation-delay: 1.15s; }
.chero-logo-img:nth-child(2)  { animation-delay: 1.25s; }
.chero-logo-img:nth-child(3)  { animation-delay: 1.35s; }
.chero-logo-img:nth-child(4)  { animation-delay: 1.45s; }
.chero-logo-img:nth-child(5)  { animation-delay: 1.55s; }
.chero-logo-img:nth-child(6)  { animation-delay: 1.65s; }
.chero-logo-img:nth-child(7)  { animation-delay: 1.75s; }
.chero-logo-img:nth-child(8)  { animation-delay: 1.85s; }
.chero-logo-img:nth-child(9)  { animation-delay: 1.95s; }
.chero-logo-img:nth-child(10) { animation-delay: 2.05s; }

[data-form-card] h2 { animation: headingDrop .4s .05s cubic-bezier(.22,.61,.36,1) both; }

.chero-contact-form > * { opacity: 0; animation: fieldFadeUp .45s cubic-bezier(.22,.61,.36,1) forwards; }
.chero-contact-form > *:nth-child(1) { animation-delay: .08s; }
.chero-contact-form > *:nth-child(2) { animation-delay: .17s; }
.chero-contact-form > *:nth-child(3) { animation-delay: .26s; }
.chero-contact-form > *:nth-child(4) { animation-delay: .35s; }
.chero-contact-form > *:nth-child(5) { animation-delay: .43s; }
.chero-contact-form > button         { animation-delay: .50s; }
.chero-contact-form > p:last-child   { animation-delay: .54s; }

@media (prefers-reduced-motion: reduce) {
  [data-chero] h1.hero-heading,
  [data-chero] h1.hero-heading .u-bang,
  [data-chero] h1.hero-heading .u-scribble,
  [data-chero-points] li,
  .chero-intro,
  .chero-eyebrow,
  .chero-contact-list li,
  .chero-logo-img,
  [data-form-card] h2,
  .chero-contact-form > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* Highlight word must stay black (was forced to blue) */
  [data-chero] h1.hero-heading .u-scribble { color: #10141F; }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1200px) and (min-width: 1001px) {
  [data-chero] { --chero-band: 400px; }
  /* Two-column form card is narrow here. Make the dial-code as compact as
     possible and slightly reduce the phone label + input padding so the full
     "Contact Number *" fits on one line. Label stays vertically centered
     (top: 17px) to match the other fields. */
  .phone-dial {
    padding: 0 18px 0 8px; gap: 5px;
  }
  .phone-dial__label { font-size: 12px; }
  .fl-phone input { padding-left: 9px; padding-right: 4px; }
  .fl-phone .fl-label { font-size: 13px; left: 9px; }

}
@media (max-width: 1024px) {
    [data-form-row]  { grid-template-columns: 1fr !important; }

}

@media (max-width: 1000px) {
/* .chero-contact-list{
  width:50%;
  margin:auto;
  padding-left: 30px;
  }
  .chero-logos-row{
   justify-content:center;
  } */
  .chero-contact-list,
[data-chero-points]{
  width:55%;
  margin:auto;
  padding-left: 30px;
  margin-bottom: 20px;
  }
  .chero-logos-row{
   justify-content:center;
  }
  .chero-form-description {
  text-align: center;  
}
  .clients-strip__container{
    width:auto;
    pad[data-form-card] h2ding:0px !important;
  }
  [data-chero] { --chero-band: 0px; padding-top: 0 !important; }
  [data-chero-band] { display: none; }

  [data-chero-grid]  { grid-template-columns: 1fr; gap: 0; align-items: stretch; }
  [data-chero-copy]  { text-align: center; max-width: 760px; margin: 0 auto; padding-top: 0; display: contents; }
  [data-chero-upper] {
    order: 1; text-align: center; min-height: 0;
    align-items: center;
    background:
      radial-gradient(120% 160% at 50% -30%, rgba(47,107,255,.20) 0%, rgba(47,107,255,0) 60%),
      linear-gradient(180deg, #F6F9FF 0%, #FBFCFF 46%, #fff 100%);
    border-bottom: 1px solid rgba(47,107,255,.14);
    margin: 0 -40px;
    padding: clamp(32px, 4.5vw, 52px) 40px;
  }
  [data-form-card] h2 { text-align: center; }
  [data-form-card]   { order: 2; margin-top: 24px;text-align:center; }
  [data-chero-lower] { order: 3;  text-align: center;  margin-top: 0; padding-top: 26px; }
  .chero-logos { order: 4; margin-top: 20px; }

/*   [data-chero-points] { width: auto; margin-left: 0 !important; margin-right: 0 !important;     
  justify-content: center;    
  text-align: center; 
padding-left : 60px;
 } */
  [data-chero-points] li { text-align: left; }
}

@media (max-width: 640px) {
  [data-chero] { padding: 0 20px 52px !important; }
  [data-chero-upper] { margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
  .chero-logos-row { gap: 6px 14px; margin-top: 16px; }
  .chero-logo-img { height: 56px; }
}
 
@media (max-width: 600px) {
  [data-chero] { padding-left: 20px !important; padding-right: 20px !important; }
  [data-chero-upper] { margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 560px) {

/*   [data-form-row]  { grid-template-rows: 1fr !important; }
  [data-form-card] { padding: 24px 20px !important;text-align:center; }
    .chero-contact-list{
  width:75%;
  } */
  [data-form-row]  { grid-template-rows: 1fr !important; }
  [data-form-card] { padding: 24px 20px !important;text-align:center; }
    .chero-contact-list,
    [data-chero-points]{
  width:75%;
  }
}

@media (max-width: 480px) {
   .chero-contact-list,
   [data-chero-points]{
  width:100%;
  padding: 0px;
     margin-bottom:20px;
     margin: auto;

  }
  [data-chero] { padding-bottom: 24px !important; }
}
@media (max-width: 360px) {
   .chero-contact-list,
   [data-chero-points]{
  width:90%;
  }
  
}