*{box-sizing:border-box}
:root{--bg:#050505;--panel:#0b0b0b;--text:#f4eee8;--muted:#aaa19b;--red:#d20d24;--line:rgba(255,255,255,.14)}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
header{position:fixed;top:0;left:0;right:0;z-index:80;height:74px;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:linear-gradient(#050505f5,transparent)}
footer img{height:55px;mix-blend-mode:screen}
.back-to-studios{display:inline-flex;align-items:center;min-height:42px;padding:0 2px;color:rgba(244,238,232,.76);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 2px 14px #000;transition:color .25s ease,transform .25s ease}
.back-to-studios:hover,.back-to-studios:focus-visible{color:#fff;transform:translateX(-2px)}
.menu{border:1px solid var(--line);background:#080808;color:#fff;padding:10px}
nav{display:none;position:absolute;top:74px;left:12px;right:12px;flex-direction:column;gap:18px;padding:18px;background:#080808;border:1px solid var(--line);text-transform:uppercase;font-size:.68rem;letter-spacing:.14em}
nav.open{display:flex}
.eyebrow{margin:0 0 10px;text-transform:uppercase;letter-spacing:.24em;font-size:.64rem;font-weight:bold;color:#d8ccc5}
h1,h2,h3{font-family:Impact,'Arial Narrow Bold',sans-serif;text-transform:uppercase;margin:0;line-height:.88}
.map-hero{min-height:100svh;padding:96px 16px 28px;background:radial-gradient(circle at 50% 20%,rgba(210,13,36,.15),transparent 35%),#050505}
.map-copy{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:14px}
.map-copy>p{display:none;color:var(--muted);line-height:1.6;max-width:520px}
.map-copy h1{font-size:clamp(3.2rem,15vw,5rem)}
.map-copy h1 span{color:transparent;-webkit-text-stroke:1px #fff}
.drag{margin:8px 0 12px;padding:8px 10px;border-left:2px solid var(--red);background:rgba(210,13,36,.08);color:#b4aaa5;font-size:.63rem;letter-spacing:.13em;text-transform:uppercase}
.viewport{position:relative;overflow:hidden;border:1px solid var(--line);height:68svh;min-height:480px;background:#080808;touch-action:none;cursor:grab;overscroll-behavior:contain}
.viewport.dragging{cursor:grabbing}
.map-canvas{position:absolute;inset:0;width:980px;height:100%;will-change:transform}
.map-video{position:absolute;inset:0;width:980px;height:100%;object-fit:cover;display:block;pointer-events:none;filter:saturate(.95) contrast(1.05) brightness(.9)}
.viewport:after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:rgba(0,0,0,0);transition:background .35s ease}
.map-hero.project-open .viewport:after{background:rgba(0,0,0,.14)}
.pin{position:absolute;z-index:8;transform:translate(-50%,-100%);border:0;background:none;color:#fff;cursor:pointer;text-align:center;filter:drop-shadow(0 8px 10px #000);transition:filter .3s ease}
.pin-marker{display:grid;place-items:center;width:46px;height:58px;background:linear-gradient(#ef2940,#9d0717);clip-path:path("M23 0C10.3 0 0 10.3 0 23c0 17.25 23 35 23 35s23-17.75 23-35C46 10.3 35.7 0 23 0z");animation:float 2s ease-in-out infinite;transition:.3s}
.pin-marker:after{content:"";width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 18px #fff}
.pin-label{display:block;margin-top:5px;padding:6px 8px;background:rgba(5,5,5,.86);border:1px solid rgba(255,255,255,.18);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:.3s}
.pin:before{content:"";position:absolute;left:50%;bottom:25px;width:68px;height:24px;transform:translateX(-50%);border:2px solid rgba(210,13,36,.65);border-radius:50%;animation:pulse 1.8s infinite}
.pin.freak{left:18%;top:61%}.pin.apocalypse{left:47%;top:50%}.pin.surgeon{left:82%;top:62%}.pin.dance{left:67%;top:31%}
.pin.selected{z-index:12;filter:drop-shadow(0 0 24px rgba(210,13,36,.9))}
.pin.selected .pin-marker{transform:scale(1.2);filter:brightness(1.25)}
.pin.selected .pin-label{transform:scale(1.06);border-color:rgba(210,13,36,.9);box-shadow:0 0 24px rgba(210,13,36,.35)}
.pin.selected:before{animation:selectionPulse .8s ease-out infinite}
.map-tools{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:12px}
.map-tools button{min-height:48px;border:1px solid var(--line);background:#0b0b0b;color:#fff;text-transform:uppercase;letter-spacing:.08em;font-size:.6rem}
.map-tools button:first-child{border-color:var(--red)}
.projects{padding:80px 16px}
.section-head{margin-bottom:28px}
.section-head h2{font-size:clamp(3rem,14vw,5.4rem)}
.section-head>p{color:var(--muted);line-height:1.7}
.project-grid{display:grid;gap:16px}
.project-card{border:1px solid var(--line);background:var(--panel);overflow:hidden}
.thumb{position:relative;display:block;aspect-ratio:16/9;background:#111}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.82) contrast(1.08);transition:.35s}
.thumb:hover img{transform:scale(1.035);filter:saturate(1)}
.play{position:absolute;inset:0;display:grid;place-items:center;font-size:2rem;text-shadow:0 2px 15px #000}
.project-info{padding:22px}
.project-info>p{margin:0 0 7px;color:#d2c8c3;text-transform:uppercase;letter-spacing:.13em;font-size:.58rem}
.project-info h3{font-size:clamp(2.3rem,11vw,4rem)}
.project-info>span{display:block;color:var(--muted);line-height:1.6;margin-top:10px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.actions a{border:1px solid var(--line);padding:11px 13px;text-transform:uppercase;font-size:.58rem;letter-spacing:.09em}
.actions a:first-child{background:var(--red);border-color:var(--red)}
.gate{min-height:60vh;position:relative;display:flex;align-items:flex-end;padding:60px 16px;overflow:hidden}
.gate video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gate:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#050505,transparent 72%)}
.gate-copy{position:relative;z-index:2}
.gate h2{font-size:clamp(3rem,13vw,5.5rem)}
footer{padding:24px 16px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:#777;font-size:.68rem}
dialog{width:min(92vw,760px);padding:0;background:#0b0b0b;color:#fff;border:1px solid var(--line);box-shadow:0 30px 100px #000;transform:translateY(36px);opacity:0;transition:.38s}
dialog[open]{transform:translateY(0);opacity:1}
dialog::backdrop{background:#000c;backdrop-filter:blur(8px)}
.modal-media{aspect-ratio:16/9;background:#111}
.modal-media iframe{width:100%;height:100%;border:0}
.modal-body{padding:24px}
.modal-body h2{font-size:clamp(2.7rem,12vw,5rem)}
.modal-body p{color:var(--muted);line-height:1.7}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap}
.modal-actions a,.close{padding:12px 14px;text-transform:uppercase;font-size:.6rem;letter-spacing:.1em;border:1px solid var(--line);background:#0b0b0b;color:#fff}
.modal-actions a:first-child{background:var(--red);border-color:var(--red)}
.close{position:absolute;right:10px;top:10px;z-index:4;border-radius:50%;width:40px;height:40px;padding:0;font-size:1.2rem}
.sound-button{position:fixed;left:50%;bottom:22px;z-index:115;transform:translateX(-50%);display:flex;align-items:center;gap:13px;min-width:260px;padding:15px 18px;border:1px solid rgba(210,13,36,.9);border-radius:999px;background:rgba(8,8,8,.95);color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.55),0 0 30px rgba(210,13,36,.3);cursor:pointer;backdrop-filter:blur(10px);transition:.35s}
.sound-button.compact{left:auto;right:18px;transform:none;min-width:220px}
.sound-button.playing{background:rgba(30,5,9,.97);box-shadow:0 8px 30px rgba(0,0,0,.55),0 0 36px rgba(210,13,36,.48)}
.sound-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--red);font-size:.85rem;flex:0 0 auto}
.sound-copy{display:flex;flex-direction:column;text-align:left}
.sound-copy strong{text-transform:uppercase;font-size:.72rem;letter-spacing:.11em}
.sound-copy small{margin-top:4px;color:#bbb0aa;font-size:.62rem}
.now-playing{position:fixed;right:18px;bottom:90px;z-index:120;display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:rgba(8,8,8,.94);border:1px solid rgba(210,13,36,.55);color:#fff;transform:translateY(25px);opacity:0;pointer-events:none;transition:.35s}
.now-playing.show{transform:translateY(0);opacity:1}
.now-playing span{text-transform:uppercase;letter-spacing:.14em;font-size:.53rem;color:#c9bdb8}
.now-playing strong{text-transform:uppercase;font-size:.68rem;letter-spacing:.08em}
.map-hero.sound-active .map-video{filter:saturate(1) contrast(1.08) brightness(.94)}
.map-hero.sound-active .pin{filter:drop-shadow(0 0 16px rgba(210,13,36,.65))}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse{70%{transform:translateX(-50%) scale(1.5);opacity:0}100%{opacity:0}}
@keyframes selectionPulse{0%{transform:translateX(-50%) scale(.6);opacity:.9}100%{transform:translateX(-50%) scale(2.3);opacity:0}}
@media(max-width:560px){
  .sound-button{left:14px;right:14px;bottom:14px;transform:none;min-width:0;justify-content:center}
  .sound-button.compact{left:14px;right:14px;bottom:14px}
  .now-playing{left:14px;right:14px;bottom:84px}
}
@media(min-width:850px){
  header{height:82px;padding:8px 5vw}.back-to-studios{font-size:.66rem}.menu{display:none}nav{display:flex;position:static;flex-direction:row;background:none;border:0;padding:0}
  .map-hero{padding:110px 5vw 45px}.map-copy>p{display:block}.map-copy h1{font-size:clamp(5rem,8vw,8.5rem)}.drag{display:none}
  .viewport{height:76vh;min-height:620px}.map-canvas,.map-video{width:100%;height:100%}
  .map-tools{grid-template-columns:repeat(4,1fr)}.projects{padding:110px 5vw}.project-grid{grid-template-columns:repeat(2,1fr)}
  .section-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}.section-head h2{font-size:clamp(4rem,7vw,7rem)}
  .gate{padding:70px 5vw}footer{padding:28px 5vw}
}


/* Release 1.0 — reusable world CTA */
.create-project{
  position:relative;
  padding:90px 20px 120px;
  overflow:hidden;
  text-align:center;
  background:
    radial-gradient(circle at 50% 10%,rgba(210,13,36,.22),transparent 34%),
    linear-gradient(180deg,#050505,#0d0608);
  border-top:1px solid var(--line);
}
.create-project:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.035),transparent 65%);
}
.create-project-inner{position:relative;z-index:1;max-width:900px;margin:0 auto}
.create-project h2{font-size:clamp(3.2rem,14vw,6.5rem)}
.create-copy{max-width:700px;margin:24px auto;color:var(--muted);line-height:1.8}
.service-list{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:28px auto 32px}
.service-list span{padding:9px 12px;border:1px solid var(--line);background:rgba(10,10,10,.72);text-transform:uppercase;font-size:.57rem;letter-spacing:.1em}
.create-button{display:inline-block;padding:17px 23px;background:var(--red);border:1px solid var(--red);text-transform:uppercase;font-size:.68rem;font-weight:bold;letter-spacing:.13em;transition:.25s}
.create-button:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(210,13,36,.26)}
@media(min-width:850px){
  .create-project{padding:125px 7vw 145px}
}