/* Interactive mockups: one shoot shown on every surface it ends up on */
.showcase{margin-top:clamp(28px,4vw,48px)}
.tabs{display:flex;flex-wrap:wrap;gap:10px}
.tabs button{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;background:var(--g800);color:var(--soft);border:1px solid var(--g600);border-radius:999px;padding:10px 16px;cursor:pointer;transition:background .25s,color .25s}
.tabs button[aria-selected="true"]{background:var(--bone);color:var(--g900);border-color:var(--bone)}
.stagebox{position:relative;margin-top:22px;border-radius:28px;border:1px solid var(--g700);background:radial-gradient(120% 90% at 70% 0%,#24282e 0%,var(--g800) 45%,var(--g900) 100%);overflow:hidden;min-height:clamp(440px,52vw,620px)}
.stagebox:before{content:"";position:absolute;inset:auto -10% -40% -10%;height:70%;background:radial-gradient(closest-side,rgba(242,166,90,.16),transparent);pointer-events:none}
.panel-m{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(20px,4vw,48px);opacity:0;visibility:hidden;transform:translateY(14px) scale(.985);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1),visibility 0s .6s}
.panel-m.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1),visibility 0s}
.cap-m{position:absolute;left:clamp(20px,3vw,36px);bottom:clamp(18px,2.6vw,30px);max-width:34ch;z-index:5}
.cap-m .mono{color:var(--tung);font-size:11.5px}
.cap-m p{color:var(--soft);font-size:15px;margin-top:6px}
.screen video,.screen img{width:100%;height:100%;object-fit:cover;display:block}

/* laptop */
.laptop{width:min(760px,92%);position:relative;filter:drop-shadow(0 40px 60px rgba(0,0,0,.55))}
.laptop .lid{background:#0b0c0e;border-radius:18px 18px 6px 6px;padding:2.2% 2.2% 3%;border:1px solid #2a2e33}
.laptop .screen{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#000}
.laptop .base{height:14px;margin:0 -6%;background:linear-gradient(#cfd2d6,#8d9196);border-radius:0 0 18px 18px}
.laptop .base:before{content:"";display:block;width:18%;height:6px;margin:0 auto;background:#7d8186;border-radius:0 0 8px 8px}
/* player chrome */
.vp{position:absolute;inset:0}
.vp .bar{position:absolute;left:0;right:0;bottom:0;height:46px;background:linear-gradient(transparent,rgba(0,0,0,.65));display:flex;align-items:center;gap:12px;padding:0 16px;z-index:3}
.vp .bar i{width:0;height:0;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.vp .bar .track{flex:1;height:3px;background:rgba(255,255,255,.25);border-radius:3px;overflow:hidden}
.vp .bar .track b{display:block;height:100%;width:0;background:var(--tally);animation:prog 8.4s linear infinite}
@keyframes prog{to{width:100%}}
.vp .bar span{font-family:var(--mono);font-size:11px;color:#ddd}
.l3{position:absolute;left:6%;bottom:18%;z-index:3;display:flex;flex-direction:column;gap:4px}
.l3 b{display:inline-block;background:var(--bone);color:var(--g900);font-weight:800;font-size:clamp(13px,1.6vw,20px);padding:6px 12px;letter-spacing:-.01em;clip-path:inset(0 100% 0 0);animation:wipe 8.4s cubic-bezier(.7,0,.2,1) infinite}
.l3 span{display:inline-block;background:var(--tally);color:#fff;font-family:var(--mono);font-size:clamp(9px,1vw,12px);letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;width:max-content;clip-path:inset(0 100% 0 0);animation:wipe 8.4s cubic-bezier(.7,0,.2,1) .15s infinite}
@keyframes wipe{0%,8%{clip-path:inset(0 100% 0 0)}16%,78%{clip-path:inset(0 0 0 0)}86%,100%{clip-path:inset(0 0 0 100%)}}

/* phones */
.phones{display:flex;gap:clamp(12px,2.4vw,34px);align-items:center;justify-content:center;width:100%}
.phone{position:relative;width:clamp(150px,19vw,240px);aspect-ratio:9/19.5;border-radius:34px;background:#0b0c0e;padding:9px;border:1px solid #2c3036;box-shadow:0 40px 70px rgba(0,0,0,.55),inset 0 0 0 2px #1a1d21;flex:none}
.phone .screen{position:relative;width:100%;height:100%;border-radius:26px;overflow:hidden;background:#000}
.phone .notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:30%;height:18px;border-radius:12px;background:#000;z-index:4}
.phone.tilt-l{transform:rotate(-6deg) translateY(16px)}.phone.tilt-r{transform:rotate(6deg) translateY(16px)}.phone.hero{transform:scale(1.08);z-index:2}
.reel-ui{position:absolute;inset:0;z-index:3;pointer-events:none}
.reel-ui .side{position:absolute;right:10px;bottom:26%;display:flex;flex-direction:column;gap:16px;align-items:center}
.reel-ui .side i{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.9)}
.reel-ui .who{position:absolute;left:12px;bottom:16px;right:50px;color:#fff;font-size:11px;line-height:1.35}
.reel-ui .who b{display:flex;align-items:center;gap:6px;font-size:12px}
.reel-ui .who b:before{content:"";width:18px;height:18px;border-radius:50%;background:var(--tally)}
.capt{position:absolute;left:8%;right:8%;top:56%;z-index:3;text-align:center;font-weight:800;font-size:clamp(15px,1.7vw,21px);line-height:1.1;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.capt span{display:inline-block;margin:0 .12em;opacity:.35;transform:translateY(4px);transition:opacity .25s,transform .25s,color .25s}
.capt span.on{opacity:1;transform:none}
.capt span.hot{color:var(--tung)}
/* feed */
.ig-top{position:absolute;top:40px;left:12px;right:12px;display:flex;align-items:center;gap:10px;z-index:3;color:#fff;font-size:12px}
.ig-top b:before{content:"";display:inline-block;width:26px;height:26px;border-radius:50%;background:conic-gradient(var(--tung),var(--tally),var(--tung));vertical-align:middle;margin-right:8px}
.grid9{position:absolute;left:0;right:0;top:92px;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;align-content:start;background:#000}
.grid9>*{aspect-ratio:1;overflow:hidden;position:relative;background:var(--g700)}
.grid9 img,.grid9 video{width:100%;height:100%;object-fit:cover}
.qcard{display:flex;align-items:flex-end;padding:7px;font-weight:800;font-size:10px;line-height:1.05;color:var(--bone);background:linear-gradient(160deg,var(--g700),var(--g900))}
.qcard em{font-style:normal;color:var(--tung)}
.post-big{width:clamp(240px,32vw,400px);aspect-ratio:4/5;border-radius:18px;overflow:hidden;position:relative;box-shadow:0 40px 70px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08);flex:none}
.post-big video,.post-big img{width:100%;height:100%;object-fit:cover}
.post-big .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(14,16,18,.92));display:flex;flex-direction:column;justify-content:flex-end;padding:22px;gap:8px}
.post-big .ov b{font-size:clamp(22px,2.6vw,32px);font-weight:800;letter-spacing:-.03em;line-height:1}
.post-big .ov b em{font-style:normal;color:var(--tung)}
.post-big .ov span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--soft);text-transform:uppercase}
.dots{position:absolute;top:14px;left:0;right:0;display:flex;gap:4px;justify-content:center}
.dots i{width:22px;height:3px;border-radius:2px;background:rgba(255,255,255,.35)}.dots i:first-child{background:#fff}
/* website */
.web{display:flex;align-items:flex-end;gap:clamp(12px,2vw,28px);width:100%;justify-content:center}
.browser{width:min(700px,74%);border-radius:14px;overflow:hidden;background:#f3f1ec;box-shadow:0 40px 70px rgba(0,0,0,.55);border:1px solid #2a2e33}
.browser .chrome{height:30px;background:#16191c;display:flex;align-items:center;gap:6px;padding:0 12px}
.browser .chrome i{width:9px;height:9px;border-radius:50%;background:#3a3f45}
.browser .chrome span{margin-left:14px;flex:1;height:16px;border-radius:8px;background:#22262b;font-family:var(--mono);font-size:9.5px;color:#8a9097;display:flex;align-items:center;padding-left:10px}
.site{position:relative;aspect-ratio:16/10;overflow:hidden;color:#fff}
.site video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.site:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,14,22,.85),rgba(10,14,22,.15) 70%)}
.site .nav{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:14px 22px;z-index:2;font-size:11px}
.site .nav b{font-family:Georgia,serif;font-size:15px;letter-spacing:.02em}
.site .nav span{display:flex;gap:14px;opacity:.85}
.site .copy{position:absolute;left:22px;bottom:22%;z-index:2;max-width:56%}
.site .copy small{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#E9C46A}
.site .copy h4{font-family:Georgia,serif;font-weight:400;font-size:clamp(18px,2.6vw,34px);line-height:1.05;margin:8px 0 12px}
.site .copy a{display:inline-block;background:#E9C46A;color:#111;font-size:11px;font-weight:700;padding:8px 14px;border-radius:999px;text-decoration:none}
.mob{width:clamp(120px,15vw,190px);flex:none}
.mob .site{aspect-ratio:9/19.5;border-radius:26px}
.mob .site:after{background:linear-gradient(180deg,rgba(10,14,22,.1),rgba(10,14,22,.85) 75%)}
.mob .site .copy{max-width:none;right:16px;left:16px;bottom:12%}
.mob .site .copy h4{font-size:clamp(15px,1.6vw,19px)}
.mob .site .nav span{display:none}
/* newsletter */
.mail{width:min(520px,88%);border-radius:16px;background:#fff;color:#1b1d20;box-shadow:0 40px 70px rgba(0,0,0,.55);overflow:hidden;font-size:13px}
.mail .hd{display:flex;justify-content:space-between;padding:12px 18px;border-bottom:1px solid #eee;font-size:11px;color:#777}
.mail .hd b{color:#1b1d20}
.mail .hero{position:relative;aspect-ratio:16/8;overflow:hidden}
.mail .hero video{width:100%;height:100%;object-fit:cover}
.mail .hero .pb{position:absolute;inset:0;display:grid;place-items:center}
.mail .hero .pb i{width:54px;height:54px;border-radius:50%;background:rgba(229,72,58,.92);display:grid;place-items:center}
.mail .hero .pb i:after{content:"";border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.mail .bd{padding:18px 22px 22px}
.mail .bd h5{font-family:Georgia,serif;font-size:22px;font-weight:400;margin:0 0 8px;line-height:1.1}
.mail .bd p{color:#555;line-height:1.5}
.mail .bd .btnm{display:inline-block;margin-top:14px;background:#1b1d20;color:#fff;border-radius:999px;padding:9px 16px;font-size:12px;font-weight:700}
/* event */
.venue{position:relative;width:100%;height:100%;min-height:inherit;display:flex;align-items:flex-end;justify-content:center;gap:4%}
.ledwall{position:relative;width:min(640px,64%);aspect-ratio:16/9;background:#000;border-radius:4px;box-shadow:0 0 120px rgba(242,166,90,.25),0 30px 60px rgba(0,0,0,.6);outline:10px solid #0a0b0d;margin-bottom:12%}
.ledwall:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);pointer-events:none}
.ledwall .l3{bottom:14%}
.stageflr{position:absolute;left:0;right:0;bottom:0;height:16%;background:linear-gradient(#1a1d21,#0c0d0f);border-top:1px solid #2c3036}
.pullup{position:relative;width:clamp(90px,11vw,150px);aspect-ratio:1/2.4;background:var(--g800);border-radius:4px 4px 0 0;overflow:hidden;margin-bottom:6%;box-shadow:0 30px 60px rgba(0,0,0,.6);z-index:2}
.pullup img{width:100%;height:58%;object-fit:cover}
.pullup div{padding:10px;font-weight:800;font-size:clamp(11px,1.2vw,15px);line-height:1;letter-spacing:-.02em}
.pullup div em{font-style:normal;color:var(--tung)}
.pullup small{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.12em;color:var(--mute);margin-top:8px;font-weight:400}
.pullup:after{content:"";position:absolute;left:-6%;right:-6%;bottom:0;height:8px;background:#9aa0a6;border-radius:3px}
.label-ex{position:absolute;top:16px;right:18px;z-index:6;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--mute);border:1px solid var(--g600);border-radius:999px;padding:5px 10px;background:rgba(14,16,18,.6)}
@media(max-width:760px){
 .phones .phone:not(.hero){display:none}.phone.hero{transform:none}
 .web .mob{display:none}.browser{width:96%}
 .pullup{display:none}.ledwall{width:94%}
 .stagebox{min-height:520px}
 .cap-m{position:static;margin-top:18px;max-width:none}
 .panel-m{align-content:center}
}
@media(prefers-reduced-motion:reduce){.l3 b,.l3 span{clip-path:none!important}}
/* layout fixes: device on top, caption underneath */
.panel-m{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,2.4vw,28px)}
.cap-m{position:static;text-align:center;max-width:52ch}
.mail .hero video,.ledwall video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mail .hero{position:relative}
.venue{height:auto;min-height:0;width:100%;align-items:flex-end;padding-bottom:4%}
.ledwall{margin-bottom:6%;overflow:hidden}
.stageflr{height:12%}
.laptop{width:min(720px,88%)}
@media(max-width:760px){.cap-m{text-align:left}}
/* sizing pass */
.stagebox{min-height:clamp(560px,60vw,720px)}
.panel-m{padding:clamp(56px,6vw,72px) clamp(20px,4vw,48px) clamp(24px,3vw,36px)}
.phone{width:clamp(150px,16.5vw,220px)}
.ledwall{width:min(560px,56%);margin-bottom:4%}
.pullup{width:clamp(78px,8.5vw,118px)}
.venue{gap:3%}
@media(max-width:760px){
 .stagebox{min-height:0}
 .panel-m{position:relative;display:none;padding:56px 16px 22px;opacity:1;visibility:visible;transform:none}
 .panel-m.on{display:flex}
 .site .nav span{display:none}
 .site .nav b{font-size:12px}
 .site .copy{max-width:80%;left:14px;bottom:12%}
 .site .copy h4{font-size:15px;margin:6px 0 8px}
 .phone.hero{width:62%}
 .capt{font-size:16px}
 .mail{width:100%}
 .post-big{width:86%}
 .posts-phone{display:none}
}
@media(max-width:760px){.ledwall{width:100%;margin:8% 0}.venue{padding:0}}