.hero-e {
  padding: 64px 0 96px;
  background: var(--cream);
  overflow: hidden;
}
.hero-e__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 900px) {
  .hero-e__grid { grid-template-columns: 1.05fr 1fr; gap: 64px; }
}
.hero-e__headline {
  font-family: var(--font-serif);
  font-size: clamp(44px, 6.5vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 20px;
  font-weight: 400;
}
.hero-e__headline em { font-style: italic; color: var(--teal); font-weight: 500; }
.hero-e__lede {
  font-size: 18px;
  color: var(--ink-muted);
  max-width: 520px;
  margin: 0 0 36px;
}

.hero-e__collage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  margin-inline: auto;
}
.hero-e__layer {
  position: absolute;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 10px 30px -10px rgba(36, 34, 83, 0.35);
  background: #fff;
  padding: 6px;
}
.hero-e__layer img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius-md) - 6px); }

.hero-e__layer--back  { width: 44%; top:  4%; left:  2%;  transform: rotate(2deg);  z-index: 1; }
.hero-e__layer--mid   { width: 54%; top: 42%; right: 0%;  transform: rotate(5deg);  z-index: 2; }
.hero-e__layer--front { width: 62%; top: 14%; left: 22%;  transform: rotate(-3deg); z-index: 3; }

.hero-e__arrow {
  position: absolute;
  bottom: 8%;
  left: 6%;
  width: 110px;
  height: 56px;
  transform: rotate(-8deg);
  z-index: 4;
  pointer-events: none;
}