/* Spatial material system: a lit face, a physical edge, and a separated shadow. */
.button.gold{position:relative;border:1px solid #fff3ce99;border-bottom-color:#a08957;background:#dac38f;box-shadow:0 1px 0 #a18c61,0 4px 9px #0003;transform:translateY(-1px);transform-style:preserve-3d;transition:transform .3s,background .3s}.button.gold span{transform:none;text-shadow:none}.button.gold:hover,.button.gold:focus-visible{transform:translateY(-3px)}.button.gold:active{transform:translateY(0)}
.header-cta{padding:10px 18px;gap:24px;background:#1b3747;border:1px solid #7197a74d;box-shadow:0 1px 0 #071822,0 3px 8px #0003;transform:translateY(-1px);transition:transform .25s}.header-cta:hover{transform:translateY(-3px)}.header-cta:active{transform:translateY(0)}
.system-controls{background:#102a38ed;border-color:#84a6b63d;box-shadow:0 1px 0 #071822,0 5px 12px #0003;transform-style:preserve-3d}.system-controls button{margin:2px;position:relative;transition:transform .25s,background .25s}.system-controls button.active{background:#dac38f;box-shadow:0 1px 0 #a18c61,0 3px 6px #0003;transform:translateY(-1px)}.system-controls button:hover{transform:translateY(-2px)}.system-controls button:active{transform:translateY(0)}
.expertise{position:relative;isolation:isolate;background:radial-gradient(ellipse at 85% 25%,#16445580,transparent 56%),linear-gradient(125deg,#04131c,#0b2533 55%,#04141e)}.space-grid{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;perspective:900px;opacity:.32}.space-grid:before{content:'';position:absolute;left:-20%;right:-20%;height:900px;top:200px;background:linear-gradient(#7996a22b 1px,transparent 1px),linear-gradient(90deg,#7996a22b 1px,transparent 1px);background-size:100px 100px;transform:rotateX(63deg) rotateZ(-18deg);mask-image:linear-gradient(transparent,#000 25%,#000 65%,transparent)}.space-grid:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.95%,#a8c4d314 50%,transparent 50.05%);opacity:.6}
.chapter{perspective:1500px}.depth-frame{position:relative;perspective:1500px;isolation:isolate;--depth-rx:3deg;--depth-ry:-5deg;--depth-y:0px;--depth-lift:0px;margin:0 0 38px}.depth-frame:before,.depth-frame:after{content:'';position:absolute;inset:5px -1px -5px 1px;background:linear-gradient(135deg,#234557,#071923);border:1px solid #82a6b838;pointer-events:none;z-index:-1;transform-origin:50% 60%;transition:transform .5s}.depth-frame:before{transform:perspective(1500px) rotateX(3deg) rotateY(-5deg) translate3d(15px,17px,-35px);box-shadow:10px 25px 45px #0006}.depth-frame:after{transform:perspective(1500px) rotateX(3deg) rotateY(-5deg) translate3d(7px,9px,-15px);background:#143447}.depth-frame .chapter-visual{overflow:visible;transform-style:preserve-3d;transform:translateY(calc(var(--depth-y) + var(--depth-lift))) rotateX(var(--depth-rx)) rotateY(var(--depth-ry));transform-origin:50% 60%;transition:transform .45s cubic-bezier(.2,.7,.2,1);border-color:#9dbacb66;box-shadow:1px 1px 0 #496477,3px 3px 0 #233e50,5px 5px 0 #152d3c,7px 7px 0 #05121b,12px 30px 55px #0007,inset 0 1px 0 #d1e5ed33;background:linear-gradient(145deg,#244b5f,#0a2534)}
.depth-frame .visual-label{transform:translateZ(40px);text-shadow:0 7px 10px #0009}.depth-frame .visual-foot{transform:translateZ(28px);text-shadow:0 5px 8px #0009}.depth-frame .target-grid{transform:translateZ(1px)}.depth-frame .target-center{transform:translateZ(45px);background:#102c3bdb;box-shadow:0 22px 35px #0005,inset 0 1px 0 #c9dde52b;transform-style:preserve-3d}.depth-frame .target-center b{transform:translateZ(32px);text-shadow:0 16px 14px #0008}.depth-frame .creative-visual img{display:block;transform:translateZ(1px);opacity:.55}.chapter:hover .depth-frame .creative-visual img{transform:translateZ(1px)}.depth-frame .creative-type{transform:translateZ(70px);text-shadow:0 18px 25px #000a}.depth-frame .creative-visual:after{pointer-events:none;transform:translateZ(2px)}.depth-frame .code-display{transform:translateZ(45px);text-shadow:0 12px 17px #0008}.depth-frame .code-display strong{transform:translateZ(24px)}.depth-frame .engineering-line{display:none}.depth-frame .flow-diagram{transform:translateZ(35px);transform-style:preserve-3d}.depth-frame .flow-diagram b{transform:translateZ(28px);text-shadow:0 15px 14px #0007}.depth-frame .flow-diagram span{background:#173b4c;padding:9px 12px;box-shadow:0 3px 0 #05151f,0 12px 18px #0004;border:1px solid #93b2bc33}
.chapter-links a{padding:0 12px;position:relative;border:1px solid transparent;border-top-color:var(--line);transition:transform .3s,color .3s,background .3s}.chapter-links a.active{background:#213e4e;border:1px solid #7899a83d;box-shadow:0 1px 0 #071822,0 3px 8px #0003;transform:translateY(-1px);padding-left:18px}.chapter-links a:hover{color:var(--gold);transform:translateY(-2px)}
.assembly-diagram{perspective:1400px;transform-style:preserve-3d}.discipline{box-shadow:1px 1px 0 #708b9955,3px 4px 0 #1a384a,6px 8px 0 #03121c,12px 30px 35px #0005,inset 0 1px 0 #d4e7ee22;transform-style:preserve-3d;background:linear-gradient(140deg,#234b5e,#0c2938)}.discipline strong{transform:translateZ(23px);text-shadow:0 10px 12px #0005}.discipline small{transform:translateZ(15px)}.assembly-result{background:linear-gradient(150deg,#183c4de8,#071c28ef);border:1px solid #8da8b530;box-shadow:0 4px 0 #04121b,0 20px 35px #0005}.craft-layer{box-shadow:2px 2px 0 #8a9faa,4px 5px 0 #46606e,7px 8px 0 #0b1b25,22px 35px 65px #0008;transform-style:preserve-3d}.craft-layer h3{transform:translateZ(30px);text-shadow:0 12px 20px #0002}.craft-layer p{transform:translateZ(15px)}
.record{background:linear-gradient(135deg,#f1f4f5,#d4dfe4)}.metrics{gap:22px;border:0;padding:0;perspective:1600px}.metrics>div,.metrics>div:first-child{padding:25px 27px 30px;border:1px solid #ffffffb3;background:linear-gradient(135deg,#f8fafb,#dce6eb);box-shadow:1px 2px 0 #b1c2cc,3px 5px 0 #91a4b0,8px 18px 28px #18394c20,inset 0 1px 0 #fff;transform:rotateX(3deg) rotateY(-3deg);transition:transform .4s}.metrics>div:last-child{border:1px solid #ffffffb3}.metrics>div:hover{transform:rotateX(0) rotateY(0) translateY(-7px)}.metrics strong{font-size:clamp(48px,5.8vw,90px);text-shadow:2px 5px 0 #47697912}.metrics p{font-size:14px}.contact{position:relative;background:radial-gradient(ellipse at 78% 40%,#31627755,transparent 58%),linear-gradient(140deg,#153e50,#071e2b)}.contact h2>a{background:#dac38f;color:#0a2330;border-color:#ead8ad;box-shadow:0 1px 0 #a18c61,0 5px 12px #0003;transform:translateY(-1px);transition:transform .4s}.contact h2>a:hover,.contact h2>a:focus-visible{transform:translateY(-3px)}.contact h2>a:active{transform:translateY(0)}
@media(max-width:1000px){.metrics{gap:15px}.metrics>div,.metrics>div:first-child{padding:20px}.depth-frame{--depth-ry:-3deg}.depth-frame .creative-type{transform:translateZ(35px)}.depth-frame .visual-label{transform:translateZ(20px)}}
@media(max-width:650px){.depth-frame{--depth-rx:2deg;--depth-ry:-2deg;margin-bottom:33px}.depth-frame:before{transform:translate(9px,12px)}.depth-frame:after{transform:translate(5px,6px)}.depth-frame .target-center{transform:translateZ(18px)}.depth-frame .target-center b,.depth-frame .flow-diagram b{transform:translateZ(8px)}.depth-frame .code-display,.depth-frame .flow-diagram{transform:translateZ(14px)}.depth-frame .creative-type{transform:translateZ(22px)}.depth-frame .visual-label,.depth-frame .visual-foot{transform:translateZ(12px)}.chapter-links a.active{transform:translateY(-2px);padding-left:12px}.metrics{gap:20px}.metrics>div,.metrics>div:first-child{padding:20px;border:1px solid #fff9;gap:0 15px}.metrics strong{font-size:56px}.metrics p{font-size:12px}.metrics small{font-size:10px}.discipline{box-shadow:2px 3px 0 #1a384a,4px 5px 0 #03121c,8px 15px 25px #0005}.assembly-diagram{gap:17px}.assembly-result{padding-left:8px;padding-right:8px}.assembly-result strong{font-size:31px}}
.motion-paused .depth-frame .chapter-visual{transform:rotateX(2deg) rotateY(-2deg);transition:none}.motion-paused .button.gold:hover,.motion-paused .header-cta:hover,.motion-paused .contact h2>a:hover,.motion-paused .metrics>div:hover{transform:none}
@media(prefers-reduced-motion:reduce){.depth-frame .chapter-visual{transform:rotateX(2deg) rotateY(-2deg)}.button.gold:hover,.header-cta:hover,.contact h2>a:hover,.metrics>div:hover{transform:none}}