:root{--bg:#0a0a0b;--fg:#f0eee8;--muted:#9c9992;--line:rgba(255,255,255,.13);--accent:#d7ff44;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;background:var(--bg);color:var(--fg);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}button,a{font:inherit;color:inherit}a{text-decoration:none}img{display:block;max-width:100%}button{border:0;background:none;padding:0}.scene-section{position:relative;min-height:100vh}.site-header{position:fixed;z-index:50;top:0;left:0;right:0;padding:24px 34px;display:flex;align-items:center;justify-content:space-between;mix-blend-mode:difference;color:#fff;pointer-events:none}.site-header>*{pointer-events:auto}.brand{font-weight:900;letter-spacing:-.05em;font-size:1.2rem}.site-header nav{display:flex;gap:28px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}.site-header nav a{position:relative}.site-header nav a:after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:currentColor;transition:.3s}.site-header nav a:hover:after{width:100%}.availability{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;display:flex;gap:8px;align-items:center}.availability i{width:7px;height:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 18px var(--accent)}.scroll-progress{position:fixed;z-index:60;left:0;top:0;width:100%;height:2px;background:transparent}.scroll-progress i{display:block;width:0;height:100%;background:var(--accent)}
.cursor{position:fixed;z-index:100;left:0;top:0;width:64px;height:64px;border:1px solid rgba(255,255,255,.5);border-radius:50%;display:grid;place-items:center;pointer-events:none;transform:translate(-50%,-50%) scale(.45);opacity:0;transition:transform .25s var(--ease),opacity .2s,background .2s;color:#fff;mix-blend-mode:difference}.cursor span{font-size:.58rem;letter-spacing:.12em}.cursor.active{transform:translate(-50%,-50%) scale(1);opacity:1;background:#fff;color:#000}
.hero{overflow:hidden;display:flex;align-items:center;padding:110px 6vw 70px;background:radial-gradient(circle at 72% 45%,#26242a 0,#121214 32%,#0a0a0b 64%)}.hero-grid{position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:70px 70px;transform:perspective(500px) rotateX(62deg) translateY(34%);transform-origin:center bottom;mask-image:linear-gradient(to top,#000,transparent 78%)}.hero-copy{position:relative;z-index:5;width:54%;pointer-events:none}.kicker{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:#c5c1ba}.hero h1{font-size:clamp(5rem,12vw,11.5rem);line-height:.72;letter-spacing:-.09em;margin:24px 0 28px;font-weight:900}.hero h1 span{display:block}.hero h1 span:last-child{margin-left:12vw;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.75)}.hero-note{max-width:400px;font-size:1rem;line-height:1.6;color:var(--muted);margin-left:12vw}.hero-link{pointer-events:auto;display:inline-flex;gap:20px;align-items:center;margin:26px 0 0 12vw;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase}.hero-link b{font-size:1.2rem}.hero-stage{position:absolute;right:4vw;top:10vh;width:52vw;height:82vh;perspective:1300px;transform-style:preserve-3d}.depth-card{position:absolute;margin:0;overflow:hidden;background:#19191b;box-shadow:0 30px 80px rgba(0,0,0,.4);transform-style:preserve-3d;will-change:transform;transition:filter .4s}.depth-card img{width:100%;height:100%;object-fit:cover}.depth-card figcaption{position:absolute;left:14px;bottom:12px;font-size:.55rem;letter-spacing:.16em;color:#fff;background:rgba(0,0,0,.4);padding:6px 8px;backdrop-filter:blur(8px)}.depth-back{width:48%;height:42%;right:1%;top:7%;filter:saturate(.45) brightness(.65)}.depth-mid{width:44%;height:48%;left:0;bottom:5%;filter:saturate(.75)}.depth-front{width:54%;height:56%;right:7%;top:24%;z-index:3}.orbit{position:absolute;border:1px solid rgba(215,255,68,.5);border-radius:50%;pointer-events:none}.orbit-a{width:66%;aspect-ratio:1;right:-14%;top:6%;transform:rotateX(70deg) rotateZ(22deg)}.orbit-b{width:36%;aspect-ratio:1;left:5%;top:7%;border-color:rgba(255,255,255,.25);transform:rotateX(65deg) rotateY(25deg)}.scroll-label{position:absolute;left:34px;bottom:28px;font-size:.58rem;letter-spacing:.18em;color:#777}.scroll-label span{margin-left:12px;color:var(--accent)}
.work{padding:130px 5vw 150px;background:#eeece5;color:#0c0c0d;overflow:hidden}.work .kicker{color:#696761}.section-intro{display:grid;grid-template-columns:1fr 1fr;gap:6vw;margin-bottom:70px;align-items:end}.section-intro h2,.about h2,.contact h2{font-size:clamp(3.2rem,7vw,7.6rem);line-height:.88;letter-spacing:-.065em;margin:10px 0 0}.section-intro h2 em,.about h2 em,.contact h2 em{font-weight:400;font-family:Georgia,serif}.section-intro>p:last-child{max-width:390px;justify-self:end;font-size:.96rem;line-height:1.7;color:#6a6761}.spatial-gallery{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:34px 24px;perspective:1200px;transform-style:preserve-3d;padding:5vh 2vw 8vh}.work-card{position:relative;text-align:left;cursor:pointer;background:#111;overflow:visible;transform:translateX(var(--x)) translateZ(var(--z)) rotateZ(var(--rz));transition:transform .65s var(--ease),filter .5s,opacity .5s;box-shadow:0 24px 55px rgba(0,0,0,.18);isolation:isolate}.work-card:before{content:"";position:absolute;inset:-10px;border:1px solid rgba(0,0,0,.15);z-index:-1;transform:translateZ(-20px)}.work-card img{width:100%;aspect-ratio:1.35/1;object-fit:cover;transition:transform .8s var(--ease),filter .5s}.work-card:hover{transform:translateX(var(--x)) translateZ(calc(var(--z) + 70px)) rotateZ(0deg) scale(1.025);z-index:10}.work-card:hover img{transform:scale(1.035)}.card-a{grid-column:1/8}.card-b{grid-column:8/13;margin-top:120px}.card-c{grid-column:2/7;margin-top:30px}.card-d{grid-column:7/13;margin-top:130px}.card-e{grid-column:1/7;margin-top:30px}.card-f{grid-column:8/13;margin-top:100px}.card-index{position:absolute;z-index:3;top:-34px;left:0;font-size:.65rem;letter-spacing:.15em}.card-info{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:60px 22px 20px;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff;display:flex;justify-content:space-between;align-items:end;gap:20px}.card-info small{font-size:.56rem;letter-spacing:.16em}.card-info strong{font-size:1.4rem;letter-spacing:-.03em}.about{min-height:110vh;padding:130px 7vw;display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center;background:#0d0d0e;overflow:hidden}.about-object{position:relative;min-height:620px;perspective:1000px}.wire-cube{position:absolute;width:360px;height:360px;left:10%;top:17%;transform-style:preserve-3d;animation:floatCube 14s linear infinite}.face{position:absolute;inset:0;border:1px solid rgba(215,255,68,.55)}.face.back{transform:translateZ(-160px)}.edge{position:absolute;width:160px;height:1px;background:rgba(215,255,68,.55);transform-origin:left center}.e1{left:0;top:0;transform:rotateY(90deg)}.e2{right:-160px;top:0;transform:rotateY(90deg)}.e3{left:0;bottom:0;transform:rotateY(90deg)}.e4{right:-160px;bottom:0;transform:rotateY(90deg)}@keyframes floatCube{0%{transform:rotateX(-11deg) rotateY(0deg)}50%{transform:rotateX(8deg) rotateY(180deg)}100%{transform:rotateX(-11deg) rotateY(360deg)}}.portrait-orbit{position:absolute;width:230px;aspect-ratio:1;border-radius:50%;overflow:hidden;right:8%;bottom:10%;border:1px solid rgba(255,255,255,.3);box-shadow:0 0 0 28px rgba(255,255,255,.025),0 0 0 56px rgba(255,255,255,.015)}.portrait-orbit img{width:100%;height:100%;object-fit:cover}.about-copy{max-width:670px}.about-copy .lead{font-size:1.25rem;line-height:1.65;color:#bbb6ae;max-width:580px;margin:42px 0}.skill-cloud{display:flex;flex-wrap:wrap;gap:9px}.skill-cloud span{padding:10px 13px;border:1px solid var(--line);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;border-radius:999px}.tools{margin-top:36px;color:#777;font-size:.65rem;letter-spacing:.13em;line-height:1.8}.contact{min-height:100vh;padding:130px 7vw 80px;display:grid;grid-template-columns:1.3fr .7fr;align-items:center;gap:6vw;background:var(--accent);color:#0a0a0b;overflow:hidden}.contact .kicker{color:#3c4318}.contact h2{max-width:900px}.contact-row{display:flex;flex-direction:column;margin-top:70px;border-top:1px solid rgba(0,0,0,.35)}.contact-row a{padding:18px 0;border-bottom:1px solid rgba(0,0,0,.35);font-size:.72rem;letter-spacing:.15em;display:flex;justify-content:space-between;transition:padding .3s}.contact-row a:hover{padding-left:14px}.contact-sculpture{position:relative;aspect-ratio:1;display:grid;place-items:center;perspective:900px}.ring{position:absolute;border:2px solid #0a0a0b;border-radius:50%;width:78%;height:78%;animation:spin 10s linear infinite}.r1{transform:rotateX(70deg)}.r2{transform:rotateY(70deg);animation-duration:14s;animation-direction:reverse}.r3{width:58%;height:58%;transform:rotateX(45deg) rotateY(45deg);animation-duration:8s}.core{width:25%;aspect-ratio:1;background:#0a0a0b;border-radius:50%;box-shadow:0 0 0 24px rgba(0,0,0,.08)}@keyframes spin{to{rotate:360deg}}footer{padding:24px 34px;display:flex;justify-content:space-between;gap:20px;background:#0a0a0b;color:#777;font-size:.6rem;letter-spacing:.12em}
.project-view{position:fixed;z-index:90;inset:0;background:#efede7;color:#111;overflow:auto;opacity:0;visibility:hidden;transform:scale(.985);transition:opacity .42s var(--ease),transform .5s var(--ease),visibility .42s}.project-view.open{opacity:1;visibility:visible;transform:none}.project-close{position:fixed;z-index:3;right:28px;top:24px;background:#111;color:#fff;border-radius:999px;padding:12px 16px;font-size:.62rem;letter-spacing:.13em;cursor:pointer}.project-view-inner{min-height:100%;padding-bottom:90px}.project-hero{position:relative;height:min(82vh,880px);overflow:hidden;background:#111}.project-hero>img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 1.1s var(--ease)}.project-view.open .project-hero>img{transform:scale(1)}.project-title-wrap{position:absolute;inset:auto 5vw 5vw;max-width:840px;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.35)}.project-title-wrap p:first-child{font-size:.66rem;letter-spacing:.19em}.project-title-wrap h2{font-size:clamp(4rem,9vw,9rem);line-height:.82;letter-spacing:-.07em;margin:12px 0 22px}.project-title-wrap p:last-child{max-width:560px;line-height:1.65;color:#e0ddd6}.project-story{display:grid;grid-template-columns:repeat(3,1fr);padding:55px 6vw;border-bottom:1px solid #c8c5bd;gap:30px}.project-story div{display:flex;flex-direction:column;gap:10px}.project-story small{font-size:.58rem;letter-spacing:.14em;color:#777}.project-story strong{font-size:1rem}.project-frames{padding:8vw 6vw;display:grid;grid-template-columns:1.25fr .75fr;gap:6vw 4vw;align-items:start}.project-frame{margin:0;overflow:hidden;background:#111}.project-frame img{width:100%;aspect-ratio:1.3/1;object-fit:cover}.frame-two{margin-top:20vw}.project-placeholder{padding:60px 0;border-top:1px solid #bbb7af;grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:50px}.project-placeholder span{font-size:.64rem;letter-spacing:.15em}.project-placeholder p{margin:0;color:#777}.project-next{display:flex;margin:30px 6vw 0 auto;gap:30px;align-items:center;font-size:.7rem;letter-spacing:.15em;cursor:pointer;border-bottom:1px solid #111;padding-bottom:8px}.project-next span{font-size:1.2rem}
@media(max-width:900px){.cursor{display:none}.site-header{padding:20px}.availability{display:none}.site-header nav{gap:18px}.hero{padding:100px 24px 80px;align-items:flex-start;min-height:100svh}.hero-copy{width:100%;z-index:8}.hero h1{font-size:21vw;margin-top:18px}.hero h1 span:last-child{margin-left:12vw}.hero-note,.hero-link{margin-left:12vw}.hero-stage{right:-10vw;top:34vh;width:100vw;height:58vh;opacity:.82}.depth-front{width:60%;height:53%}.depth-mid{left:1%;bottom:0}.section-intro{grid-template-columns:1fr;gap:20px}.section-intro>p:last-child{justify-self:start}.work{padding:110px 20px}.spatial-gallery{display:flex;flex-direction:column;gap:70px;padding:30px 8px;perspective:none}.work-card{width:92%;align-self:flex-start;transform:rotateZ(var(--rz))!important}.work-card:nth-child(even){align-self:flex-end}.card-a,.card-b,.card-c,.card-d,.card-e,.card-f{margin-top:0}.card-info{padding:50px 16px 16px}.card-info strong{font-size:1.1rem}.about{grid-template-columns:1fr;padding:110px 24px;gap:20px}.about-object{min-height:420px;order:2}.wire-cube{width:240px;height:240px;left:4%}.portrait-orbit{width:160px}.contact{grid-template-columns:1fr;padding:110px 24px}.contact-sculpture{max-width:350px;justify-self:center;width:100%}.project-story{grid-template-columns:1fr}.project-hero{height:75svh}.project-frames{grid-template-columns:1fr;gap:30px}.frame-two{margin-top:0}.project-placeholder{grid-template-columns:1fr}.project-close{right:14px;top:14px}footer{padding:20px;flex-direction:column}.scroll-label{left:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.wire-cube,.ring{animation:none}.depth-card,.work-card,.project-hero>img{transition:none}}

/* V2 interaction layer */
.hero-stage{transform:translate3d(0,var(--heroScrollY,0),0) scale(var(--heroScrollScale,1));transition:opacity .15s linear;will-change:transform,opacity}
.webgl-object{position:absolute;z-index:2;right:23%;top:12%;width:42%;aspect-ratio:1;pointer-events:none;filter:drop-shadow(0 28px 46px rgba(0,0,0,.32));opacity:.96}
.webgl-object canvas{width:100%;height:100%;display:block}
.object-label{position:absolute;right:0;bottom:-6px;font-size:.48rem;letter-spacing:.16em;color:rgba(255,255,255,.42);white-space:nowrap}
.webgl-fallback{border:1px solid rgba(215,255,68,.28);border-radius:50%}.webgl-fallback:after{content:"3D FORM";position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.35);font-size:.55rem;letter-spacing:.2em}
.depth-front{z-index:4}.depth-mid{z-index:3}.depth-back{z-index:1}

.work-card{--tiltX:0deg;--tiltY:0deg;--magX:0px;--magY:0px;transform:translateX(calc(var(--x) + var(--magX))) translateY(var(--magY)) translateZ(var(--z)) rotateZ(var(--rz)) rotateX(var(--tiltX)) rotateY(var(--tiltY));transform-style:preserve-3d;will-change:transform}
.work-card:hover{transform:translateX(calc(var(--x) + var(--magX))) translateY(var(--magY)) translateZ(calc(var(--z) + 72px)) rotateZ(0deg) rotateX(var(--tiltX)) rotateY(var(--tiltY)) scale(1.025)}
.work-card .card-info{transform:translateZ(24px)}
.work-card .card-index{transform:translateZ(20px)}

/* Elements arrive from depth once, then stay still. */
/* Content is visible by default. JS opts into reveal motion only after it starts successfully. */
.section-intro,.work-card,.about-copy,.about-object,.contact-copy,.contact-sculpture{opacity:1;filter:none;translate:0 0;transition:opacity .85s var(--ease),filter .85s var(--ease),translate .9s var(--ease)}
.motion-ready .section-intro:not(.in-view),.motion-ready .work-card:not(.in-view),.motion-ready .about-copy:not(.in-view),.motion-ready .about-object:not(.in-view),.motion-ready .contact-copy:not(.in-view),.motion-ready .contact-sculpture:not(.in-view){opacity:0;filter:blur(8px)}
.motion-ready .section-intro:not(.in-view),.motion-ready .about-copy:not(.in-view),.motion-ready .contact-copy:not(.in-view){translate:0 42px}
.motion-ready .about-object:not(.in-view),.motion-ready .contact-sculpture:not(.in-view){translate:0 24px}
.motion-ready .work-card:nth-child(odd):not(.in-view){translate:-24px 54px}.motion-ready .work-card:nth-child(even):not(.in-view){translate:24px 54px}
.section-intro.in-view,.work-card.in-view,.about-copy.in-view,.about-object.in-view,.contact-copy.in-view,.contact-sculpture.in-view{opacity:1;filter:none;translate:0 0}
.work-card:nth-child(2){transition-delay:.07s}.work-card:nth-child(3){transition-delay:.13s}.work-card:nth-child(4){transition-delay:.08s}.work-card:nth-child(5){transition-delay:.14s}.work-card:nth-child(6){transition-delay:.09s}

/* About and contact sculptures are controlled by pointer/scroll, not linear autoplay. */
.wire-cube{animation:none;will-change:transform;transition:none}.portrait-orbit{will-change:transform;transition:transform .1s linear}
.ring{animation:none;will-change:transform;transition:none}.contact-sculpture .core{transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.contact-sculpture:hover .core{transform:scale(1.12);box-shadow:0 0 0 38px rgba(0,0,0,.07)}
.sculpture-note{position:absolute;bottom:3%;font-size:.52rem;letter-spacing:.15em;color:rgba(0,0,0,.52)}

/* Project art uses the browser View Transition API when available. */
::view-transition-old(project-art),::view-transition-new(project-art){animation-duration:.72s;animation-timing-function:cubic-bezier(.2,.8,.2,1);object-fit:cover}

@media(max-width:900px){.webgl-object{right:12%;top:8%;width:48%}.object-label{display:none}.work-card{transform:rotateZ(var(--rz))!important}.section-intro,.work-card,.about-copy,.about-object,.contact-copy,.contact-sculpture{opacity:1;filter:none;translate:0 0}}
@media(prefers-reduced-motion:reduce){.section-intro,.work-card,.about-copy,.about-object,.contact-copy,.contact-sculpture{opacity:1;filter:none;translate:0 0}.webgl-object{display:none}}

/* Final safety: never leave an entered section invisible. */
.motion-ready .scene-section:target .section-intro,.motion-ready .scene-section:target .work-card,.motion-ready .scene-section:target .about-copy,.motion-ready .scene-section:target .about-object,.motion-ready .scene-section:target .contact-copy,.motion-ready .scene-section:target .contact-sculpture{opacity:1;filter:none;translate:0 0}


/* Spatial V2.1 — calmer motion pass */
.webgl-object{display:none!important}
.orbit{will-change:transform,opacity;transition:border-color .45s ease,opacity .45s ease;transform-origin:center center}
.orbit-a{animation:orbitBreathA 18s ease-in-out infinite alternate}
.orbit-b{animation:orbitBreathB 22s ease-in-out infinite alternate}
@keyframes orbitBreathA{0%{opacity:.42}50%{opacity:.72}100%{opacity:.5}}
@keyframes orbitBreathB{0%{opacity:.25}50%{opacity:.52}100%{opacity:.32}}

.work-card{--tiltX:0deg!important;--tiltY:0deg!important;--magX:0px!important;--magY:0px!important;transform:translateX(var(--x)) translateZ(var(--z)) rotateZ(var(--rz));transition:transform .7s var(--ease),box-shadow .7s var(--ease),opacity .5s,filter .5s;overflow:hidden}
.work-card:hover{transform:translateX(var(--x)) translateZ(calc(var(--z) + 14px)) rotateZ(calc(var(--rz) * .45)) translateY(-3px);box-shadow:0 30px 68px rgba(0,0,0,.21)}

.work-card:nth-child(2n) img{animation-duration:36s;animation-delay:-8s}
.work-card:nth-child(3n) img{animation-duration:40s;animation-delay:-16s}
.work-card:hover img{filter:brightness(1.025)}
@keyframes gallerySlowZoom{from{transform:scale(1.01)}to{transform:scale(1.065)}}

@media(max-width:900px){
  .work-card{transform:rotateZ(var(--rz))!important}
  .work-card:hover{transform:rotateZ(var(--rz))!important}
}
@media(prefers-reduced-motion:reduce){
  .orbit-a,.orbit-b,
}

/* Spatial V2.2 — interactive portfolio cube */
.hero-stage{perspective:1500px;isolation:isolate}
.portfolio-cube-shell{
  --cube-size:clamp(280px,29vw,440px);
  --cube-half:calc(var(--cube-size) / 2);
  position:absolute;z-index:5;right:5%;top:19%;width:var(--cube-size);height:var(--cube-size);
  perspective:1400px;transform-style:preserve-3d;cursor:grab;touch-action:none;user-select:none;
  filter:drop-shadow(0 36px 48px rgba(0,0,0,.34));
}
.portfolio-cube-shell.is-dragging{cursor:grabbing}
.portfolio-cube{
  position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;
  transform:rotateX(-12deg) rotateY(28deg);transform-origin:50% 50%;
}
.cube-face{
  position:absolute;inset:0;overflow:hidden;background:#171719;border:1px solid rgba(255,255,255,.14);
  backface-visibility:hidden;transform-style:preserve-3d;box-shadow:inset 0 0 40px rgba(0,0,0,.12);
}
.cube-face:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(145deg,rgba(255,255,255,.10),transparent 28%,transparent 70%,rgba(0,0,0,.22));mix-blend-mode:soft-light}
.cube-face img{width:100%;height:100%;object-fit:cover;pointer-events:none;transform:scale(1.012)}
.cube-face span{position:absolute;z-index:2;left:14px;bottom:13px;padding:6px 8px;background:rgba(8,8,9,.55);backdrop-filter:blur(8px);font-size:.5rem;letter-spacing:.16em;color:#fff}
.cube-front{transform:translateZ(var(--cube-half))}
.cube-back{transform:rotateY(180deg) translateZ(var(--cube-half))}
.cube-right{transform:rotateY(90deg) translateZ(var(--cube-half))}
.cube-left{transform:rotateY(-90deg) translateZ(var(--cube-half))}
.cube-top{transform:rotateX(90deg) translateZ(var(--cube-half))}
.cube-bottom{transform:rotateX(-90deg) translateZ(var(--cube-half))}
.cube-shadow{position:absolute;z-index:-1;left:9%;right:9%;bottom:-25%;height:25%;border-radius:50%;background:rgba(0,0,0,.56);filter:blur(32px);transform:rotateX(76deg) scaleX(1.05);opacity:.56;pointer-events:none}
.cube-drag-hint{position:absolute;left:50%;bottom:-58px;translate:-50% 0;display:flex;align-items:center;gap:10px;white-space:nowrap;color:rgba(255,255,255,.48);font-size:.5rem;letter-spacing:.18em;pointer-events:none;transition:opacity .4s ease}
.cube-drag-hint i{width:29px;height:16px;border:1px solid rgba(255,255,255,.3);border-radius:999px;position:relative}
.cube-drag-hint i:after{content:"";position:absolute;width:3px;height:3px;background:var(--accent);border-radius:50%;left:7px;top:5px;animation:cubeHint 2.8s ease-in-out infinite}
.portfolio-cube-shell.has-dragged .cube-drag-hint{opacity:.18}
@keyframes cubeHint{0%,100%{translate:0 0;opacity:.5}50%{translate:10px 0;opacity:1}}
.hero-stage .orbit{z-index:1}.orbit-a{right:-11%;top:4%;width:72%}.orbit-b{left:3%;top:12%;width:39%}

@media(max-width:900px){
  .hero-stage{right:-3vw;top:39vh;width:100vw;height:54vh;opacity:1}
  .portfolio-cube-shell{--cube-size:clamp(210px,52vw,290px);right:13%;top:8%}
  .cube-drag-hint{bottom:-46px}
  .hero-stage .orbit-a{width:74%;right:-12%;top:0}.hero-stage .orbit-b{width:42%;left:2%;top:5%}
}
@media(prefers-reduced-motion:reduce){.cube-drag-hint i:after{animation:none}}

/* Spatial V2.3 — hero bevel + interactive particle cube */
.portfolio-cube-shell{right:13%;}
.cube-face{
  inset:3px;
  border:4px solid #111216;
  border-radius:5px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    inset 0 0 22px rgba(0,0,0,.16),
    0 0 0 1px rgba(0,0,0,.78);
}
.cube-face:before{
  content:"";position:absolute;z-index:3;inset:0;pointer-events:none;border-radius:2px;
  box-shadow:inset 3px 3px 5px rgba(255,255,255,.09),inset -4px -4px 7px rgba(0,0,0,.28);
}
.cube-face img{border-radius:1px;}

/* Replace the old ring sculpture with a particle-built cube. */
.particle-cube-wrap{min-height:480px;position:relative;display:grid;place-items:center;perspective:none;}
.particle-cube-canvas{width:min(42vw,520px);height:min(42vw,520px);max-width:100%;display:block;cursor:crosshair;touch-action:pan-y;}
.particle-cube-wrap .sculpture-note{bottom:2%;letter-spacing:.18em;}
.ring,.core{display:none!important;}

@media(max-width:900px){
  .portfolio-cube-shell{right:19%;}
  .particle-cube-wrap{min-height:360px;}
  .particle-cube-canvas{width:min(86vw,390px);height:min(86vw,390px);}
}


/* V2.4 — larger circular hero geometry + oversized interactive particle fields */
.hero-stage .orbit{
  border-radius:50%;
  aspect-ratio:1/1;
  height:auto;
  transform:none;
  opacity:.44;
}
.hero-stage .orbit-a{
  width:112%;
  right:-28%;
  top:-17%;
  border-color:rgba(215,255,68,.42);
}
.hero-stage .orbit-b{
  width:76%;
  left:-21%;
  top:31%;
  border-color:rgba(255,255,255,.21);
}

/* About: the portrait sits in front of a barely-there interactive particle cube. */
.about-object{
  min-height:680px;
  isolation:isolate;
  overflow:visible;
}
.about-particle-cube{
  position:absolute;
  width:min(70vw,820px);
  height:min(70vw,820px);
  left:-22%;
  top:50%;
  transform:translateY(-50%);
  opacity:.11;
  cursor:crosshair;
  touch-action:pan-y;
  z-index:0;
  filter:blur(.05px);
}
.portrait-orbit{
  z-index:2;
  width:260px;
  right:6%;
  bottom:12%;
  box-shadow:0 0 0 30px rgba(255,255,255,.022),0 0 0 62px rgba(255,255,255,.012);
}
.about-object-hint{
  position:absolute;
  left:8%;
  bottom:8%;
  z-index:3;
  font-size:.54rem;
  letter-spacing:.18em;
  color:rgba(255,255,255,.26);
}

/* Contact/footer sculpture becomes a large spatial backdrop rather than a contained object. */
.contact{
  position:relative;
  grid-template-columns:1fr;
  min-height:105vh;
  overflow:hidden;
}
.contact-copy{
  position:relative;
  z-index:4;
  width:min(62vw,920px);
}
.particle-cube-wrap{
  position:absolute;
  z-index:1;
  right:-20vw;
  top:50%;
  transform:translateY(-50%);
  width:78vw;
  height:78vw;
  min-height:0;
  display:block;
  pointer-events:none;
}
.particle-cube-canvas{
  width:100%;
  height:100%;
  max-width:none;
  display:block;
  opacity:.86;
  pointer-events:auto;
  cursor:crosshair;
  touch-action:pan-y;
}
.particle-cube-wrap .sculpture-note{
  position:absolute;
  left:28%;
  bottom:22%;
  font-size:.54rem;
  color:rgba(10,10,11,.45);
}

@media(max-width:900px){
  .hero-stage .orbit-a{width:118%;right:-29%;top:-8%}
  .hero-stage .orbit-b{width:82%;left:-24%;top:32%}
  .about-object{min-height:500px}
  .about-particle-cube{width:118vw;height:118vw;left:-47%;opacity:.09}
  .portrait-orbit{width:170px;right:5%;bottom:14%}
  .about-object-hint{left:2%;bottom:4%}
  .contact{min-height:92vh}
  .contact-copy{width:100%;z-index:4}
  .particle-cube-wrap{width:125vw;height:125vw;right:-62vw;top:58%}
  .particle-cube-wrap .sculpture-note{display:none}
}

@media(prefers-reduced-motion:reduce){
  .about-particle-cube{opacity:.075}
}


/* Spatial V2.5 — screenshot-matched scale pass */
/* Hero: the portfolio cube becomes the dominant object on the right half. */
.portfolio-cube-shell{
  --cube-size:clamp(430px,38vw,650px);
  right:4%;
  top:9%;
}
.hero-stage{right:0;width:57vw;height:90vh;top:5vh;}

/* About: oversized ghost particle cube behind the portrait. */
.about-object{min-height:760px;}
.about-particle-cube{
  width:min(68vw,1080px);
  height:min(68vw,1080px);
  left:-10vw;
  top:50%;
  opacity:.19;
}
.portrait-orbit{right:5%;bottom:10%;}

/* Contact: let the particle cube overlap almost the entire right half. */
.particle-cube-wrap{
  width:68vw;
  height:68vw;
  right:-8vw;
  top:50%;
}
.particle-cube-canvas{opacity:.92;}
.particle-cube-wrap .sculpture-note{left:32%;bottom:17%;}

@media(max-width:1200px) and (min-width:901px){
  .portfolio-cube-shell{--cube-size:clamp(390px,40vw,560px);right:5%;top:14%;}
  .hero-stage{width:59vw;}
  .about-particle-cube{width:74vw;height:74vw;left:-18vw;}
  .particle-cube-wrap{width:75vw;height:75vw;right:-18vw;}
}

@media(max-width:900px){
  .hero-stage{right:-2vw;top:37vh;width:102vw;height:58vh;}
  .portfolio-cube-shell{--cube-size:clamp(250px,62vw,350px);right:16%;top:6%;}
  .about-object{min-height:540px;}
  .about-particle-cube{width:150vw;height:150vw;left:-60vw;opacity:.15;}
  .particle-cube-wrap{width:155vw;height:155vw;right:-75vw;top:57%;}
}

@media(prefers-reduced-motion:reduce){
  .about-particle-cube{opacity:.16;}
}

/* Spatial V2.6 — scale + particle-density refinement */
/* Hero portfolio cube: slightly smaller and shifted left into the composition. */
.portfolio-cube-shell{
  --cube-size:clamp(390px,34vw,570px);
  right:13%;
  top:11%;
}
.hero-stage{right:0;width:59vw;height:90vh;top:5vh;}

/* About particle cube: clearly perceptible, but still a ghosted background object. */
.about-particle-cube{
  width:min(72vw,1140px);
  height:min(72vw,1140px);
  left:-12vw;
  opacity:.31;
  filter:none;
}

/* Footer/contact cube: denser and graphic, matching the same spatial language. */
.particle-cube-wrap{
  width:72vw;
  height:72vw;
  right:-10vw;
}
.particle-cube-canvas{opacity:.94;}

@media(max-width:1200px) and (min-width:901px){
  .portfolio-cube-shell{--cube-size:clamp(360px,37vw,520px);right:12%;top:13%;}
  .hero-stage{width:61vw;}
  .about-particle-cube{width:80vw;height:80vw;left:-20vw;opacity:.29;}
  .particle-cube-wrap{width:80vw;height:80vw;right:-20vw;}
}

@media(max-width:900px){
  .portfolio-cube-shell{--cube-size:clamp(235px,57vw,325px);right:21%;top:7%;}
  .about-particle-cube{opacity:.25;}
}

@media(prefers-reduced-motion:reduce){
  .about-particle-cube{opacity:.29;}
}


/* Spatial V2.9 — hero position + stronger particle interaction */
.portfolio-cube-shell{
  right:17%;
}

@media(max-width:1200px) and (min-width:901px){
  .portfolio-cube-shell{right:15%;}
}

@media(max-width:900px){
  .portfolio-cube-shell{right:25%;}
}

@media(max-width:640px){
  .portfolio-cube-shell{right:22%;}
}


/* V3 geometry progression: Cube → Sphere → Cylinder → Pyramid */
.work{position:relative;overflow:hidden;isolation:isolate}
.work .section-intro,.work .spatial-gallery{position:relative;z-index:2}
.about-object,.contact-sculpture{isolation:isolate}
.about-particle-cube,.particle-cube-canvas{z-index:0}
.portrait-orbit,.about-object-hint,.sculpture-note{z-index:2}
@media (max-width:760px){
  }


/* Gallery full-circle atmosphere — complete circles, intentionally oversized and cropped by section bounds. */
.gallery-circle-field{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:auto;
}
.gallery-circle{
  position:absolute;
  display:block;
  aspect-ratio:1/1;
  border:1px solid rgba(245,242,235,.13);
  border-radius:50%;
  transform-origin:center;
  will-change:transform;
}
.gallery-circle-a{width:min(1120px,92vw);left:-24%;top:-12%;border-color:rgba(245,242,235,.16)}
.gallery-circle-b{width:min(1380px,112vw);right:-42%;top:6%;border-color:rgba(245,242,235,.11)}
.gallery-circle-c{width:min(920px,76vw);left:18%;bottom:-31%;border-color:rgba(245,242,235,.09)}
.gallery-circle-d{width:min(1680px,132vw);left:-18%;top:22%;border-color:rgba(245,242,235,.065)}
.work .section-intro,.work .spatial-gallery{position:relative;z-index:2;pointer-events:auto}

@media (max-width:760px){
  .gallery-circle-a{width:150vw;left:-68%;top:-4%}
  .gallery-circle-b{width:185vw;right:-105%;top:18%}
  .gallery-circle-c{width:130vw;left:10%;bottom:-12%}
  .gallery-circle-d{width:220vw;left:-72%;top:30%}
}


/* V3.2 — oversized About sphere, intentionally extending well into the left side. */
.about-object{
  overflow:visible;
}
#aboutParticleSphere{
  width:145% !important;
  height:145% !important;
  left:-42% !important;
  top:-22% !important;
  max-width:none !important;
  max-height:none !important;
}
@media (max-width:900px){
  #aboutParticleSphere{
    width:132% !important;
    height:132% !important;
    left:-20% !important;
    top:-14% !important;
  }
}
@media (max-width:620px){
  #aboutParticleSphere{
    width:122% !important;
    height:122% !important;
    left:-11% !important;
    top:-8% !important;
  }
}


/* V3.3 visibility + positioning refinements */
.gallery-circle{
  border-color:rgba(245,242,235,.28) !important;
}
.gallery-circle-a{border-color:rgba(245,242,235,.34) !important}
.gallery-circle-b{border-color:rgba(245,242,235,.24) !important}
.gallery-circle-c{border-color:rgba(245,242,235,.20) !important}
.gallery-circle-d{border-color:rgba(245,242,235,.15) !important}

/* About sphere: center vertically on the left, not top-left. */
#aboutParticleSphere{
  width:148% !important;
  height:148% !important;
  left:-48% !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  max-width:none !important;
  max-height:none !important;
}
@media (max-width:900px){
  #aboutParticleSphere{
    width:136% !important;
    height:136% !important;
    left:-24% !important;
    top:50% !important;
    transform:translateY(-50%) !important;
  }
}
@media (max-width:620px){
  #aboutParticleSphere{
    width:126% !important;
    height:126% !important;
    left:-12% !important;
    top:50% !important;
    transform:translateY(-50%) !important;
  }
}


/* V3.4 — fix gallery circle contrast and About sphere clipping */

/* Gallery is light/cream, so circles need dark strokes, not white. */
.gallery-circle{
  border-color:rgba(10,10,11,.18) !important;
}
.gallery-circle-a{border-color:rgba(10,10,11,.24) !important}
.gallery-circle-b{border-color:rgba(10,10,11,.17) !important}
.gallery-circle-c{border-color:rgba(10,10,11,.13) !important}
.gallery-circle-d{border-color:rgba(10,10,11,.10) !important}

/* Ensure complete giant circles remain behind the artwork but above the section background. */
.gallery-circle-field{
  z-index:1 !important;
  opacity:1 !important;
}
.work .section-intro,
.work .spatial-gallery{
  z-index:2 !important;
}

/* Let the large About sphere visually extend across the left half without being clipped. */
.about{
  overflow:visible !important;
  isolation:isolate;
}
.about-object{
  overflow:visible !important;
  z-index:1;
}
.about-copy{
  position:relative;
  z-index:3;
}
#aboutParticleSphere{
  position:absolute !important;
  width:160% !important;
  height:160% !important;
  left:-52% !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  max-width:none !important;
  max-height:none !important;
  opacity:1 !important;
  z-index:0 !important;
  pointer-events:auto;
}

/* Keep Farah portrait above the sphere particles. */
.portrait-orbit{
  position:relative;
  z-index:2 !important;
}

@media (max-width:900px){
  #aboutParticleSphere{
    width:145% !important;
    height:145% !important;
    left:-31% !important;
  }
}
@media (max-width:620px){
  #aboutParticleSphere{
    width:132% !important;
    height:132% !important;
    left:-17% !important;
  }
}


/* V3.5 — About sphere should remain visible across the left/center without being masked */
.about{
  position:relative !important;
  overflow:hidden !important;
  background:#0a0a0b !important;
  isolation:isolate !important;
}
.about-object{
  position:relative !important;
  overflow:visible !important;
  z-index:1 !important;
  background:transparent !important;
}
.about-copy{
  position:relative !important;
  z-index:3 !important;
  background:transparent !important;
}
.about-copy::before,
.about-copy::after,
.about-object::before,
.about-object::after{
  background:transparent !important;
}

/* Sphere canvas spans well beyond the left column, underneath the copy */
#aboutParticleSphere{
  position:absolute !important;
  width:205% !important;
  height:205% !important;
  left:-68% !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  max-width:none !important;
  max-height:none !important;
  opacity:1 !important;
  z-index:0 !important;
  pointer-events:auto !important;
}
.portrait-orbit{
  position:relative !important;
  z-index:4 !important;
}

@media (max-width:900px){
  #aboutParticleSphere{
    width:170% !important;
    height:170% !important;
    left:-44% !important;
  }
}
@media (max-width:620px){
  #aboutParticleSphere{
    width:145% !important;
    height:145% !important;
    left:-24% !important;
  }
}


/* V3.6 — About sphere composition follows the marked red-circle reference */
.about{
  position:relative !important;
  overflow:hidden !important;
  background:#0a0a0b !important;
  isolation:isolate !important;
}
.about-object{
  position:relative !important;
  min-height:760px !important;
  overflow:visible !important;
  background:transparent !important;
  z-index:1 !important;
}
.about-copy{
  position:relative !important;
  background:transparent !important;
  z-index:4 !important;
}

/* One true square canvas = one large spherical form.
   Center sits outside the left edge; the visible right contour lands around mid-page. */
#aboutParticleSphere{
  position:absolute !important;
  width:min(1180px,82vw) !important;
  height:min(1180px,82vw) !important;
  aspect-ratio:1/1 !important;
  left:clamp(-520px,-27vw,-280px) !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  max-width:none !important;
  max-height:none !important;
  opacity:1 !important;
  z-index:0 !important;
  pointer-events:auto !important;
}

/* Portrait sits inside the sphere, not at its outer edge. */
.portrait-orbit{
  position:absolute !important;
  left:10% !important;
  top:31% !important;
  z-index:5 !important;
}

/* Keep helper hint with the spherical composition. */
.about-object-hint{
  position:absolute !important;
  left:5% !important;
  bottom:13% !important;
  z-index:5 !important;
}

@media (max-width:1100px){
  #aboutParticleSphere{
    width:104vw !important;
    height:104vw !important;
    left:-46vw !important;
  }
  .portrait-orbit{left:12% !important;top:34% !important}
}
@media (max-width:900px){
  .about-object{min-height:620px !important}
  #aboutParticleSphere{
    width:125vw !important;
    height:125vw !important;
    left:-52vw !important;
  }
  .portrait-orbit{left:18% !important;top:36% !important}
}
@media (max-width:620px){
  .about-object{min-height:520px !important}
  #aboutParticleSphere{
    width:138vw !important;
    height:138vw !important;
    left:-60vw !important;
  }
  .portrait-orbit{left:22% !important;top:36% !important}
}


/* V3.8 — typography refinement
   Keep FARAH hero branding untouched; clean up section display headings. */

.section-intro h2,
.about-copy h2,
.contact-copy h2{
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.045em !important;
  line-height: .94 !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.section-intro h2 em,
.about-copy h2 em,
.contact-copy h2 em{
  font-family: Georgia, "Times New Roman", serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: -0.05em !important;
  line-height: .92 !important;
}

/* Slightly tighten supporting copy so the new cleaner headings feel intentional. */
.section-intro .kicker,
.about-copy .kicker,
.contact-copy .kicker{
  letter-spacing: .18em !important;
}

@media (max-width: 760px){
  .section-intro h2,
  .about-copy h2,
  .contact-copy h2{
    letter-spacing: -0.035em !important;
    line-height: .98 !important;
  }

  .section-intro h2 em,
  .about-copy h2 em,
  .contact-copy h2 em{
    letter-spacing: -0.04em !important;
  }
}


/* V3.14 — rendered loft hero background; live GLB removed for a lighter, reliable hero. */
.hero{
  position:relative !important;
  overflow:hidden !important;
}

.hero-render-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:#0a0a0b;
}

.hero-render-bg img{
  position:absolute;
  inset:-3%;
  width:106%;
  height:106%;
  object-fit:cover;
  object-position:center center;
  transform:translate3d(var(--heroBgX,0px),var(--heroBgY,0px),0) scale(var(--heroBgScale,1.03));
  transform-origin:center;
  will-change:transform;
  filter:saturate(.92) contrast(1.02) brightness(.72);
}

/* Keep existing hero text/circles/navigation above the render. */
.hero > *:not(.hero-render-bg){
  position:relative;
  z-index:2;
}

/* Existing portfolio cube remains in code but is temporarily hidden. */
.portfolio-cube-shell{
  display:none !important;
}

/* Readability gradient only; no structural/layout change. */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(6,6,7,.86) 0%,
      rgba(6,6,7,.72) 24%,
      rgba(6,6,7,.48) 38%,
      rgba(6,6,7,.16) 58%,
      rgba(6,6,7,.08) 100%),
    linear-gradient(180deg,
      rgba(6,6,7,.10),
      rgba(6,6,7,.18));
}

@media (max-width:760px){
  .hero-render-bg img{
    object-position:58% center;
    filter:saturate(.9) contrast(1.02) brightness(.66);
  }
}

/* V3.15 — restore original interactive portfolio cube, reduced for more loft visibility. */
.portfolio-cube-shell{
  display:block !important;
  transform:scale(.76) !important;
  transform-origin:center center !important;
}
@media (min-width:1100px){
  .portfolio-cube-shell{ translate:-3.5vw 0; }
}
@media (max-width:1099px){
  .portfolio-cube-shell{ transform:scale(.68) !important; }
}
@media (max-width:760px){
  .portfolio-cube-shell{
    transform:scale(.60) !important;
    translate:0 0;
  }
}


/* V3.19 TEST — complete 3D hero UI inside Three.js world.
   V3.15 remains the stable build. */
.hero{
  position:relative !important;
  overflow:hidden !important;
  background:#09090a !important;
}

/* Full-section renderer */
.hero-3d-world{
  position:absolute;
  inset:0;
  z-index:10;
  overflow:hidden;
  background:#09090a;
}
#heroWorldCanvas{
  width:100%;
  height:100%;
  display:block;
  cursor:grab;
  touch-action:none;
}
#heroWorldCanvas:active{ cursor:grabbing; }

/* Hide the old DOM hero composition only in this test.
   Markup/code remains intact for easy rollback. */
.hero > .hero-grid,
.hero > .hero-copy,
.hero > .hero-stage,
.hero > .scroll-label{
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Old hero pseudo veil off; the 3D scene handles its own composition. */
.hero::after{ display:none !important; }

.hero-world-status{
  position:absolute;
  right:26px;
  top:26px;
  z-index:20;
  padding:8px 10px;
  color:rgba(255,255,255,.68);
  background:rgba(8,8,9,.5);
  border:1px solid rgba(255,255,255,.18);
  font-size:9px;
  letter-spacing:.15em;
  pointer-events:none;
}
.hero-world-status.is-ready{
  opacity:0;
  visibility:hidden;
  transition:opacity .4s ease,visibility .4s ease;
}
.hero-world-status.is-error{
  opacity:1;
  visibility:visible;
  color:#d8ff30;
  border-color:rgba(216,255,48,.45);
}


@media(max-width:760px){
  .hero-world-status{right:12px;top:14px}
  .hero-world-reset{right:12px;bottom:14px}
}


/* V3.20 — force the interactive 3D world to fill the entire hero viewport */
.hero-3d-world{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}
#heroWorldCanvas{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
}


/* V3.21 — 3D interaction is opt-in; normal scrolling wins by default. */
#heroWorldCanvas{
  pointer-events:none;
  cursor:default;
}
.hero.is-3d-active #heroWorldCanvas{
  pointer-events:auto;
  cursor:grab;
}
.hero.is-3d-active #heroWorldCanvas:active{
  cursor:grabbing;
}

.hero-world-actions{
  position:absolute;
  right:24px;
  bottom:22px;
  z-index:20;
  display:flex;
  gap:8px;
  pointer-events:auto;
}

.hero-world-actions button{
  border:1px solid rgba(255,255,255,.24);
  background:rgba(8,8,9,.52);
  color:#fff;
  padding:10px 12px;
  font:inherit;
  font-size:9px;
  letter-spacing:.12em;
  cursor:pointer;
}

.hero-world-actions button:hover{
  border-color:rgba(216,255,48,.62);
}

.hero-world-explore{
  border-color:rgba(216,255,48,.45) !important;
}

.hero.is-3d-active .hero-world-explore{
  background:rgba(216,255,48,.14);
  color:#d8ff30;
}

@media(max-width:760px){
  .hero-world-actions{
    right:12px;
    bottom:14px;
  }
}


/* V3.22 — keep the original FARAH / NAZ composition as screen-space UI.
   The room remains WebGL; identity/navigation stay readable regardless of camera. */
.hero > .hero-grid,
.hero > .hero-copy{
  visibility:visible !important;
  pointer-events:none !important;
  position:relative;
  z-index:16 !important;
}

/* Any links/buttons inside original hero copy remain usable. */
.hero > .hero-grid a,
.hero > .hero-grid button,
.hero > .hero-copy a,
.hero > .hero-copy button{
  pointer-events:auto !important;
}

/* Prevent duplicate 3D branding from competing with the restored DOM brand. */
.hero-3d-world{ z-index:10 !important; }

/* Explore/Exit controls are viewport-fixed while the hero is active/visible,
   so camera movement can never push them out of reach. */
.hero-world-actions{
  position:fixed !important;
  right:24px !important;
  bottom:24px !important;
  z-index:9999 !important;
  display:flex !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

/* Hide reset until interaction begins; Explore/Exit remains permanently obvious. */
.hero:not(.is-3d-active) .hero-world-reset{
  display:none !important;
}

.hero-world-explore{
  min-width:112px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 28px rgba(0,0,0,.22);
}

/* Once the user scrolls past the hero, don't leave a floating hero control
   over the rest of the portfolio. JS toggles this class by IntersectionObserver. */
.hero.hero-out-of-view .hero-world-actions{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

@media(max-width:760px){
  .hero-world-actions{
    right:12px !important;
    bottom:14px !important;
  }
}


/* V3.23 — keep hero text readable over every 3D camera angle */
.hero-copy{
  position:relative !important;
  z-index:30 !important;
  isolation:isolate;
  text-shadow:0 2px 14px rgba(0,0,0,.34);
}
.hero-copy::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-42px;
  top:-48px;
  right:-46px;
  bottom:-40px;
  border-radius:32px;
  background:
    radial-gradient(circle at 34% 44%,
      rgba(7,7,8,.78) 0%,
      rgba(7,7,8,.60) 38%,
      rgba(7,7,8,.34) 64%,
      rgba(7,7,8,0) 100%);
  filter:blur(5px);
  pointer-events:none;
}
.hero-copy .kicker,
.hero-copy .hero-note,
.hero-copy .hero-link{
  color:#f4f0e8 !important;
}
.hero-copy h1 span:first-child{
  color:#faf6ed !important;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.hero-copy h1 span:last-child{
  -webkit-text-stroke-color:#faf6ed !important;
  text-stroke-color:#faf6ed !important;
  text-shadow:0 2px 14px rgba(0,0,0,.28);
}
@media(max-width:760px){
  .hero-copy::before{
    left:-22px;right:-22px;top:-30px;bottom:-26px;
  }
}

/* V3.24 — clean hero readability: no dark panel, text shadow only */
.hero-copy::before{
  display:none !important;
  content:none !important;
}
.hero-copy{
  text-shadow:
    0 2px 3px rgba(0,0,0,.48),
    0 6px 22px rgba(0,0,0,.32) !important;
}
.hero-copy .kicker,
.hero-copy .hero-note,
.hero-copy .hero-link{
  text-shadow:
    0 1px 2px rgba(0,0,0,.55),
    0 4px 14px rgba(0,0,0,.34) !important;
}
.hero-copy h1 span:first-child{
  text-shadow:
    0 2px 3px rgba(0,0,0,.52),
    0 8px 24px rgba(0,0,0,.30) !important;
}
.hero-copy h1 span:last-child{
  text-shadow:
    0 2px 3px rgba(0,0,0,.56),
    0 7px 20px rgba(0,0,0,.30) !important;
}


/* V3.27 — large screen-space wire circles restored over the live 3D hero */
.hero-wire-orbits{
  position:absolute;
  inset:0;
  z-index:14;
  overflow:hidden;
  pointer-events:none;
}

.hero-wire-circle{
  position:absolute;
  display:block;
  aspect-ratio:1 / 1;
  border-radius:50%;
  border:1px solid rgba(245,242,235,.14);
  will-change:transform;
  transform-origin:center;
}

.wire-circle-a{
  width:min(980px,68vw);
  right:-18%;
  top:-18%;
  border-color:rgba(216,255,48,.30);
}

.wire-circle-b{
  width:min(680px,48vw);
  left:32%;
  bottom:-28%;
  border-color:rgba(245,242,235,.13);
}

.wire-circle-c{
  width:min(1180px,82vw);
  left:-38%;
  top:-36%;
  border-color:rgba(245,242,235,.075);
}

/* Keep brand and controls above the decorative circles. */
.hero > .hero-copy{
  z-index:30 !important;
}
.hero-world-actions{
  z-index:9999 !important;
}

@media(max-width:760px){
  .wire-circle-a{width:118vw;right:-58%;top:-12%}
  .wire-circle-b{width:86vw;left:30%;bottom:-8%}
  .wire-circle-c{width:150vw;left:-92%;top:-20%}
}


/* V3.28 — third real project detail frame for supplied high-resolution portfolio imagery */
.project-frame.frame-three{
  margin-top:clamp(18px,3vw,48px);
}
.project-frame.frame-three img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}


/* V3.30 — quiet crossfade slideshows inside homepage portfolio cards */
.work-card{
  overflow:hidden;
}

.card-slideshow{
  position:absolute;
  inset:0;
  display:block;
  overflow:hidden;
  z-index:0;
}

.card-slideshow .card-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  
  will-change:opacity,transform;
}



/* Existing labels remain above the slideshow. */
.work-card .card-index,
.work-card .card-info{
  position:relative;
  z-index:2;
}

/* Existing card overlays/shadows should also remain above imagery. */
.work-card::before,
.work-card::after{
  z-index:1;
}

@media (prefers-reduced-motion: reduce){
  .card-slideshow .card-slide{
    transition:none !important;
    transform:none !important;
  }
  .card-slideshow .card-slide:not(.is-active){
    display:none;
  }
}


/* V3.31 — restore exact pre-slideshow portfolio card proportions */
.card-slideshow{
  position:relative !important;
  inset:auto !important;
  display:block !important;
  width:100% !important;
  aspect-ratio:1.35 / 1 !important;
  overflow:hidden !important;
  z-index:0;
}

.card-slideshow .card-slide{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
}

/* The card should size from the slideshow wrapper exactly as it did
   from the original image in V3.29. */
.work-card{
  height:auto !important;
}


/* V3.32 — remove old full-width black bands from portfolio thumbnails */
.work-card::before,
.work-card::after{
  background:none !important;
  background-image:none !important;
}

/* Compact labels instead of broad black strips */
.work-card .card-index{
  position:absolute !important;
  top:18px !important;
  left:18px !important;
  z-index:4 !important;
  color:#111 !important;
  background:rgba(245,242,235,.74) !important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:5px 7px !important;
  border-radius:2px;
  text-shadow:none !important;
}

.work-card .card-info{
  position:absolute !important;
  left:18px !important;
  right:18px !important;
  bottom:16px !important;
  z-index:4 !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
  gap:18px !important;
  background:none !important;
  padding:0 !important;
  color:#fff !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.72),
    0 4px 14px rgba(0,0,0,.42) !important;
}

.work-card .card-info small,
.work-card .card-info strong{
  background:rgba(9,9,10,.40) !important;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  padding:6px 8px !important;
  border-radius:2px;
  color:#fff !important;
}

/* Keep slideshow imagery edge-to-edge */
.card-slideshow{
  background:transparent !important;
}
.card-slideshow .card-slide{
  object-fit:cover !important;
  object-position:center center !important;
}


/* V3.36 — card owns the geometry; slideshow only fills it.
   This removes the extra page-colored space above/below thumbnails. */
.work-card{
  position:relative !important;
  display:block !important;
  width:auto;
  aspect-ratio:1.35 / 1 !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  overflow:hidden !important;
  line-height:0 !important;
}

/* Slideshow no longer participates in layout sizing. */
.work-card > .card-slideshow{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  aspect-ratio:auto !important;
  display:block !important;
  overflow:hidden !important;
  background:transparent !important;
}

/* Every thumbnail image fills the exact same card box. */
.work-card > .card-slideshow > .card-slide{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  object-position:center center !important;
  margin:0 !important;
  display:block !important;
}

/* Labels are pure overlays and cannot influence card dimensions. */
.work-card > .card-index,
.work-card > .card-info{
  position:absolute !important;
  line-height:1.2 !important;
}

/* Remove legacy card decoration layers completely. */
.work-card::before,
.work-card::after{
  content:none !important;
  display:none !important;
}


/* V3.37 — stronger card separation from the gallery background */
.work-card{
  border:1px solid rgba(25,25,25,.24) !important;
  box-shadow:
    0 18px 38px rgba(0,0,0,.18),
    0 38px 78px rgba(0,0,0,.16) !important;
}

.work-card:hover{
  box-shadow:
    0 22px 46px rgba(0,0,0,.20),
    0 46px 92px rgba(0,0,0,.18) !important;
}





/* V3.43 — single-source portfolio slideshow animation */
.card-slideshow .card-slide{
  opacity:0;
  transform:scale(1);
  transition:opacity 1.6s ease-in-out;
  will-change:opacity,transform;
}

/* JS adds this class to the visible frame. */
.card-slideshow .card-slide.is-active{
  opacity:1;
  animation:portfolioCinematicZoom 11s linear both;
}

@keyframes portfolioCinematicZoom{
  0%   { transform:scale(1); }
  100% { transform:scale(1.085); }
}

/* A single-image card still animates continuously. */
.card-slideshow .card-slide:only-child{
  opacity:1;
  animation:portfolioSingleZoom 15s ease-in-out infinite alternate;
}

@keyframes portfolioSingleZoom{
  0%   { transform:scale(1); }
  100% { transform:scale(1.08); }
}


/* V3.45 — 3D morphing site preloader */
html.is-loading,
html.is-loading body{
  overflow:hidden !important;
}

.site-preloader{
  position:fixed;
  inset:0;
  z-index:99999;
  background:#09090a;
  color:#f4f1e9;
  opacity:1;
  visibility:visible;
  transition:
    opacity .85s cubic-bezier(.22,.61,.36,1),
    visibility .85s step-end;
}

.site-preloader.is-leaving{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.preloader-geometry-wrap{
  position:absolute;
  left:50%;
  top:46%;
  width:clamp(100px,9vw,138px);
  height:clamp(100px,9vw,138px);
  transform:translate(-50%,-50%);
  opacity:.9;
}

#preloaderGeometry{
  display:block;
  width:100%;
  height:100%;
}

.preloader-percent{
  position:absolute;
  right:clamp(18px,4vw,64px);
  bottom:clamp(26px,5vw,72px);
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:clamp(5rem,14vw,13rem);
  line-height:.76;
  letter-spacing:-.075em;
  font-weight:500;
  color:#f4f1e9;
  font-variant-numeric:tabular-nums;
  user-select:none;
  pointer-events:none;
}

.preloader-line{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
}

.preloader-line span{
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:#d8ff30;
  will-change:transform;
}

@media(max-width:760px){
  .preloader-geometry-wrap{
    top:43%;
    width:108px;
    height:108px;
  }
  .preloader-percent{
    right:18px;
    bottom:34px;
  }
}


/* V3.46 — preloader visual refinement */
.preloader-percent{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif !important;
  font-weight:100 !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}


/* V3.47 — slightly larger preloader geometry, still fully contained */
.preloader-geometry-wrap{
  width:clamp(118px,10.5vw,158px) !important;
  height:clamp(118px,10.5vw,158px) !important;
}
@media(max-width:760px){
  .preloader-geometry-wrap{
    width:124px !important;
    height:124px !important;
  }
}

/* V3.49 — visible Home icon + active navigation */
.site-header .main-nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px)}
.site-header .main-nav>.nav-link{position:relative;display:inline-flex;align-items:center;justify-content:center;opacity:.48!important;color:inherit;text-decoration:none;transition:opacity .25s ease}
.site-header .main-nav>.nav-link:hover,.site-header .main-nav>.nav-link.is-active{opacity:1!important}
.site-header .main-nav>.nav-link::after{content:"";position:absolute;left:50%;bottom:-9px;width:5px;height:5px;border-radius:50%;background:#d8ff30;opacity:0;transform:translate(-50%,3px) scale(.5);transition:opacity .25s ease,transform .25s ease}
.site-header .main-nav>.nav-link.is-active::after{opacity:1;transform:translate(-50%,0) scale(1)}
.site-header .main-nav>.nav-home{width:22px;height:22px;min-width:22px;padding:0;font-size:0}
.site-header .main-nav>.nav-home svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.site-header .main-nav>.nav-home.is-active svg{stroke:#d8ff30}


/* V3.50 — responsive portfolio visibility + hamburger navigation */
.nav-toggle{
  display:none;
}

/* Tablet/mobile portfolio cards */
@media (max-width: 900px){
  .spatial-gallery{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:42px !important;
    perspective:none !important;
    transform:none !important;
    overflow:visible !important;
  }

  .work-card,
  .work-card:nth-child(n){
    display:block !important;
    width:100% !important;
    max-width:none !important;
    grid-column:auto !important;
    margin:0 !important;
    align-self:auto !important;
    transform:none !important;
    translate:0 0 !important;
    opacity:1 !important;
    filter:none !important;
    visibility:visible !important;
    aspect-ratio:1.35 / 1 !important;
  }

  .work-card > .card-slideshow{
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    opacity:1 !important;
    visibility:visible !important;
    overflow:hidden !important;
  }

  .work-card > .card-slideshow > .card-slide{
    display:block !important;
    visibility:visible !important;
  }

  .work-card > .card-index,
  .work-card > .card-info{
    display:flex !important;
    visibility:visible !important;
  }

  /* Header / hamburger */
  .site-header{
    z-index:10000 !important;
  }

  .nav-toggle{
    display:inline-flex !important;
    position:relative;
    z-index:10002;
    width:42px;
    height:42px;
    padding:0;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(9,9,10,.28);
    border-radius:50%;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:4px;
    cursor:pointer;
    color:inherit;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }

  .nav-toggle span{
    display:block;
    width:16px;
    height:1px;
    background:currentColor;
    transition:transform .3s ease,opacity .25s ease;
    transform-origin:center;
  }

  .nav-toggle.is-open span:nth-child(1){
    transform:translateY(5px) rotate(45deg);
  }
  .nav-toggle.is-open span:nth-child(2){
    opacity:0;
  }
  .nav-toggle.is-open span:nth-child(3){
    transform:translateY(-5px) rotate(-45deg);
  }

  .site-header .main-nav{
    position:fixed !important;
    inset:0 !important;
    z-index:10001 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:26px !important;
    background:rgba(9,9,10,.96) !important;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-12px);
    transition:
      opacity .32s ease,
      transform .32s ease,
      visibility .32s step-end;
  }

  .site-header .main-nav.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
    transition:
      opacity .32s ease,
      transform .32s ease,
      visibility 0s;
  }

  .site-header .main-nav > .nav-link{
    font-size:clamp(1.6rem,7vw,2.6rem) !important;
    line-height:1 !important;
    opacity:.62 !important;
  }

  .site-header .main-nav > .nav-home{
    width:48px !important;
    height:48px !important;
  }

  .site-header .main-nav > .nav-home svg{
    width:26px !important;
    height:26px !important;
  }

  .site-header .main-nav > .nav-link::after{
    bottom:-10px !important;
  }
}

@media (max-width: 560px){
  .spatial-gallery{
    gap:28px !important;
  }

  .work-card > .card-index{
    top:12px !important;
    left:12px !important;
  }

  .work-card > .card-info{
    left:12px !important;
    right:12px !important;
    bottom:12px !important;
    gap:8px !important;
  }

  .work-card > .card-info small,
  .work-card > .card-info strong{
    padding:5px 7px !important;
  }

  .work-card > .card-info strong{
    font-size:1rem !important;
  }

  .work-card > .card-info small{
    font-size:.5rem !important;
  }
}

@media (max-width:900px){
  html.nav-open,
  html.nav-open body{
    overflow:hidden !important;
  }
}


/* V3.51 — mobile menu backdrop + modal layering fix */
@media (max-width:900px){

  /* Give the open menu a real opaque/backdrop surface over the page content. */
  .site-header .main-nav{
    background:
      linear-gradient(rgba(9,9,10,.985), rgba(9,9,10,.985)) !important;
    backdrop-filter:blur(22px) saturate(.9) !important;
    -webkit-backdrop-filter:blur(22px) saturate(.9) !important;
  }

  /* Extra scrim underneath the menu so underlying content never bleeds through. */
  .site-header::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:10000;
    background:rgba(3,3,4,.82);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .28s ease, visibility .28s step-end;
  }

  html.nav-open .site-header::after{
    opacity:1;
    visibility:visible;
    transition:opacity .28s ease, visibility 0s;
  }

  /* Menu and hamburger stay above the scrim. */
  .nav-toggle{
    z-index:10003 !important;
  }

  .site-header .main-nav{
    z-index:10002 !important;
  }

  /* Project modal must always win over header/menu when open. */
  #projectView,
  .project-view,
  .project-modal,
  .project-overlay{
    z-index:20000 !important;
  }

  #projectView button,
  #projectView .close,
  #projectView .project-close,
  .project-view .close,
  .project-view .project-close{
    z-index:20002 !important;
  }

  /* When a project is open, push the header beneath it completely. */
  body:has(#projectView.is-open) .site-header,
  body:has(#projectView.open) .site-header,
  body:has(.project-view.is-open) .site-header,
  body:has(.project-view.open) .site-header{
    z-index:9000 !important;
  }
}


/* V3.52 — actual mobile menu/modal fix */
@media (max-width:900px){

  /* The desktop header uses mix-blend-mode:difference.
     Disable it on mobile or the menu background blends with page content. */
  .site-header{
    mix-blend-mode:normal !important;
  }

  /* The menu itself is the full-screen overlay — solid and independent. */
  .site-header .main-nav{
    position:fixed !important;
    inset:0 !important;
    background:#09090a !important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    z-index:11000 !important;
    transform:none !important;
  }

  .site-header .main-nav.is-open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  /* No separate pseudo-scrim needed now; remove any old one. */
  .site-header::after{
    content:none !important;
    display:none !important;
  }

  .nav-toggle{
    position:relative !important;
    z-index:11002 !important;
  }

  /* Project view is a completely separate top layer. */
  #projectView.project-view{
    z-index:30000 !important;
  }

  #projectView .project-close{
    z-index:30002 !important;
  }

  /* When a project is open, header/hamburger must disappear altogether. */
  body.project-open .site-header{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}


/* V3.53 — mobile project detail: image first, copy below */
@media (max-width:900px){

  #projectView.project-view{
    background:#efede7 !important;
    color:#111 !important;
  }

  .project-view-inner{
    padding-bottom:70px !important;
  }

  .project-hero{
    display:block !important;
    position:relative !important;
    min-height:0 !important;
    height:auto !important;
    background:#efede7 !important;
  }

  .project-hero > img,
  #projectImage{
    display:block !important;
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:none !important;
  }

  /* Pull the intro content out of the image overlay. */
  .project-copy,
  .project-hero-copy,
  .project-intro{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:24px 20px 26px !important;
    background:#efede7 !important;
    color:#111 !important;
    text-shadow:none !important;
    z-index:2 !important;
  }

  .project-copy::before,
  .project-copy::after,
  .project-hero-copy::before,
  .project-hero-copy::after{
    content:none !important;
    display:none !important;
  }

  .project-type,
  #projectType{
    color:rgba(17,17,17,.52) !important;
    text-shadow:none !important;
  }

  .project-title,
  #projectTitle{
    color:#111 !important;
    text-shadow:none !important;
    margin-top:8px !important;
  }

  .project-description,
  #projectDescription{
    color:rgba(17,17,17,.72) !important;
    text-shadow:none !important;
    max-width:34rem !important;
    margin-top:12px !important;
  }

  /* Meta follows naturally below the intro. */
  .project-meta{
    margin-top:0 !important;
    padding:0 20px 24px !important;
    background:#efede7 !important;
    color:#111 !important;
  }

  .project-close{
    position:fixed !important;
    top:14px !important;
    right:14px !important;
    z-index:30002 !important;
  }
}

@media (max-width:560px){
  .project-copy,
  .project-hero-copy,
  .project-intro{
    padding:20px 16px 22px !important;
  }

  .project-meta{
    padding:0 16px 22px !important;
  }
}


/* V3.54 — project intro readability, actual DOM selector */
@media (min-width:901px){
  .project-title-wrap{
    position:absolute !important;
    inset:auto 5vw 4.5vw !important;
    max-width:680px !important;
    padding:22px 26px 24px !important;
    background:rgba(12,12,12,.68) !important;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    color:#fff !important;
    text-shadow:0 2px 14px rgba(0,0,0,.32) !important;
  }

  .project-title-wrap p:first-child{
    color:rgba(255,255,255,.78) !important;
  }

  .project-title-wrap h2{
    color:#fff !important;
  }

  .project-title-wrap p:last-child{
    color:rgba(255,255,255,.82) !important;
  }
}

@media (max-width:900px){
  .project-title-wrap{
    position:relative !important;
    inset:auto !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:24px 20px 26px !important;
    background:#efede7 !important;
    color:#111 !important;
    text-shadow:none !important;
  }

  .project-title-wrap p:first-child{
    color:rgba(17,17,17,.52) !important;
  }

  .project-title-wrap h2{
    color:#111 !important;
    margin:8px 0 12px !important;
    font-size:clamp(3rem,15vw,5rem) !important;
    line-height:.88 !important;
  }

  .project-title-wrap p:last-child{
    color:rgba(17,17,17,.7) !important;
    max-width:34rem !important;
  }
}

@media (max-width:560px){
  .project-title-wrap{
    padding:20px 16px 22px !important;
  }
}


/* V3.55 — give the large preloader percentage proper breathing room */
.preloader-percent,
.preloader-percentage,
#preloaderPercent,
.loader-percent,
.loader-percentage{
  letter-spacing:.045em !important;
  font-kerning:normal !important;
}

/* Keep the large display treatment but avoid cramped numerals on mobile. */
@media (max-width:900px){
  .preloader-percent,
  .preloader-percentage,
  #preloaderPercent,
  .loader-percent,
  .loader-percentage{
    letter-spacing:.055em !important;
  }
}

/* V3.56 — portfolio hero bottom information bar */
.project-title-wrap{
  box-sizing:border-box;
}

@media (min-width:901px){
  .project-title-wrap{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:24px 5vw 26px !important;
    display:grid !important;
    grid-template-columns:minmax(300px,.9fr) minmax(360px,1.1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:clamp(48px,7vw,120px) !important;
    align-items:end !important;
    background:rgba(12,12,12,.72) !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
    border-top:1px solid rgba(255,255,255,.16) !important;
    color:#fff !important;
    text-shadow:none !important;
  }

  .project-title-wrap #projectType{
    grid-column:1 !important;
    grid-row:1 !important;
    align-self:end !important;
    margin:0 0 8px !important;
    font-size:.62rem !important;
    line-height:1.2 !important;
    letter-spacing:.18em !important;
    color:rgba(255,255,255,.68) !important;
  }

  .project-title-wrap #projectTitle{
    grid-column:1 !important;
    grid-row:2 !important;
    margin:0 !important;
    font-size:clamp(3.1rem,5.4vw,6.2rem) !important;
    line-height:.84 !important;
    letter-spacing:-.055em !important;
    color:#fff !important;
    text-shadow:none !important;
  }

  .project-title-wrap #projectDescription{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    align-self:center !important;
    max-width:620px !important;
    margin:0 !important;
    padding-left:clamp(28px,4vw,64px) !important;
    border-left:1px solid rgba(255,255,255,.18) !important;
    font-size:clamp(.82rem,1vw,1rem) !important;
    line-height:1.65 !important;
    color:rgba(255,255,255,.76) !important;
    text-shadow:none !important;
  }
}

@media (max-width:900px){
  .project-title-wrap{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:22px 20px 24px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    background:rgba(12,12,12,.94) !important;
    border-top:1px solid rgba(255,255,255,.14) !important;
    color:#fff !important;
    text-shadow:none !important;
  }

  .project-title-wrap #projectType{
    margin:0 0 7px !important;
    color:rgba(255,255,255,.62) !important;
  }

  .project-title-wrap #projectTitle{
    margin:0 0 18px !important;
    color:#fff !important;
    font-size:clamp(2.8rem,14vw,5rem) !important;
    line-height:.86 !important;
  }

  .project-title-wrap #projectDescription{
    margin:0 !important;
    padding-top:16px !important;
    border-top:1px solid rgba(255,255,255,.15) !important;
    max-width:38rem !important;
    color:rgba(255,255,255,.72) !important;
    line-height:1.6 !important;
  }
}


/* V3.60 — layered portfolio hero: cover canvas + full-art reveal */
.project-hero{
  position:relative !important;
  height:min(82vh,880px) !important;
  min-height:620px !important;
  overflow:hidden !important;
  background:#111 !important;
}
.project-hero>.project-image-bg{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  transform:scale(1.025) !important;
  filter:brightness(.62) saturate(.88) !important;
}
.project-hero>#projectImage{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  background:transparent !important;
  opacity:0 !important;
  transform:scale(1.035) !important;
  clip-path:inset(0 100% 0 0) !important;
  transition:clip-path 1.15s cubic-bezier(.22,.61,.36,1),opacity .7s ease,transform 1.35s cubic-bezier(.22,.61,.36,1) !important;
  will-change:clip-path,opacity,transform;
}
.project-hero>#projectImage.is-revealed{
  opacity:1 !important;
  transform:scale(1) !important;
  clip-path:inset(0 0 0 0) !important;
}
.project-title-wrap{z-index:3 !important}
.project-hero::after{
  content:"";position:absolute;z-index:2;inset:auto 0 0;height:16%;
  pointer-events:none;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.12));
}
@media(max-width:900px){
  .project-hero{height:75svh !important;min-height:560px !important}
}
@media(max-width:560px){
  .project-hero{min-height:520px !important}
}
@media(prefers-reduced-motion:reduce){
  .project-hero>#projectImage{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important}
}