/* Interior public banners only. Existing page content remains the source of truth. */
.dp-main>section:first-child:not(#hero):has(>.dp-page-motion) { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); grid-template-areas:'copy motion'; align-items:center; gap:32px; min-height:420px; padding:44px max(32px,calc((100% - 1280px)/2)); isolation:isolate; background:#fff; }
.dp-main>section:first-child:not(#hero):has(>.dp-page-motion)>div.relative { grid-area:copy; min-width:0; width:100%; max-width:none; margin:0; padding-inline:0; }
.dp-main>section:first-child:not(#hero):has(>.dp-page-motion) h1 { max-width:100%; font-size:clamp(34px,4.5vw,64px); line-height:1.4; text-wrap:balance; }
.dp-main>section:first-child:not(#hero):has(>.dp-page-motion) p { max-width:100%; font-size:15px; line-height:1.95; text-wrap:pretty; }
.dp-main>section:first-child:not(#hero):has(>.dp-page-motion)>div.relative>.text-center { text-align:start; }
.dp-main>section:first-child:not(#hero):has(>.dp-page-motion--wide) { grid-template-columns:minmax(0,1fr); grid-template-areas:'copy' 'motion'; gap:12px; }
.dp-main>section:first-child:not(#hero):has(>.dp-page-motion--wide) h1 { font-size:clamp(30px,3.4vw,48px); }
.dp-page-waves { z-index:-1; background:none; }
.dp-page-waves svg { display:block; width:100%; height:100%; overflow:visible; }
.dp-page-wave-flow,.dp-page-wave-echo { transform-origin:center; }
.dp-page-motion { grid-area:motion; width:100%; max-width:520px; min-width:0; margin:0 auto; align-self:center; }
.dp-page-motion--wide { max-width:300px; }
.dp-page-scene { display:block; width:100%; height:auto; overflow:visible; }
.dp-page-motion figcaption { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:-3px; color:#627d6e; }
.dp-page-motion-step { display:flex; align-items:center; gap:6px; min-width:0; font-size:10px; line-height:1.7; }
.dp-page-motion-step i { display:grid; place-items:center; flex-shrink:0; width:23px; height:23px; border:1px solid #2db67d24; border-radius:50%; background:#fff; color:#479779; font:8px Arial,sans-serif; }
.pm-stage-1,.pm-stage-2,.pm-stage-3 { transform-box:fill-box; transform-origin:center; }
.pm-draw path,path.pm-draw { stroke-dasharray:1; stroke-dashoffset:0; }
.pm-bar { transform-box:fill-box; transform-origin:center bottom; }
.pm-career-talent { transform:translate(300px,-78px); }
@media(prefers-reduced-motion:no-preference) {
    .dp-page-waves[data-motion-ready] .dp-page-wave-flow { animation:pm-wave 18s ease-in-out infinite; }
    .dp-page-waves[data-motion-ready] .dp-page-wave-echo { animation:pm-wave 24s ease-in-out -9s infinite reverse; }
    .dp-page-motion[data-motion-ready] .pm-stage-1 { animation:pm-first 10s ease-in-out infinite; }
    .dp-page-motion[data-motion-ready] .pm-stage-2 { animation:pm-second 10s ease-in-out infinite; }
    .dp-page-motion[data-motion-ready] .pm-stage-3 { animation:pm-result 10s ease-in-out infinite; }
    .dp-page-motion[data-motion-ready] :is(.pm-draw path,path.pm-draw) { animation:pm-path 10s ease-in-out infinite; }
    .dp-page-motion[data-motion-ready] .pm-bar { animation:pm-chart 10s ease-in-out var(--pm-delay,0s) infinite; }
    .dp-page-motion[data-motion-ready] .pm-toggle { animation:pm-toggle 10s ease-in-out infinite; }
    .dp-page-motion[data-motion-ready] .pm-career-talent { animation:pm-career-join 10s cubic-bezier(.4,0,.2,1) infinite; }
    :is(.dp-page-motion,.dp-page-waves)[data-motion-paused] * { animation-play-state:paused!important; }
}
@keyframes pm-wave { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(16px) rotate(1.5deg); } }
@keyframes pm-first { 0%,100% { opacity:.3; transform:translateY(8px); } 12%,90% { opacity:1; transform:none; } }
@keyframes pm-second { 0%,16%,100% { opacity:0; transform:translateY(10px) scale(.97); } 34%,88% { opacity:1; transform:none; } }
@keyframes pm-result { 0%,42%,100% { opacity:0; transform:translateY(12px) scale(.94); } 60%,88% { opacity:1; transform:none; } }
@keyframes pm-path { 0%,16% { stroke-dashoffset:1; opacity:0; } 20% { opacity:1; } 42%,88% { stroke-dashoffset:0; opacity:1; } 100% { opacity:0; } }
@keyframes pm-chart { 0%,30%,100% { transform:scaleY(.05); } 62%,88% { transform:scaleY(1); } }
@keyframes pm-toggle { 0%,32%,100% { transform:translateX(-32px); } 52%,88% { transform:translateX(0); } }
@keyframes pm-career-join { 0% { opacity:0; transform:translate(0,8px); } 12%,30% { opacity:1; transform:translate(0,0); } 60%,88% { opacity:1; transform:translate(300px,-78px); } 100% { opacity:0; transform:translate(300px,-78px); } }
@media(max-width:1023px) and (min-width:768px) {
    .dp-main>section:first-child:not(#hero):has(>.dp-page-motion) { gap:20px; padding:36px 28px; }
    .dp-main>section:first-child:not(#hero):has(>.dp-page-motion) h1 { font-size:36px; }
    .dp-page-motion figcaption { flex-wrap:wrap; gap:7px 12px; }
}
@media(max-width:767px) {
    .dp-main>section:first-child:not(#hero):has(>.dp-page-motion) { grid-template-columns:minmax(0,1fr); grid-template-areas:'copy' 'motion'; gap:8px; min-height:0; padding:24px 22px 20px; }
    .dp-main>section:first-child:not(#hero):has(>.dp-page-motion)>div.relative { text-align:center; }
    .dp-main>section:first-child:not(#hero):has(>.dp-page-motion)>div.relative>.text-center { text-align:center; }
    .dp-main>section:first-child:not(#hero):has(>.dp-page-motion) h1 { max-width:100%; font-size:32px; margin-inline:auto; margin-bottom:12px; }
    .dp-main>section:first-child:not(#hero):has(>.dp-page-motion) p { max-width:100%; font-size:14px; margin-inline:auto; }
    .dp-main>section:first-child:not(#hero):has(>.dp-page-motion) nav { justify-content:center; margin-bottom:18px; }
    /* Keep the wave drawing's native ratio instead of squeezing it into a tall banner. */
    .dp-page-waves svg { position:absolute; width:max(900px,100%); height:auto; left:50%; bottom:0; transform:translateX(-50%); }
    .dp-page-motion { max-width:290px; }
    .dp-page-motion figcaption { gap:8px; flex-wrap:wrap; }
    .dp-page-motion-step { gap:5px; font-size:9px; }
    .dp-page-motion-step i { width:21px; height:21px; font-size:7px; }
    .dp-page-motion--wide { max-width:280px; }
}
