.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--secondary-color);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: none !important;
}

.page-hero-message {
  position: absolute;
  left: clamp(1rem, 4vw, 3.5rem) !important;
  bottom: clamp(1rem, 4vw, 3rem) !important;
  margin: 0;
  padding: 0;
  max-width: min(72vw, 42rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.8vw, 4.6rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.page-hero-message.hero--center,
.page-hero-message.hero--top-left,
.page-hero-message.hero--top-right,
.page-hero-message.hero--bottom-left,
.page-hero-message.hero--bottom-right {
  top: auto !important;
  right: auto !important;
  left: clamp(1rem, 4vw, 3.5rem) !important;
  bottom: clamp(1rem, 4vw, 3rem) !important;
  transform: none !important;
  text-align: left !important;
}

.page-hero-message.hero--center {
  width: min(72vw, 42rem) !important;
  max-width: min(72vw, 42rem) !important;
}

.page-hero-message.hero--top-left,
.page-hero-message.hero--top-right,
.page-hero-message.hero--bottom-left,
.page-hero-message.hero--bottom-right {
  width: min(72vw, 42rem) !important;
  max-width: min(72vw, 42rem) !important;
}

@media (max-width: 768px) {
  .page-hero-message {
    left: 1rem !important;
    bottom: 1rem !important;
    max-width: min(84vw, 20rem);
    width: min(84vw, 20rem);
    font-size: clamp(1.05rem, 4.6vw, 1.7rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
  }

  .page-hero-message.hero--center,
  .page-hero-message.hero--top-left,
  .page-hero-message.hero--top-right,
  .page-hero-message.hero--bottom-left,
  .page-hero-message.hero--bottom-right {
    left: 1rem !important;
    bottom: 1rem !important;
    width: min(84vw, 20rem) !important;
    max-width: min(84vw, 20rem) !important;
    text-align: left !important;
  }
}

@media (max-width: 480px) {
  .page-hero-message {
    max-width: min(88vw, 18rem);
    width: min(88vw, 18rem);
    font-size: clamp(0.95rem, 4.9vw, 1.35rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
  }
}