/* ============ shared ============ */
.kicker{font-weight:700;letter-spacing:.34em;text-transform:uppercase;font-size:11px;color:#8f877a;margin-bottom:14px}
section h2{font-family:'Bebas Neue';font-weight:400}

/* nav links (hero.css styles .nav span; ours are <a>) */
.nav a{color:var(--bone);text-decoration:none;opacity:.8;transition:.2s}
.nav a:hover{opacity:1}
.nav a.live{color:var(--acc);opacity:1}

/* intro picker: only on the hero, slides away on scroll */
#lab{transition:opacity .4s,transform .4s}
body.scrolled #lab{opacity:0;pointer-events:none;transform:translate(-50%,18px)}

/* ============ WORK ============ */
.work{max-width:1320px;margin:0 auto;padding:118px 34px 80px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:30px}
.sec-head h2{font-size:clamp(44px,7vw,96px);line-height:.88;letter-spacing:.01em}
.sec-sub{color:#9a9384;font-size:15px;max-width:300px;text-align:right;line-height:1.5}
.sec-sub b{color:var(--bone)}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;position:sticky;top:0;z-index:15;
  padding:16px 0;background:linear-gradient(#000 62%,rgba(0,0,0,0))}
.fbtn{font-family:Archivo;font-weight:600;font-size:13px;color:#cfc8ba;background:rgba(20,20,20,.6);border:1px solid #2a2a2a;
  padding:9px 15px;border-radius:999px;cursor:pointer;transition:.2s;white-space:nowrap}
.fbtn:hover{border-color:#5a5a5a;color:#fff}
.fbtn.on{background:rgba(236,230,218,.14);color:#fff;border-color:rgba(236,230,218,.55)}
.fbtn.on span{opacity:.7}
.fbtn span{opacity:.45;margin-left:7px;font-size:11px;font-weight:700}

.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.tile{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#101010;cursor:pointer}
.tile img{width:100%;height:100%;object-fit:cover;filter:grayscale(.45) brightness(.78);transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .4s}
.tile:hover img{transform:scale(1.06);filter:grayscale(0) brightness(1)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:30px 108px 13px 14px;font-weight:600;font-size:14px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.88));opacity:0;transform:translateY(8px);transition:.3s}
.tile:hover .cap{opacity:1;transform:none}
.tile .cat{display:block;margin-top:3px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);opacity:.85;font-weight:600}
.more-wrap{display:flex;justify-content:center;margin-top:40px}
.more{font-family:Archivo;font-weight:700;font-size:14px;letter-spacing:.04em;color:var(--bone);background:transparent;
  border:1px solid #333;padding:14px 28px;border-radius:999px;cursor:pointer;transition:.2s}
.more:hover{border-color:var(--bone);background:var(--bone);color:#0a0a0a}

/* ============ PORTFOLIO featured marquee ============ */
.pf-page{padding-top:62px}
.pf-marquee{position:relative;width:100%;height:min(74vh,760px);min-height:430px;overflow:hidden;background:#0a0a0a;border-bottom:1px solid #161616}
.pf-stage{position:absolute;inset:0;z-index:0}
.pf-slide{position:absolute;inset:0;background-size:cover;background-position:50% 36%;opacity:0;transform:scale(1.07);transition:opacity 1.1s ease,transform 8s linear}
.pf-slide.on{opacity:1;transform:scale(1)}
.pf-frame-wrap{position:absolute;inset:0;z-index:1;overflow:hidden}
.pf-frame-wrap iframe{position:absolute;top:50%;left:50%;width:max(100%,177.78vh);height:max(100%,56.25vw);transform:translate(-50%,-50%);border:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.pf-frame-wrap iframe.on{opacity:1}
.pf-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,.34) 56%,rgba(0,0,0,.12)),linear-gradient(rgba(0,0,0,.22),transparent 32%,rgba(0,0,0,.66))}
.pf-meta{position:absolute;left:0;right:0;bottom:0;z-index:3;max-width:1320px;margin:0 auto;padding:0 34px 46px}
.pf-kick{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--acc);margin-bottom:14px}
.pf-title{font-family:'Bebas Neue';font-weight:400;font-size:clamp(46px,7vw,120px);line-height:.9;letter-spacing:.01em;color:#fff;margin:0}
.pf-cat{font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#cfc8ba;margin-top:14px}
.pf-play{margin-top:26px;display:inline-flex;align-items:center;gap:9px;font-family:Archivo;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone);background:rgba(18,16,14,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(236,230,218,.32);padding:12px 20px;border-radius:999px;cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .25s}
.pf-play:hover,.pf-play:active{background:var(--bone);border-color:var(--bone);color:#0a0a0a;transform:translateY(-1px)}
.pf-pi{display:inline-flex;align-items:center;width:8px;height:10px}
.pf-pi svg{width:100%;height:100%;display:block;fill:currentColor}
.pf-dots{position:absolute;right:34px;bottom:56px;z-index:3;display:flex;gap:9px}
.pf-dot{width:32px;height:3px;background:rgba(255,255,255,.3);border:none;padding:0;cursor:pointer;transition:background .25s,transform .25s}
.pf-dot:hover{background:rgba(255,255,255,.6)}
.pf-dot.on{background:var(--bone)}
@media(max-width:700px){.pf-marquee{height:64vh;min-height:380px}.pf-meta{padding:0 20px 30px}.pf-dots{right:20px;bottom:auto;top:20px}}

/* identity strip — replaces the old two-column header */
.pf-strip{display:flex;align-items:center;gap:22px;margin:0 0 26px}
.pf-id{font-family:'Bebas Neue';font-weight:400;font-size:clamp(28px,3.2vw,44px);letter-spacing:.04em;color:#cfc8ba;margin:0;line-height:1}
.pf-rule{flex:1;height:1px;background:#222;min-width:30px}
.pf-id-r{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8f877a;white-space:nowrap}
.pf-id-r b{color:var(--bone)}
@media(max-width:560px){.pf-id-r{font-size:10px;letter-spacing:.12em}}

/* grid hover-to-play preview — still stays visible; UZER KHAN morph-loader bottom-right while buffering; video fades in only when ready (no black) */
.tile .pv{position:absolute;inset:0;z-index:1;overflow:hidden;opacity:0;transition:opacity .45s}
.tile.playing .pv{opacity:1}
.tile .pv iframe{position:absolute;inset:0;width:100%;height:100%;transform:scale(1.05);transform-origin:center;border:0;pointer-events:none}
.tile .cap{z-index:3}
/* corner HUD — morph-loader while buffering, ▶ cue otherwise; aligned with the caption row */
.tile .hud{position:absolute;right:14px;bottom:13px;z-index:3;display:flex;align-items:center;min-height:14px;opacity:0;transition:opacity .3s;pointer-events:none}
.tile:hover .hud{opacity:1}
.tile .hud-m,.tile .hud-p{display:none;text-shadow:0 1px 6px rgba(0,0,0,.85)}
.tile .hud-m{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.13em;color:var(--bone);white-space:nowrap}
.tile .hud-p{font-size:11px;color:var(--bone)}
.tile.loading .hud-m{display:inline}
.tile:hover:not(.loading) .hud-p{display:inline}

/* ============ ABOUT ============ */
.about{max-width:1320px;margin:0 auto;padding:104px 34px;border-top:1px solid #161616}
.about-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:60px}
@media(max-width:880px){.about-grid{grid-template-columns:1fr;gap:24px}}
.about-lead h2{font-size:clamp(56px,8.5vw,128px);line-height:.84;letter-spacing:.01em}
.about-body p{font-size:17px;line-height:1.72;color:#c7c0b4;margin-bottom:18px;max-width:640px}
.about-body b{color:var(--bone);font-weight:600}
.about-meta{display:flex;gap:42px;flex-wrap:wrap;margin:32px 0 26px;padding-top:26px;border-top:1px solid #1c1c1c}
.am-k{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8f877a;margin-bottom:6px}
.am-v{font-family:'Bebas Neue';font-size:23px;letter-spacing:.02em}
.brands{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.brands-k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8f877a;margin-right:6px}
.brand-chip{border:1px solid #262626;border-radius:999px;padding:7px 14px;font-size:13px;color:#c7c0b4}

/* ============ CONTACT ============ */
.contact{max-width:1320px;margin:0 auto;padding:110px 34px 0;border-top:1px solid #161616}
.contact-inner{max-width:920px}
.contact-h{font-size:clamp(54px,9vw,140px);line-height:.82;margin:0 0 16px;letter-spacing:.01em}
.contact-sub{color:#9a9384;font-size:18px;line-height:1.5;margin-bottom:42px;max-width:520px}
.contact-rows{display:flex;flex-direction:column;border-top:1px solid #1c1c1c}
.crow{display:flex;gap:24px;padding:22px 2px;border-bottom:1px solid #1c1c1c;text-decoration:none;color:var(--bone);align-items:baseline;transition:.22s}
a.crow:hover{padding-left:12px;color:#fff}
.cr-k{flex:0 0 84px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8f877a;padding-top:6px}
.cr-v{font-family:'Bebas Neue';font-size:clamp(22px,3vw,34px);letter-spacing:.02em;line-height:1.15}
.socials{display:flex;gap:24px;margin:42px 0 84px;flex-wrap:wrap}
.socials a{color:#c7c0b4;text-decoration:none;font-weight:600;font-size:14px;border-bottom:1px solid #333;padding-bottom:3px;transition:.2s}
.socials a:hover{color:#fff;border-color:var(--acc)}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:28px 0;border-top:1px solid #161616;color:#7f7868;font-size:13px}

/* ============ LIGHTBOX ============ */
.lightbox{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.93);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:24px}
.lightbox.open{display:flex}
.lb-inner{width:min(1120px,94vw)}
.lb-frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb-cap{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin-top:16px}
.lbc-t{font-family:'Bebas Neue';font-size:22px;letter-spacing:.02em}
.lbc-c{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8f877a;text-align:right}
.lb-close{position:fixed;top:20px;right:26px;background:none;border:none;color:#fff;font-size:26px;line-height:1;cursor:pointer;z-index:61;opacity:.8}
.lb-close:hover{opacity:1}

@media(max-width:640px){
  .work,.about,.contact{padding-left:20px;padding-right:20px}
  .sec-sub{text-align:left}
}

/* ============ shared inner-page header + footer ============ */
.site-head{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:17px 34px;background:rgba(8,8,8,.62);backdrop-filter:blur(12px);border-bottom:1px solid #161616}
.sh-brand{font-family:'Bebas Neue';font-size:26px;letter-spacing:.05em;text-decoration:none;color:var(--bone)}
.sh-nav{display:flex;gap:26px;font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase}
.sh-nav a{color:var(--bone);text-decoration:none;opacity:.78;transition:.2s}
.sh-nav a:hover{opacity:1}
.sh-nav a.cur{opacity:1;border-bottom:1px solid var(--bone);padding-bottom:2px}
@media(max-width:560px){.sh-nav{gap:15px;font-size:11px}}
/* no strip — transparent header with a soft top gradient for legibility */
.site-head.sh-clear{background:transparent;backdrop-filter:none;border-bottom-color:transparent}
.site-head.sh-clear::before{content:"";position:fixed;top:0;left:0;right:0;height:150px;z-index:-1;pointer-events:none;background:linear-gradient(rgba(0,0,0,.62),rgba(0,0,0,.26) 55%,transparent)}
.page{padding-top:62px}
.page .work{padding-top:46px}

/* one-line footer — © left, contact icons right */
.site-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid #161616;margin:90px auto 0;padding:22px 34px;max-width:1320px}
.sf-c{font-size:12.5px;letter-spacing:.06em;color:#7f7868}
.sf-ico{display:flex;align-items:center;gap:8px}
.sf-ico a{display:grid;place-items:center;width:38px;height:38px;border:1px solid #262626;color:#a39b8c;transition:.2s}
.sf-ico a:hover{color:#0a0a0a;background:var(--bone);border-color:var(--bone)}
.sf-ico svg{width:17px;height:17px;display:block}
@media(max-width:560px){.site-foot{justify-content:center;text-align:center;padding:20px}}

/* ============ HOME — category index (the work, eight ways in) ============
   Full-bleed rows of huge Bebas; the category's footage still lives INSIDE
   the letterforms via background-clip:text. Hover lights it on desktop,
   scroll-position lights it on touch. */
.cat-dex{padding:58px 0 8px}
.cd-head{display:flex;align-items:center;gap:22px;padding:0 34px;margin-bottom:24px}
.cd-head span{font-weight:700;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#8f877a;white-space:nowrap}
.cd-head .cdh-r{color:#6e675b}
.cd-head .cdh-rule{flex:1;height:1px;background:#222;min-width:40px}
@media(max-width:700px){.cd-head{padding:0 20px;gap:14px}.cd-head span{font-size:10px;letter-spacing:.16em}.cd-head .cdh-r{display:none}}
.cd-rows{border-top:1px solid #191919}
.cd-row{position:relative;display:flex;align-items:baseline;gap:3.4vw;padding:.7vw 34px 1vw;border-bottom:1px solid #191919;text-decoration:none;opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),background .25s}
.cd-row.in{opacity:1;transform:none}
.cd-row:hover{background:#0d0d0d}
.cd-n{font-weight:700;font-size:11px;letter-spacing:.22em;color:#6e675b;min-width:30px}
.cd-w{font-family:'Bebas Neue';font-size:clamp(54px,9vw,158px);line-height:1.02;letter-spacing:.02em;color:#d8d2c4;background-image:var(--img);background-size:cover;background-position:50% 30%;-webkit-background-clip:text;background-clip:text;transition:color .35s,letter-spacing .35s}
.cd-row:hover .cd-w,.cd-row.lit .cd-w{color:transparent;letter-spacing:.045em}
.cd-c{margin-left:auto;font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#7f7868;white-space:nowrap;transition:color .25s,transform .25s}
.cd-row:hover .cd-c,.cd-row.lit .cd-c{color:var(--acc);transform:translateX(-6px)}
@media(max-width:700px){.cd-row{gap:14px;padding:11px 20px 14px}.cd-n{display:none}.cd-c{font-size:10px;letter-spacing:.12em}}
/* closing row of the index — outlined, fills on hover */
.cd-all{position:relative;display:flex;align-items:baseline;gap:3.4vw;padding:1.2vw 34px 1.5vw;border-bottom:1px solid #191919;text-decoration:none;opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),background .25s}
.cd-all.in{opacity:1;transform:none}
.cd-all:hover{background:#0d0d0d}
.cd-all .cd-n{font-weight:700;font-size:11px;letter-spacing:.22em;color:#6e675b;min-width:30px}
.cd-all .cd-aw{font-family:'Bebas Neue';font-size:clamp(54px,9vw,158px);line-height:1.02;letter-spacing:.02em;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px var(--bone);transition:color .35s,letter-spacing .35s}
.cd-all:hover .cd-aw{color:var(--bone);letter-spacing:.045em}
.cd-all .cd-c{margin-left:auto;font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#7f7868;white-space:nowrap;transition:color .25s,transform .25s}
.cd-all:hover .cd-c{color:var(--acc);transform:translateX(-6px)}
@media(max-width:700px){.cd-all{gap:14px;padding:14px 20px 17px}.cd-all .cd-n{display:none}.cd-all .cd-c{font-size:10px;letter-spacing:.12em}.cd-all .cd-aw{-webkit-text-stroke-width:1px}.cd-aw-x{display:none}.cd-c-x{display:none}}
.view-all{display:inline-flex;align-items:center;gap:10px;margin-top:34px;font-family:'Bebas Neue';font-size:26px;letter-spacing:.04em;color:var(--bone);text-decoration:none;border-bottom:1px solid #333;padding-bottom:4px;transition:.2s}
.view-all:hover{border-color:var(--bone);gap:16px}

/* ============ mobile menu — "the menu is a cut" ============ */
.mm-burger{position:fixed;top:16px;right:16px;z-index:72;width:38px;height:38px;display:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;background:rgba(10,10,10,.5);border:1px solid #242424;backdrop-filter:blur(8px);cursor:pointer;border-radius:0;padding:0}
.mm-burger span{display:block;width:16px;height:1.5px;background:var(--bone);transition:transform .3s,opacity .3s}
.mm-burger.mm-x span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.mm-burger.mm-x span:nth-child(2){opacity:0}
.mm-burger.mm-x span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
@media(max-width:880px){
  .mm-burger{display:flex}
  .sh-nav{display:none}
  .top .nav{display:none}
}
body.mm-lock{overflow:hidden}
.mm-ov{position:fixed;inset:0;z-index:70;display:none}
.mm-ov.mm-live{display:block}
.mm-inner{position:absolute;inset:0;z-index:1;background:#070707;opacity:0;transition:opacity .22s;display:flex;flex-direction:column;justify-content:space-between;padding:18px 22px 26px}
.mm-ov.mm-open .mm-inner{opacity:1}
.mm-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.mm-cells{position:absolute;inset:0;z-index:3;pointer-events:none}
.mm-cell{position:absolute;background:#000;color:var(--bone);font-family:'DM Mono',monospace;font-weight:500;line-height:1;display:flex;align-items:center;justify-content:center;visibility:hidden;overflow:hidden}
.mm-top .mm-brand{font-family:'Bebas Neue';font-size:24px;letter-spacing:.05em;color:var(--bone);text-decoration:none}
.mm-links{display:flex;flex-direction:column;margin:auto 0}
.mm-link{display:flex;align-items:baseline;gap:16px;text-decoration:none;color:#b8b1a2;padding:12px 0;border-bottom:1px solid #1c1c1c}
.mm-link:first-child{border-top:1px solid #1c1c1c}
.mm-link .mm-n{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.2em;color:#8f877a}
.mm-link .mm-w{font-family:'Bebas Neue';font-size:clamp(52px,14vw,96px);line-height:.9;letter-spacing:.02em}
.mm-link.is-cur{color:var(--bone)}
.mm-link.is-cur .mm-n{color:var(--acc)}
.mm-link:active .mm-w,.mm-link:hover .mm-w{color:#fff}
.mm-meta{display:flex;flex-direction:column;gap:9px}
.mm-meta>a{color:#cfc8ba;text-decoration:none;font-family:'DM Mono',monospace;font-size:14.5px;letter-spacing:.04em}
.mm-soc{display:flex;gap:18px;margin-top:2px}
.mm-soc a{color:#cfc8ba;text-decoration:none;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid #333;padding-bottom:2px}
.mm-base{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7f7868;margin-top:4px}
body.mm-lock .lab{opacity:0!important;pointer-events:none}