/* Staffira 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(15,19,28,.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(15,19,28,.06),0 18px 40px rgba(15,19,28,.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(15,19,28,.07),0 30px 56px rgba(15,19,28,.16)}
.pxl-fancybox-wrap .pxl-item--icon,.pxl-fancybox-wrap .pxl-icon{filter:drop-shadow(0 6px 8px rgba(15,19,28,.22))}
.pxl-fancybox-wrap .pxl-item--number{text-shadow:0 2px 0 rgba(255,255,255,.6),0 6px 14px rgba(15,19,28,.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(242,140,27,.35),0 28px 50px rgba(15,19,28,.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(242,140,27,.4),0 36px 60px rgba(15,19,28,.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(15,19,28,.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(242,140,27,.3),0 18px 30px rgba(15,19,28,.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}
}

/* Header menu: items ran together ("HOMEABOUT US...") on mid-size screens */
#pxl-wapper .pxl-menu-primary{flex-wrap:wrap;column-gap:22px;row-gap:6px}
#pxl-wapper .pxl-menu-primary>li{margin-right:0}
#pxl-wapper .recovery-mobile-menu .pxl-menu-primary{gap:12px}

/* Phones: the staggered service cards used a -50px offset meant for desktop, so they overlapped when stacked */
@media (max-width:767px){.elementor-widget-pxl_fancy_box,.elementor-widget-pxl_fancy_box>.elementor-widget-container{margin-top:0!important}}

/* 2026-10-14: phones see the headline sooner: hide the email/address strip (Book/Call bar covers contact) and shrink the logo. */
@media (max-width:767px){.elementor-element-636a24e{display:none!important}body .elementor-element.elementor-element-091da1d .pxl-logo img{max-height:72px!important;width:auto!important;max-width:240px!important}}