/* Responsive composition from the original, independently exported Figma layers.
   Artwork masks share one coordinate system so their crossover stays seamless. */
.playground-hero{--campaign-paper:#f8f6ef;padding:0;max-width:1600px;background:var(--campaign-paper);overflow:hidden}
.hero-topline{margin:0 var(--gutter);padding-top:16px}
.playground-stage{display:block;min-height:0;height:auto;width:min(100%,max(980px,calc((100svh - 360px)*2.1)));margin-inline:auto;aspect-ratio:2.1;isolation:isolate;padding:0;overflow:hidden}
.playground-stage h1{position:absolute;inset:0;margin:0;font-size:inherit;line-height:1;letter-spacing:0;z-index:2}
.playground-stage h1 span{position:absolute;display:block}
.playground-stage h1 img{display:block;width:100%;height:auto}
.campaign-play{width:45%;left:7%;top:22%}
.campaign-ground{width:59%;left:6.5%;top:57%}
.campaign-art{position:absolute;width:39%;aspect-ratio:1122/1402;right:0;top:0;pointer-events:none}
.campaign-art img{position:absolute;display:block;height:auto}
.campaign-art-back{z-index:1}
.campaign-art-back img{left:2.228%;top:.642%;width:97.772%;max-width:none}
.campaign-art-front{z-index:3}
.campaign-art-front img{left:0;top:32.454%;width:98.752%;max-width:none}
.campaign-subtitle{position:absolute;z-index:4;left:7%;bottom:7%;margin:0;font-size:clamp(13px,1.4vw,22px);line-height:1.3;font-weight:700;letter-spacing:.025em}
.campaign-sphere{position:absolute;z-index:4;pointer-events:none;transform:translate3d(var(--layer-x,0px),var(--layer-y,0px),0);transition:transform .7s var(--ease)}
.campaign-sphere img{display:block;width:100%;height:auto}
.sphere-one{width:7%;left:48%;top:6%}
.sphere-two{width:3%;left:4%;top:25%}
.sphere-three{width:2.8%;right:2%;top:46%}
.sphere-four{width:3.5%;right:14%;bottom:3%}
.sphere-five{width:12%;left:40%;bottom:-5%}
.hero-details{margin:0 var(--gutter);grid-template-columns:1.05fr 1.05fr .8fr;gap:4%;padding:25px 0}
.explore-link{margin:0 var(--gutter)}
@media(min-width:761px) and (max-width:1100px){
  .hero-details{grid-template-columns:1fr 1fr;gap:20px}
  .hero-actions{grid-column:2;grid-row:1/3}
}
@media(max-width:760px){
  .hero-topline{padding-top:14px}
  .hero-topline>span{display:block;font-size:8px;letter-spacing:.035em}
  .playground-stage{width:100%;aspect-ratio:1122/1250}
  .campaign-art{width:100%;right:0;top:0}
  .campaign-play{width:69.162%;left:8.11%;top:31.52%}
  .campaign-ground{width:90.553%;left:6.328%;top:54.08%}
  .campaign-subtitle{left:0;right:0;bottom:auto;top:74.3%;text-align:center;font-size:clamp(12px,3.5vw,26px);letter-spacing:0}
  .sphere-one{width:10.963%;left:54.01%;top:5.12%}
  .sphere-two{width:4.635%;left:5.526%;top:27.52%}
  .sphere-three{width:4.635%;right:3.119%;top:49.12%}
  .sphere-four{width:4.635%;right:10.25%;bottom:1.76%}
  .sphere-five{width:18%;left:-3.5%;bottom:-4%}
  .hero-details{grid-template-columns:1fr;gap:20px;padding:22px 0}
  .hero-when{display:block}
  .hero-when>.eyebrow{font-size:12px;letter-spacing:.09em}
  .hero-summary,.hero-actions{grid-column:auto;grid-row:auto}
}
@media(prefers-reduced-motion:reduce){.campaign-sphere{transform:none!important}}