/* Ported from MOCKUP lines 99-177 plus the global input/select/placeholder
   rules in the mockup <style> block (lines 18-22). */

.xcw-hero {
  background-color: var(--xcw-bg-tint);
  background-image:
    radial-gradient(#BBD7E2 1px, transparent 1.15px),
    linear-gradient(180deg, rgba(240, 246, 248, 0) 0%, rgba(246, 248, 249, .82) 58%, var(--xcw-bg) 100%);
  background-size: 22px 22px, 100% 100%;
  background-position: 0 0, 0 0;
}

.xcw-hero__inner {
  max-width: var(--xcw-max);
  margin: 0 auto;
  padding: clamp(44px, 6vw, 84px) var(--xcw-pad-x);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(36px, 5vw, 68px);
  align-items: start;
}

.xcw-hero__col { padding-top: 6px; }

.xcw-hero__eyebrow {
  display: block;
  font-family: var(--xcw-heading-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--xcw-blue);
  margin-bottom: 18px;
}

.xcw-hero__headline {
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.04;
  margin: 0 0 22px;
}

.xcw-hero__subhead {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  color: var(--xcw-body);
  max-width: 56ch;
  margin: 0 0 30px;
  text-wrap: pretty;
}

.xcw-hero__trust { margin-top: 4px; }

.xcw-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

.xcw-hero__badges img {
  flex: none;
  display: block;
  transition: opacity .18s;
}

/* The inline style sets one axis; the other stays auto. */
.xcw-hero__badges img[style*="width"]  { height: auto; }
.xcw-hero__badges img[style*="height"] { width: auto; }

.xcw-hero__badges img:hover { opacity: .86; }

.xcw-hero__fine {
  font-size: 12.5px;
  color: var(--xcw-faint);
  letter-spacing: .01em;
  margin: 14px 0 0;
}

/* ── Form card ───────────────────────────────────────────────────────────── */

.xcw-hero__card {
  scroll-margin-top: 92px;
  background: #fff;
  border: 1px solid var(--xcw-line);
  border-radius: 18px;
  box-shadow: 0 24px 60px -28px rgba(11, 58, 73, .34), 0 2px 6px rgba(20, 41, 47, .05);
  padding: clamp(24px, 3vw, 34px);
}

.xcw-hero__card-heading {
  font-size: 22px;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}

.xcw-hero__card-subhead {
  font-size: 14px;
  color: var(--xcw-muted);
  line-height: 1.5;
  margin: 0 0 20px;
}

.xcw-hero__card-footnote {
  font-size: 11.5px;
  color: var(--xcw-grey);
  text-align: center;
  line-height: 1.55;
  margin: 12px -8px 0;
  text-wrap: balance;
}

/* ── Elementor Pro Form overrides ────────────────────────────────────────── */

.xcw-hero__form input,
.xcw-hero__form select,
.xcw-hero__form textarea,
.xcw-hero__form button { font-family: inherit; }

.xcw-hero__form ::placeholder { color: #9AA9AF; opacity: 1; }

/* MOCKUP spaces field rows 14px apart, with 20px before the submit button.
   Elementor lays fields out on a 10-column grid with a gutter, so the gutter
   is zeroed and the spacing reapplied per field group. */
.xcw-hero__form .elementor-form-fields-wrapper {
  margin-left: 0;
  margin-right: 0;
}

.xcw-hero__form .elementor-field-group {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 14px;
}

/* Half-width pairs sit side by side with a 12px gap. */
.xcw-hero__form .elementor-field-group.elementor-col-50 {
  width: calc(50% - 6px);
  margin-right: 12px;
}

.xcw-hero__form .elementor-field-group.elementor-col-50 + .elementor-col-50 {
  margin-right: 0;
}

.xcw-hero__form .elementor-field-group.elementor-field-type-submit {
  margin-top: 6px;
  margin-bottom: 0;
}

.xcw-hero__form .elementor-field-group > label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--xcw-body);
  margin-bottom: 6px;
}

.xcw-hero__form .elementor-field-textual,
.xcw-hero__form select.elementor-field-textual {
  width: 100%;
  height: 44px;
  border: 1px solid #D9E2E6;
  border-radius: 10px;
  padding: 0 13px;
  font-size: 14.5px;
  color: var(--xcw-text);
  background-color: #fff;
  transition: border-color .15s, box-shadow .15s;
}

/* MOCKUP focus ring is var(--xcw-sky) at .18 alpha, not the darker blue token. */
.xcw-hero__form .elementor-field-textual:focus,
.xcw-hero__form select.elementor-field-textual:focus {
  border-color: var(--xcw-sky);
  box-shadow: 0 0 0 3px rgba(41, 171, 226, .18);
  outline: none;
}

.xcw-hero__form select.elementor-field-textual {
  padding: 0 34px 0 13px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2356686E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 4l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
}

.xcw-hero__form select.elementor-field-textual::-ms-expand { display: none; }

.xcw-hero__form .elementor-button[type="submit"],
.xcw-hero__form button[type="submit"] {
  width: 100%;
  height: 50px;
  background: var(--xcw-accent);
  color: #fff;
  font-family: var(--xcw-heading-font);
  font-weight: 600;
  font-size: 16px;
  border: none;
  border-radius: 11px;
  cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(239, 138, 76, .6);
  transition: filter .15s;
}

.xcw-hero__form .elementor-button[type="submit"]:hover,
.xcw-hero__form button[type="submit"]:hover { filter: brightness(.94); }

/* Success state: the mockup's "Thanks — we've got it." panel replaces
   Elementor Pro's own plain-text message (MOCKUP lines 116-121). */
.xcw-hero__form .elementor-message-success { display: none; }

.xcw-hero__thanks {
  display: none;
  text-align: center;
  padding: 26px 8px;
}

.xcw-hero__card--sent .xcw-hero__thanks { display: block; }

.xcw-hero__card--sent .xcw-hero__card-heading,
.xcw-hero__card--sent .xcw-hero__card-subhead,
.xcw-hero__card--sent .xcw-hero__form,
.xcw-hero__card--sent .xcw-hero__card-footnote { display: none; }

.xcw-hero__thanks-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #DCEDF3;
  color: #114E62;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.xcw-hero__thanks-heading {
  font-size: 22px;
  letter-spacing: -.02em;
  margin: 0 0 10px;
}

.xcw-hero__thanks-body {
  font-size: 15px;
  color: var(--xcw-muted);
  line-height: 1.55;
  margin: 0 auto;
  max-width: 36ch;
}

@media (max-width: 480px) {
  .xcw-hero__form .elementor-field-group.elementor-col-50 {
    width: 100%;
    margin-right: 0;
  }
}