/* Independent scenes: content sets layout; artwork never sizes the page. */
.scene-ribbon,.scene-person{display:none}
header{z-index:20}
/* Explicit scene ordering lets artwork bridge into the following background. */


@media(max-width:700px){
 .mobile-hero-art{mask-image:none;background-position:82% bottom;height:340px;clip-path:ellipse(120% 100% at 65% 0%)}
 .hero{padding-bottom:270px}
 .vocation{padding:45px 24px 70px;margin-top:-30px;isolation:isolate}
 .vocation:before,.vocation:after{display:none}
 .vocation .scene-ribbon{display:block;position:absolute;left:-10%;bottom:-115px;width:120%;height:auto;z-index:3;pointer-events:none}
 .mesure{padding:140px 24px 185px;min-height:0;background:var(--navy);isolation:isolate}
 .mesure:before{display:none}
 .mesure .scene-ribbon{display:block;position:absolute;left:-18%;bottom:-98px;width:145%;height:auto;z-index:3;pointer-events:none}
 .benefits{gap:17px;margin-top:28px}
 .ending{background:var(--white);isolation:isolate}.ending:before{display:none}
 .coordination{padding:135px 24px 185px;background:var(--white);isolation:isolate}
 .coordination:before{display:none}.coordination .copy{z-index:4}
 .coordination .scene-ribbon{display:block;position:absolute;left:-12%;bottom:-125px;width:135%;height:auto;z-index:3;pointer-events:none}
 .closing{padding:145px 24px 55px;background:var(--navy);min-height:0}
 footer{margin:0;background:var(--navy)}
 .hero .scene-ribbon{display:block;position:absolute;left:-20%;bottom:-65px;width:140%;height:auto;z-index:3;pointer-events:none}
 .hero{padding-bottom:310px}.vocation{padding-top:90px}
 .vocation{background:transparent}.vocation:before{display:block;top:0;left:0;width:100%;height:100%;border-radius:0;background:var(--white);clip-path:ellipse(160% 98% at 50% 0%);z-index:-1}
 .coordination{background:transparent}.coordination:before{display:block;position:absolute;inset:0;background:var(--white);mask-image:none;height:100%;clip-path:ellipse(180% 98% at 50% 0%);z-index:-1}
 .ending{background:var(--navy)}
}
@media(min-width:480px) and (max-width:700px){
 .vocation{padding-bottom:120px}.vocation .scene-ribbon{bottom:-160px}
 .mesure{padding-top:190px;padding-bottom:240px}.mesure .scene-ribbon{bottom:-135px}
 .coordination{padding-top:170px;padding-bottom:210px}.coordination .scene-ribbon{bottom:-170px}.closing{padding-top:200px}
}


@media(max-width:700px) and (max-height:500px){.hero{padding-top:108px}.hero h1{font-size:36px}.hero p.eyebrow{margin-bottom:16px!important}.hero .copy>p:not(.eyebrow){margin:16px 0!important}}