/* Mobile-only portrait art direction. Desktop rules and artwork are untouched. */
.mobile-scene{display:none}
@media(max-width:700px){
 .composition{overflow:clip}
 .scene-ribbon,.scene-person,.mobile-hero-art{display:none!important}
 .hero,.vocation,.mesure,.coordination,.closing{height:auto;min-height:0;isolation:isolate}
 .hero{padding:clamp(124px,18dvh,156px) 0 0;background:var(--navy);border-radius:0}
 .hero .copy{padding:0 clamp(22px,6vw,36px)}
 .hero h1{font-size:clamp(35px,10.1vw,62px);line-height:1.025}
 .hero .copy>p:not(.eyebrow){max-width:none;font-size:16px!important;line-height:1.55}
 .hero p.eyebrow{font-size:10px!important;letter-spacing:.19em;line-height:1.55;white-space:normal}
 .mobile-scene{display:block;position:relative;width:100%;aspect-ratio:1122/1402;z-index:2;pointer-events:none}
 .mobile-scene picture,.mobile-scene img{display:block;position:relative;width:100%;height:auto;aspect-ratio:1122/1402;z-index:2}
 .mobile-scene img{object-fit:cover;object-position:center}
 .mobile-scene:before{content:'';position:absolute;left:0;bottom:-1px;width:100%;height:55%;background:var(--white);border-radius:65% 30% 0 0 / 30% 18% 0 0;z-index:1}
 .mobile-scene-hero{margin-top:clamp(12px,3vw,24px);aspect-ratio:1122/1402}
 .mobile-scene-hero picture{position:absolute;inset:0;height:100%;aspect-ratio:auto}
 .mobile-scene-hero img{height:100%;aspect-ratio:auto;object-fit:cover;object-position:center top}
 .vocation{padding:clamp(25px,7vw,40px) clamp(22px,6vw,36px) clamp(62px,16vw,92px);margin:0;background:var(--white)}
 .vocation:before{display:none}
 .vocation:after{display:block;content:'';position:absolute;left:-10%;bottom:-1px;width:120%;height:clamp(28px,8vw,48px);background:var(--navy);border-radius:60% 45% 0 0;z-index:-1}
 .vocation h2,.mesure h2,.coordination h2{font-size:clamp(33px,9.2vw,54px)!important;line-height:1.06}
 .vocation p{margin-bottom:0!important}
 .mesure{padding:clamp(36px,10vw,60px) 0 0;background:var(--navy)}
 .mesure .copy,.mesure .benefits{margin-left:clamp(22px,6vw,36px);margin-right:clamp(22px,6vw,36px)}
 .mesure .benefits{position:relative;inset:auto;width:auto;display:grid;gap:18px;margin-top:28px}
 .benefits li,.benefits li:nth-child(2),.benefits li:nth-child(3){position:static;width:auto;max-width:none;transform:none;font-size:16px;line-height:1.5}
 .mesure:before{display:none}
 .mobile-scene-mesure{margin-top:clamp(16px,5vw,28px)}
 .mobile-scene-mesure:before{height:45%;border-radius:80% 25% 0 0 / 55% 20% 0 0}
 .ending{background:var(--white)}.ending:before{display:none}
 .coordination{padding:clamp(26px,7vw,42px) 0 0;background:var(--white)}
 .coordination .copy{padding:0 clamp(22px,6vw,36px)}
 .coordination:before{display:none}.coordination ul{margin-top:26px;gap:16px}
 .coordination li{font-size:16px;line-height:1.55}
 .mobile-scene-coordination{margin-top:clamp(18px,6vw,32px)}
 .mobile-scene-coordination:before{height:43%;background:var(--navy);border-radius:60% 55% 0 0 / 35% 50% 0 0}
 .closing{padding:clamp(32px,8vw,52px) clamp(22px,6vw,36px) clamp(48px,12vw,70px);background:var(--navy)}
 .closing h2{font-size:clamp(32px,8.5vw,48px)!important}.closing .button{margin-top:28px}
 footer{margin:0;padding-top:24px}
 /* Background changes are hidden within opaque matter, never at image edges. */
 .mobile-scene:before{inset:0 0 -1px;height:auto;border-radius:0}
 .mobile-scene-hero:before{clip-path:polygon(0 60%,25% 66%,50% 74%,75% 73%,100% 71%,100% 100%,0 100%)}
 .mobile-scene-mesure:before{clip-path:polygon(0 30%,20% 36%,40% 43%,55% 64%,70% 67%,85% 66%,100% 76%,100% 100%,0 100%)}
 .mobile-scene-coordination:before{clip-path:polygon(0 57%,20% 55%,40% 65%,60% 78%,80% 82%,100% 77%,100% 100%,0 100%)}
 .vocation{padding-left:0;padding-right:0;padding-bottom:0}
 .vocation .copy{padding:0 clamp(22px,6vw,36px)}
 .vocation:after{display:none}
 .mobile-scene-raccord{aspect-ratio:1122/1000}
 .mobile-scene-raccord picture,.mobile-scene-raccord img{position:absolute;inset:0;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center}
 .mobile-scene-raccord:before{background:var(--navy);clip-path:polygon(0 32%,20% 40%,35% 65%,50% 75%,65% 72%,80% 52%,100% 35%,100% 100%,0 100%)}
 .mesure{padding-top:clamp(20px,5vw,36px)}
}