/* 4th Wall Digital — static rebuild of the Wix site.
   Desktop (>=1000px) uses the original fixed 980px grid in px.
   Mobile (<1000px) reproduces Wix's 320px mobile layout, scaled to the viewport via --u (1 design px). */
:root{
  --green:#15F502; --green2:#02FF02; --red:#D31724; --rust:#993717;
  --u:min(calc(100vw / 320), 1.6px);
  --glitch:rgba(10,189,240,.298) 3px 3px 0, rgba(254,1,1,.298) -3px -3px 0;
  --ease-fade:cubic-bezier(.25,.46,.45,.94); --ease-drop:cubic-bezier(.175,.885,.32,1.275);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#000;color:var(--green);font-family:'Jost',Futura,'Century Gothic',sans-serif;font-weight:300;overflow-x:hidden}
body.light{background:#fff}
img,video{display:block;max-width:none}
a{color:inherit}
h1,h2,h3,h4,h5,p{margin:0;font-weight:inherit}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#000;color:var(--green);padding:8px 12px}
.skip:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--green2);outline-offset:2px}

/* ---------- header ---------- */
.hdr{position:relative;background:#000;overflow:hidden}
.hdr-strip{display:flex;align-items:flex-start;justify-content:center}
.hdr-logo{object-fit:cover}
.hdr-gif video{width:100%;height:100%;object-fit:cover}
.social{list-style:none;margin:0;padding:0;display:flex;justify-content:space-between;align-items:center}
.social li,.social a,.social span{display:block;line-height:0}
.social img{width:100%;height:100%}
.imgbtn{display:block;position:relative}
.imgbtn img{width:100%;height:100%;object-fit:contain;transition:opacity .2s}
.imgbtn img.hov{position:absolute;inset:0;opacity:0}
.imgbtn:hover img.hov,.imgbtn:focus-visible img.hov{opacity:1}
.imgbtn:hover img:not(.hov),.imgbtn:focus-visible img:not(.hov){opacity:0}
.nav ul{list-style:none;margin:0;padding:0}
.nav a,.nav button{font-family:'Sniglet','Arial Rounded MT Bold',sans-serif;font-weight:800;color:var(--green);text-decoration:none;background:none;border:0;cursor:pointer;padding:0;font-size:21px;line-height:47px;display:block;width:100%;text-align:center;letter-spacing:.02em;text-transform:uppercase}
.nav a:hover,.nav button:hover{color:#fff}
.nav .more{position:relative}
.nav .sub{position:absolute;top:100%;left:0;right:0;background:#000;z-index:20;display:none;padding:4px 0;border-top:1px solid #222}
.nav .more:hover .sub,.nav .more:focus-within .sub,.nav .more.open .sub{display:block}
.nav .sub a{font-size:17px;line-height:40px}

/* desktop header: 620px tall, 980px grid centered */
@media (min-width:1000px){
  .hdr{height:620px}
  .hdr-strip{position:absolute;top:10px;left:50%;width:1754px;margin-left:-877px}
  .hdr-logo{width:497px;height:504px}
  .hdr-gif{width:760px;height:504px}
  .hdr-grid{position:absolute;top:0;left:50%;width:980px;margin-left:-490px;height:620px}
  .nav{position:absolute;top:515px;left:110px;width:760px}
  .nav>ul{display:flex}
  .nav>ul>li{width:254px}
  .hdr .eye{position:absolute;left:196px;top:555px;width:65px;height:57px}
  .hdr .social{position:absolute;left:418px;top:563px;width:137px;height:39px}
  .hdr .social li{width:39px;height:39px}
  .hdr .badge{position:absolute;left:712px;top:547px;width:81px;height:71px}
}
/* mobile header (Wix 320px layout) */
@media (max-width:999.98px){
  .hdr{height:calc(var(--u)*375)}
  .hdr-logo,.nav,.hdr .eye{display:none}
  .hdr-strip{position:absolute;top:calc(var(--u)*55);left:50%;margin-left:calc(var(--u)*-140)}
  .hdr-gif{width:calc(var(--u)*280);height:calc(var(--u)*280)}
  .hdr-grid{position:absolute;inset:0}
  .hdr .badge{position:absolute;top:calc(var(--u)*10);left:50%;margin-left:calc(var(--u)*-36.5);width:calc(var(--u)*73);height:calc(var(--u)*64);z-index:2}
  .hdr .social{position:absolute;top:calc(var(--u)*336);left:50%;margin-left:calc(var(--u)*-67.5);width:calc(var(--u)*135);height:calc(var(--u)*35)}
  .hdr .social li{width:calc(var(--u)*35);height:calc(var(--u)*35)}
}

/* ---------- shared section bits ---------- */
.sec{position:relative;overflow:hidden;text-align:center}
.sec-bg{position:absolute;inset:0;z-index:0}
.sec-bg img,.sec-bg video{width:100%;height:100%;object-fit:cover}
.sec>.in{position:relative;z-index:1;margin:0 auto}
.h-big{font-family:'Sniglet','Arial Rounded MT Bold',sans-serif;font-weight:800;color:var(--green);line-height:1.15}
.yt{position:relative;margin:0 auto;background:#000;overflow:hidden}
.yt button{all:unset;position:absolute;inset:0;cursor:pointer;display:block}
.yt button img{width:100%;height:100%;object-fit:cover}
.yt .yt-title{position:absolute;left:0;right:0;top:0;padding:14px 18px 30px;text-align:left;color:#fff;font:400 18px/1.3 Roboto,Arial,sans-serif;background:linear-gradient(rgba(0,0,0,.6),transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yt .yt-play{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px}
.yt button:hover .yt-play path:first-child,.yt button:focus-visible .yt-play path:first-child{fill:#c00}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt .yt-note{position:absolute;right:8px;bottom:6px;font:12px/1.2 Arial,sans-serif;color:#ddd;text-shadow:0 1px 2px #000}

/* ---------- home: sample + video ---------- */
#sample,#video2{background:#000}
.h-sample{font-size:85px;letter-spacing:34px;margin-right:-34px}
@media (min-width:1000px){
  #sample{height:715px}
  #sample .h-sample{padding-top:28px;height:130px}
  #sample .yt,#video2 .yt{width:916px;height:515px}
  #video2{height:650px;padding-top:67px}
}
@media (max-width:999.98px){
  #sample{height:calc(var(--u)*287)}
  #sample .h-sample{font-size:calc(var(--u)*45);letter-spacing:calc(var(--u)*18);margin-right:calc(var(--u)*-18);padding-top:calc(var(--u)*38);height:calc(var(--u)*102)}
  #sample .yt,#video2 .yt{width:calc(var(--u)*280);height:calc(var(--u)*158)}
  #video2{height:calc(var(--u)*246);padding-top:calc(var(--u)*44)}
  .yt .yt-title{font-size:13px;padding:8px 10px 20px}
  .yt .yt-play{transform:scale(.75)}
}

/* ---------- home: about ---------- */
#about{background:#000}
.about-txt{font-weight:400;color:var(--green);text-shadow:rgba(0,0,0,.498) -1px -1px 0,rgba(0,0,0,.498) -1px 1px 0,rgba(0,0,0,.498) 1px 1px 0,rgba(0,0,0,.498) 1px -1px 0}
.about-txt .hl{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media (min-width:1000px){
  #about{min-height:1160px;padding-bottom:40px}
  #about .h-sample{padding-top:70px;height:208px}
  .about-txt{width:898px;margin:0 auto;font-size:36px;line-height:50.4px}
  .about-txt .box{background:rgba(255,255,255,.26);border-radius:30px}
  .about-txt .head{width:472px;margin:9px auto 0;padding:16px 0 22px}
  .about-txt p.box{padding:10px 4px 11px;margin-top:28px}
  .about-txt p.box.first{margin-top:115px}
}
@media (max-width:999.98px){
  #about{min-height:calc(var(--u)*1185);padding-bottom:calc(var(--u)*40)}
  #about .h-sample{font-size:calc(var(--u)*45);letter-spacing:calc(var(--u)*18);margin-right:calc(var(--u)*-18);padding-top:calc(var(--u)*34);height:calc(var(--u)*102)}
  .about-txt{width:calc(var(--u)*262);margin:0 auto;font-size:calc(var(--u)*23);line-height:calc(var(--u)*33.6);letter-spacing:-.02em}
  .about-txt .head{padding-top:0}
  .about-txt p.box{margin-top:calc(var(--u)*33.6)}
  .about-txt p.box.first{margin-top:calc(var(--u)*96)}
}

/* ---------- home: contact ---------- */
.h-contact{letter-spacing:-.01em}
.cform{text-align:left;margin:0 auto}
.cform label{display:block;font-family:'Jost',sans-serif;font-weight:300;color:var(--green)}
.cform label .req{color:#f00;margin-left:3px}
.cform input,.cform textarea{display:block;width:100%;background:rgba(255,255,255,.69);border:1px solid var(--green2);border-radius:12px;box-shadow:0 5px 4px rgba(21,245,2,.42);font-family:'Barlow',Arial,sans-serif;font-weight:300;color:#000;padding:3px 3px 3px 12px;resize:none}
.cform input:focus,.cform textarea:focus{outline:none;border-width:2px}
.cform textarea{padding-top:8px}
.cform .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.cform .row{position:relative}
.btn-push{display:block;margin:0 auto;background:#000;color:var(--green2);border:0;border-radius:11px;box-shadow:0 5px 4px rgba(2,255,2,.6);font-family:'Jost',sans-serif;font-weight:400;cursor:pointer}
.btn-push:hover{background:#111;color:#fff}
.btn-push[disabled]{opacity:.6;cursor:wait}
.form-msg{font-family:'Jost',sans-serif;font-weight:400;text-align:center;min-height:1.4em;color:var(--green);text-shadow:0 0 3px #000,0 0 6px #000}
.form-msg.err{color:#ff4d4d}
.mail{font-family:'Jost',sans-serif;font-weight:400;color:var(--green);text-decoration:underline;display:inline-block}
@media (min-width:1000px){
  #contact{height:1042px}
  .h-contact{font-size:85px;padding-top:80px;height:227px}
  .cform{width:602px}
  .cform label{font-size:18px;line-height:26px;height:32px}
  .cform .row{height:89px}
  .cform input{height:52px;font-size:16px}
  .cform .row.msg{height:124px}
  .cform textarea{height:72px;font-size:16px}
  .btn-push{width:159px;height:40px;font-size:14px;margin-top:-4px}
  .form-msg{font-size:18px;margin-top:14px}
  #contact .social{width:155px;height:33px;margin:58px auto 0}
  #contact .social li{width:33px;height:33px}
  .mail{font-size:24px;margin-top:62px}
}
@media (max-width:999.98px){
  #contact{height:calc(var(--u)*753)}
  .h-contact{font-size:calc(var(--u)*45);padding-top:calc(var(--u)*84);height:calc(var(--u)*149)}
  .cform{width:calc(var(--u)*270)}
  .cform label{font-size:calc(var(--u)*15);line-height:calc(var(--u)*20);height:calc(var(--u)*23)}
  .cform .row{height:calc(var(--u)*67)}
  .cform input{height:calc(var(--u)*34);font-size:16px;border-radius:10px}
  .cform .row.msg{height:calc(var(--u)*138)}
  .cform textarea{height:calc(var(--u)*66);font-size:16px;border-radius:10px}
  .btn-push{width:calc(var(--u)*120);height:calc(var(--u)*42);font-size:calc(var(--u)*14)}
  .form-msg{font-size:calc(var(--u)*15);margin-top:calc(var(--u)*14);min-height:calc(var(--u)*48)}
  #contact .social{width:calc(var(--u)*135);height:calc(var(--u)*35);margin:calc(var(--u)*70) auto 0}
  #contact .social li{width:calc(var(--u)*35);height:calc(var(--u)*35)}
  .mail{font-size:calc(var(--u)*16);margin-top:calc(var(--u)*11)}
}

/* ---------- home: secret ---------- */
.secret-box{background:rgba(255,255,255,.66);border-radius:11px;margin:0 auto;color:#000}
.secret-box h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;line-height:1.2}
.secret-box p{font-family:'Jost',sans-serif;font-weight:400}
.btn-secret{display:inline-flex;align-items:center;justify-content:center;background:var(--red);color:#fff;text-decoration:none;border-radius:11px;font-family:Arial,Helvetica,sans-serif;letter-spacing:.05em}
.btn-secret:hover{background:#b0101c}
@media (min-width:1000px){
  #secret{height:545px;padding-top:146px}
  .secret-box{width:568px;height:347px;padding-top:58px}
  .secret-box h1{font-size:56px}
  .secret-box p{font-size:18px;margin-top:30px}
  .btn-secret{width:142px;height:40px;font-size:14px;margin-top:52px}
}
@media (max-width:999.98px){
  #secret{height:calc(var(--u)*248);padding-top:calc(var(--u)*45)}
  .secret-box{width:calc(var(--u)*290);height:calc(var(--u)*161);padding-top:calc(var(--u)*24)}
  .secret-box h1{font-size:calc(var(--u)*30)}
  .secret-box p{font-size:calc(var(--u)*17);margin-top:calc(var(--u)*6)}
  .btn-secret{width:calc(var(--u)*170);height:calc(var(--u)*42);font-size:calc(var(--u)*13);margin-top:calc(var(--u)*8)}
}

/* ---------- footer ---------- */
.ftr{background:var(--rust);color:#fff;text-align:center;font-family:'Jost',sans-serif;font-weight:300;display:flex;align-items:center;justify-content:center}
@media (min-width:1000px){.ftr{height:53px;font-size:14px}}
@media (max-width:999.98px){.ftr{height:calc(var(--u)*34);font-size:calc(var(--u)*13)}}

/* ---------- project pages (white) ---------- */
.proj{background:#fff;color:#000;text-align:center}
.proj h1{line-height:1.25}
.proj .glitch{text-shadow:var(--glitch)}
.proj figure{margin:0 auto}
.proj figure img{width:100%;height:100%;object-fit:cover}
.btn-back{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#000;text-decoration:none;border-radius:20px;font-family:'Jost',sans-serif;font-weight:400;width:142px;height:40px;font-size:14px}
.btn-back:hover{text-decoration:underline}
.t-acry{font-family:'Corben',Georgia,serif;font-weight:400}
.d-acry{font-family:'Barlow',Arial,sans-serif;font-weight:300;color:#605E5E}
.t-ball{font-family:'Oswald','DIN Condensed',sans-serif;font-weight:500}
.d-ball p{font-family:'Jost',sans-serif;font-weight:400}
.t-ai{font-family:'Turret Road',sans-serif;font-weight:400;color:#1D486D;text-transform:uppercase}
.d-ai{font-family:'Turret Road',sans-serif;font-weight:400;color:#6E40C5;text-transform:uppercase;text-shadow:0 5px 0 rgba(0,0,0,.3)}
.d-ai a{color:inherit}
@media (min-width:1000px){
  .proj .in{width:980px;margin:0 auto}
  #p03{min-height:1899px;padding-top:51px}
  .t-acry{font-size:70px}
  .d-acry{font-size:18px;line-height:25.2px;margin-top:69px}
  #p03 figure{width:912px;height:662px;margin-top:64px}
  #p03 figure+figure{margin-top:60px}
  #p03 .back{margin-top:59px}
  #p06{min-height:1082px;padding-top:44px}
  .t-ball{font-size:88px}
  .d-ball{margin-top:16px}
  .d-ball p{font-size:14px;line-height:25.2px}
  #p06 figure{width:910px;height:590px;margin-top:27px}
  #p06 .back{margin-top:27px}
  #p09{min-height:1269px;padding-top:44px}
  .t-ai{font-size:64px;letter-spacing:-.05em}
  .d-ai{font-size:33px;line-height:73.8px;letter-spacing:-.06em;width:917px;margin:6px auto 0}
  #p09 figure{width:876px;height:674px;margin-top:16px}
  #p09 .back{margin-top:22px}
}
@media (max-width:999.98px){
  .proj .in{width:calc(var(--u)*280);margin:0 auto}
  .btn-back{width:calc(var(--u)*142);height:calc(var(--u)*40);font-size:calc(var(--u)*14)}
  .proj figure{width:calc(var(--u)*280);height:calc(var(--u)*181)}
  #p03{min-height:calc(var(--u)*826);padding:calc(var(--u)*10) 0 calc(var(--u)*30)}
  .t-acry{font-size:calc(var(--u)*40)}
  .d-acry{font-size:calc(var(--u)*17);line-height:calc(var(--u)*23.8);margin-top:calc(var(--u)*34)}
  #p03 figure{margin-top:calc(var(--u)*10)}
  #p03 figure+figure{margin-top:calc(var(--u)*39)}
  #p03 .back{margin-top:calc(var(--u)*40)}
  #p06{min-height:calc(var(--u)*718);padding:calc(var(--u)*10) 0 calc(var(--u)*30)}
  .t-ball{font-size:calc(var(--u)*42);letter-spacing:-.02em}
  .d-ball{margin-top:calc(var(--u)*6)}
  .d-ball p{font-size:calc(var(--u)*15);line-height:calc(var(--u)*27)}
  #p06 figure{margin-top:calc(var(--u)*30)}
  #p06 .back{margin-top:calc(var(--u)*40)}
  #p09{min-height:calc(var(--u)*1273);padding:calc(var(--u)*29) 0 calc(var(--u)*30)}
  .t-ai{font-size:calc(var(--u)*36);line-height:1.15;letter-spacing:-.04em}
  .d-ai{font-size:calc(var(--u)*25);line-height:calc(var(--u)*55.8);letter-spacing:-.045em;margin-top:calc(var(--u)*14)}
  #p09 figure{margin-top:calc(var(--u)*30)}
  #p09 .back{margin-top:calc(var(--u)*40)}
}

/* ---------- 404 ---------- */
#nf{min-height:60vh;padding:60px 20px 80px;background:#000}
#nf .h-big{font-size:clamp(60px,14vw,140px);letter-spacing:.2em;margin-right:-.2em;text-shadow:var(--glitch)}
#nf p{font-family:'Jost',sans-serif;font-weight:400;font-size:clamp(18px,4.5vw,26px);margin-top:18px}
#nf .btn-push{display:inline-flex;align-items:center;justify-content:center;width:auto;padding:0 22px;height:44px;margin-top:36px;text-decoration:none;font-size:16px}

/* ---------- Wix-style entrance animations (fadeIn / dropIn) ---------- */
@keyframes fx-fade{from{opacity:0}to{opacity:1}}
@keyframes fx-drop{from{scale:2}to{scale:1}}
.js .fx-fade:not(.fx-done):not(.fx-run),.js .fx-drop:not(.fx-done):not(.fx-run){opacity:0}
.js .fx-fade.fx-run{animation:fx-fade 1200ms cubic-bezier(.445,.05,.55,.95) backwards}
.js .fx-drop.fx-run{animation:fx-fade 960ms var(--ease-fade) backwards,fx-drop 1200ms var(--ease-drop) backwards}
@media (prefers-reduced-motion:reduce){
  .js .fx-fade,.js .fx-drop{opacity:1!important;animation:none!important}
  html{scroll-behavior:auto}
}