/* Harbor cta: final shared rules and responsive variants. */
.hb-cta__panel {
  padding: 48px;
}

.hb-cta__panel > * {
  margin: 0;
}

.hb-cta__actions {
  margin-top: 16px;
}

@media (max-width: 599px) {
  .hb-cta {
    padding: 24px 0 48px;
  }
}

.hb-cta__copy > * {
  margin: 0;
}

.hb-cta__copy p {
  font-size: 20px;
  line-height: 1.5;
}

.hb-cta__actions {
  margin: 0;
}

html[data-theme="dark"] .hb-cta__panel {
  background: var(--ocf-bg-alt);
  border-color: var(--ocf-border);
}

@media (max-width: 991px) {
  .hb-cta {
    padding: 40px 0 64px;
  }
  .hb-cta__panel {
    padding: 40px 32px;
  }
}

@media (max-width: 599px) {
  .hb-cta__panel {
    padding: 32px 24px;
  }
  .hb-cta__copy p {
    font-size: 18px;
  }
}

.hb-cta__actions .hb-phone .hb-phone-icon {
  grid-column: 1;
  grid-row: 2;
}

.hb-cta__actions .hb-phone:hover {
  text-decoration: none;
}

.hb-cta__actions .hb-phone:hover > [data-ocf-field="contact_phone"] {
  text-decoration: underline;
}

.hb-cta__copy h2 {
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -.03em;
  max-width: 16ch;
}

.hb-cta .container-global {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.hb-cta__panel {
  padding: clamp(56px, 6vw, 88px);
}

.hb-cta__panel h2 {
  color: inherit;
}

.hb-cta__copy p {
  max-width: 48ch;
  color: var(--ocf-body-alt);
}

.hb-cta__actions .hb-phone {
  grid-template-columns: 20px minmax(0,1fr);
  grid-template-rows: auto auto;
  font: 500 var(--ocf-font-body-size)/28px var(--font-body);
  color: var(--ocf-heading-alt);
}

.hb-cta__actions .hb-phone__label {
  grid-column: 1 / -1;
  font: 400 var(--ocf-font-body-size)/28px var(--font-body);
  color: var(--ocf-body-alt);
}

.hb-cta__actions .hb-phone > [data-ocf-field="contact_phone"] {
  grid-column: 2;
  grid-row: 2;
  font-size: 22px;
  line-height: 30px;
}

@media (max-width: 991px) {
  .hb-cta__panel {
    grid-template-columns: 1fr;
  }
  .hb-cta__panel::after {
    display: none;
  }
  .hb-cta__actions {
    max-width: 420px;
  }
}

.hb-cta__panel::after {
  content: "";
  position: absolute;
  top: clamp(48px, 5vw, 72px);
  bottom: clamp(48px, 5vw, 72px);
  left: 56%;
  width: 1px;
  background: color-mix(in srgb, var(--ocf-primary) 16%, var(--ocf-border));
  display: none;
}

.hb-cta__panel > * {
  position: relative;
  z-index: 1;
}

.hb-cta {
  padding: 0;
  position: relative;
  z-index: 1;
  margin-top: calc(0px - var(--hb-radius) - 1px);
  background: transparent;
}

.hb-cta__panel {
  gap: 16px;
  min-height: 360px;
  gap: clamp(56px, 8vw, 112px);
  padding: clamp(72px, 7vw, 112px) max(var(--container-pad), calc((100vw - var(--container-max)) / 2));
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  padding-block: clamp(76px, 7vw, 104px);
}

.hb-cta__copy::after {
  width: min(460px, 100%);
  height: 4px;
  margin-top: 18px;
}

.hb-cta__actions {
  align-self: center;
  width: 360px;
  max-width: 100%;
  gap: 28px;
  justify-self: end;
}

.hb-cta__actions .hb-phone {
  display: grid !important;
  column-gap: 12px;
  row-gap: 4px;
  align-items: center;
  justify-content: start;
  margin-top: 0;
}

@media (max-width: 991px) {
  .hb-cta__panel {
    min-height: 0;
    gap: 32px;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 36px;
    padding-block: 64px;
  }
  .hb-cta__actions {
    width: min(360px, 100%);
    justify-self: start;
  }
}

@media (max-width: 599px) {
  .hb-cta__panel {
    row-gap: 32px;
    padding-block: 48px;
  }
  .hb-cta__copy::after {
    width: min(240px, 100%);
    margin-top: 10px;
  }
  .hb-cta__actions {
    gap: 24px;
  }
}

.hb-cta__copy::after {
  content: "";
  border-radius: 999px;
  background: var(--ocf-primary);
  display: none;
}

.hb-cta__actions .hb-button {
  min-height: 52px;
  justify-self: start;
  width: max-content;
  min-width: min(100%, var(--hb-button-width));
  max-width: 100%;
}

.hb-cta__panel {
  flex-direction: column;
  display: grid;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--hb-radius) var(--hb-radius) 0 0;
  color: var(--ocf-heading-alt);
  text-align: left;
  column-gap: clamp(88px, 10vw, 160px);
  align-items: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ocf-bg-dark);
}

.hb-cta__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 56%;
  pointer-events: none;
  filter: saturate(.82) contrast(1.02);
}

.hb-cta__panel::before {
  background: none;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: normal;
  background: linear-gradient(98deg,
      color-mix(in srgb, var(--ocf-bg-dark) 92%, transparent) 0%,
      color-mix(in srgb, var(--ocf-bg-dark) 86%, transparent) 30%,
      color-mix(in srgb, var(--ocf-bg-dark) 74%, transparent) 58%,
      color-mix(in srgb, var(--ocf-bg-dark) 74%, transparent) 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--ocf-bg-dark) 18%, transparent) 0%,
      color-mix(in srgb, var(--ocf-bg-dark) 52%, transparent) 100%);
}

.hb-cta__copy {
  display: grid;
  min-width: 0;
  gap: 20px;
  position: relative;
  z-index: 2;
}

.hb-cta__actions {
  display: grid;
  position: relative;
  z-index: 2;
}

@media (max-width: 991px) {
  .hb-cta__image {
    object-position: 54% 58%;
  }
  .hb-cta__panel::before {
    background: linear-gradient(96deg,
        color-mix(in srgb, var(--ocf-bg-dark) 92%, transparent) 0%,
        color-mix(in srgb, var(--ocf-bg-dark) 84%, transparent) 46%,
        color-mix(in srgb, var(--ocf-bg-dark) 74%, transparent) 100%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--ocf-bg-dark) 22%, transparent) 0%,
        color-mix(in srgb, var(--ocf-bg-dark) 58%, transparent) 100%);
  }
}

@media (max-width: 599px) {
  .hb-cta__image {
    object-position: 51% 55%;
  }
  .hb-cta__panel::before {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--ocf-bg-dark) 91%, transparent) 0%,
        color-mix(in srgb, var(--ocf-bg-dark) 82%, transparent) 62%,
        color-mix(in srgb, var(--ocf-bg-dark) 74%, transparent) 100%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--ocf-bg-dark) 18%, transparent) 0%,
        color-mix(in srgb, var(--ocf-bg-dark) 62%, transparent) 100%);
  }
}

/* OCF_AGENT_BLOCK:cta-reduced-dark-overlay START */
.hb-cta__panel::before {
  background: linear-gradient(98deg,
      color-mix(in srgb, var(--ocf-bg-dark) 42%, transparent) 0%,
      color-mix(in srgb, var(--ocf-bg-dark) 35%, transparent) 30%,
      color-mix(in srgb, var(--ocf-bg-dark) 28%, transparent) 58%,
      color-mix(in srgb, var(--ocf-bg-dark) 28%, transparent) 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--ocf-bg-dark) 0%, transparent) 0%,
      color-mix(in srgb, var(--ocf-bg-dark) 12%, transparent) 100%);
}

@media (max-width: 991px) {
  .hb-cta__panel::before {
    background: linear-gradient(96deg,
        color-mix(in srgb, var(--ocf-bg-dark) 46%, transparent) 0%,
        color-mix(in srgb, var(--ocf-bg-dark) 38%, transparent) 46%,
        color-mix(in srgb, var(--ocf-bg-dark) 30%, transparent) 100%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--ocf-bg-dark) 2%, transparent) 0%,
        color-mix(in srgb, var(--ocf-bg-dark) 16%, transparent) 100%);
  }
}

@media (max-width: 599px) {
  .hb-cta__panel::before {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--ocf-bg-dark) 50%, transparent) 0%,
        color-mix(in srgb, var(--ocf-bg-dark) 42%, transparent) 62%,
        color-mix(in srgb, var(--ocf-bg-dark) 34%, transparent) 100%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--ocf-bg-dark) 2%, transparent) 0%,
        color-mix(in srgb, var(--ocf-bg-dark) 20%, transparent) 100%);
  }
}
/* OCF_AGENT_BLOCK:cta-reduced-dark-overlay END */