.cb-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow: hidden;
  background-color: var(--cb-color-dark-mink);
}

.cb-hero-overlay {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 1;
  height: var(--cb-hero-overlay-height, 50%);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0 0 0/var(--cb-hero-overlay-opacity, 50%)) 100%);
  pointer-events: none;
}

.cb-hero-bg {
  position: absolute;
  inset-block: -15%;
  inset-inline: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  will-change: transform;
}

.cb-hero-badge {
  position: absolute;
  display: block;
  inset-block-start: 120px;
  inset-inline-start: var(--cb-gutter);
  z-index: 2;
  width: 174px;
  height: 174px;
  pointer-events: none;
}
@media (min-width: 64rem) {
  .cb-hero-badge {
    inset-block-start: 7.5rem;
    inset-inline-start: 8.125rem;
    width: 261px;
    height: 261px;
  }
}
.cb-hero-badge > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cb-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--cb-space-48);
  box-sizing: border-box;
  width: 100%;
  max-width: var(--cb-layout-max);
  margin-top: auto;
  margin-inline: auto;
  padding-inline: var(--cb-gutter);
  padding-block-end: var(--cb-space-64);
}
@media (min-width: 64rem) {
  .cb-hero-content {
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    padding-block-end: var(--cb-space-80);
  }
}

.cb-hero-content-crumbs {
  padding-block-end: var(--cb-space-40);
}
@media (min-width: 64rem) {
  .cb-hero-content-crumbs {
    padding-block-end: var(--cb-space-80);
  }
}

@media (min-width: 64rem) {
  .cb-hero-crumbs {
    margin-inline-end: auto;
  }
}

.cb-hero-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
  text-align: start;
}
@media (min-width: 64rem) {
  .cb-hero-panel {
    width: max-content;
  }
}

.cb-hero-title {
  margin: 0;
  max-width: 27.0625rem;
  color: var(--cb-color-ivory);
  font-family: var(--cb-font-display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}
@media (min-width: 64rem) {
  .cb-hero-title {
    font-size: 2.5rem;
    line-height: 1.3;
  }
}
.cb-hero-title > * {
  margin-block: -0.15em -0.2em;
}
.cb-hero-title .cb-anim-line {
  padding-block: 0.15em 0.2em;
}

.cb-hero-actions {
  margin-top: var(--cb-space-32);
}
.cb-hero-actions .block-list-appender:not(:only-child) {
  display: none;
}
.cb-hero-actions > * {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.625rem;
}
@media (min-width: 64rem) {
  .cb-hero-actions > * {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 0;
  }
  .cb-hero-actions > * > :nth-child(even) {
    margin-inline-start: 0.625rem;
  }
}
.cb-hero-actions .cb-btn {
  font-family: var(--cb-font-body);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 0.8571;
  padding-block: 1.25rem;
  padding-inline: var(--cb-space-20);
  font-size: 1rem;
}
@media (min-width: 64rem) {
  .cb-hero-actions .cb-btn {
    font-family: var(--cb-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 0.75;
    height: 3.375rem;
    font-size: 1.125rem;
  }
}
@media (min-width: 64rem) {
  .cb-hero-actions .cb-btn-primary-light {
    padding-inline: var(--cb-space-32);
  }
}