.hero,
.page-hero {
  isolation: isolate;
}

.hero::after {
  content:'';
  position:absolute;
  width:340px;
  height:340px;
  left:-130px;
  bottom:-180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(7,138,136,.13),transparent 68%);
  animation:ambientDrift 9s ease-in-out infinite alternate;
  pointer-events:none;
}

.hero .eyebrow { animation:heroFadeUp .65s .05s both; }
.hero h1 { animation:heroFadeUp .75s .14s both; }
.hero p { animation:heroFadeUp .75s .24s both; }
.hero-actions { animation:heroFadeUp .75s .34s both; }
.hero-image { animation:heroImageReveal .95s .16s cubic-bezier(.2,.7,.2,1) both, heroImageFloat 7s 1.2s ease-in-out infinite; }
.float-one { animation:calloutIn .65s .85s both, calloutFloat 5.5s 1.5s ease-in-out infinite; }
.float-two { animation:calloutIn .65s 1s both, calloutFloat 6s 1.7s ease-in-out infinite reverse; }

body:not(.page-home) .page-hero .breadcrumbs { display:inline-block; animation:heroFadeUp .6s .05s both; }
body:not(.page-home) .page-hero h1 { animation:heroFadeUp .72s .15s both; }
body:not(.page-home) .page-hero .lead { animation:heroFadeUp .72s .26s both; }
body:not(.page-home) .page-hero::after { animation:innerImageReveal .95s .12s cubic-bezier(.2,.7,.2,1) both, innerImageFloat 8s 1.2s ease-in-out infinite; }
body:not(.page-home) .page-hero::before { content:''; position:absolute; width:240px; height:240px; left:8%; top:-140px; border-radius:50%; background:radial-gradient(circle,rgba(155,10,120,.11),transparent 70%); animation:ambientDrift 10s ease-in-out infinite alternate-reverse; pointer-events:none; }

@keyframes heroFadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
@keyframes heroImageReveal { from{opacity:0;transform:translateX(35px) scale(.96);clip-path:inset(0 0 100% 0 round 30px)} to{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 30px)} }
@keyframes innerImageReveal { from{opacity:0;transform:translateX(38px) scale(.97);clip-path:inset(0 0 0 100% round 26px)} to{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 26px)} }
@keyframes heroImageFloat { 50%{transform:translateY(-8px)} }
@keyframes innerImageFloat { 50%{transform:translateY(-5px)} }
@keyframes calloutIn { from{opacity:0;transform:translateY(12px) scale(.94)} to{opacity:1;transform:none} }
@keyframes calloutFloat { 50%{transform:translateY(-6px)} }
@keyframes ambientDrift { to{transform:translate(45px,28px) scale(1.08)} }

@media(max-width:900px){
  body:not(.page-home) .page-hero::after { animation:innerImageReveal .8s .2s both; }
}

@media(max-width:640px){
  .hero-image { animation:heroImageReveal .8s .12s both; }
  .hero::after, body:not(.page-home) .page-hero::before { display:none; }
  .hero h1 { font-size:40px; line-height:1.08; }
  body:not(.page-home) .page-hero h1 { font-size:38px; line-height:1.1; letter-spacing:-.025em; }
}

@media(prefers-reduced-motion:reduce){
  .hero *, .hero::before, .hero::after, .page-hero *, .page-hero::before, .page-hero::after { animation:none!important; transform:none!important; }
}