.depth-site {background:#080e19;}


.depth-site .hero {padding:72px 0 80px;background:radial-gradient(ellipse at 75% 30%,#14325a55,transparent 65%);overflow:hidden;}
.depth-site .hero-grid {grid-template-columns:1.08fr 1fr;align-items:center;gap:55px;}
.depth-site .hero h1 {font-size:clamp(45px,5.5vw,78px);line-height:1.04;letter-spacing:-.06em;}
.depth-site .hero h1 em {color:#84baff;background:linear-gradient(110deg,#d2f2ff,#7bb6ff 50%,#3e79ed);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.depth-site .hero-intro {font-size:17px;line-height:1.7;max-width:410px;}
.depth-site .eyebrow {font-size:10px;letter-spacing:.15em;color:#91baff;}
.depth-scene {position:relative;isolation:isolate;width:100%;aspect-ratio:1.04;border:1px solid #30456785;border-radius:32px;background:radial-gradient(ellipse at 50% 40%,#17345a85,transparent 65%),linear-gradient(145deg,#14213970,#0b142440);box-shadow:inset 0 1px #9bc9ff13,0 35px 80px #0005;overflow:hidden;}
.depth-scene::before {content:'';position:absolute;inset:0;background-image:linear-gradient(#78a1dc09 1px,transparent 1px),linear-gradient(90deg,#78a1dc09 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(transparent,#000,transparent);pointer-events:none;}
.depth-canvas,.hero-mark {position:absolute;width:100%;height:83%;top:0;left:0;pointer-events:none;}
.hero-mark {padding:60px 85px;filter:drop-shadow(15px 20px 0 #064190) drop-shadow(0 12px 28px #006dff44);transform:perspective(650px) rotateY(-16deg) rotateX(9deg);}
.depth-canvas {opacity:0;}
.gpu-ready .depth-canvas {opacity:1;}.gpu-ready .hero-mark {opacity:0;}
.mark-shadow {position:absolute;left:25%;right:25%;bottom:24%;height:20px;border-radius:50%;background:#0052b255;filter:blur(18px);transform:rotate(-10deg);}
.scene-orbit {position:absolute;left:13%;top:12%;width:74%;height:65%;border:1px solid #76b4ff26;border-radius:50%;transform:rotate(-35deg) scaleY(.75);pointer-events:none;}
.orbit-two {transform:rotate(37deg) scaleY(.75);border-color:#76b4ff13;}
.scene-corner {position:absolute;width:17px;height:17px;border-color:#87baff7a;border-style:solid;z-index:2;}
.top-left {top:22px;left:22px;border-width:1px 0 0 1px;}.bottom-right {bottom:22px;right:22px;border-width:0 1px 1px 0;}
.scene-caption {position:absolute;left:28px;bottom:28px;display:grid;gap:9px;pointer-events:none;}
.scene-caption span {font-size:9px;letter-spacing:.17em;color:#83addec7;}.scene-caption strong {font-size:15px;font-weight:500;letter-spacing:-.025em;color:#dbeaff;}

.depth-site .ticker {background:#0b1422;border-block:1px solid #22334d;}
.depth-site .service-tile {background:linear-gradient(150deg,#1a2940,#101b2d);box-shadow:inset 0 1px #b6d6ff10,0 9px 20px #0002;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.depth-site .work-card {box-shadow:inset 0 1px #bedaff10,0 18px 30px #0002;}
.depth-site .work-card img {border:7px solid #152238;border-radius:14px;box-shadow:0 15px 25px #0004;}
.depth-site .section-head h2 {letter-spacing:-.05em;}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {.depth-site .service-tile:hover {transform:perspective(650px) rotateX(4deg) translateY(-5px);box-shadow:0 18px 30px #0004;border-color:#6293d4;}}
@media(max-width:760px){.depth-site .hero {padding:36px 0 34px;}.depth-site .hero-grid {grid-template-columns:1fr;gap:24px;}.depth-site .hero h1 {font-size:clamp(41px,9vw,62px);}.depth-site .hero-intro {font-size:15px;}.depth-site .depth-scene {width:100%;max-width:460px;margin-inline:auto;aspect-ratio:1.55;border-radius:24px;}.hero-mark {padding:24px 85px;height:85%;}.scene-caption {left:20px;bottom:19px;gap:6px;}.scene-caption strong {font-size:13px;}.scene-caption span {font-size:8px;}.scene-orbit {top:5%;height:72%;}.mark-shadow {bottom:25%;}.top-left{left:17px;top:17px;}.bottom-right{right:17px;bottom:17px;}}
@media(prefers-reduced-motion:reduce){.depth-site *, .depth-site *::before, .depth-site *::after {scroll-behavior:auto!important;animation:none!important;transition:none!important;}.hero-mark {transform:none;}}
@media(forced-colors:active){.hero-mark {filter:none;}.depth-site .hero h1 em {-webkit-text-fill-color:currentColor;}.depth-scene {border:1px solid CanvasText;}}



/* Preserve the original artwork while blending its black backing into navy. */
.depth-site .logo {background:transparent;box-shadow:none;border:0;}
.depth-site .logo img {mix-blend-mode:screen;background:transparent;border-radius:0;}

/* Dimensional surfaces retain the compact app layout. */
.depth-site .hero {background:radial-gradient(ellipse at 78% 35%,#16447766,transparent 58%),radial-gradient(ellipse at 10% 85%,#10316433,transparent 50%);}
.depth-scene {box-shadow:inset 0 1px #c9e7ff26,inset 0 -1px #0008,0 32px 80px #0007,0 0 70px #1262bc15;}
.depth-scene::after {content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(125deg,#c6e8ff0b,transparent 35%,transparent 70%,#1c7cff0b);pointer-events:none;}
.depth-site .service-tile {border-color:#34537685;background:linear-gradient(145deg,#203451,#101b2d 70%);box-shadow:inset 0 1px #d6eeff25,inset -1px -2px #0004,0 12px 24px #0004;}
.depth-site .work-card {background:linear-gradient(130deg,#18283e,#0d1728);border-color:#34537685;box-shadow:inset 0 1px #bdddff20,0 18px 36px #0004;}
@media(min-width:761px) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .depth-scene:not(.gpu-ready) .hero-mark {animation:mark-float 8s ease-in-out infinite;}
 .depth-site .service-tile:hover {transform:perspective(700px) rotateX(7deg) rotateY(-5deg) translateY(-7px);box-shadow:0 23px 36px #0006,0 0 24px #2878e51c;}
}
@keyframes mark-float {0%,100%{transform:perspective(650px) translateY(5px) rotateY(-19deg) rotateX(7deg);}50%{transform:perspective(650px) translateY(-9px) rotateY(-5deg) rotateX(15deg);}}

/* Open scene: the mark belongs to the page rather than a panel. */
.depth-site .hero {position:relative;isolation:isolate;background:radial-gradient(ellipse at 78% 44%,#164b8455,transparent 55%),#080e19;}
.depth-site .hero-grid {position:relative;z-index:1;}
.depth-site .depth-scene {border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;transform:translateY(var(--scene-shift,0px));}
.depth-scene::before {inset:-12%;opacity:.6;transform:perspective(600px) rotateX(58deg) translateY(65px);}
.depth-scene::after {inset:15%;border-radius:50%;background:#1b73da1b;filter:blur(50px);z-index:-1;}
.scene-corner {display:none;}
.hero-mark {padding:42px 25px;filter:drop-shadow(12px 17px 0 #09376c) drop-shadow(0 20px 32px #007bff40);}
.depth-canvas {width:112%;left:-6%;height:90%;}
.scene-caption {left:10%;bottom:0;}
.scene-orbit {left:1%;width:98%;height:75%;border-color:#6ab7ff32;}
.orbit-two {left:10%;width:80%;border-color:#b7dfff18;}
.mark-shadow {bottom:13%;left:15%;right:15%;height:27px;background:#007aff45;filter:blur(27px);}
.depth-site .service-tiles {perspective:1100px;gap:16px;}
.depth-site .service-tile {position:relative;min-height:155px;overflow:visible;transform-style:preserve-3d;}
.depth-site .service-tile > .ui-icon {width:43px;height:43px;padding:9px;box-sizing:content-box;border-radius:17px;background:linear-gradient(135deg,#2a75bd,#163a69);border:1px solid #76bdff6b;color:#c7eeff;box-shadow:1px 2px #17447a,2px 4px #12335b,3px 6px #0b2545,0 15px 22px #0005;transform:perspective(400px) rotateY(-14deg) rotateX(12deg);margin-bottom:13px;}
.depth-site .service-tile:nth-child(3n+2) > .ui-icon {background:linear-gradient(135deg,#3864ab,#242e60);color:#d9deff;}
.depth-site .work-expanded {perspective:1200px;overflow:visible;}
.depth-site .work-visual.project-screenshot {position:relative;margin:24px 26px 34px;overflow:visible;background:#0a1423;border:9px solid #29394e;border-top-width:22px;border-radius:14px;box-shadow:0 24px 30px #0007,inset 0 0 0 1px #abc9ed55;transform:rotateY(-7deg) rotateX(4deg);transition:transform .4s ease;}
.depth-site .project-screenshot::before {content:'';position:absolute;left:-8%;right:-8%;bottom:-17px;height:10px;background:linear-gradient(#6f8199,#26364d);border-radius:2px 2px 60% 60%;box-shadow:0 7px 14px #0005;}
.depth-site .project-screenshot img {border:0;border-radius:3px;box-shadow:none;display:block;width:100%;height:auto;}
.depth-site .project-screenshot .visual-note {top:-19px;left:8px;font-size:8px;padding:0;background:transparent;color:#bbcbe0;}
.depth-site .work-card[open] {border-color:#6297cf;}
.depth-site .work-card[open] .project-screenshot:hover {transform:rotateY(0) rotateX(0);}
.depth-site .section {position:relative;}
.depth-site #services {background:radial-gradient(ellipse at 0 45%,#163c6330,transparent 55%);}
.depth-site #work {background:radial-gradient(ellipse at 100% 30%,#1c335b40,transparent 60%);}
@media(max-width:760px){
 .depth-site .hero-grid {gap:14px;}.depth-site .depth-scene {aspect-ratio:1.4;margin-bottom:10px;transform:none;}
 .hero-mark {padding:15px 35px;height:88%;}.scene-caption {left:0;bottom:0;}.scene-orbit{height:76%;}
 .depth-site .service-tile {min-height:125px;}.depth-site .service-tile > .ui-icon {width:29px;height:29px;padding:8px;border-radius:13px;margin-bottom:10px;}
 .depth-site .work-visual.project-screenshot {margin:16px 17px 26px;border-width:6px;border-top-width:20px;transform:none;}
}
@media(prefers-reduced-motion:reduce){.depth-site .depth-scene,.depth-site .project-screenshot {transform:none!important;}}

.save-data .hero-mark {animation:none!important;}
.depth-site .work-compact .work-visual.project-screenshot {padding:0;height:auto;min-height:0;align-self:center;display:block;}
.depth-site .work-compact .project-screenshot img {height:auto;object-fit:contain;}

/* Keep the decorative badge outside the SVG viewport to prevent clipping. */
.depth-site .service-tile {transform-style:flat;}
.depth-site .service-icon-badge {display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:62px;height:62px;box-sizing:border-box;border:1px solid #76bdff6b;border-radius:17px;background:linear-gradient(135deg,#2a75bd,#163a69);color:#d5efff;box-shadow:1px 2px #17447a,2px 4px #12335b,3px 6px #0b2545,0 13px 22px #0004;margin-bottom:8px;}
.depth-site .service-icon {display:block;flex:none;width:30px;height:30px;padding:0;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform:none;}
.depth-site .service-tile:nth-child(3n+2) .service-icon-badge {background:linear-gradient(135deg,#3864ab,#242e60);color:#e0e7ff;}
@media(max-width:760px){.depth-site .service-icon-badge {width:48px;height:48px;border-radius:13px;margin-bottom:5px;}.depth-site .service-icon {width:26px;height:26px;}}