@font-face{font-family:'BiggieWorks';src:url('/brand/fonts/BiggieWorks-Regular.woff2') format('woff2'),url('/brand/fonts/BiggieWorks-Regular.ttf') format('truetype');font-display:swap}
:root{
  --bg:#0b0b0c;--card:#141416;--card2:#18181b;--border:rgba(255,255,255,.09);
  --text:#ececec;--muted:rgba(255,255,255,.74);
  --bw-gold:#C69D4D;--bw-gold-lt:#D3B160;--bw-silver:#A6ABAF;--bw-silver-dk:#979DA0;
  --teal:#30aab2;--green:#2ecc71;--szm:#6FAFDF;--imrg:#ca6370;
  --face:'BiggieWorks',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--face);letter-spacing:.02em;line-height:1.65;overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.face{text-transform:uppercase;letter-spacing:.06em}
.s{color:var(--bw-silver)}.g{color:var(--bw-gold)}
/* accent and text colours as classes: the CSP blocks inline style attributes */
.acc-teal{--accent:var(--teal)}.acc-imrg{--accent:var(--imrg)}.acc-szm{--accent:var(--szm)}
.c-teal{color:var(--teal)}.c-imrg{color:var(--imrg)}.c-szm{color:var(--szm)}.c-green{color:var(--green)}.c-white{color:#fff}

/* header */
header{position:sticky;top:0;z-index:20;background:rgba(11,11,12,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.bar{display:flex;align-items:center;justify-content:space-between;height:60px;gap:12px}
.lock{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:17px;white-space:nowrap}
.lock img{width:40px;height:auto}
.lock .llc{font-size:11px;margin-left:6px}
nav{display:flex;gap:22px}
nav a{text-decoration:none;text-transform:uppercase;font-size:12px;letter-spacing:.14em;color:var(--muted);transition:color .2s}
nav a:hover,nav a[aria-current="page"]{color:var(--bw-gold-lt)}

/* hero */
.hero{position:relative;padding:28px 0 10px;text-align:center;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10% auto;height:120%;background:radial-gradient(ellipse at 50% 40%,rgba(198,157,77,.13),transparent 60%);pointer-events:none}
.stage{position:relative;max-width:820px;margin:0 auto;aspect-ratio:3/2}
.stage img{width:100%;height:100%;object-fit:contain;display:block}
.lede{position:relative;font-size:clamp(17px,2.3vw,21px);color:var(--muted);max-width:42ch;margin:4px auto 0}
.replay{margin-top:18px;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;border:1px solid rgba(198,157,77,.55);background:none;color:var(--bw-gold-lt);font-family:var(--face);text-transform:uppercase;letter-spacing:.14em;font-size:11px;cursor:pointer;transition:background .2s,border-color .2s}
.replay:hover{background:rgba(198,157,77,.1);border-color:var(--bw-gold)}
.replay svg{vertical-align:middle}

/* sections */
section{padding:72px 0;scroll-margin-top:60px}
.eyebrow{text-transform:uppercase;letter-spacing:.24em;font-size:12px;color:var(--bw-gold);margin:0 0 10px}
h1,h2{font-family:var(--face);text-transform:uppercase;letter-spacing:.04em;font-weight:400;font-size:clamp(28px,4.4vw,42px);line-height:1.15;margin:0 0 22px}
.shine{background:linear-gradient(100deg,var(--bw-silver) 0%,#e7e9ea 18%,var(--bw-silver) 34%,var(--bw-silver-dk) 50%,var(--bw-gold-lt) 66%,#f1dca2 78%,var(--bw-gold) 92%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s ease-in-out infinite}
@keyframes shine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.about p{font-size:clamp(16px,1.9vw,18px);max-width:62ch;margin:0 0 18px}
.about p:first-of-type{font-size:clamp(18px,2.3vw,22px);color:#fff}
.rule{height:1px;background:linear-gradient(90deg,transparent,rgba(198,157,77,.5),transparent);border:0;margin:0}
.center{text-align:center}

/* work */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--border);border-radius:16px;padding:24px 22px 22px;overflow:hidden;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.card::after{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--accent)}
.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 18px 40px -22px var(--accent)}
.card .shot{display:block;width:calc(100% + 44px);padding:0;border:0;border-radius:0;cursor:zoom-in;font:inherit;color:inherit}
.card .shot:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.card .shot .more{position:absolute;right:12px;bottom:12px;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.62);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);color:#fff;text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s}
.card .shot:hover .more{background:color-mix(in srgb,var(--accent) 35%,#000)}
.card .shot{position:relative;margin:-24px -22px 20px;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--border);background:radial-gradient(ellipse at 50% 115%,color-mix(in srgb,var(--accent) 38%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,#0d0d0f),#0d0d0f)}
.card .shot img{position:absolute;left:50%;top:12%;width:58%;height:auto;transform:translateX(-50%);border:5px solid #2b2b30;border-bottom:0;border-radius:22px 22px 0 0;box-shadow:0 -8px 40px -12px color-mix(in srgb,var(--accent) 60%,transparent),0 0 0 1px rgba(255,255,255,.06);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.card:hover .shot img{transform:translate(-50%,-7px)}
.card .ic{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 13%,transparent);margin-bottom:16px}
.card .ic img{width:52px;height:52px;border-radius:13px}
.card h3{text-transform:uppercase;font-weight:400;letter-spacing:.05em;font-size:21px;line-height:1.2;margin:0 0 4px}
.card .kind{font-size:13px;color:var(--accent);margin:0 0 14px}
.card p{font-size:15px;color:var(--muted);margin:0 0 12px}
.card ul{margin:0 0 16px;padding:0;list-style:none;font-size:14px}
.card li{padding-left:18px;position:relative;margin:5px 0;color:var(--text)}
.card li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.card .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;border-top:1px solid var(--border)}
.card .note{font-size:12.5px;line-height:1.5;color:var(--muted);margin:12px 0 0}
.card sup{color:var(--accent);font-size:.7em;line-height:0}
.tag{text-transform:uppercase;font-size:10.5px;letter-spacing:.16em;color:var(--accent)}
.go{text-transform:uppercase;font-size:12px;letter-spacing:.12em;text-decoration:none;color:var(--accent);display:inline-flex;align-items:center;gap:6px}
.go svg{vertical-align:middle;transition:transform .2s}
.go:hover svg{transform:translateX(3px)}
.card .links{display:inline-flex;gap:14px}

/* gallery lightbox */
.lb{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;background:rgba(6,6,7,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lb[hidden]{display:none}
.lb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;max-width:1080px;width:100%;margin:0 auto}
.lb-title{text-transform:uppercase;letter-spacing:.1em;font-size:16px}
.lb-btn{display:grid;place-items:center;width:42px;height:42px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;transition:border-color .2s,background .2s}
.lb-btn:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,var(--card))}
.lb-btn:disabled{opacity:.3;cursor:default}
.lb-body{flex:1;min-height:0;display:flex;align-items:center;gap:10px;max-width:1080px;width:100%;margin:0 auto;padding:0 8px}
.lb-track{flex:1;min-width:0;height:100%;display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 0 0}
.lb-track::-webkit-scrollbar{display:none}
.lb-slide{flex:0 0 100%;scroll-snap-align:center;padding:0 14px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;margin:0;min-height:0}
.lb-slide img{display:block;height:auto;max-height:calc(100% - 52px);max-width:100%;width:auto;aspect-ratio:600/1298;border:6px solid #2b2b30;border-radius:30px;background:#000;box-shadow:0 30px 80px -30px color-mix(in srgb,var(--accent) 55%,transparent)}
.lb-slide figcaption{color:var(--muted);font-size:14px;text-align:center;max-width:36ch}
.lb-dots{display:flex;justify-content:center;padding:7px 0 15px}
.lb-dots button{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:none;cursor:pointer}
.lb-dots button::before{content:"";width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25)}
.lb-dots button[aria-current="true"]::before{background:var(--accent)}
.lb-dots button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (max-width:560px){.lb-body .lb-btn{display:none}.lb-body{padding:0}}

/* film: an animation in a player frame */
.film{background:#000;border:1px solid var(--border);border-radius:18px;overflow:hidden}
.film .stage{max-width:none}
.film .ctl{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--border);background:var(--card)}
.film .ctl .t{text-transform:uppercase;letter-spacing:.1em;font-size:13px}
.film .ctl .m{font-size:12px;color:var(--muted)}
.film .replay{margin:0;flex:none}
.film .ctl>div:first-child,.panel .info>div:first-child{text-align:left}

/* logos page */
.pair{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.panel{margin:0;background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--border);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.panel .show{display:grid;place-items:center;aspect-ratio:3/2;padding:6%;background:#000}
.panel .show img{width:100%;height:100%;object-fit:contain;display:block}
.panel .show.cover{padding:0}
.panel .show.pad{padding:12%}
.panel .show.cover img{object-fit:cover}
.panel .show.checker{background:repeating-conic-gradient(#26262a 0 25%,#1b1b1e 0 50%) 0 0/22px 22px}
.panel .info{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;padding:14px 16px;border-top:1px solid var(--border)}
.panel .t{text-transform:uppercase;letter-spacing:.1em;font-size:13px}
.panel .m{font-size:12px;color:var(--muted)}
.dl{display:flex;gap:8px;flex-wrap:wrap}
.dl a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid rgba(198,157,77,.55);color:var(--bw-gold-lt);text-decoration:none;text-transform:uppercase;letter-spacing:.12em;font-size:11px;transition:background .2s,border-color .2s}
.dl a:hover{background:rgba(198,157,77,.1);border-color:var(--bw-gold)}
.sub{color:var(--muted);max-width:60ch;margin:-8px 0 26px}
.center .sub{margin-left:auto;margin-right:auto}

/* legal */
.legal{max-width:70ch}
.legal h2{font-size:clamp(18px,2.4vw,22px);margin:38px 0 10px;color:var(--bw-gold-lt)}
.legal p,.legal li{color:var(--muted);font-size:16px}
.legal p{margin:0 0 14px}
.legal ul{padding-left:22px;margin:0 0 14px}
.legal li{margin:6px 0}
.legal b{color:var(--text);font-weight:400}
.legal a{color:var(--bw-gold-lt)}
.summary{border:1px solid var(--border);border-left:3px solid var(--bw-gold);border-radius:10px;background:var(--card);padding:16px 18px;margin:0 0 10px}
.summary p{margin:0;color:var(--text)}
.date{text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--bw-gold);margin:-8px 0 26px}

/* contact */
.contact{text-align:center}
.mail{display:inline-block;font-size:clamp(19px,3vw,26px);color:var(--bw-gold-lt);text-decoration:none;border-bottom:1px solid rgba(198,157,77,.45);padding-bottom:3px;transition:border-color .2s;word-break:break-all}
.mail:hover{border-color:var(--bw-gold-lt)}

footer{border-top:1px solid var(--border);padding:34px 0 40px;text-align:center;font-size:13px;color:var(--muted)}
footer .lockup{font-size:15px;margin-bottom:6px}
footer .fnav{margin-top:6px}
footer a{color:var(--muted)}footer a:hover{color:var(--bw-gold-lt)}
footer .socials{display:flex;justify-content:center;gap:6px;margin:4px 0 8px}
footer .socials a{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;transition:color .2s,background .2s}
footer .socials a:hover{background:rgba(198,157,77,.1)}

/* entrance */
/* hidden only once site.js has marked <html class="js">, so the page reads fine without JS */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.grid .rv:nth-child(2),.pair .rv:nth-child(2){transition-delay:.12s}.grid .rv:nth-child(3){transition-delay:.24s}

@media (max-width:860px){.grid,.pair{grid-template-columns:1fr}.grid .rv:nth-child(n),.pair .rv:nth-child(n){transition-delay:0s}}
@media (max-width:560px){nav{gap:0}nav a:not(.keep){display:none}section{padding:56px 0}.lock{font-size:15px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.js .rv{opacity:1;transform:none;transition:none}.shine{animation:none}
  .card,.card:hover{transition:none;transform:none}
  .card .shot img,.card:hover .shot img{transition:none;transform:translateX(-50%)}
}