/* Layout: a bento board. Every film is a card sized by its real aspect (9:16 tall, 16:9 wide); cards play on hover with a running timecode. Calm, mid-size type; one deep red for the key word. */
:root{
  --bg:#0b0b0c;
  --card:#131315;
  --card-2:#1a1a1d;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.16);
  --fg:#f3f1ed;
  --muted:#b3afa8;
  --dim:#75716c;
  --red:#e3121b;
  --red-ink:#ff4a4f;
  --ok:#3ccf7a;
  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Instrument Serif","Times New Roman",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:20px;
  --gap:12px;
  --gut-l:max(20px, env(safe-area-inset-left, 0px));
  --gut-r:max(20px, env(safe-area-inset-right, 0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--display);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red-ink);outline-offset:3px;border-radius:6px}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
em.acc{color:var(--red-ink)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.wrap{max-width:1360px;margin-inline:auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
body::after{content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain .9s steps(5) infinite}
@keyframes grain{20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}

/* top bar */
.top{position:sticky;top:0;z-index:50;background:rgba(11,11,12,.72);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:22px;height:74px;padding-top:env(safe-area-inset-top,0px)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:16px;letter-spacing:-.01em}
.logo small{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
.rec{width:8px;height:8px;border-radius:50%;background:var(--red-ink);box-shadow:0 0 12px var(--red);animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.me{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.me img{width:50px;height:50px;border-radius:50%;object-fit:cover;border:1px solid var(--line-2);flex:none;filter:grayscale(1)}
.me>span{display:flex;flex-direction:column;gap:2px;font-size:11px;line-height:1.3;color:var(--muted);white-space:nowrap}
.me b{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--fg)}
.me .dot::before{width:6px;height:6px;box-shadow:0 0 0 3px rgba(60,207,122,.15)}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{text-decoration:none;font-size:14px;color:var(--muted);padding:6px 12px;border-radius:999px;transition:color .2s,background .2s}
.nav a:hover{color:var(--fg);background:var(--card-2)}
.clock{font-family:var(--mono);font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.lang{display:flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px}
.lang button{all:unset;cursor:pointer;font-family:var(--mono);font-size:11px;padding:5px 9px;border-radius:999px;color:var(--muted)}
.lang button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.lang button:focus-visible{outline:2px solid var(--red-ink)}
.btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:600;border:1px solid var(--line-2);color:var(--fg);transition:background .2s,border-color .2s,transform .2s;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--fg)}
.btn:active{transform:scale(.97)}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.red:hover{background:#f21b24}
.btn.light{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn:focus-visible{outline:2px solid var(--red-ink);outline-offset:3px}

/* bento */
.bento{display:grid;gap:var(--gap)}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-width:0}
.hero{grid-template-columns:repeat(12,minmax(0,1fr));padding-block:20px 12px}
.intro{grid-column:span 7;grid-row:span 2;padding:clamp(22px,3vw,40px);display:flex;flex-direction:column;gap:22px;justify-content:space-between;min-height:440px;
  background:radial-gradient(520px circle at var(--mx,30%) var(--my,20%),rgba(227,18,27,.16),transparent 60%),var(--card)}
.eyebrow{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;color:var(--muted)}
.dot{display:inline-flex;align-items:center;gap:8px;color:var(--fg)}
.dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(60,207,122,.15)}
.intro h1{margin:0;font-weight:700;font-size:clamp(34px,4.4vw,66px);line-height:1.02;letter-spacing:-.035em;font-variation-settings:"wdth" 88;text-wrap:balance;max-width:15ch}
.intro h1 em{font-size:1.06em;letter-spacing:-.01em}
.intro h1 .w{display:inline-block;opacity:0;transform:translateY(.4em);animation:up .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * 45ms + .1s)}
@keyframes up{to{opacity:1;transform:none}}
.intro p{margin:0;color:var(--muted);max-width:52ch;font-size:16px}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.reel{grid-column:span 5;grid-row:span 2;min-height:440px;cursor:pointer;background:#000}
.reel video,.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75),transparent 45%)}
.reel .lab{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;align-items:end;gap:10px}
.reel .lab b{font-size:18px;font-weight:700;letter-spacing:-.01em}
.reel .empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;color:var(--dim);
  background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.025) 22px 23px),radial-gradient(circle at 50% 40%,rgba(227,18,27,.22),transparent 60%)}
.reel .empty b{display:block;font-size:22px;color:var(--fg);margin-bottom:6px}
.stat{grid-column:span 3;padding:18px 20px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:132px}
.stat b{font-size:clamp(28px,2.6vw,40px);font-weight:700;letter-spacing:-.04em;line-height:1;font-variation-settings:"wdth" 80;font-variant-numeric:tabular-nums}
.stat b small{font-size:.45em;letter-spacing:0;margin-left:4px;color:var(--muted)}
.stat span{color:var(--dim);font-size:13px}
.stat.live b{font-family:var(--mono);font-weight:500;letter-spacing:-.02em;font-size:clamp(24px,2.2vw,34px)}

/* hero: the showreel plays inside one giant word (multiply blend keeps only the white letters) */
.mhero{padding-top:12px}
.mstage{position:relative;height:clamp(240px,58vh,680px);margin-inline:var(--gut-l) var(--gut-r);border-radius:var(--r);overflow:hidden;background:#000;isolation:isolate}
.mstage[role=button]{cursor:pointer}
.mvid{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;transform:translate(calc(var(--px,0) * -24px),calc(var(--py,0) * -16px));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.mglow{background:linear-gradient(100deg,#ff2d38 0%,#ff6a2b 22%,#ffb347 40%,#ff3b5c 58%,#c21a8c 76%,#ff2d38 100%);background-size:300% 100%;animation:glow 12s linear infinite}
.mglow::after{content:"";position:absolute;inset:0 -40%;background:radial-gradient(35% 90% at 50% 40%,rgba(255,255,255,.32),transparent 62%);animation:glint 7s ease-in-out infinite alternate}
@keyframes glow{to{background-position:300% 0}}
@keyframes glint{0%{transform:translateX(-28%)}100%{transform:translateX(28%)}}
.mmask{position:absolute;inset:0;background:#000;mix-blend-mode:multiply;display:grid;place-items:center;pointer-events:none}
.mmask span{color:#fff;font-weight:900;text-transform:uppercase;line-height:.78;letter-spacing:-.045em;font-variation-settings:"wdth" 100;white-space:nowrap;font-size:100px;padding-top:.06em;transition:opacity .42s ease,transform .42s cubic-bezier(.2,.8,.2,1),filter .42s ease}
.mmask span.out{opacity:0;transform:translateY(-14%) scale(.96);filter:blur(10px)}
.mstage:hover .mvid{transform:translate(calc(var(--px,0) * -24px),calc(var(--py,0) * -16px)) scale(1.03)}
.mtypes{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.mtypes button{all:unset;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:999px;color:var(--muted);background:rgba(255,255,255,.06);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all .3s}
.mtypes button:hover{color:var(--fg);border-color:var(--line-2)}
.mtypes button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.mtypes button:focus-visible{outline:2px solid var(--red-ink)}
@media (max-width:720px){.mtypes{position:static;margin-top:10px;justify-content:flex-start}.mtypes button{font-size:10px;padding:5px 9px}}
.mbar{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px 48px;align-items:end;padding-block:26px 8px}
.mcopy{display:flex;flex-direction:column;gap:14px;min-width:0}
.mbar h1{margin:0;font-weight:700;font-size:clamp(26px,3vw,44px);line-height:1.05;letter-spacing:-.03em;font-variation-settings:"wdth" 88;text-wrap:balance}
.mbar h1 em{font-size:1.06em}
.mside{display:flex;flex-direction:column;gap:16px;min-width:0}
.mside p{margin:0;color:var(--muted);max-width:52ch}
.mtc{color:var(--dim);align-self:center;font-variant-numeric:tabular-nums}
.stats{grid-template-columns:repeat(4,minmax(0,1fr));padding-block:20px 0}
.stats .stat{grid-column:auto}
@media (max-width:900px){.mbar{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

.marq{overflow:hidden;white-space:nowrap;border-block:1px solid var(--line);margin-block:28px;padding-block:12px;color:var(--dim)}
.marq div{display:inline-flex;gap:26px;animation:mq 40s linear infinite}
.marq span::after{content:"✦";margin-left:26px;color:var(--red-ink)}
@keyframes mq{to{transform:translateX(-50%)}}

.sec{padding-block:clamp(40px,6vw,80px) 0}
.sh{display:flex;align-items:end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:20px}
.sh h2{margin:0;font-weight:700;font-size:clamp(26px,3vw,40px);letter-spacing:-.03em;line-height:1;font-variation-settings:"wdth" 88}
.sh h2 em{font-size:1.08em}
.sh .count{color:var(--dim);margin-left:10px;font-size:.45em;vertical-align:super;font-family:var(--mono);letter-spacing:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{all:unset;cursor:pointer;font-size:13px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);color:var(--muted);transition:all .2s}
.chips button:hover{color:var(--fg);border-color:var(--line-2)}
.chips button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chips button:focus-visible{outline:2px solid var(--red-ink)}

/* work grid: row unit makes 9:16 = 1 col x 3 rows, 16:9 = 2 cols x 2 rows */
.gridwrap{container-type:inline-size}
.grid{--cols:4;display:grid;gap:var(--gap);grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-flow:dense;
  grid-auto-rows:calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols) * .5926)}
.tile{all:unset;box-sizing:border-box;position:relative;display:block;cursor:pointer;border-radius:var(--r);overflow:hidden;background:var(--card);border:1px solid var(--line);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .3s;transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0))}
.tile.a916{grid-row:span 3}
.tile.a45,.tile.a11{grid-row:span 2}
.tile.a169{grid-column:span 2;grid-row:span 2}
.tile:hover{border-color:var(--line-2)}
.tile:focus-visible{outline:2px solid var(--red-ink);outline-offset:3px}
.tile img,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .4s}
.tile video{opacity:0}
.tile.playing video{opacity:1}
.tile:hover img{transform:scale(1.04)}
.tile .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);background:radial-gradient(circle at 50% 40%,rgba(227,18,27,.12),transparent 60%)}
.tile .grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.2) 38%,transparent 60%);pointer-events:none}
.tile .meta{position:absolute;left:16px;right:16px;bottom:14px;display:flex;flex-direction:column;gap:4px;pointer-events:none}
.tile .meta b{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.2;text-wrap:balance}
.tile .meta span{color:#cfcac3;font-size:12px;font-family:var(--mono);letter-spacing:.03em}
.tile .tc{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:11px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:4px 8px;border-radius:999px;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .3s}
.tile.playing .tc{opacity:1}
.tile .asp{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:11px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:4px 8px;border-radius:999px}
.tile .bar{position:absolute;left:0;bottom:0;height:2px;background:var(--red-ink);width:0}
.tile.hide{display:none}
.empty-work{border:1px dashed var(--line-2);border-radius:var(--r);padding:clamp(28px,5vw,56px);color:var(--muted);display:flex;flex-direction:column;gap:6px}
.empty-work b{font-size:22px;color:var(--fg)}

.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,260px);gap:var(--gap);overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.strip .tile{aspect-ratio:9/16;scroll-snap-align:start}

.steps{grid-template-columns:repeat(4,minmax(0,1fr))}
.step{padding:22px;display:flex;flex-direction:column;gap:12px;min-height:220px;transition:background .3s}
.step:hover{background:var(--card-2)}
.step .n{font-family:var(--mono);font-size:12px;color:var(--red-ink)}
.step h3{margin:0;font-size:20px;letter-spacing:-.02em}
.step p{margin:0;color:var(--muted);font-size:14px}
.step .t{margin-top:auto;font-family:var(--mono);font-size:11px;color:var(--dim)}

.two{grid-template-columns:repeat(12,minmax(0,1fr))}
.svc{grid-column:span 7;padding:24px}
.tools{grid-column:span 5;padding:24px}
.svc h3,.tools h3{margin:0 0 14px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.svc ul{list-style:none;margin:0;padding:0}
.svc li{display:flex;justify-content:space-between;gap:12px;padding-block:12px;border-top:1px solid var(--line);font-size:17px;font-weight:600;letter-spacing:-.01em;transition:padding .3s,color .3s}
.svc li:hover{padding-left:8px;color:var(--red-ink)}
.svc li span:last-child{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--dim)}
.tools .list{display:flex;flex-wrap:wrap;gap:8px}
.tools .list span{border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-family:var(--mono);font-size:12px;color:var(--muted)}

.contact{padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:end;
  background:radial-gradient(700px circle at 0% 100%,rgba(227,18,27,.18),transparent 60%),var(--card)}
.contact h2{margin:0;font-size:clamp(32px,4.2vw,60px);line-height:1.02;letter-spacing:-.035em;font-weight:700;font-variation-settings:"wdth" 88;text-wrap:balance}
.contact p{margin:12px 0 0;color:var(--muted)}
.contact .links{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--dim);padding-block:28px calc(28px + env(safe-area-inset-bottom,0px))}

/* reveal */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}

/* lightbox */
dialog.lb{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100vw;height:100%;background:transparent;color:var(--fg)}
dialog.lb::backdrop{background:rgba(5,5,6,.94);backdrop-filter:blur(6px)}
.lb-in{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:0}
.lb-stage{position:relative;display:grid;place-items:center;padding:24px;min-width:0;min-height:0}
.lb-stage video{max-width:100%;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);border-radius:14px;background:#000}
.lb-side{border-left:1px solid var(--line);background:var(--card);padding:calc(env(safe-area-inset-top,0px) + 20px) max(22px, env(safe-area-inset-right,0px)) 22px 22px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.lb-side .x{align-self:flex-end}
.lb-side h3{margin:0;font-size:26px;line-height:1.1;letter-spacing:-.03em;font-variation-settings:"wdth" 88}
.lb-side p{margin:0;color:var(--muted);white-space:pre-line}
.lb-side .chipline{display:flex;flex-wrap:wrap;gap:6px}
.lb-side .chipline span{border:1px solid var(--line-2);border-radius:999px;padding:4px 10px;font-size:12px}
.lb-side .chipline span.r{border-color:var(--red);color:var(--red-ink)}
.lb-side dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0}
.lb-side dl div{background:var(--card);padding:10px 12px;min-width:0}
.lb-side dt{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.lb-side dd{margin:2px 0 0;font-family:var(--mono);font-size:13px;overflow-wrap:anywhere}
.lb-nav{display:flex;gap:8px;margin-top:auto}

/* cursor */
.cur{position:fixed;left:0;top:0;z-index:95;pointer-events:none;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--red-ink);display:grid;place-items:center;transition:width .25s,height .25s,margin .25s,background .25s}
.cur span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:#fff;opacity:0;transition:opacity .2s}
.cur.big{width:72px;height:72px;margin:-36px 0 0 -36px;background:rgba(227,18,27,.9)}
.cur.big span{opacity:1}
.cur.off{opacity:0}
@media (pointer:coarse){.cur{display:none}}

/* responsive */
@media (max-width:1080px){
  .intro,.reel{grid-column:span 12}
  .reel{min-height:0;aspect-ratio:16/9}
  .intro{min-height:0}
  .stat{grid-column:span 6}
  .grid{--cols:3}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc,.tools{grid-column:span 12}
  .contact{grid-template-columns:1fr}
  .contact .links{justify-content:flex-start}
  .lb-in{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .lb-side{border-left:0;border-top:1px solid var(--line);max-height:45vh}
  .lb-stage video{max-height:calc(55vh - 48px)}
}
@media (max-width:720px){
  .nav,.clock{display:none}
  .lang{margin-left:auto}
  .me>span .dot{display:none}
  .me img{width:42px;height:42px}
  .top .wrap{height:64px}
  .top .btn{height:34px;padding:0 12px;font-size:13px}
  .grid{--cols:2}
  .steps{grid-template-columns:1fr}
  .step{min-height:0}
  .lb-side dl{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){
  .stat{padding:14px 16px;min-height:112px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .intro h1 .w{opacity:1;transform:none}
  .js .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}