/* DEV 0.8 — one independently draggable optical sculpture. */
#hero-unfold{position:absolute;z-index:4;right:12%;bottom:26px;background:transparent;border:1px solid #ffffff38;border-radius:30px;padding:10px 18px;color:#c4c5b8;font:9px monospace;letter-spacing:1px;cursor:pointer}
.hero .hero-bottom>p em{font-style:normal}
@media(max-width:700px){#hero-unfold{bottom:80px;right:50%;transform:translateX(50%)}.hero .hero-bottom{bottom:145px!important}.hero .hero-bottom>p{font-size:32px!important}.hero .pointer-note{font-size:6px!important}}
.hero{margin:0;height:clamp(740px,95svh,1000px);max-height:none;background:#141512;isolation:isolate;border-bottom:1px solid #ffffff12}
.hero:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 64% 46%,#c6571612,transparent 45%);pointer-events:none}
.hero .hero-top{margin:0 4.3%;padding-top:30px;font-size:9px;color:#a9aa9c;letter-spacing:1.3px}
.hero h1{position:absolute;z-index:3;left:50%;top:38%;width:min(53vw,780px);margin:0;transform:translate(-50%,-50%);line-height:0}
.hero h1 img{width:100%;height:auto;filter:drop-shadow(0 8px 32px #0005)}
.hero #stage{position:absolute;inset:40px 0 160px;width:auto;height:auto;z-index:1;opacity:.85;pointer-events:none}
.hero #stage canvas{width:100%;height:100%;display:block}
.hero .hero-bottom{left:4.3%;right:4.3%;width:auto;bottom:86px;display:flex;flex-direction:row;align-items:end;justify-content:space-between;gap:30px}
.hero .hero-bottom>p{font-size:clamp(40px,4.2vw,67px);line-height:1.04;letter-spacing:-2px}
.hero .hero-intro{max-width:310px;padding:0}
.hero .hero-intro p{font-size:13px;line-height:1.7;color:#b6b7ab;margin-bottom:25px}
.hero .work-link{gap:40px;font-size:10px;letter-spacing:1.5px}
.hero .work-link span{width:42px;height:42px}
.hero .pointer-note{left:50%;width:auto;transform:translateX(-50%);bottom:32px;font-size:8px;letter-spacing:3px;white-space:nowrap;color:#777b6e}
#hero-motion{position:absolute;bottom:26px;left:4.3%;z-index:4;padding:10px 0;background:none;border:0;color:#96998c;font:8px monospace;letter-spacing:1px;cursor:pointer}
footer .footer-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;text-align:center}
footer .footer-bottom>a:first-child{justify-self:start;width:auto}
footer .footer-bottom>a:last-child{justify-self:end}
footer>.footer-brand{width:150px;max-width:40%;height:auto;display:block;margin:46px auto 14px;object-fit:contain}
@media(max-width:700px){
 .hero{height:760px;min-height:90svh}
 .hero .hero-top{padding-top:23px;font-size:7px;text-align:center;justify-content:center}
 .hero h1{top:34%;width:83%;margin:0}
 .hero #stage{inset:40px -15% 220px;opacity:.9}
 .hero .hero-bottom{left:6%;right:6%;bottom:88px;align-items:center;flex-direction:column;text-align:center;gap:22px}
 .hero .hero-bottom>p{font-size:39px;letter-spacing:-1.5px}
 .hero .hero-bottom>p br{display:none}.hero .hero-bottom>p em:before{content:' '}
 .hero .hero-intro p{text-align:center;font-size:12px;margin-bottom:20px}
 .hero .work-link{justify-content:center;gap:24px;font-size:9px}
 .hero .pointer-note{bottom:53px;left:50%;transform:translateX(-50%);font-size:7px;letter-spacing:1px}
 #hero-motion{left:6%;bottom:17px;font-size:7px}
 footer .footer-bottom{grid-template-columns:1fr;justify-items:center;gap:20px}
 footer .footer-bottom>a:first-child,footer .footer-bottom>a:last-child{justify-self:center}
 footer>.footer-brand{width:130px;margin:34px auto 10px}
}
/* Keep the wordmark and interactive object in separate visual areas. */
.hero h1{left:27%;top:40%;width:43%;max-width:690px}
.hero #stage{inset:85px 3% 195px 53%;opacity:1;pointer-events:auto;cursor:grab;touch-action:pan-y;user-select:none;outline-offset:-8px}
.hero #stage:focus-visible{outline:1px solid #ee641b;border-radius:20px}
.hero #stage.is-spinning{cursor:grabbing}
.hero #stage canvas{touch-action:pan-y}
.hero .pointer-note{left:75%;bottom:165px;font-size:8px;letter-spacing:1.4px}
@media(max-width:700px){
 .hero{height:850px}
 .hero h1{left:50%;top:17%;width:72%}
 .hero #stage{inset:240px 9% auto;height:285px}
 .hero .hero-bottom{bottom:120px!important;gap:17px}
 .hero .hero-bottom>p{font-size:28px!important}
 .hero .hero-intro p{font-size:11px;margin-bottom:15px}
 .hero .pointer-note{left:50%;bottom:305px;font-size:7px!important}
 #hero-unfold{bottom:50px;right:8%;transform:none}
 #hero-motion{bottom:50px;left:8%}
}