/* ==========================================================================
   Hero Block — Section 1
   Figma: 12383:49908
   Blue full-width hero with headline, body, two CTA buttons.
   ========================================================================== */

.block--hero {
  background-color: #ffffff;
  border-radius: 0 0 20px 20px;
  overflow: hidden;
  position: relative;
  width: 100%;
  /* Mobile: flex column so content renders above media */
  display: flex;
  flex-direction: column;
}

/* Background image — cover aligned left on mobile so the blue area fills the block
   ========================================================================== */
.hero__bg {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 200vw;
  pointer-events: none;
}

.hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
}

/* People image — bottom-right on mobile, clipped by block overflow: hidden
   ========================================================================== */
.hero__people {
  display: block;
  position: absolute;
  bottom: 0;
  left: 53vw;
  width: 58vw;
  max-width: 864px;
  height: auto;
  overflow: visible;
  z-index: 1;
  pointer-events: none;
}

.hero__people img {
  display: block;
  width: 100%;
  height: auto;
}

/* Content wrapper
   ========================================================================== */
.block--hero>.container {
  order: 1;
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: relative;
  z-index: 2;
  padding-top: 60px;
  padding-bottom: 30vw;
}

/* Heading
   ========================================================================== */
.hero__heading {
  font-family: "Axiforma", sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.22;
  color: #f6f6f6;
  margin: 0;
  max-width: 770px;
}

/* Body text
   ========================================================================== */
.hero__body {
  font-family: "TT Norms Pro", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.62;
  color: #ffffff;
  margin: 0;
  max-width: 757px;
}

/* CTA buttons row
   ========================================================================== */
.hero__ctas {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

/* Shared button styles */
.hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  font-family: "Axiforma", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 25px;
  padding: 10px 25px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

/* Primary: white bg, deep blue text */
.hero__btn--primary {
  background-color: #ffffff;
  color: #0b2663;
  border: 2px solid #ffffff;
}

.hero__btn--primary:hover,
.hero__btn--primary:focus {
  background-color: #0b2663;
  color: #ffffff;
  border-color: #0b2663;
}

/* Outline: white border, white text */
.hero__btn--outline {
  background-color: transparent;
  color: #ffffff;
  border: 1.5px solid #ffffff;
}

.hero__btn--outline:hover,
.hero__btn--outline:focus {
  background-color: #ffffff;
  color: #0b2663;
}

.hero__btn--outline svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.hero__btn--outline:hover svg,
.hero__btn--outline:focus svg {
  transform: translateX(3px);
}

/* ==========================================================================
   Breakpoints — mobile-first cascade
   ========================================================================== */

@media screen and (min-width: 992px) {
  .hero__ctas {
    flex-direction: row;
    gap: 30px;
    align-items: center;
  }
}

@media screen and (min-width: 782px) {
  .hero__content {
    padding-top: 80px;
    padding-bottom: 100px;
  }

  .hero__bg {
    width: auto;
  }

  .hero__bg img {
    object-position: center;
  }

  .hero__body {
    width: 50vw;
    max-width: 872px;
    text-wrap: balance;
  }

  .hero__heading {
    text-wrap: balance;
    width: 50vw;
    max-width: 872px;
  }
}

@media screen and (min-width: 992px) {

  /* Layout: restore block flow, absolute positioning takes over */
  .block--hero {
    display: block;
    background-color: #ffffff;
  }

  .block--hero>.container {
    background-color: transparent;
  }

  /* Heading: fluid scale 36px → 80px */
  .hero__heading {
    font-size: clamp(36px, calc(7.25vw - 36px), 80px);
    line-height: 1.19;
  }

  /* Full-bleed background — stretches to fill block */
  .hero__bg {
    display: block;
    position: absolute;
    inset: 0;
    width: auto;
    z-index: 0;
    pointer-events: none;
  }

  .hero__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* People — right panel, aligned at 58%, bottom-anchored */
  .hero__people {
    display: block;
    position: absolute;
    left: 53vw;
    bottom: 0;
    width: 58vw;
    max-width: 864px;
    height: auto;
    overflow: visible;
    z-index: 2;
    pointer-events: none;
  }

  .hero__people img {
    display: block;
    width: 100%;
    height: auto;
  }
}

@media screen and (min-width: 1250px) {
  .hero__content {
    gap: 40px;
    padding-top: 100px;
    padding-bottom: 140px;
  }

  .hero__body {
    font-size: 20px;
    line-height: 1.5;
  }
}

@media (max-width: 767px) {
  .hero__btn {
    font-size: 16px;
    line-height: 26px;
  }
}