/* Full-bleed colored band */
.page-hero {
  background: var(--hero-bg, #0b7a74); /* outer color from ACF */
  width: 100%;
}

/* Centered 1240px container with fixed height */
.page-hero__inner {
  max-width: 1240px;
  margin: 0 auto;
  height: 400px;
  position: relative;

  /* new: flex layout to push content to bottom */
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  background-image: var(--hero-img);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
}

/* Left-aligned title + accent */
.page-hero__content {
  display: flex;
  flex-direction: column;
  margin-bottom: 60px;
}

/* Inherit your site typography; tweak if needed */
.page-hero__title {
  color: #fff;
  margin: 0;
}

/* Accent line under title – reuse your .accent rules or: */
.page-hero__content .accent {
  width: 96px;
  height: 6px;
  background-image: url("../img/accents/aboutsidebars.svg"); /* adjust path if needed */
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}

.accent {
  margin-top: 10px;
  display: inline-block;
  width: 129px; /* adjust size */
  height: 8px;
  background-image: url("../img/accents/aboutsidebars.svg");
  background-repeat: no-repeat;
  background-size: contain; /* or 'cover', depending on your art */
  background-position: left center;
}

.page-hero--plain .page-hero__inner {
  padding: 0; /* no inset padding when there’s no text */
  background-position: center center;
  background-size: cover; /* for KR header we usually want a full bleed crop */
}