/* Shared service transition: the content card leads, the surface follows. */
html body.service-social-compact .service-content{position:relative;z-index:2;margin-top:24px;padding-top:0;background:transparent;border-radius:0;isolation:isolate}
html body.service-social-compact .service-content::before{content:"";position:absolute;inset:40px 0 0;z-index:-1;background:linear-gradient(to bottom,transparent 0,var(--ink,#e7dcee) 320px);opacity:var(--surface-progress,0);transform:translateY(calc(140px * (1 - var(--surface-progress,0))));border-radius:50% 50% 0 0 / 100px 100px 0 0;pointer-events:none}
html body.service-social-compact .service-content>section:first-child{background:var(--ink,#e7dcee)!important;border-radius:32px;padding:48px!important;box-sizing:border-box;opacity:1!important;filter:none!important;transform:none!important}
html.web-transition body.service-social-compact main>.page-hero{position:sticky;top:12px;transform:scale(var(--hero-scale,1));filter:blur(var(--hero-blur,0px));transform-origin:center top;will-change:transform;z-index:0;border-radius:24px!important;overflow:hidden!important}
html body.service-social-compact .service-content>section:not(:first-child){transform:scale(var(--entry-scale,1));filter:blur(var(--entry-blur,0px));transform-origin:50% 0}
@media(max-width:800px){html body.service-social-compact .service-content>section:first-child{padding:28px 22px!important;border-radius:24px}html body.service-social-compact .service-content::before{background:linear-gradient(to bottom,transparent 0,var(--ink,#e7dcee) 220px)}}
@media(prefers-reduced-motion:reduce){html body.service-social-compact .service-content::before{opacity:1;background:var(--ink,#e7dcee);transform:none;border-radius:0}html body.service-social-compact .service-content>section{transform:none!important;filter:none!important}}

/* The inset opening card leads; the shared backdrop fills the sides later. */
html body.service-social-compact.campaign-page .service-content{display:flow-root}
html body.service-social-compact.campaign-page .service-content>section:first-child{width:min(84%,1180px);margin:0 auto;padding:48px!important}
html body.service-social-compact.campaign-page .service-content>section:first-child>.wrap{width:100%;max-width:none}
@media(max-width:800px){html body.service-social-compact.campaign-page .service-content>section:first-child{width:92%;padding:28px 22px!important}}