/* Progressive 3D: every essential element remains visible without JavaScript. */
.motion-toggle{border:0;background:none;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:12px 0;white-space:nowrap;order:3}
.motion-toggle[hidden]{display:none}.motion-toggle span{color:var(--ink);border-bottom:1px solid var(--red);margin-left:4px}
.depth-story{background:#151515;color:var(--paper);position:relative}
.depth-pin{padding:55px 0 32px;overflow:clip}
.depth-heading{display:flex;justify-content:space-between;align-items:end;width:100%;gap:24px}
.depth-heading .eyebrow{font-size:10px;color:#bbb9b3;margin:0 0 18px}
.depth-heading h2{font:600 clamp(38px,5.2vw,76px)/.97 var(--display);letter-spacing:-.065em;margin:0}
.depth-heading h2 span{color:var(--red)}
.depth-instruction{color:#c5c4be;font-size:12px;max-width:140px;line-height:1.6}.depth-instruction>span{display:block;font-size:25px;margin-top:8px}
.depth-scene{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,2vw,24px);padding:55px var(--gutter);width:100%;max-width:1920px;margin:auto}
.depth-card{display:block;position:relative;min-width:0;width:100%;aspect-ratio:16/9;overflow:hidden;background:#202020;outline:1px solid #5e5b57;outline-offset:-1px}
.depth-card-0{grid-column:1/-1}
.depth-card img{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:contain}
.depth-card-label{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:12px 15px;font-size:9px;letter-spacing:.12em;color:#f8f7f3;background:linear-gradient(transparent,#151515e8);padding-top:26px}
.depth-card:focus-visible{outline:3px solid var(--red);outline-offset:6px}
.depth-chapters{display:flex;justify-content:space-between;padding:0;list-style:none;margin:0 0 18px;gap:12px;font-size:12px;color:#d5d3cd}.depth-chapters li{display:flex;gap:12px}.depth-chapters li.is-active{color:var(--red)}
.depth-track{height:1px;background:#55534e;overflow:hidden}.depth-track span{display:block;width:100%;height:100%;background:var(--red);transform-origin:left;transform:scaleX(var(--depth-progress,0))}
.depth-footer>p{font-size:9px;letter-spacing:.12em;color:#aaa8a1;margin:18px 0 0}
.depth-floor{display:none}
/* Only enable a pinned sequence on sufficiently large, motion-enabled screens. */
@media(min-width:851px) and (min-height:620px){
 .motion-enabled .depth-story{height:220vh}
 .motion-enabled .depth-pin{height:calc(100vh - 94px);min-height:526px;position:sticky;top:94px;display:flex;flex-direction:column;justify-content:space-between;padding-top:32px;padding-bottom:24px}
 .motion-enabled .depth-heading h2{font-size:clamp(36px,4.5vw,65px)}
 .motion-enabled .depth-heading h2 br{display:none}.motion-enabled .depth-heading h2 span{margin-left:.2em}
 .motion-enabled .depth-heading{z-index:2;pointer-events:none}.motion-enabled .depth-instruction{margin:0;max-width:none}.motion-enabled .depth-instruction>span{display:inline;margin-left:16px}
 .motion-enabled .depth-scene{position:relative;display:block;flex:1;min-height:0;width:100%;max-width:1500px;perspective:1400px;perspective-origin:50% 43%;padding:0;transform-style:preserve-3d}
 .motion-enabled .depth-card{position:absolute;top:50%;left:50%;width:min(48vw,720px);margin:0;transform-style:preserve-3d;box-shadow:0 18px 45px #0007}
 .motion-enabled .depth-card img{backface-visibility:hidden}
 .motion-enabled .depth-card-label{transform:translateZ(2px)}
 .motion-enabled .depth-floor{display:block;position:absolute;left:12%;right:12%;top:30%;height:80%;border:1px solid #ffffff12;background:repeating-linear-gradient(90deg,transparent 0 99px,#ffffff08 99px 100px),repeating-linear-gradient(0deg,transparent 0 99px,#ffffff08 99px 100px);transform:rotateX(72deg) translateZ(-180px);pointer-events:none}
 .motion-enabled .depth-footer{width:100%;z-index:2}
}
.motion-enabled .tile-visual{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .3s ease,box-shadow .3s ease;will-change:auto}
.motion-enabled .tile-visual:hover{box-shadow:0 20px 35px #15151522}
.motion-enabled .project-tile{transform:perspective(1200px) translateY(var(--rise,0px)) rotateX(var(--reveal-angle,0deg));transform-origin:center bottom}
.motion-enabled .process-step,.motion-enabled .timeline-row{position:relative}
.motion-enabled .process-step::before,.motion-enabled .timeline-row::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--red);transform:scaleX(var(--step-fill,0));transform-origin:left;pointer-events:none}
@media(min-width:851px) and (min-height:620px){.motion-enabled .depth-active .depth-card{will-change:transform}}
.motion-enabled .hero-title{perspective:1100px}.motion-enabled .hero-title .line{transform:translate3d(var(--title-shift,0px),0,0) rotateX(var(--title-turn,0deg));transform-origin:left center}
.motion-enabled .hero-title .line:nth-child(2){transform:translate3d(calc(var(--title-shift,0px) * -.4),0,0)}
.motion-enabled .marquee>div{transform:translateX(var(--marquee-x,0px))}
@media(max-width:950px){.motion-toggle{order:0}.nav{gap:14px}.header-inner{gap:16px}}
@media(min-width:851px) and (max-width:950px) and (min-height:620px){.motion-enabled .depth-pin{top:78px;height:calc(100vh - 78px)}}
@media(max-width:850px){.depth-heading{align-items:start}.depth-instruction{display:none}.depth-scene{padding-top:30px;padding-bottom:35px}.depth-card{width:100%;margin:0}.depth-card-label{font-size:10px}.depth-chapters li{font-size:10px;gap:5px}.depth-chapters li span{max-width:78px}.depth-heading h2{font-size:clamp(40px,8vw,65px)}}
@media(max-width:700px){.motion-toggle{margin-left:auto}.header-inner{gap:14px}.motion-toggle{font-size:9px}.running-row{flex-wrap:wrap}.home-hero>.eyebrow>span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.motion-enabled .depth-story{height:auto}.motion-enabled .depth-pin{position:relative;top:auto;height:auto;min-height:0}.motion-enabled .project-tile,.motion-enabled .tile-visual,.motion-enabled .hero-title .line,.motion-enabled .marquee>div{transform:none!important}}

html:not(.motion-enabled) .cursor-dot,html:not(.motion-enabled) .cursor-ring{display:none}
html.js:not(.motion-enabled){scroll-behavior:auto}

@media(max-width:600px){.depth-card-label{font-size:8px;padding:18px 8px 7px;letter-spacing:.04em}.depth-card-0 .depth-card-label{font-size:10px}}

/* Portfolio artwork is immediate and steady; retain motion elsewhere. */
.motion-enabled [data-static-thumbnail],.motion-enabled [data-static-thumbnail] .tile-visual{transform:none;transition:none}
.motion-enabled [data-static-thumbnail] .tile-visual:hover{box-shadow:none}