.hero {
  position: relative; isolation: isolate; overflow: clip;
  margin-top: calc(-1 * (var(--top-h) + var(--top-gap)));
  padding: calc(var(--top-h) + var(--top-gap) + clamp(36px, 7vh, 84px)) 0 clamp(112px, 14vh, 160px);
  background:
    radial-gradient(56% 72% at 90% 8%, #FAD0DE 0%, rgb(250 208 222 / 0) 62%),
    radial-gradient(48% 66% at 4% 0%, #E2DAFC 0%, rgb(226 218 252 / 0) 60%),
    radial-gradient(60% 56% at 58% 104%, #FFE0CF 0%, rgb(255 224 207 / 0) 62%),
    var(--bg);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.hero__copy:only-child { grid-column: 1 / -1; }
.line { display: block; overflow: hidden; margin-bottom: -.14em; padding-bottom: .14em; }
.line > span { display: block; }
.hero__lead { max-width: 33ch; margin: clamp(20px, 2.6vw, 32px) 0 clamp(28px, 3vw, 40px); font-size: clamp(1.15rem, 1.55vw, 1.4rem); line-height: 1.5; color: var(--ink); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__visual { position: relative; isolation: isolate; justify-self: end; width: min(100%, 440px); }
.hero__visual::before {
  content: ""; position: absolute; z-index: -1; right: -16%; top: -8%; width: 84%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #FFD3BC 0%, rgb(255 211 188 / 0) 68%);
}
.hero__visual::after {
  content: ""; position: absolute; z-index: -1; left: -14%; bottom: -7%; width: 66%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgb(11 4 73 / .18);
}
.hero__photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px var(--r-card) var(--r-card); background: var(--blush); }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.badge {
  position: absolute; left: clamp(-72px, -5vw, -28px); bottom: 12%;
  display: grid; place-items: center; width: clamp(112px, 11vw, 148px); aspect-ratio: 1;
  border-radius: 50%; background: var(--paper); box-shadow: var(--shadow-lg);
}
.badge > svg { grid-area: 1 / 1; width: 100%; height: 100%; }
.badge text { font: 500 15.5px var(--font-b); letter-spacing: .3em; fill: var(--ink); }
.badge .ph { grid-area: 1 / 1; font-size: clamp(1.5rem, 2.2vw, 2rem); color: var(--rose); }

@media (prefers-reduced-motion: no-preference) {
  .line > span { animation: line-up 1.2s var(--ease) both; }
  .line:nth-child(2) > span { animation-delay: .12s; }
  .line:nth-child(3) > span { animation-delay: .24s; }
  .line:nth-child(4) > span { animation-delay: .36s; }
  .hero__lead { animation: fade-up 1s var(--ease) .38s both; }
  .hero__cta { animation: fade-up 1s var(--ease) .5s both; }
  .hero__photo { animation: fade-up 1.2s var(--ease) .15s both; }
  .hero__photo img { animation: settle 2s var(--ease) .15s both; }
  .badge { animation: pop 1s var(--ease) 1s both; }
  .badge > svg { animation: spin 28s linear infinite; }
}

@media (max-width: 1023px) {
  .hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .hero { padding-bottom: 96px; }
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__visual { justify-self: center; width: min(78%, 320px); }
  .badge { left: -14%; bottom: 8%; width: 104px; }
}