:root{
  --bg:#09060a; --card:#130d14; --text:#f2e9ef; --muted:#b4a7b1; --dim:#7a6d78;
  --c1:#972379; --c2:#a73468; --c3:#c55448; --c4:#db6b31; --c5:#f1811b;
  --grad:linear-gradient(90deg,#972379,#a73468,#c55448,#db6b31,#f1811b);
  --line:rgba(197,84,72,.22); --line-hi:rgba(219,107,49,.5);
  --expo:cubic-bezier(.16,1,.3,1); --out:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(20px,4vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 'Inter',system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gutter)}
.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(--c5);outline-offset:3px;border-radius:6px}
::selection{background:var(--c2);color:#fff}

/* cursor */
.cursor-dot,.cursor-ring{display:none}
@media (hover:hover) and (pointer:fine){
  html.has-cursor,html.has-cursor a,html.has-cursor button{cursor:none}
  html.has-cursor .card.playing,html.has-cursor .card.playing *{cursor:auto}
  .cursor-dot,.cursor-ring{display:block;position:fixed;top:0;left:0;pointer-events:none;z-index:10000;opacity:0;transition:opacity .25s}
  .cursor-dot{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#f1811b;mix-blend-mode:difference}
  .cursor-ring{width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;padding:1.5px;background:var(--grad);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
    transition:opacity .25s,width .3s var(--expo),height .3s var(--expo),margin .3s var(--expo)}
  html.cursor-on .cursor-dot{opacity:1}
  html.cursor-on .cursor-ring{opacity:.5}
  html.cursor-on.cursor-hover .cursor-ring{width:56px;height:56px;margin:-28px 0 0 -28px;opacity:.8}
  html.cursor-on.cursor-hide .cursor-dot,html.cursor-on.cursor-hide .cursor-ring{opacity:0}
}

/* header */
.site-header{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:12px;right:12px;height:56px;z-index:100;pointer-events:none}
.header-in{position:relative;pointer-events:auto;max-width:1280px;height:100%;margin:0 auto;padding:0 10px 0 22px;display:flex;align-items:center;justify-content:space-between;border-radius:100px}
.header-in>*{position:relative;z-index:2}
/* glass capsule, revealed once scrolled: same language as the play button */
.header-in::before,.header-in::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s var(--expo)}
.header-in::after{z-index:0;background:linear-gradient(rgba(9,6,10,.5),rgba(9,6,10,.5)),rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:0 10px 40px rgba(0,0,0,.35),inset 0 0 18px rgba(255,255,255,.05)}
.lg-svg .header-in::after{-webkit-backdrop-filter:url(#liquid-glass-bar) blur(14px) saturate(1.6);backdrop-filter:url(#liquid-glass-bar) blur(14px) saturate(1.6)}
.header-in::before{z-index:1;padding:1.5px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.22) 40%,rgba(255,255,255,.08) 70%,rgba(255,255,255,.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.site-header.scrolled .header-in::before,.site-header.scrolled .header-in::after{opacity:1}
.logo{min-width:0;margin-right:10px;flex:0 1 auto}.logo img{height:38px;width:auto;max-width:100%}
.nav{display:flex;align-items:center;gap:28px}
.nav-link{position:relative;font:500 .82rem 'Inter';letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:6px 0;transition:color .3s}
.nav-link::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--grad);transition:width .4s var(--expo)}
.nav-link:hover{color:var(--text)}.nav-link:hover::after{width:100%}

/* pills */
.pill{white-space:nowrap;display:inline-block;background:var(--grad);color:#fff;border-radius:100px;font:500 .82rem 'Inter';letter-spacing:.1em;text-transform:uppercase;text-align:center;transition:transform .35s var(--expo),box-shadow .35s var(--expo)}
.pill-sm{padding:11px 26px}
.pill-lg{padding:20px 48px;font-size:.95rem}
.pill:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(197,84,72,.4)}
.pill-lg:hover{transform:translateY(-3px) scale(1.02)}

/* work */
.work{padding:clamp(110px,16vh,170px) 0 clamp(70px,10vh,120px)}
.section-title{font:400 clamp(2.6rem,5.5vw,4.2rem)/1 'Bebas Neue',sans-serif;letter-spacing:.02em;margin:0}
.filters{position:sticky;top:78px;z-index:50;display:flex;gap:8px;width:fit-content;max-width:100%;margin:22px 0 32px;padding:7px;flex-wrap:wrap;border-radius:100px;
  background:linear-gradient(rgba(9,6,10,.45),rgba(9,6,10,.45)),rgba(255,255,255,.035);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.35),0 8px 28px rgba(0,0,0,.25)}
.tag{background:transparent;border:1px solid transparent;border-radius:100px;padding:9px 24px;font:500 .8rem 'Inter';letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .3s,border-color .3s,background .3s,transform .3s var(--expo)}
.tag:hover{color:var(--text)}
.tag.is-active{background:var(--grad) border-box;border-color:transparent;color:#fff}
.feed{display:flex;gap:32px;align-items:flex-start;min-height:70vh;transition:opacity .28s ease,transform .28s ease}
.feed.swap{opacity:0;transform:translateY(10px)}
.col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:32px}
@media (max-width:999px){.feed,.col{gap:24px}}
.sentinel{height:1px}
.noscript{color:var(--muted)}

.card{position:relative;border-radius:12px;overflow:hidden;background:var(--card);border:1px solid var(--line);width:100%;
  transition:transform .5s var(--expo),border-color .5s var(--expo),box-shadow .5s var(--expo)}
.js .card.pre{transition:opacity .6s var(--out) var(--d,0s),transform .6s var(--out) var(--d,0s)}
.js .card.pre:not(.in){opacity:0;transform:translateY(24px)}
.card:not(.playing):hover{transform:translateY(-6px);border-color:var(--line-hi);box-shadow:0 20px 60px rgba(0,0,0,.45),0 0 0 1px var(--line-hi)}
.card.playing{box-shadow:none}
.card-btn{all:unset;display:block;position:absolute;inset:0;cursor:pointer}
.card-btn:focus-visible{outline:2px solid var(--c5);outline-offset:-3px}
.card img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.card .scrim{position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(180deg,transparent,rgba(9,6,10,.72));opacity:0;transition:opacity .5s var(--expo);pointer-events:none}
.card .scrim.on{opacity:1}
.card:hover .scrim{opacity:1;height:55%}
/* liquid-glass play button: frosted disc that refracts the poster; the edge light comes from the
   SVG displacement (strongest at the rim) plus faint inset highlights, never a nested backdrop layer,
   because a backdrop-filter inside another backdrop-filter only sees the parent's haze */
.card{container-type:size}
.card .play{--d:clamp(48px,15cqmin,76px);position:absolute;left:50%;top:50%;width:var(--d);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--d)/-2);border-radius:50%;display:grid;place-items:center;pointer-events:none;
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(12px) saturate(1.7) brightness(1.12);backdrop-filter:blur(12px) saturate(1.7) brightness(1.12);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14),inset 1px 1.5px 1px -.5px rgba(255,255,255,.2),inset -1px -1.5px 2px -.5px rgba(255,255,255,.10),inset 0 0 10px rgba(255,255,255,.05),0 6px 18px rgba(0,0,0,.18);
  transition:transform .5s var(--expo),opacity .35s ease,background .35s ease}
.lg-svg .card .play{-webkit-backdrop-filter:url(#liquid-glass) blur(12px) saturate(1.7) brightness(1.12);backdrop-filter:url(#liquid-glass) blur(12px) saturate(1.7) brightness(1.12)}
.lg-svg .card:hover .play{-webkit-backdrop-filter:url(#liquid-glass-hover) blur(12px) saturate(1.8) brightness(1.16);backdrop-filter:url(#liquid-glass-hover) blur(12px) saturate(1.8) brightness(1.16)}
.card:hover .play{background:rgba(255,255,255,.08)}
/* specular: a soft top-left sheen and a fainter bottom-right bounce, no outline */
.card .play::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(120% 90% at 28% 12%,rgba(255,255,255,.16),rgba(255,255,255,0) 42%),radial-gradient(90% 70% at 78% 96%,rgba(255,255,255,.07),rgba(255,255,255,0) 45%)}
/* dome falloff: clear in the middle, a touch lighter toward the edge */
.card .play::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0) 62%,rgba(255,255,255,.05) 100%);pointer-events:none}
.card .play svg{position:relative;z-index:1;width:74%;height:74%;margin-left:4%;overflow:visible;filter:drop-shadow(0 1px 4px rgba(0,0,0,.22))}
.card .play{pointer-events:auto;cursor:pointer}
.card:not(.playing) .play:hover{transform:scale(1.16)}
.card:not(.playing) .play:active{transform:scale(1.04);transition-duration:.15s}
.card .meta{position:absolute;left:14px;right:14px;bottom:14px;display:flex;flex-direction:column;gap:3px;pointer-events:none;transition:opacity .35s ease}
.card .title{font:500 .82rem/1.3 'Inter';color:var(--text);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s var(--expo);text-shadow:0 1px 8px rgba(0,0,0,.5)}
.card:hover .title{opacity:.92;transform:none}
.card .client-row{display:flex;gap:8px;align-items:center}
.card .client{font:600 .72rem/1.2 'Inter';letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.card .badge{background:var(--grad);border-radius:100px;padding:1px 8px;font:600 .64rem/1.5 'Inter';letter-spacing:.1em;color:#fff}
/* while a video plays the labels fade away, and return when the card resets to its poster */
.card.playing .meta,.card.playing .scrim,.card.playing .play{opacity:0;pointer-events:none}
.card iframe,.card video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;display:block}
@media (hover:none){.card .scrim.on{opacity:1}}

.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}

/* contact */
.contact{padding:clamp(90px,14vh,170px) 0;text-align:center;background:radial-gradient(ellipse 70% 50% at 50% 40%,rgba(197,84,72,.12),transparent 65%)}
.contact-in{display:flex;flex-direction:column;align-items:center}
.contact-title{font:400 clamp(3rem,9vw,7rem)/.98 'Bebas Neue',sans-serif;letter-spacing:.02em;margin:0}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.contact-note{color:var(--muted);margin:24px 0 32px;max-width:34ch}
.email-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:28px;max-width:100%}
.email-text{font:500 clamp(.95rem,2.2vw,1.15rem) 'Inter';user-select:all;-webkit-user-select:all;word-break:break-all}
.copy-btn{background:transparent;border:1px solid var(--line-hi);border-radius:100px;padding:6px 18px;font:500 .74rem 'Inter';letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .3s,background .3s,border-color .3s}
.copy-btn:hover,.copy-btn.done{color:#fff;background:var(--grad);border-color:transparent}
.contact-links{list-style:none;display:flex;gap:12px 36px;flex-wrap:wrap;justify-content:center;margin:64px 0 0;padding:28px 0 0;border-top:1px solid var(--line);width:min(100%,640px);color:var(--muted);font-size:.95rem}
.contact-links a{display:inline-block;transition:color .3s,transform .3s var(--expo)}
.contact-links a:hover{color:var(--c5);transform:translateY(-2px)}

.site-footer{border-top:1px solid var(--line);padding:28px 0;color:var(--dim);font-size:.85rem}
.footer-in{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;align-items:center}
.footer-in p{margin:0}
.footer-in nav{display:flex;gap:20px;flex-wrap:wrap}
.footer-in a{transition:color .3s}.footer-in a:hover{color:var(--c5)}

/* reveal for headings/contact (progressive enhancement) */
.js .reveal{transition:opacity .6s var(--out),transform .6s var(--out)}
.js .reveal:not(.in){opacity:0;transform:translateY(24px)}

@media (max-width:600px){
  .feed,.col{gap:16px}
  .nav{gap:16px}.logo img{height:30px}.pill-sm{padding:10px 18px}
  .pill-lg{padding:18px 40px}
}
@media (max-width:400px){.logo img{height:24px}.nav{gap:12px}.nav-link{font-size:.72rem;letter-spacing:.08em}.pill-sm{padding:9px 14px;font-size:.72rem;letter-spacing:.06em}.tag{padding:8px 18px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .js .reveal:not(.in),.js .card.pre:not(.in){opacity:1;transform:none}
}

/* ---------- share link (bottom-right of each card) ---------- */
.card .share{all:unset;position:absolute;right:10px;bottom:10px;z-index:3;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;opacity:0;
  transition:opacity .3s ease,background .3s ease,transform .3s var(--expo)}
.card .share svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.card:hover .share,.card:focus-within .share{opacity:.6}
@media (hover:none){.card .share{opacity:.45}}
.card .share:hover,.card .share:focus-visible{opacity:1;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.card .share:focus-visible{outline:2px solid var(--accent-2,#f1811b);outline-offset:2px}
.card .share:active{transform:scale(.92)}
.card.playing .share{opacity:0;pointer-events:none}
.card .meta{right:48px}

/* ---------- theater (opened from a shared link) ---------- */
html.theater-open{overflow:hidden}
.theater{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:max(56px,env(safe-area-inset-top,0px)) 16px max(32px,env(safe-area-inset-bottom,0px));
  background:rgba(6,4,9,.9);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);opacity:0;transition:opacity .35s ease;cursor:pointer}
.theater.on{opacity:1}
.th-box{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%;transform:translateY(16px) scale(.98);transition:transform .5s var(--expo)}
.theater.on .th-box{transform:none}
.th-stage{--ar:1.7778;position:relative;cursor:auto;aspect-ratio:var(--ar);width:min(92vw,calc((100vh - 150px) * var(--ar)),1280px);max-width:100%;border-radius:14px;overflow:hidden;background:#000;
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
@supports (height:100dvh){.th-stage{width:min(92vw,calc((100dvh - 150px) * var(--ar)),1280px)}}
.th-stage iframe,.th-stage video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.th-meta{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;justify-content:center;pointer-events:none}
.th-meta .client{font:600 .72rem/1.2 'Inter';letter-spacing:.12em;text-transform:uppercase;color:#fff}
.th-meta .th-title{font:400 .9rem/1.3 'Inter';color:var(--muted)}
.th-close{all:unset;position:absolute;top:max(14px,env(safe-area-inset-top,0px));right:16px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:background .3s ease}
.th-close:hover{background:rgba(255,255,255,.14)}
.th-close:focus-visible{outline:2px solid var(--accent-2,#f1811b);outline-offset:2px}
.th-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:9500;transform:translate(-50%,12px);opacity:0;pointer-events:none;
  padding:10px 18px;border-radius:100px;font:500 .82rem 'Inter';color:#fff;background:rgba(20,14,24,.72);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 30px rgba(0,0,0,.4);transition:opacity .3s ease,transform .4s var(--expo);max-width:calc(100vw - 32px);overflow-wrap:anywhere}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.theater,.th-box,.toast{transition:none}}
[hidden]{display:none!important}