/* Independent family planes; composition is tuned for desktop and phones. */
.hero.family-hero{padding:0;background:#edf3f3;isolation:isolate;min-height:740px}
.family-hero:before{display:none}
.family-scene{position:absolute;inset:0;overflow:hidden;z-index:-2;pointer-events:none;perspective:1400px;background:#edf3f3}
/* Move the background plane without changing its scale or depth motion. */
.family-room{position:absolute;top:-2%;bottom:-2%;left:calc(-24% - 88px);right:calc(-2% + 88px);transform:translate3d(var(--family-bg-x,0px),var(--family-bg-y,0px),0) scale(1.025);transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.family-room img{height:100%;width:100%;object-fit:cover;object-position:100% 35%;animation:family-camera 16s ease-in-out infinite;transform-origin:65% 55%;will-change:transform}
.family-foreground{position:absolute;right:-2%;bottom:2%;width:39%;height:95%;transform:translate3d(var(--family-fg-x,0px),var(--family-fg-y,0px),100px) rotateY(var(--family-turn,0deg));transform-origin:50% 85%;transition:transform .65s cubic-bezier(.2,.7,.3,1);transform-style:preserve-3d}
.family-foreground img{height:100%;width:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 19px 24px #123b4533);animation:family-foreground-sway 9s ease-in-out infinite;animation-delay:-3s;transform-origin:50% 92%;will-change:transform}
.family-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#f5fafbf5 0%,#f5fafbee 23%,#f5fafbd6 37%,#f5fafb67 47%,transparent 55%,#0836230c 100%)}
.family-hero>.container{position:relative;z-index:2;min-height:740px;display:flex;flex-direction:column;justify-content:center;padding-top:60px;padding-bottom:25px}
.family-hero .hero-grid{min-height:590px;display:flex;align-items:center;flex:1;perspective:1000px}
.family-hero .hero-copy{max-width:560px;width:45%;padding-bottom:30px;transform-style:preserve-3d}
.family-hero h1{font-size:clamp(43px,4.5vw,64px);letter-spacing:-2.6px;line-height:1.08;margin-top:25px;transform-origin:20% 65%;animation:hero-title-depth 9s ease-in-out infinite;text-shadow:0 2px 0 #ffffffbb,0 9px 20px #1637410c;will-change:transform}
.family-hero .hero-copy>p{max-width:440px;color:#46616a;font-size:17px;text-wrap:pretty}
.family-hero .eyebrow{font-size:12px;letter-spacing:2px;white-space:normal;animation:hero-caption-float 9s ease-in-out infinite;animation-delay:-2s}
.family-hero .hero-note{max-width:440px;line-height:1.7;color:#36545e}
.family-hero .hero-bottom{position:relative;margin-top:0;padding:19px 22px;background:#f8fcfcde;border:1px solid #e4eeeea3;border-radius:12px;box-shadow:0 8px 22px #153c4510;backdrop-filter:blur(12px);color:#49626c;font-size:12px}
.family-hero .hero-bottom b{color:#1c454e}
.family-hero .button.outline{background:#ffffffad;border-color:#9ab8c1}
.family-hero .button.outline:hover{background:#fff}
.family-hero .hero-buttons{gap:12px}
.family-hero .hero-buttons .button{padding:13px 22px}
.family-hero:not(.family-in-view) .family-room img,.family-hero:not(.family-in-view) .family-foreground img,.family-hero:not(.family-in-view) h1,.family-hero:not(.family-in-view) .eyebrow{animation-play-state:paused}
@keyframes family-camera{0%,100%{transform:scale(1.015) translate3d(-.5%,0,0)}50%{transform:scale(1.06) translate3d(.5%,-.6%,0)}}
@keyframes family-foreground-sway{0%,100%{transform:perspective(1000px) translate3d(-3px,0,0) rotateY(-2deg) rotate(-.4deg) scale(.99)}50%{transform:perspective(1000px) translate3d(3px,-12px,14px) rotateY(2deg) rotate(.5deg) scale(1.015)}}
@keyframes hero-title-depth{0%,100%{transform:perspective(1000px) translate3d(0,0,0) rotateY(-.8deg) rotateX(.3deg)}50%{transform:perspective(1000px) translate3d(2px,-4px,8px) rotateY(.8deg) rotateX(-.3deg)}}
@keyframes hero-caption-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(2px,-3px,6px)}}
@media(min-width:1101px){.family-hero .hero-copy{position:relative;left:clamp(-38px,calc((1240px - 100vw)/2 + 18px),0px)}}
@media(min-width:1700px){.hero.family-hero,.family-hero>.container{min-height:780px}.family-hero .hero-grid{min-height:630px}.family-foreground{right:0;width:36%;height:98%}}
@media(max-width:1100px){.hero.family-hero,.family-hero>.container{min-height:710px}.family-hero>.container{padding-top:48px}.family-hero .hero-grid{min-height:555px}.family-hero .hero-copy{width:47%}.family-hero h1{font-size:52px}.family-hero .hero-copy>p{font-size:16px}.family-room{left:-25%;right:-4%}.family-foreground{right:-5%;width:42%;height:94%;bottom:3%}.family-hero .hero-bottom{padding:16px;gap:16px}.family-hero .hero-bottom span{gap:7px}}
@media(max-width:850px){.hero.family-hero,.family-hero>.container{min-height:760px}.family-hero>.container{padding-top:46px;padding-bottom:22px}.family-hero .hero-grid{min-height:635px;align-items:flex-start}.family-hero .hero-copy{width:54%;max-width:430px;padding-bottom:0}.family-hero h1{font-size:47px;letter-spacing:-2px}.family-hero .hero-copy>p{font-size:16px;max-width:340px}.family-room{top:0;bottom:0;left:-32%;right:-18%}.family-room img{object-position:86% 35%}.family-foreground{width:50%;height:84%;right:-3%;bottom:6%}.family-shade{background:linear-gradient(90deg,#f5fafbf5,#f5fafbe8 24%,#f5fafbbd 37%,#f5fafb4d 52%,transparent 64%)}.family-hero .hero-buttons{flex-direction:column;align-items:flex-start;margin-top:23px}.family-hero .hero-note{font-size:12px;margin-top:20px;max-width:280px}.family-hero .hero-bottom{gap:9px 20px;margin-top:0}.family-hero .hero-bottom span:last-child{display:none}}
@media(max-width:600px){
 .hero.family-hero,.family-hero>.container{min-height:970px}
 .family-hero>.container{padding-top:40px;padding-bottom:18px}
 .family-hero .hero-grid{min-height:825px;align-items:flex-start}
 .family-hero .hero-copy{width:100%;max-width:430px}
 .family-hero h1{font-size:46px;line-height:1.08;letter-spacing:-2px;max-width:400px;margin:20px 0}
 .family-hero .hero-copy>p{font-size:16px;line-height:1.75;max-width:390px}
 .family-hero .eyebrow{font-size:12px;letter-spacing:1.7px}
 .family-hero .hero-buttons{flex-direction:row;gap:10px;margin-top:21px}
 .family-hero .hero-buttons .button{font-size:13px;padding:12px 16px;min-height:45px}
 .family-hero .hero-note{max-width:100%;font-size:12px;margin-top:17px}
 /* Show the couple nearer the baby's plane; pull the mother away from the edge. */
 .family-room{top:430px;left:calc(-24% + 20px);right:calc(-20% - 20px);bottom:75px}
 .family-room img{object-position:76% 35%;animation-duration:12s}
 .family-foreground{right:8%;width:68%;height:50%;bottom:6%}
 .family-foreground img{animation-name:family-mobile-sway;animation-duration:7s;filter:drop-shadow(0 14px 16px #123b4530)}
 .family-shade{background:linear-gradient(180deg,#f5fafb 0%,#f5fafbf7 30%,#f5fafbe0 39%,#f5fafb50 48%,transparent 58%,#08362306 100%)}
 .family-hero .hero-bottom{display:flex;flex-wrap:wrap;gap:8px;background:#f8fcfcee;padding:13px 15px;border-radius:10px}
 .family-hero .hero-bottom .icon{width:19px;height:19px}
}
@media(max-width:380px){.hero.family-hero,.family-hero>.container{min-height:1010px}.family-hero .hero-grid{min-height:865px}.family-hero h1{font-size:41px}.family-room{top:455px;left:calc(-24% + 18px);right:calc(-20% - 18px)}.family-foreground{width:70%;height:48%;right:7%}}
@keyframes family-mobile-sway{0%,100%{transform:perspective(900px) translate3d(-4px,0,0) rotateY(-3deg) rotate(-.5deg) scale(.985)}50%{transform:perspective(900px) translate3d(4px,-13px,14px) rotateY(3deg) rotate(.5deg) scale(1.025)}}
.motion-paused .family-room,.motion-paused .family-foreground{transition:none!important}
.motion-paused .family-hero h1,.motion-paused .family-hero .eyebrow{transform:none!important}
.motion-inactive *,.motion-inactive *:before,.motion-inactive *:after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.family-room,.family-foreground{transition:none!important}.family-room img,.family-foreground img,.family-hero h1,.family-hero .eyebrow{animation:none!important;transform:none!important}}

/* A separate pet plane keeps the family imagery independently animated. */
.family-pet{position:absolute;left:46%;bottom:12%;width:13%;max-width:210px;height:26%;transform:translateZ(50px);z-index:1;pointer-events:none}
.family-pet img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 10px 9px #123b4529);animation:family-pet-sway 8s ease-in-out infinite;transform-origin:50% 95%}
@keyframes family-pet-sway{0%,100%{transform:perspective(900px) translate3d(-2px,0,0) rotateY(-3deg)}50%{transform:perspective(900px) translate3d(2px,-5px,8px) rotateY(3deg)}}
.family-hero:not(.family-in-view) .family-pet img,.family-hero:not(.family-in-view) .hero-title-word{animation-play-state:paused}
@media(max-width:1100px){.family-pet{left:45%;width:15%;height:24%;bottom:13%}}
@media(max-width:850px){.family-pet{left:37%;width:19%;bottom:12%}}
@media(max-width:600px){
 .family-pet{left:8%;bottom:11%;width:23%;height:18%}
 .family-hero h1{animation-name:hero-title-mobile;animation-duration:6s}
 .family-hero .hero-title-word{display:inline-block;animation:hero-word-mobile 4.8s ease-in-out infinite;animation-delay:var(--word-delay,0s);transform-origin:50% 70%}
}
@keyframes hero-title-mobile{0%,100%{transform:perspective(900px) translate3d(0,0,0) rotateY(-1.4deg)}50%{transform:perspective(900px) translate3d(2px,-6px,8px) rotateY(1.4deg)}}
@keyframes hero-word-mobile{0%,100%{transform:perspective(700px) translate3d(0,0,0) rotateX(-2deg)}50%{transform:perspective(700px) translate3d(0,-3px,4px) rotateX(2deg)}}
.motion-paused .hero-title-word{transform:none!important}
@media(prefers-reduced-motion:reduce){.family-pet img,.family-hero .hero-title-word{animation:none!important;transform:none!important}}