.page-hero {
  position: relative;
  display: flex;
  min-height: min(660px, 88svh);
  align-items: center;
  gap: clamp(36px, 5vw, 72px);
  overflow: hidden;
  padding: 130px max(var(--page-gutter), calc((100vw - var(--content-width)) / 2)) 64px;
  isolation: isolate;
  background: #eaf3f8;
  color: var(--ink);
}
.page-hero::before {
  position: absolute;
  z-index: 0;
  top: 84px;
  right: max(calc(var(--page-gutter) - 30px), calc((100vw - var(--content-width)) / 2 - 30px));
  width: min(47vw, 600px);
  height: clamp(350px, 42vw, 500px);
  border-radius: 36% 64% 54% 46% / 48% 42% 58% 52%;
  background: rgba(46,126,168,.22);
  content: '';
  animation: hero-shape-drift 13s ease-in-out infinite alternate;
}
.page-hero__image {
  position: relative;
  z-index: 1;
  order: 2;
  flex: 0 1 44%;
  width: min(44%, 570px);
  height: clamp(320px, 39vw, 460px);
  margin-left: auto;
  border-radius: 22px;
  object-fit: cover;
  object-position: center;
  filter: saturate(.86);
  animation: page-hero-arrive .85s .08s both cubic-bezier(.2,.7,.2,1);
}
.page-hero__content {
  position: relative;
  z-index: 2;
  order: 1;
  flex: 1 1 0;
  width: auto;
  max-width: 600px;
  margin: 0;
  padding: 0;
}
.page-hero .eyebrow { color: var(--muted); }
.page-hero .eyebrow::before { background: #2f82ad; }
.page-hero .display {
  max-width: 600px;
  margin: 18px 0;
  color: var(--ink);
  font-size: clamp(3rem, 5.6vw, 4.8rem);
}
.page-hero .display em { color: #708087; }
.page-hero .lead { max-width: 460px; margin: 0; color: var(--muted); }

/* Page-specific shapes add variety while the layout stays consistent. */
.page-hero--about::before {
  border-radius: 62% 38% 40% 60% / 44% 56% 44% 56%;
  animation-duration: 16s;
}
.page-hero--services::before {
  border-radius: 52% 48% 65% 35% / 58% 38% 62% 42%;
  animation-duration: 18s;
  animation-direction: alternate-reverse;
}
.page-hero--contact { background: #e8f2f8; }
.page-hero--contact::before {
  border-radius: 22px 46% 26px 58%;
  background: rgba(42,130,176,.24);
  animation-duration: 12s;
}
.page-hero--legal { min-height: 500px; background: #eff5f7; }
.page-hero--legal::before {
  height: 310px;
  border-radius: 24px 48% 24px 48%;
  animation-duration: 20s;
}
.page-hero--legal .page-hero__image { height: 310px; }
.page-hero--legal .display { font-size: clamp(2.8rem, 5vw, 4.2rem); }

@keyframes page-hero-arrive { from { transform: scale(1.035); opacity: .72; } to { transform: scale(1); opacity: 1; } }
@keyframes hero-shape-drift { from { transform: rotate(-8deg) scale(.96); } to { transform: rotate(8deg) scale(1.04); } }
@media (max-width: 900px) {
  .page-hero { min-height: 580px; gap: 32px; }
  .page-hero__image { flex-basis: 44%; width: 44%; height: 350px; }
  .page-hero .display { font-size: clamp(2.8rem, 5.6vw, 4.3rem); }
  .page-hero--legal { min-height: 470px; }
  .page-hero--legal .page-hero__image { height: 290px; }
}
@media (max-width: 680px) {
  .page-hero { min-height: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 100px var(--page-gutter) 0; }
  .page-hero__image { order: 0; flex: 0 0 auto; width: 100%; height: clamp(230px, 65vw, 330px); margin: 0; border-radius: 20px; }
  .page-hero__content { order: 1; flex: 0 0 auto; width: 100%; max-width: none; padding: 28px 0 46px; }
  .page-hero .display { max-width: 100%; margin: 14px 0 12px; font-size: clamp(2.75rem, 11vw, 4rem); }
  .page-hero .lead { max-width: 100%; }
  .page-hero::before { top: 82px; right: 8%; width: 84%; height: 270px; }
  .page-hero--about .page-hero__image { border-radius: 20px; }
  .page-hero--services .page-hero__image { border-radius: 20px 20px 20px 44px; }
  .page-hero--contact .page-hero__image { height: clamp(220px, 58vw, 300px); border-radius: 20px; }
  .page-hero--legal { min-height: 0; }
  .page-hero--legal .page-hero__image { height: 230px; }
  .page-hero--legal .page-hero__content { padding: 24px 0 38px; }
}
@media (prefers-reduced-motion: reduce) { .page-hero__image, .page-hero::before { animation: none; } }