/* 47 Web Design V6.0 — media integrity + motion system */
:root{--v60-ease:cubic-bezier(.22,.7,.24,1);--v60-fast:360ms;--v60-med:680ms;--v60-slow:980ms}
html{scroll-behavior:smooth;scroll-padding-top:138px}
body{overflow-x:clip}

/* MEDIA POLICY — UI screenshots and service illustrations are never cropped */
.s55-hero-media{min-height:0!important;aspect-ratio:16/10!important;padding:14px!important;display:grid!important;place-items:center!important;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 94%,var(--s55)),var(--surface))!important}
.s55-hero-media>img{width:100%!important;height:100%!important;max-height:none!important;min-height:0!important;object-fit:contain!important;object-position:center!important;border-radius:18px!important;background:color-mix(in srgb,var(--surface2) 72%,#07181e)!important}
.s55-hero-media figcaption{bottom:26px!important;left:26px!important}
.focus-visual,.detail-image{aspect-ratio:16/10!important;min-height:0!important;height:auto!important;display:grid!important;place-items:center!important;background:color-mix(in srgb,var(--surface2) 78%,#07181e)!important}
.focus-visual img,.detail-image img,.builder-image-text img{width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;object-fit:contain!important;object-position:center!important;background:color-mix(in srgb,var(--surface2) 76%,#07181e)!important}
.builder-image-text img{aspect-ratio:16/10!important}
.v5-browser img,.v5-related-card img,.cs56-shot img,.p56-feature-shot img,.p56-featured-card img,.project-thumb img,.v5-project-media img{object-fit:contain!important;object-position:center!important;background:color-mix(in srgb,var(--surface2) 78%,#07181e)!important}
.v5-browser img,.v5-related-card img,.v5-project-media img{transform:none!important}
.v5-work:hover .v5-browser img,.v5-related-card:hover img,.v5-project:hover .v5-project-media img{transform:none!important}
.p59-slide img,.p59-stage>img{object-fit:contain!important;object-position:center!important}

/* real photo/background zones may fill their canvas, but use explicit focal positioning */
.v3-hero-bg img,.v3-showcase-media img{object-fit:cover!important;object-position:72% center!important;will-change:transform}
.v3-slide:nth-child(2) .v3-hero-bg img{object-position:70% center!important}
.v3-slide:nth-child(3) .v3-hero-bg img{object-position:72% center!important}

/* image polish */
.s55-hero-media,.focus-visual,.detail-image,.v5-browser,.v5-related-card,.cs56-shot,.p59-slider-shell{isolation:isolate}
.s55-hero-media:after,.focus-visual:after,.detail-image:after,.v5-browser:after{pointer-events:none}
.v60-media{position:relative;overflow:hidden;transform:translateZ(0)}
.v60-media:before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.075) 48%,transparent 70%);transform:translateX(-140%);transition:transform 1.15s var(--v60-ease)}
.v60-media.v60-in:before{transform:translateX(140%)}

/* SCROLL REVEALS */
.v60-reveal{opacity:0;transform:translate3d(0,28px,0);filter:blur(5px);transition:opacity var(--v60-med) var(--v60-ease),transform var(--v60-med) var(--v60-ease),filter var(--v60-med) var(--v60-ease);transition-delay:var(--v60-delay,0ms)}
.v60-reveal[data-v60-dir="left"]{transform:translate3d(-34px,0,0)}
.v60-reveal[data-v60-dir="right"]{transform:translate3d(34px,0,0)}
.v60-reveal[data-v60-dir="scale"]{transform:scale(.965);filter:blur(7px)}
.v60-reveal.v60-in{opacity:1;transform:none;filter:none}
.v60-stagger>*{transition-delay:calc(var(--v60-i,0) * 75ms)!important}

/* hero entrance */
body.v60-ready .s55-hero-copy>*{animation:v60HeroIn .75s var(--v60-ease) both;animation-delay:calc(var(--v60-i,0) * 75ms)}
body.v60-ready .s55-hero-media{animation:v60MediaIn .9s var(--v60-ease) .12s both}
@keyframes v60HeroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes v60MediaIn{from{opacity:0;transform:translateX(22px) scale(.985)}to{opacity:1;transform:none}}

/* parallax/background motion */
.v60-parallax{transform:translate3d(0,var(--v60-parallax,0px),0) scale(1.045)!important;transform-origin:center;transition:transform .08s linear}

/* cards + micro-interactions */
.v60-lift{transition:transform .28s var(--v60-ease),box-shadow .28s var(--v60-ease),border-color .28s ease!important;transform:translateZ(0)}
.v60-lift:hover{transform:translateY(-7px)!important;box-shadow:0 24px 65px rgba(0,0,0,.18)!important;border-color:color-mix(in srgb,var(--brand) 34%,var(--line))!important}
.btn,.mega55-item,.header59 .nav55>a,.header59 .nav-services55>button{transition:transform .22s var(--v60-ease),background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease!important}
.btn:hover{transform:translateY(-2px)}
.btn span,.v5-work-link,.mega55-item em{display:inline-block;transition:transform .22s var(--v60-ease)}
.btn:hover span,.v5-work:hover .v5-work-link,.mega55-item:hover em{transform:translateX(4px)}

/* sticky header scroll state */
.header55{transition:background .26s ease,box-shadow .26s ease,border-color .26s ease,backdrop-filter .26s ease!important}
body.v60-scrolled .header55{box-shadow:0 14px 42px rgba(0,0,0,.16)!important;backdrop-filter:blur(20px) saturate(135%)!important}
html[data-theme="light"] body.v60-scrolled .header55{box-shadow:0 14px 38px rgba(20,60,68,.11)!important}

/* mouse tilt, only desktop */
@media (hover:hover) and (pointer:fine){.v60-tilt{transform-style:preserve-3d;will-change:transform}.v60-tilt.v60-tilting{transform:perspective(900px) rotateX(var(--v60-rx,0deg)) rotateY(var(--v60-ry,0deg)) translateY(-3px)!important}}

/* mobile media should keep entire artwork visible */
@media(max-width:900px){
  .s55-hero-media{aspect-ratio:4/3!important;padding:10px!important;border-radius:22px!important}
  .s55-hero-media>img{border-radius:14px!important}
  .focus-visual,.detail-image,.builder-image-text img{aspect-ratio:4/3!important}
  .v3-hero-bg img{object-position:70% center!important}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .v60-reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .v60-parallax{transform:none!important}
  .v60-media:before{display:none!important}
  body.v60-ready .s55-hero-copy>*,body.v60-ready .s55-hero-media{animation:none!important}
  .v60-lift,.v60-tilt,.btn{transition:none!important;transform:none!important}
}
/* final cascade overrides discovered in the full media audit */
.svc-page .s55-hero-media>img[src$="service-web.webp"],
.svc-page .s55-hero-media>img[src$="service-growth.webp"],
.svc-page .s55-hero-media>img[src$="service-ai.webp"],
.svc-page .s55-hero-media>img[src$="service-cyber.webp"]{object-fit:contain!important;object-position:center!important;padding:0!important}
.slider-media{display:grid!important;place-items:center!important;background:color-mix(in srgb,var(--surface2) 78%,#07181e)!important}
.slider-media img{width:100%!important;height:100%!important;min-height:0!important;object-fit:contain!important;object-position:center!important}
.v3-image-card{display:grid!important;place-items:center!important;background:color-mix(in srgb,var(--surface2) 78%,#07181e)!important}
.v3-image-card img{width:100%!important;height:100%!important;min-height:0!important;object-fit:contain!important;object-position:center!important}
.v3-project-image img{object-fit:contain!important;object-position:center!important;background:color-mix(in srgb,var(--surface2) 78%,#07181e)!important;transform:none!important}
.v3-project-card:hover .v3-project-image img{transform:none!important}