/* WealthPillar site-wide depth layer (SEO agent, depth-v1, 2026-10-14).
   CSS only, CSP-safe. Uses the separate translate/scale properties so it never fights the theme's transform animations. */
:root{--wpd-navy:#01215a;--wpd-navy-2:#00143a;--wpd-gold:#b8913f;--wpd-gold-2:#8d6b25;--wpd-shadow:rgba(1,33,90,.18)}

/* 1. Buttons: raised, with a visible bottom edge, and they press in when clicked */
.pxl-button .btn{position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 0 rgba(0,0,0,.30),0 14px 26px var(--wpd-shadow);
  transition:translate .18s ease,box-shadow .18s ease}
.pxl-button .btn:hover{translate:0 -2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 0 rgba(0,0,0,.30),0 20px 32px var(--wpd-shadow)}
.pxl-button .btn:active{translate:0 5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 0 rgba(0,0,0,.30),0 6px 12px var(--wpd-shadow)}

/* 2. Feature cards: lifted off the page, rise and tilt toward the reader on hover */
.pxl-fancybox-wrap{perspective:1000px}
.pxl-fancybox-wrap .pxl-fancybox-content,.pxl-fancybox-wrap>.pxl-item--inner{border-radius:18px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 3px 0 rgba(1,33,90,.06),0 18px 40px rgba(1,33,90,.10);
  transition:translate .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,rotate .35s}
.pxl-fancybox-wrap:hover .pxl-fancybox-content,.pxl-fancybox-wrap:hover>.pxl-item--inner{translate:0 -6px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 6px 0 rgba(1,33,90,.07),0 30px 56px rgba(1,33,90,.16)}
.pxl-fancybox-wrap .pxl-item--icon,.pxl-fancybox-wrap .pxl-icon{filter:drop-shadow(0 6px 8px rgba(1,33,90,.22))}
.pxl-fancybox-wrap .pxl-item--number{text-shadow:0 2px 0 rgba(255,255,255,.6),0 6px 14px rgba(1,33,90,.18)}

/* 3. Photos: layered frame, like prints standing on the page */
.pxl-image-single img,.pxl-item--image img,.pxl-image-box img{box-shadow:0 2px 0 rgba(255,255,255,.8),0 14px 0 -6px rgba(184,145,63,.35),0 28px 50px rgba(1,33,90,.18);
  transition:translate .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.pxl-image-single:hover img,.pxl-item--image:hover img{translate:0 -6px;box-shadow:0 2px 0 rgba(255,255,255,.8),0 18px 0 -6px rgba(184,145,63,.4),0 36px 60px rgba(1,33,90,.22)}

/* 4. Headings get a soft lift; subtitles become small raised pills */
.pxl-heading .pxl-item--title{text-shadow:0 1px 0 rgba(255,255,255,.6),0 10px 24px rgba(1,33,90,.12)}
.pxl-item--subtitle{text-shadow:none}

/* 5. Big dark panels: inner glow and a deeper edge so they read as a raised slab */
.elementor-section[class*="pxl-bg-color"]:not(.pxl-bg-color-none),.pxl-section-overlay-color{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}

@media (max-width:767px){
  .pxl-image-single img,.pxl-item--image img,.pxl-image-box img{box-shadow:0 10px 0 -5px rgba(184,145,63,.3),0 18px 30px rgba(1,33,90,.16)}
}
@media (hover:none){
  .pxl-fancybox-wrap:hover .pxl-fancybox-content,.pxl-fancybox-wrap:hover>.pxl-item--inner,.pxl-image-single:hover img,.pxl-item--image:hover img{translate:none}
}
@media (prefers-reduced-motion:reduce){
  .pxl-button .btn,.pxl-fancybox-wrap .pxl-fancybox-content,.pxl-fancybox-wrap>.pxl-item--inner,.pxl-image-single img,.pxl-item--image img{transition:none}
  .pxl-button .btn:hover,.pxl-fancybox-wrap:hover .pxl-fancybox-content,.pxl-image-single:hover img,.pxl-item--image:hover img{translate:none}
}