/* V4 DIMENSION: CSS 3D geometry, motion and mobile-first polish */
:root{--dimension-red:#ff8031}
.hero-visual{perspective:1100px;transform-style:preserve-3d;isolation:isolate}
.dimension-stage{position:absolute;inset:4% 0 0;pointer-events:none;z-index:1;perspective:900px;transform-style:preserve-3d;transform:rotateX(var(--stage-x,0deg)) rotateY(var(--stage-y,0deg));transition:transform .22s ease-out}
.dimension-cube{position:absolute;width:112px;height:112px;right:4%;top:16%;transform-style:preserve-3d;animation:dimension-spin 18s linear infinite;filter:drop-shadow(0 0 22px #ff792655)}
.dimension-cube .face{position:absolute;inset:0;display:grid;place-items:center;border:1px solid #ff833699;background:linear-gradient(145deg,#2b0919d9,#090a16c9);box-shadow:inset 0 0 26px #ff7b2922;color:#ffb080;font:700 19px/1 monospace;letter-spacing:.15em;font-style:normal;backdrop-filter:blur(4px);backface-visibility:visible}
.face.front{transform:translateZ(56px)}.face.back{transform:rotateY(180deg) translateZ(56px)}.face.right{transform:rotateY(90deg) translateZ(56px)}.face.left{transform:rotateY(-90deg) translateZ(56px)}.face.top{transform:rotateX(90deg) translateZ(56px)}.face.bottom{transform:rotateX(-90deg) translateZ(56px)}
@keyframes dimension-spin{from{transform:rotateX(-18deg) rotateY(0)}to{transform:rotateX(342deg) rotateY(360deg)}}
.dimension-ring{position:absolute;left:11%;top:17%;width:78%;aspect-ratio:1;border:1px solid #ff782455;border-radius:50%;box-shadow:0 0 36px #ff7d2c1f,inset 0 0 35px #ff77221b;transform-style:preserve-3d}
.ring-a{transform:rotateX(70deg) rotateY(22deg);animation:ring-a 13s linear infinite}.ring-b{transform:rotateY(74deg) rotateX(30deg);border-style:dashed;animation:ring-b 16s linear infinite reverse}
@keyframes ring-a{to{transform:rotateX(70deg) rotateY(382deg)}}@keyframes ring-b{to{transform:rotateY(434deg) rotateX(390deg)}}
.dimension-core{position:absolute;width:15px;height:15px;right:19%;bottom:19%;background:#ff7c2b;border-radius:50%;box-shadow:0 0 16px #ff7824,0 0 60px #ff7824}
.photo-shell{z-index:2;transform:translateZ(42px) translateY(var(--portrait-lift,0px));transition:transform .25s ease-out}
.float-tag{z-index:3;transform:translateZ(85px)}
.hero-copy{position:relative;z-index:4}
.services-grid>* , .projects-grid>* , .article-grid>*{transform-style:preserve-3d;transition:transform .22s ease-out,box-shadow .22s ease-out}
@media (hover:hover) and (pointer:fine){.services-grid>*:hover,.projects-grid>*:hover,.article-grid>*:hover{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-5px);box-shadow:0 18px 50px #ff792519}}
@media(max-width:767px){
  .dimension-stage{inset:8% 0 0;opacity:.65}
  .dimension-cube{width:58px;height:58px;right:2%;top:8%}
  .face.front{transform:translateZ(29px)}.face.back{transform:rotateY(180deg) translateZ(29px)}.face.right{transform:rotateY(90deg) translateZ(29px)}.face.left{transform:rotateY(-90deg) translateZ(29px)}.face.top{transform:rotateX(90deg) translateZ(29px)}.face.bottom{transform:rotateX(-90deg) translateZ(29px)}
  .dimension-cube .face{font-size:11px}
  .dimension-ring{width:85%;left:8%;top:12%}
  .hero-visual{overflow:hidden}
  .float-tag{max-width:155px}
  .contact-dock__panel{max-width:min(340px,calc(100vw - 32px))}
  .services-grid>* ,.projects-grid>* ,.article-grid>*{transform:none!important}
}
@media(prefers-reduced-motion:reduce){
 .dimension-cube,.dimension-ring{animation:none!important}
 .dimension-stage,.photo-shell,.services-grid>* ,.projects-grid>* ,.article-grid>*{transition:none!important;transform:none!important}
}