/* Pass 1: decorative planes only. No transformed content or interactive ancestors. */
.depth-scene{position:relative;isolation:isolate}
.depth-layer{position:absolute;pointer-events:none;user-select:none;z-index:-1;transform:translate3d(0,var(--depth-y,0px),0);contain:layout style;}
.depth-hero-spray{width:44%;height:400px;right:0;top:90px;background:url('assets/accent-spray-primary.png') center/contain no-repeat;opacity:.11;rotate:-12deg}
.depth-services{background:#161514;color:var(--paper);border-radius:30px 30px 0 0;margin-top:24px;padding-bottom:100px;overflow:clip}
.depth-services .section-kicker{border-color:rgba(255,255,255,.35)}
.depth-services .service-intro{position:relative;margin-bottom:30px}
.depth-services .service-intro p{background:rgba(22,21,20,.7);padding:20px;border-left:1px solid rgba(255,255,255,.2)}
.depth-ghost{font-size:clamp(180px,30vw,480px);font-weight:900;letter-spacing:-.1em;line-height:.76;color:rgba(255,255,255,.045);right:5%;top:90px}
.depth-slash{width:230px;height:160px;right:12%;bottom:-24px;background:url('assets/accent-marker-slash.png') center/contain no-repeat;opacity:.64;rotate:-9deg}
.depth-work{border-top:1px solid rgba(255,255,255,.12);overflow:clip}
.depth-work-spray{width:540px;height:450px;right:-100px;top:170px;background:url('assets/accent-spray-primary.png') center/contain no-repeat;opacity:.1;rotate:15deg}
.depth-websites{overflow:clip;border-radius:30px 30px 0 0;box-shadow:0 -18px 35px rgba(0,0,0,.15)}
.depth-pulse{font-size:clamp(180px,31vw,500px);font-weight:900;letter-spacing:-.09em;line-height:1;right:-20px;top:40px;color:rgba(255,125,48,.065)}
.depth-websites .showroom{box-shadow:0 26px 55px rgba(0,0,0,.28);border-top-color:rgba(255,255,255,.4)}
.depth-contact-slash{width:250px;height:180px;left:58%;bottom:65px;background:url('assets/accent-marker-slash.png') center/contain no-repeat;opacity:.23;rotate:8deg}
/* Whole approved artwork floats above its frame without cropping or stretching. */
.depth-hero .banner-wrap{overflow:visible;background:transparent;border:0;position:relative;padding:16px 0}
.depth-hero .banner-wrap::before{content:"";position:absolute;inset:16px 0;border:1px solid var(--ink);translate:12px 12px;background:rgba(22,21,20,.1);pointer-events:none}
.depth-hero .banner-wrap img{position:relative;transform:translate3d(0,var(--depth-y,0px),0);box-shadow:0 18px 32px rgba(22,21,20,.18)}
@media(max-width:800px),(pointer:coarse){
 .depth-layer{transform:none!important}
 .depth-hero-spray{width:70%;height:230px;top:120px;opacity:.07}
 .depth-services{border-radius:18px 18px 0 0;padding-bottom:65px;margin-top:16px}
 .depth-services .service-intro p{padding:14px 0 14px 16px}
 .depth-ghost{font-size:190px;right:10px;top:140px;opacity:.7}
 .depth-slash{width:120px;height:85px;right:8%;bottom:8px;opacity:.4}
 .depth-work-spray{display:none}
 .depth-pulse{font-size:190px;top:90px;right:-12px;opacity:.6}
 .depth-websites{border-radius:18px 18px 0 0;box-shadow:none}
 .depth-contact-slash{width:110px;height:80px;left:auto;right:20px;bottom:100px;opacity:.15}
 .depth-hero .banner-wrap img{transform:none!important;box-shadow:0 10px 20px rgba(22,21,20,.13)}
 .depth-hero .banner-wrap::before{translate:6px 6px}
}
@media(prefers-reduced-motion:reduce){.depth-layer,.depth-hero .banner-wrap img{transform:none!important}}
/* A shallow seam joins the work and showroom environments; content stays in flow. */
.depth-websites{margin-top:-20px}
@media(max-width:800px),(pointer:coarse){.depth-websites{margin-top:-10px}}
/* Visible differential movement: backgrounds lag; foreground fragments advance. */
.depth-active{will-change:transform}
.depth-hero-spray{opacity:.20;width:54%;height:470px;top:70px}
.depth-ghost{color:rgba(255,255,255,.095);top:30px}
.depth-slash{width:320px;height:210px;bottom:40px;opacity:.78;filter:invert(1);z-index:2}
.depth-work-spray{opacity:.23;width:660px;height:560px;top:120px}
.depth-pulse{color:rgba(255,125,48,.14);top:20px}
.depth-seam{width:300px;height:190px;right:7%;top:0;background:url('assets/accent-marker-slash.png') center/contain no-repeat;opacity:.33;rotate:-16deg;z-index:2}
.depth-hero .banner-wrap{padding:90px 0}
.depth-hero .banner-wrap::before{inset:90px 0;translate:16px 16px}
.depth-websites{margin-top:-40px}
/* Narrow/mobile has its own static composition, irrespective of browser. */
@media(max-width:800px),(pointer:coarse){
 .depth-active{will-change:auto}
 .depth-hero-spray{opacity:.10;width:70%;height:230px;top:120px}
 .depth-ghost{top:140px;color:rgba(255,255,255,.06)}
 .depth-slash{width:120px;height:85px;right:8%;bottom:8px;opacity:.28;z-index:-1}
 .depth-pulse{top:90px;color:rgba(255,125,48,.09)}
 .depth-seam{display:none}
 .depth-hero .banner-wrap{padding:16px 0}
 .depth-hero .banner-wrap::before{inset:16px 0;translate:6px 6px}
 .depth-websites{margin-top:-10px}
}
@media(prefers-reduced-motion:reduce){
 .depth-active{will-change:auto}
 .depth-hero .banner-wrap{padding:16px 0}
 .depth-hero .banner-wrap::before{inset:16px 0}
}
/* Keep fast fragments in the environment, clear of readable copy and controls. */
.depth-services .service-intro{z-index:3}
.depth-slash{width:220px;height:150px;right:3%;bottom:-20px;opacity:.42}
.depth-seam{z-index:-1}