.personal-hero {
  min-height: clamp(480px, 48vw, 620px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 6vw, 72px);
  border: 1px solid var(--wabi-border);
  background-image:
    linear-gradient(90deg, rgba(249, 249, 248, 0.98) 0%, rgba(249, 249, 248, 0.9) 43%, rgba(249, 249, 248, 0.18) 69%, rgba(249, 249, 248, 0) 100%),
    url('/custom-hero-bg-optimized.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.personal-hero h1 {
  max-width: 58%;
  margin-top: 0;
}

.personal-hero .personal-intro,
.personal-hero .personal-help {
  max-width: 54%;
}

.personal-hero .personal-intro { color: #444440; }
.personal-hero .personal-help { color: #5f5f59; }

@media (max-width: 780px) {
  .personal-hero {
    min-height: 620px;
    justify-content: flex-end;
    padding: 32px 24px;
    background-image:
      linear-gradient(180deg, rgba(249, 249, 248, 0.12) 0%, rgba(249, 249, 248, 0.58) 35%, rgba(249, 249, 248, 0.96) 68%, rgba(249, 249, 248, 1) 100%),
      url('/custom-hero-bg-optimized.png');
    background-position: 67% center;
  }

  .personal-hero h1,
  .personal-hero .personal-intro,
  .personal-hero .personal-help {
    max-width: 100%;
  }

  .personal-hero .personal-intro { font-size: 16px; }
}

@media (max-width: 420px) {
  .personal-hero {
    min-height: 640px;
    padding: 28px 18px;
    background-position: 66% center;
  }
}