/* Marketing Lead / homepage refinement / 2026-10-26
   Loaded after all legacy CSS; affects only the homepage hero after JS enhancement.
   Other pages, other forms, FAQ/icons, header and floating actions are untouched. */

header.hero.ml-ui-refined {
  --ml-v2-ink: #0B1B35;
  --ml-v2-muted: #475569;
  --ml-v2-purple: #235CF2;
  --ml-v2-orange: #235CF2;
  --ml-v2-stroke: #DDE6F2;
  overflow: visible;
}

header.hero.ml-ui-refined .hero-grid {
  align-items: start !important;
  gap: clamp(28px, 3.6vw, 60px) !important;
}
header.hero.ml-ui-refined .hero-content { min-width: 0 !important; }
header.hero.ml-ui-refined .hero-content > p { color: #475569; }

/* Service cards: the icon, name, explanation and arrow are independent rows.
   Stop the older checkmark pseudo-element and card-wide arrow animations. */
header.hero.ml-ui-refined nav.hero-points.ml-services-polished {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 14px !important;
  margin: 28px 0 28px !important;
  padding: 0 !important;
  align-items: stretch !important;
}
header.hero.ml-ui-refined .hero-point.ml-service-tile {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  gap: 18px !important;
  position: relative !important;
  isolation: isolate;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 180px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 21px 21px 20px !important;
  overflow: hidden !important;
  border: 1px solid var(--ml-v2-stroke) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.96) !important;
  color: var(--ml-v2-ink) !important;
  box-shadow: 0 8px 28px rgba(35,92,242,.065) !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: normal !important;
  letter-spacing: normal !important;
  line-height: normal !important;
  transform: none;
  animation: ml-v2-card-appear .48s cubic-bezier(.2,.7,.2,1) both !important;
  animation-delay: calc(var(--ml-v2-delay,0) * 65ms) !important;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease !important;
}
header.hero.ml-ui-refined .hero-point.ml-service-tile::before,
header.hero.ml-ui-refined .hero-point.ml-service-tile::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}
header.hero.ml-ui-refined .hero-point.ml-service-tile:hover,
header.hero.ml-ui-refined .hero-point.ml-service-tile:focus-visible {
  transform: translateY(-3px) !important;
  border-color: rgba(35,92,242,.36) !important;
  box-shadow: 0 17px 38px rgba(35,92,242,.115) !important;
}
header.hero.ml-ui-refined .ml-service-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
}
header.hero.ml-ui-refined .ml-service-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  background: #F6F9FF !important;
  color: #235CF2 !important;
  border: 1px solid #DDE6F2 !important;
  border-radius: 15px !important;
  box-shadow: none !important;
}
header.hero.ml-ui-refined .ml-service-tile[data-ml-tone="orange"] .ml-service-icon {
  background: #F6F9FF !important;
  color: #235CF2 !important;
  border-color: #DDE6F2 !important;
}
header.hero.ml-ui-refined .ml-service-icon svg {
  display: block !important;
  width: 23px !important; height: 23px !important;
  min-width: 23px !important; min-height: 23px !important;
  max-width: 23px !important; max-height: 23px !important;
  flex: 0 0 23px !important;
  fill: none !important; stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important; stroke-linejoin: round !important;
  transform: none !important; animation: none !important;
}
header.hero.ml-ui-refined .ml-service-arrow {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  flex: 0 0 32px !important;
  border-radius: 50% !important;
  color: #685b7e !important;
  background: #F6F9FF !important;
  transition: transform .22s ease, background .22s ease, color .22s ease !important;
}
header.hero.ml-ui-refined .ml-service-arrow svg {
  display: block !important;
  width: 17px !important; height: 17px !important;
  min-width: 17px !important; min-height: 17px !important;
  max-width: 17px !important; max-height: 17px !important;
  flex: 0 0 17px !important;
  fill: none !important; stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important; stroke-linejoin: round !important;
  animation: none !important;
}
header.hero.ml-ui-refined .ml-service-tile:hover .ml-service-arrow,
header.hero.ml-ui-refined .ml-service-tile:focus-visible .ml-service-arrow {
  background: #DDE6F2 !important;
  color: #235CF2 !important;
  transform: translateX(3px) !important;
}
header.hero.ml-ui-refined .ml-service-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: left !important;
}
header.hero.ml-ui-refined .ml-service-name {
  display: block !important;
  color: var(--ml-v2-ink) !important;
  font: 750 clamp(14px,1.12vw,17px)/1.3 Poppins,Arial,sans-serif !important;
  letter-spacing: -.022em !important;
  overflow-wrap: break-word;
  word-break: normal;
}
header.hero.ml-ui-refined .ml-service-description {
  display: block !important;
  color: var(--ml-v2-muted) !important;
  font: 450 13px/1.52 Poppins,Arial,sans-serif !important;
  letter-spacing: 0 !important;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Form card: no oversized standalone arrows, no forced 100%-height gap. */
header.hero.ml-ui-refined .hero-grid > aside#contact.ml-form-shell,
header.hero.ml-ui-refined .hero-grid > aside.ml-form-shell {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  padding: clamp(23px,2.25vw,35px) !important;
  margin: 0 !important;
  border: 1px solid #DDE6F2 !important;
  border-radius: 27px !important;
  background: linear-gradient(156deg,#fff 0%,#F6F9FF 60%,#F6F9FF 100%) !important;
  overflow: hidden !important;
  box-shadow: 0 24px 64px rgba(35,92,242,.10) !important;
  animation: ml-v2-form-appear .48s .10s both !important;
}
header.hero.ml-ui-refined .ml-form-shell::before {
  content: "" !important;
  display: block !important;
  height: 4px !important;
  inset: 0 0 auto 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg,#235CF2,#0F766E,#235CF2) !important;
  animation: none !important;
}
header.hero.ml-ui-refined .ml-form-shell form[data-ml-form="consultation"] > svg,
header.hero.ml-ui-refined .ml-form-shell > svg,
header.hero.ml-ui-refined .ml-form-shell > i,
header.hero.ml-ui-refined .ml-form-shell > .ml-orphan-icon {
  display: none !important;
}
header.hero.ml-ui-refined .ml-form-shell .ml-form-kicker {
  position: relative !important;
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  height: auto !important;
  padding: 7px 13px 7px 28px !important;
  margin: 0 0 12px !important;
  align-items: center !important;
  border-radius: 999px !important;
  color: #235CF2 !important;
  background: #F6F9FF !important;
  border: 1px solid #DDE6F2 !important;
  font: 800 10px/1.35 Poppins,Arial,sans-serif !important;
  letter-spacing: .065em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}
header.hero.ml-ui-refined .ml-form-shell .ml-form-kicker::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 11px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #21c36a !important;
  box-shadow: 0 0 0 3px rgba(33,195,106,.10) !important;
}
header.hero.ml-ui-refined .ml-form-shell h2,
header.hero.ml-ui-refined .ml-form-shell #strategy-form-title {
  max-width: 100% !important;
  margin: 0 0 10px !important;
  color: #0B1B35 !important;
  font: 780 clamp(25px,2.15vw,32px)/1.16 Poppins,Arial,sans-serif !important;
  letter-spacing: -.04em !important;
  text-wrap: balance;
}
header.hero.ml-ui-refined .ml-form-shell > p:not(.ml-form-privacy) {
  max-width: 100% !important;
  margin: 0 0 18px !important;
  color: #475569 !important;
  font: 450 13px/1.65 Poppins,Arial,sans-serif !important;
}
header.hero.ml-ui-refined .ml-trust-row-v2 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 16px !important;
  margin: 0 0 23px !important;
  padding: 0 !important;
}
header.hero.ml-ui-refined .ml-trust-row-v2 span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #5c5473 !important;
  font: 600 12px/1.45 Poppins,Arial,sans-serif !important;
}
header.hero.ml-ui-refined .ml-trust-row-v2 span::before {
  content: "✓" !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 17px !important; height: 17px !important;
  border-radius: 50% !important;
  color: #235CF2 !important;
  background: #F6F9FF !important;
  font: 800 11px/1 Poppins,Arial,sans-serif !important;
}

/* Form's existing controls are MOVED, not replaced.  All names, validation,
   honeypot and hidden submission tokens continue to work unchanged. */
header.hero.ml-ui-refined .ml-form-shell form[data-ml-form="consultation"] {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  grid-template-rows: none !important;
  grid-template-columns: none !important;
  align-items: initial !important;
  align-content: initial !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
header.hero.ml-ui-refined .ml-form-grid-v2 {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  grid-template-areas: "name email" "phone service" "message message" !important;
  gap: 15px 14px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  align-items: start !important;
}
header.hero.ml-ui-refined .ml-field-v2 {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  position: relative !important;
}
header.hero.ml-ui-refined .ml-field-v2[data-ml-field="name"] {grid-area:name !important}
header.hero.ml-ui-refined .ml-field-v2[data-ml-field="email"] {grid-area:email !important}
header.hero.ml-ui-refined .ml-field-v2[data-ml-field="phone"] {grid-area:phone !important}
header.hero.ml-ui-refined .ml-field-v2[data-ml-field="service"] {grid-area:service !important}
header.hero.ml-ui-refined .ml-field-v2[data-ml-field="message"] {grid-area:message !important}
header.hero.ml-ui-refined .ml-field-label-v2 {
  display: block !important;
  position: static !important;
  width: auto !important; height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  clip: auto !important; clip-path: none !important;
  overflow: visible !important;
  color: #36344a !important;
  white-space: normal !important;
  font: 700 12px/1.3 Poppins,Arial,sans-serif !important;
  letter-spacing: 0 !important;
}
header.hero.ml-ui-refined .ml-field-control-v2 {
  display: block !important;
  position: relative !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
header.hero.ml-ui-refined .ml-field-icon-v2 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  z-index: 1 !important;
  left: 14px !important;
  top: 17px !important;
  width: 18px !important; height: 18px !important;
  pointer-events: none !important;
  color: #9785a9 !important;
}
header.hero.ml-ui-refined .ml-field-icon-v2 svg {
  display: block !important;
  width: 18px !important; height: 18px !important;
  min-width: 18px !important; min-height: 18px !important;
  max-width: 18px !important; max-height: 18px !important;
  flex: 0 0 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transform: none !important;
  animation: none !important;
}
header.hero.ml-ui-refined .ml-form-grid-v2 :is(input,select,textarea) {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 14px 0 43px !important;
  height: 53px !important;
  min-height: 53px !important;
  border: 1px solid #F6F9FF !important;
  border-radius: 12px !important;
  background: #F6F9FF !important;
  box-shadow: none !important;
  color: #0B1B35 !important;
  outline: none !important;
  font: 500 13px/1.5 Poppins,Arial,sans-serif !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}
header.hero.ml-ui-refined .ml-form-grid-v2 textarea {
  display: block !important;
  height: 105px !important;
  min-height: 105px !important;
  padding: 15px 14px 14px 43px !important;
  resize: vertical !important;
}
header.hero.ml-ui-refined .ml-form-grid-v2 select {padding-left:39px!important;padding-right:21px!important;font-size:12px!important;}
header.hero.ml-ui-refined .ml-form-grid-v2 :is(input,select,textarea):focus {
  background: #fff !important;
  border-color: #235CF2 !important;
  box-shadow: 0 0 0 3px rgba(35,92,242,.115) !important;
}
header.hero.ml-ui-refined .ml-form-grid-v2 :is(input,textarea)::placeholder {
  color: #9091a1 !important;
  opacity: 1 !important;
}
header.hero.ml-ui-refined .ml-form-shell form[data-ml-form="consultation"] > button[type="submit"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 56px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: linear-gradient(105deg,#235CF2,#235CF2 55%,#235CF2 100%) !important;
  color: #fff !important;
  font: 750 14px/1.4 Poppins,Arial,sans-serif !important;
  text-align: center !important;
  box-shadow: 0 12px 28px rgba(35,92,242,.20) !important;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
  cursor: pointer !important;
  animation: none !important;
}
header.hero.ml-ui-refined .ml-form-shell form[data-ml-form="consultation"] > button[type="submit"]:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.035) !important;
  box-shadow: 0 18px 34px rgba(35,92,242,.27) !important;
}
header.hero.ml-ui-refined .ml-form-shell form[data-ml-form="consultation"] > button[type="submit"]:active {transform: translateY(0) !important}
header.hero.ml-ui-refined .ml-submit-arrow-v2 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important; height: 20px !important;
  min-width: 20px !important; min-height: 20px !important;
  flex: 0 0 20px !important;
  transition: transform .2s ease !important;
}
header.hero.ml-ui-refined .ml-submit-arrow-v2 svg {
  display:block !important;
  width: 18px !important; height: 18px !important;
  min-width:18px !important; min-height:18px !important;
  max-width:18px !important; max-height:18px !important;
  flex:0 0 18px !important;
  fill:none !important; stroke:currentColor !important;
  stroke-width:1.9 !important;
  stroke-linecap:round !important;stroke-linejoin:round !important;
  animation:none !important;
}
header.hero.ml-ui-refined .ml-form-shell button[type="submit"]:hover .ml-submit-arrow-v2 {transform:translateX(3px) !important}
header.hero.ml-ui-refined .ml-form-shell .ml-form-privacy {
  margin: 15px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
  color: #475569 !important;
  font: 450 10px/1.65 Poppins,Arial,sans-serif !important;
}
header.hero.ml-ui-refined .ml-form-shell .ml-form-fast-track {
  margin-top: 18px !important;
  padding-top: 15px !important;
  border-top: 1px solid #F6F9FF !important;
}

@keyframes ml-v2-card-appear {
  from {opacity:0}
  to {opacity:1}
}
@keyframes ml-v2-form-appear {
  from {opacity:0;transform:translateY(8px)}
  to {opacity:1;transform:translateY(0)}
}
/* The old fixed four-icon social rail overlaps form fields on phones/tablets.
   Footer links remain available; keep the WhatsApp and chat launchers. */
@media (max-width: 1250px) {
  body.ml-home-polished-v2 .ml-premium-social {display:none!important}
  body.ml-home-polished-v2 .ml-agent-label {display:none!important}
}
@media (max-width: 1100px) {
  header.hero.ml-ui-refined .hero-grid {gap: 30px !important}
  header.hero.ml-ui-refined .hero-point.ml-service-tile {padding:18px !important; min-height:175px !important}
}
@media (max-width: 980px) {
  header.hero.ml-ui-refined .hero-grid {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 34px !important;
  }
  header.hero.ml-ui-refined .hero-content,
  header.hero.ml-ui-refined .hero-grid > aside.ml-form-shell {max-width: 760px !important; margin-inline:auto !important}
  header.hero.ml-ui-refined .hero-content {width:100% !important}
}
@media (max-width: 600px) {
  header.hero.ml-ui-refined .hero-grid {gap: 26px !important}
  header.hero.ml-ui-refined nav.hero-points.ml-services-polished {grid-template-columns: 1fr !important;gap:11px !important;margin:22px 0 24px !important}
  header.hero.ml-ui-refined .hero-point.ml-service-tile {
    min-height:0 !important;
    padding:16px 18px !important;
    gap:13px !important;
  }
  header.hero.ml-ui-refined .ml-service-icon {width:43px !important;height:43px !important;min-width:43px !important;min-height:43px !important;flex:0 0 43px !important}
  header.hero.ml-ui-refined .ml-service-name {font-size:15px !important}
  header.hero.ml-ui-refined .ml-form-grid-v2 {
    grid-template-columns: 1fr !important;
    grid-template-areas: "name" "email" "phone" "service" "message" !important;
    gap:13px !important;
  }
  header.hero.ml-ui-refined .hero-grid > aside.ml-form-shell {padding:23px 20px !important;border-radius:22px !important}
  header.hero.ml-ui-refined .ml-form-shell h2 {font-size:26px !important}
  header.hero.ml-ui-refined .ml-trust-row-v2 {gap:8px 12px !important}
}
@media (prefers-reduced-motion: reduce) {
  header.hero.ml-ui-refined .hero-point.ml-service-tile,
  header.hero.ml-ui-refined .hero-grid > aside#contact.ml-form-shell,
  header.hero.ml-ui-refined .hero-grid > aside.ml-form-shell,
  header.hero.ml-ui-refined .ml-service-arrow,
  header.hero.ml-ui-refined .ml-service-icon,
  header.hero.ml-ui-refined .ml-submit-arrow-v2,
  header.hero.ml-ui-refined .ml-form-shell button[type="submit"] {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}