:root{--red:#ffffff;--ink:#f2efe9}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
body{background:#070707;color:var(--ink);font-family:'Space Mono',monospace;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.anton{font-family:'Anton',sans-serif;text-transform:uppercase;line-height:.85;font-weight:400}
a{color:inherit;text-decoration:none}img{display:block}
.grain{position:fixed;inset:-60%;z-index:60;pointer-events:none;opacity:.10;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");animation:grain .32s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(-2%,-1%)}}
.scan{position:fixed;inset:0;z-index:59;pointer-events:none;opacity:.4;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px)}
nav{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;justify-content:space-between;align-items:center;padding:16px clamp(14px,2.4vw,32px);mix-blend-mode:difference}
nav .brand img{height:34px}
.cats{display:flex;gap:clamp(8px,1.4vw,20px);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.cats a{opacity:.6;transition:opacity .2s}.cats a:hover{opacity:1}.cats a.on{opacity:1;border-bottom:1px solid #fff}
nav .rt{display:flex;gap:16px;align-items:center;font-size:12px;text-transform:uppercase;color:#fff}
nav .rt a.btn{border:1px solid #fff;padding:5px 11px}
@media(max-width:760px){.cats{gap:10px;font-size:11px}}
@media(max-width:520px){.cats{display:none}}
.hero{position:relative;height:100vh;min-height:520px;overflow:hidden;background:#050505}
#stage{position:absolute;inset:0;overflow:hidden}
#la,#lb{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .8s ease,transform 6s ease;transform:scale(1.06)}
#stage .on{opacity:1;transform:scale(1)}
.vig{position:absolute;inset:0;pointer-events:none;z-index:20;background:radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(0,0,0,.55) 100%),linear-gradient(0deg,rgba(0,0,0,.78),transparent 42%),linear-gradient(180deg,rgba(0,0,0,.45),transparent 30%)}
#idx{position:absolute;top:60px;right:clamp(14px,2.4vw,32px);z-index:35;font-size:12px;letter-spacing:.12em;color:#fff;text-transform:uppercase;mix-blend-mode:difference}
#ghost{position:absolute;top:6vh;left:2vw;z-index:22;font-family:'Anton',sans-serif;font-size:34vh;color:rgba(255,255,255,.05);line-height:.8;pointer-events:none;transform:rotate(-4deg)}
#caption{position:absolute;left:clamp(14px,3vw,44px);bottom:clamp(52px,8vh,84px);z-index:30;max-width:80vw}
#tag{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--red);margin-bottom:6px;transform:translateX(4px)}
#title{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(34px,7vw,104px);line-height:.86;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.6);transform:rotate(-1.6deg)}
#corner{position:absolute;left:0;bottom:0;z-index:35;background:#f2efe9;color:#0a0a0a;padding:9px 15px;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
#count{position:absolute;right:clamp(14px,3vw,44px);bottom:clamp(20px,3vh,34px);z-index:30;font-size:11px;letter-spacing:.18em;color:#c9c6bf;text-transform:uppercase;mix-blend-mode:difference}
.zone{position:absolute;top:60px;bottom:60px;width:42%;z-index:25}#zl{left:0;cursor:w-resize}#zr{right:0;cursor:e-resize}
.arw{position:absolute;top:50%;transform:translateY(-50%);z-index:28;font-size:26px;color:#fff;opacity:.5;mix-blend-mode:difference;transition:opacity .2s,transform .2s;cursor:pointer;user-select:none}
.arw:hover{opacity:1}#prev{left:clamp(10px,1.6vw,26px)}#next{right:clamp(10px,1.6vw,26px)}
.scrollcue{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:30;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:#c9c6bf;mix-blend-mode:difference;animation:bob 2s infinite}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}}
.below{position:relative;z-index:5;background:#070707;border-top:1px solid #1a1a1a}
.lab{font-size:11px;letter-spacing:.2em;text-transform:uppercase}
/* MENU bars */
.menu{padding:clamp(30px,4vw,54px) 0 0}
.menu .mlab{padding:0 clamp(16px,3vw,40px) 14px;color:#ff36c2}
.bar{display:flex;align-items:center;gap:18px;padding:clamp(14px,2.2vw,26px) clamp(16px,3vw,40px);border-top:1px solid #1e1e1e;color:#efece6;transition:background .2s,color .2s,padding-left .2s}
.bar:last-child{border-bottom:1px solid #1e1e1e}
.bar .mn{font-size:12px;color:#8a887f}
.bar h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(30px,6vw,74px);line-height:.85;flex:1}
.bar .ma{font-size:18px;opacity:.5}
.bar:hover{background:#efece6;color:#070707;padding-left:clamp(24px,4vw,56px)}
.bar:hover .mn,.bar:hover .ma{color:#070707}
/* brands / services / insta / contact */
.brands{padding:clamp(38px,5vw,64px) 0 clamp(28px,3vw,40px)}
.brands .lab{padding:0 clamp(16px,3vw,40px);margin-bottom:20px;color:#ff36c2}
.marq{display:flex;overflow:hidden;border-top:1px solid #1a1a1a;border-bottom:1px solid #1a1a1a;padding:22px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marq .mt{display:flex;flex:0 0 auto;align-items:center;animation:scrollx 46s linear infinite;will-change:transform}
.marq:hover .mt{animation-play-state:paused}
.marq img{height:clamp(26px,3.2vw,42px);width:auto;flex:0 0 auto;margin:0 clamp(20px,2.6vw,42px);opacity:.62;transition:opacity .25s ease,transform .25s ease}
.marq img:hover{opacity:1;transform:scale(1.08)}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.marq .mt{animation:none}}
.services{padding:clamp(30px,5vw,64px) clamp(16px,3vw,40px);border-top:1px solid #1a1a1a;border-bottom:1px solid #1a1a1a;font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(20px,3.4vw,46px);line-height:1.05;color:#efece6}
.services .sl{color:#ffd21e;margin:0 .2em}
.insta{padding:clamp(50px,7vw,100px) clamp(16px,3vw,40px);border-bottom:1px solid #1a1a1a}
.insta .lab{margin-bottom:20px;color:#3dff64}
.insta a.big{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(44px,10vw,150px);line-height:.85;color:#efece6;display:inline-block;transition:color .2s;opacity:.92}
.insta a.big:hover{opacity:1;color:#fff}.insta a.big .ar{font-size:.4em;vertical-align:super;color:#ff36c2}
.insta .sub{margin-top:16px;font-size:13px;color:#8a887f;max-width:44ch}
.contact2{padding:clamp(60px,9vw,140px) clamp(16px,3vw,40px)}
.contact2 .lab{margin-bottom:18px;color:#ffd21e}
.contact2 a.mailbig{font-family:'Anton',sans-serif;font-size:clamp(24px,4.6vw,64px);color:#efece6;word-break:break-word;display:inline-block;transition:color .2s}
.contact2 a.mailbig:hover{color:#fff}
.contact2 .crow{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:26px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8a887f}
.contact2 .crow a:hover{color:#efece6}
footer{border-top:1px solid #1a1a1a;padding:22px clamp(16px,3vw,40px);color:#4c4b45;font-size:10px;letter-spacing:.06em;text-transform:uppercase;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
/* CATEGORY PAGE */
.page{padding-top:56px;min-height:100vh}
.cat-h{display:flex;align-items:baseline;gap:clamp(10px,2vw,20px);padding:clamp(24px,4vw,54px) clamp(16px,3vw,40px) clamp(14px,2vw,22px);border-top:2px solid #efece6}
.cat-h .num{font-size:12px;color:#8a887f}
.cat-h h1{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(52px,13vw,180px);line-height:.8;color:#efece6;flex:1}
.cat-h .cnt{font-size:12px;color:#8a887f;letter-spacing:.14em}
.gmason{column-count:3;column-gap:10px;padding:12px clamp(16px,3vw,40px) clamp(40px,5vw,80px)}
@media(max-width:560px){.gmason{column-count:2;column-gap:6px}.gmason figcaption{display:none}}
.gmason figure{position:relative;margin:0 0 10px;break-inside:avoid;overflow:hidden;background:#111;border:1px solid #1a1a1a;cursor:pointer}
.gmason img{width:100%;height:auto;display:block;filter:contrast(1.03);transition:transform .8s}
.gmason figure:hover img{transform:scale(1.04)}
.gmason figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 14px 14px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.18) 62%,transparent);pointer-events:none}
.gmason .cn{font-size:15px;color:#fff;letter-spacing:.01em}.gmason .tg{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#d2d0c9}
/* lightbox */
.lb{position:fixed;inset:0;z-index:200;display:none;flex-direction:column;background:rgba(6,6,6,.97);opacity:0;transition:opacity .25s}
.lb.on{display:flex;opacity:1}
.lb .lb-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:pan-y;min-height:0}
.lb .lb-img{max-width:92vw;max-height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}
.lb .lb-bar{display:flex;align-items:baseline;gap:clamp(10px,2vw,20px);padding:clamp(14px,2.4vw,24px) clamp(16px,3vw,40px) clamp(18px,3vw,30px);border-top:1px solid #1e1e1e}
.lb .lb-cn{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(20px,3.4vw,40px);line-height:.9;color:#efece6;flex:1}
.lb .lb-tg{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red,#ff2d2d)}
.lb .lb-count{font-size:11px;letter-spacing:.14em;color:#8a887f}
.lb .lb-x{position:absolute;top:16px;right:18px;z-index:3;font-size:30px;line-height:1;color:#efece6;background:none;border:none;cursor:pointer;font-family:'Space Mono',monospace}
.lb .lb-arw{position:absolute;top:0;bottom:0;width:22%;z-index:2;display:flex;align-items:center;background:none;border:none;color:#efece6;font-size:34px;cursor:pointer;opacity:.55;transition:opacity .2s;font-family:'Space Mono',monospace}
.lb .lb-arw:hover{opacity:1}
.lb .lb-prev{left:0;justify-content:flex-start;padding-left:clamp(12px,2vw,28px)}
.lb .lb-next{right:0;justify-content:flex-end;padding-right:clamp(12px,2vw,28px)}
@media(max-width:560px){.lb .lb-arw{display:none}.lb .lb-img{max-width:100vw}}
.pnav{display:flex;justify-content:space-between;padding:clamp(30px,4vw,60px) clamp(16px,3vw,40px);border-top:1px solid #1a1a1a;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8a887f}
.pnav a:hover{color:#efece6}