/* UNICO Concept 2 hero — Figma 60:1219 (pixel-matched type + spacing) */

.unico-hero {
  --uh-navy: #203c6e;
  --uh-accent: #c9321f;
  --uh-mist: #ede9e8;
  --uh-cool: #63bad8;
  --uh-g-start: 37%;
  --uh-g-end: 84%;
  --uh-min-h: 884px;
  --uh-max: 1320px;
  --uh-gutter: 60px;
  --uh-img-pos: right center;
  /* Force Open Sans so theme Lato/Merriweather cannot win */
  --uh-font: "Open Sans", Arial, Helvetica, sans-serif;
  --uh-card-shadow: 0 24px 60px rgba(32, 60, 110, 0.18);
  --uh-radius-card: 14px;
  --uh-radius-btn: 6px;
  --uh-radius-input: 4px;
  /* Figma 64px Open Sans Bold → 87px line box (261px / 3) */
  --uh-headline-size: 64px;
  --uh-headline-lh: 87px;

  background: var(--uh-mist);
  color: var(--uh-navy);
  font-family: var(--uh-font) !important;
  isolation: isolate;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.unico-hero *,
.unico-hero *::before,
.unico-hero *::after {
  box-sizing: border-box;
}

/* Beat theme-overrides body/p/h1/a font rules */
.unico-hero,
.unico-hero p,
.unico-hero h1,
.unico-hero h2,
.unico-hero a,
.unico-hero span,
.unico-hero label,
.unico-hero input,
.unico-hero select,
.unico-hero textarea,
.unico-hero button {
  font-family: var(--uh-font) !important;
}

.unico-hero p,
.unico-hero h1,
.unico-hero h2 {
  margin: 0;
}

.unico-hero__media {
  bottom: 0;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

.unico-hero__bg-image {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: var(--uh-img-pos);
  width: 100%;
}

/* Mist Grey solid ~36.8% → transparent ~84% */
.unico-hero__gradient {
  background: linear-gradient(
    90deg,
    var(--uh-mist) 0%,
    var(--uh-mist) var(--uh-g-start),
    transparent var(--uh-g-end)
  );
  inset: 0;
  position: absolute;
  z-index: 1;
}

/*
  Figma content top = 120px below image start.
  Copy ~753px · form ~498px · gap ~69px
*/
.unico-hero__inner {
  align-items: start;
  display: grid;
  gap: 69px;
  grid-template-columns: minmax(0, 700px) minmax(300px, 498px);
  justify-content: space-between;
  margin: 0 auto;
  max-width: calc(var(--uh-max) + (var(--uh-gutter) * 2));
  min-height: var(--uh-min-h);
  padding: 120px var(--uh-gutter) 60px;
  position: relative;
  width: 100%;
  z-index: 2;
}

.unico-hero__copy {
  max-width: 700px;
  min-width: 0;
  padding-top: 0;
  width: 100%;
}

/* Eyebrow → headline = 10px (293 − 261 − 22) */
.unico-hero__eyebrow {
  color: var(--uh-accent);
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0;
  line-height: 22px;
  margin: 0 0 10px !important;
  text-transform: uppercase;
}

.unico-hero__headline {
  color: var(--uh-navy) !important;
  font-size: var(--uh-headline-size) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  line-height: var(--uh-headline-lh) !important;
  margin: 0 0 20px !important;
  max-width: 700px;
  text-transform: uppercase;
}

.unico-hero__headline-line {
  display: block;
  font-size: inherit !important;
  font-weight: 700 !important;
  letter-spacing: inherit;
  line-height: inherit !important;
}

/* "TO FIT BEAUTIFULLY" — keep together on one line */
.unico-hero__headline-line--fit {
  white-space: nowrap;
}

.unico-hero__headline-solid {
  display: inline;
  font-size: inherit !important;
  font-weight: 700 !important;
}

/* Transparent fill + Signal Red stroke */
.unico-hero__headline-outline {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.6px var(--uh-accent);
  color: transparent;
  display: inline;
  font-size: inherit !important;
  font-weight: 700 !important;
  letter-spacing: inherit;
  line-height: inherit !important;
  paint-order: stroke fill;
}

@supports not (-webkit-text-stroke: 1px red) {
  .unico-hero__headline-outline {
    color: var(--uh-accent) !important;
    -webkit-text-fill-color: var(--uh-accent);
  }
}

@media (max-width: 700px) {
  .unico-hero__headline-line--fit {
    white-space: normal;
  }
}

.unico-hero__body {
  color: var(--uh-navy) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 0;
  line-height: 25px;
  margin: 0 !important;
  max-width: 600px;
}

/* Body end ~649 → divider 726 = 77px; divider → support group 842 = 116px */
.unico-hero__divider {
  background: rgba(32, 60, 110, 0.18);
  border: 0;
  height: 1px;
  margin: 77px 0 116px;
  max-width: 538px;
  width: 100%;
}

.unico-hero__support {
  color: var(--uh-navy) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 25px;
  margin: 0 0 20px !important; /* support 842 → buttons 887 (−25) */
}

.unico-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.unico-hero__btn {
  align-items: center;
  border-radius: var(--uh-radius-btn);
  display: inline-flex;
  font-size: 18px !important;
  font-weight: 700 !important;
  justify-content: center;
  letter-spacing: 0;
  line-height: 25px;
  min-height: 57px;
  padding: 16px 20px;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.unico-hero__btn:hover,
.unico-hero__btn:focus {
  text-decoration: none !important;
}

.unico-hero__btn:focus-visible {
  outline: 2px solid var(--uh-cool);
  outline-offset: 3px;
}

.unico-hero__btn--primary {
  background: var(--uh-navy);
  border: 1px solid var(--uh-navy);
  color: var(--uh-mist) !important;
}

.unico-hero__btn--primary:hover {
  background: #1a325c;
  border-color: #1a325c;
  color: #ffffff !important;
}

.unico-hero__btn--secondary {
  background: transparent;
  border: 1px solid var(--uh-navy);
  color: var(--uh-navy) !important;
}

.unico-hero__btn--secondary:hover {
  background: rgba(32, 60, 110, 0.06);
  color: var(--uh-navy) !important;
}

/* Form card — Figma padding 40 / 30 */
.unico-hero__form-card {
  background: #ffffff;
  border-radius: var(--uh-radius-card);
  box-shadow: var(--uh-card-shadow);
  padding: 40px 30px 30px;
  width: 100%;
}

.unico-hero__form-title {
  color: var(--uh-navy) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 30px;
  margin: 0 0 10px !important;
}

.unico-hero__form-subtitle {
  color: var(--uh-navy) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 25px;
  margin: 0 0 40px !important;
}

.unico-hero__form-placeholder {
  background: rgba(237, 233, 232, 0.35);
  border: 1px dashed var(--uh-cool);
  border-radius: var(--uh-radius-input);
  color: var(--uh-navy);
  font-size: 15px;
  line-height: 1.5;
  padding: 20px;
}

.unico-hero__form-placeholder p {
  margin: 0 0 8px !important;
}

.unico-hero__form-placeholder p:last-child {
  margin-bottom: 0 !important;
  opacity: 0.85;
}

/* —— HubSpot form styling (scoped) —— */

.unico-hero__form form,
.unico-hero__form .hs-form,
.unico-hero__form form.hs-form {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--uh-font) !important;
  margin: 0;
  max-width: 100% !important;
  padding: 0 !important;
  width: 100%;
}

.unico-hero__form .hs-form fieldset {
  max-width: 100% !important;
}

.unico-hero__form .hs-form fieldset.form-columns-1,
.unico-hero__form .hs-form fieldset.form-columns-2,
.unico-hero__form .hs-form fieldset.form-columns-3 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 100% !important;
}

.unico-hero__form .hs-form fieldset.form-columns-2 .hs-form-field {
  flex: 1 1 calc(50% - 10px);
  float: none !important;
  min-width: 140px;
  width: auto !important;
}

.unico-hero__form .hs-form fieldset.form-columns-1 .hs-form-field {
  flex: 1 1 100%;
  float: none !important;
  width: 100% !important;
}

.unico-hero__form .hs-form-field {
  margin-bottom: 20px;
}

.unico-hero__form .hs-form-field:last-of-type {
  margin-bottom: 8px;
}

.unico-hero__form .hs-form-field > label:not(.hs-error-msg) {
  color: var(--uh-navy) !important;
  font-family: var(--uh-font) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px;
  line-height: 22px;
  margin: 0 0 10px !important;
  text-transform: uppercase;
}

.unico-hero__form label .hs-form-required,
.unico-hero__form .hs-form-required {
  color: var(--uh-accent) !important;
}

.unico-hero__form .hs-input:not([type="checkbox"]):not([type="radio"]),
.unico-hero__form input.hs-input:not([type="checkbox"]):not([type="radio"]),
.unico-hero__form select.hs-input,
.unico-hero__form textarea.hs-input,
.unico-hero__form input[type="text"],
.unico-hero__form input[type="email"],
.unico-hero__form input[type="tel"],
.unico-hero__form input[type="number"],
.unico-hero__form select,
.unico-hero__form textarea {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid var(--uh-cool) !important;
  border-radius: var(--uh-radius-input) !important;
  box-shadow: none !important;
  color: var(--uh-navy) !important;
  font-family: var(--uh-font) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  height: 52px;
  line-height: 1.3;
  padding: 14px 20px !important;
  width: 100% !important;
}

.unico-hero__form input.hs-input:-webkit-autofill,
.unico-hero__form input:-webkit-autofill,
.unico-hero__form textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: var(--uh-navy) !important;
}

.unico-hero__form select.hs-input,
.unico-hero__form select {
  appearance: none;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='18' viewBox='0 0 15 18' fill='none'%3E%3Cpath d='M2 6.5L7.5 12L13 6.5' stroke='%23203C6E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-position: right 16px center !important;
  background-repeat: no-repeat !important;
  background-size: 15px 18px !important;
  padding-right: 44px !important;
}

.unico-hero__form textarea.hs-input,
.unico-hero__form textarea {
  height: auto;
  min-height: 96px;
  resize: vertical;
}

.unico-hero__form .hs-input::placeholder,
.unico-hero__form input::placeholder,
.unico-hero__form textarea::placeholder {
  color: rgba(32, 60, 110, 0.55);
  opacity: 1;
}

.unico-hero__form .hs-input:focus,
.unico-hero__form input:focus,
.unico-hero__form select:focus,
.unico-hero__form textarea:focus {
  border-color: var(--uh-navy) !important;
  outline: none;
}

.unico-hero__form .hs-error-msgs {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.unico-hero__form .hs-error-msg,
.unico-hero__form .hs-error-msgs label {
  color: var(--uh-accent) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  text-transform: none !important;
}

.unico-hero__form .hs-submit,
.unico-hero__form .hs_submit,
.unico-hero__form .actions {
  margin-top: 24px;
}

.unico-hero__form .hs-button,
.unico-hero__form input.hs-button,
.unico-hero__form input[type="submit"],
.unico-hero__form .hs-submit .hs-button {
  background: var(--uh-navy) !important;
  border: 1px solid var(--uh-navy) !important;
  border-radius: var(--uh-radius-btn) !important;
  color: var(--uh-mist) !important;
  cursor: pointer;
  font-family: var(--uh-font) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  height: auto !important;
  line-height: 1.2 !important;
  padding: 16px 20px !important;
  text-align: center;
  transition: background-color 0.2s ease;
  width: 100% !important;
}

.unico-hero__form .hs-button:hover,
.unico-hero__form input.hs-button:hover,
.unico-hero__form input[type="submit"]:hover {
  background: #1a325c !important;
  border-color: #1a325c !important;
  color: #ffffff !important;
}

.unico-hero__form .submitted-message {
  color: var(--uh-navy);
  font-size: 16px;
  line-height: 1.5;
}

.unico-hero__form .legal-consent-container,
.unico-hero__form .hs-richtext {
  color: var(--uh-navy);
  font-size: 13px;
  line-height: 1.45;
  margin-top: 12px;
}

.unico-hero__form .hs-fieldtype-checkbox,
.unico-hero__form .hs-fieldtype-radio,
.unico-hero__form .hs-fieldtype-booleancheckbox {
  margin-bottom: 16px;
}

.unico-hero__form .inputs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

.unico-hero__form .inputs-list > li {
  margin: 0 !important;
}

.unico-hero__form .hs-form-checkbox label,
.unico-hero__form .hs-form-radio label,
.unico-hero__form .hs-form-booleancheckbox label,
.unico-hero__form .hs-form-checkbox-display,
.unico-hero__form .hs-form-radio-display,
.unico-hero__form .hs-form-booleancheckbox-display,
.unico-hero__form .inputs-list label {
  align-items: flex-start;
  color: var(--uh-navy) !important;
  display: flex !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  gap: 8px;
  letter-spacing: 0;
  line-height: 1.35 !important;
  margin: 0 !important;
  text-transform: none !important;
  width: 100%;
}

.unico-hero__form input[type="checkbox"],
.unico-hero__form input[type="radio"],
.unico-hero__form .hs-form-checkbox .hs-input,
.unico-hero__form .hs-form-radio .hs-input,
.unico-hero__form .hs-form-booleancheckbox .hs-input {
  -webkit-appearance: auto !important;
  appearance: auto !important;
  accent-color: var(--uh-navy);
  background: #ffffff !important;
  border: 1px solid var(--uh-cool) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  cursor: pointer;
  flex: 0 0 16px;
  height: 16px !important;
  margin: 2px 0 0 !important;
  max-height: 16px !important;
  max-width: 16px !important;
  min-height: 16px !important;
  min-width: 16px !important;
  padding: 0 !important;
  width: 16px !important;
}

.unico-hero__form input[type="radio"] {
  border-radius: 50% !important;
}

.unico-hero__form .inputs-list span,
.unico-hero__form .hs-form-checkbox-display span,
.unico-hero__form .hs-form-radio-display span,
.unico-hero__form .hs-form-booleancheckbox-display span {
  color: var(--uh-navy) !important;
  display: block;
  flex: 1 1 auto;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.35;
  min-width: 0;
  text-transform: none !important;
}

@media (max-width: 1200px) {
  .unico-hero {
    --uh-gutter: 40px;
    --uh-headline-size: 52px;
    --uh-headline-lh: 70px;
  }

  .unico-hero__inner {
    gap: 40px;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
    min-height: 0;
    padding-top: 72px;
    padding-bottom: 48px;
  }

  .unico-hero__divider {
    margin: 40px 0 48px;
  }
}

@media (max-width: 860px) {
  .unico-hero {
    --uh-gutter: 24px;
    --uh-headline-size: 36px;
    --uh-headline-lh: 48px;
  }

  .unico-hero__gradient {
    background: linear-gradient(
      180deg,
      var(--uh-mist) 0%,
      var(--uh-mist) 42%,
      rgba(237, 233, 232, 0.82) 58%,
      rgba(237, 233, 232, 0.35) 78%,
      rgba(237, 233, 232, 0) 100%
    );
  }

  .unico-hero__bg-image {
    object-position: 70% center;
  }

  .unico-hero__inner {
    gap: 28px;
    grid-template-columns: 1fr;
    padding: 40px var(--uh-gutter) 40px;
  }

  .unico-hero__copy {
    max-width: none;
  }

  .unico-hero__headline {
    margin-bottom: 16px !important;
  }

  .unico-hero__headline-outline {
    -webkit-text-stroke-width: 1.25px;
  }

  .unico-hero__body,
  .unico-hero__support,
  .unico-hero__form-subtitle {
    font-size: 16px !important;
    line-height: 24px;
  }

  .unico-hero__divider {
    margin: 28px 0 28px;
  }

  .unico-hero__actions {
    gap: 12px;
  }

  .unico-hero__btn {
    flex: 1 1 auto;
    font-size: 16px !important;
    justify-content: center;
    min-height: 52px;
    min-width: min(100%, 220px);
  }

  .unico-hero__form-card {
    padding: 28px 20px 22px;
  }

  .unico-hero__form-title {
    font-size: 20px !important;
  }

  .unico-hero__form-subtitle {
    margin-bottom: 28px !important;
  }

  .unico-hero__form fieldset.form-columns-2 .hs-form-field {
    flex: 1 1 100%;
  }
}