/* AG Production Labs: one committed look, a darkened grading suite. */
:root{
  /* teal-and-amber film grade: deep teal shadows, turquoise accent, warm amber highlights */
  /* v3: midnight-teal sky, turquoise accent, brass-gold highlights */
  --ground:#050d14; --plate:#0a1821; --plate2:#10232d; --line:#1a303c; --line2:#294553;
  --ink:#f4ead8; --dim:#a3b7b8; --faint:#62808a;
  --gel:#46d6cc; --gel-deep:#2bb1a8; --gel-soft:rgba(70,214,204,.13); --on-gel:#03201f;
  --amber:#e9b565; --tally:#ff4a3d;
  --display:"Cormorant Garamond","Cormorant",Garamond,Georgia,serif;
  --text:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
/* oriental celestial background (painted on html, under everything):
   girih rosettes tile + nebula glows; site.js adds the star canvas (.sky), the astrolabe (.astro) and the mouse light (.glow) */
html{scroll-behavior:smooth;background:url(pattern.svg) center top/160px 160px,
  radial-gradient(60% 45% at 85% 12%,rgba(233,181,101,.10),transparent 70%),
  radial-gradient(55% 50% at 8% 60%,rgba(70,214,204,.09),transparent 70%),
  radial-gradient(70% 55% at 60% 100%,rgba(92,70,160,.12),transparent 70%),
  radial-gradient(120% 80% at 50% 0,#0a1a26 0,var(--ground) 65%) var(--ground);background-attachment:scroll,fixed,fixed,fixed,fixed}
.sky,.astro,.glow{position:fixed;pointer-events:none;z-index:-1}
.sky{inset:0;width:100%;height:100%}
.astro{--sy:0;width:min(120vmin,1100px);aspect-ratio:1;right:max(-38vmin,-360px);top:calc(50% - min(60vmin,550px));background:url(astrolabe.svg) center/contain no-repeat;opacity:.2;
  animation:turn 420s linear infinite;translate:0 calc(var(--sy) * -.06px)}
@keyframes turn{to{rotate:360deg}}
.glow{left:0;top:0;width:600px;height:600px;border-radius:50%;opacity:0;transition:opacity .6s;background:radial-gradient(circle,rgba(233,181,101,.09),rgba(70,214,204,.04) 40%,transparent 70%)}
@media(max-width:760px){.astro{opacity:.14;right:-50vmin}}
@media(prefers-reduced-motion:reduce){.astro{animation:none}}
body{background:transparent;margin:0;color:var(--ink);font-family:var(--text);font-size:16px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:89;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,8,10,.55) 100%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img,video,canvas{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gel);outline-offset:3px}
::selection{background:var(--gel);color:var(--on-gel)}
.wrap{max-width:1280px;margin:0 auto;padding-inline:clamp(16px,4vw,44px)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gel)}
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;text-wrap:balance;letter-spacing:-.005em;font-variant-numeric:lining-nums}
h2{font-size:clamp(40px,6vw,76px);line-height:.98}
h1 em,h2 em,h3 em{font-style:italic;color:var(--amber)}
.lede{color:var(--dim);font-size:clamp(16px,1.4vw,18px);max-width:58ch;margin:18px 0 0}
section{scroll-margin-top:72px}
.sec{padding-block:clamp(72px,10vw,128px) 0}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 48px;margin-bottom:36px}
.sec-head > div{max-width:760px}

/* buttons + chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:14px 22px;border-radius:2px;border:1px solid transparent;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.btn.solid{background:var(--gel);color:var(--on-gel);font-weight:500}
.btn.solid:hover{background:var(--gel-deep)}
.btn.ghost{border-color:var(--line2);color:var(--ink);background:rgba(6,18,20,.35)}
.btn.ghost:hover{border-color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--dim);background:transparent;border:1px solid var(--line2);padding:8px 13px;border-radius:99px;cursor:pointer;transition:.2s}
.chip:hover{color:var(--ink);border-color:var(--faint)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.chip small{opacity:.6;margin-left:4px}

/* top bar */
.bar{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.bar.solid{background:rgba(6,18,20,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:18px}
.bar .logo img{height:50px;width:auto}
.bar nav{display:flex;align-items:center;gap:22px;font-size:14px}
.bar nav a{text-decoration:none;color:var(--dim);transition:color .2s}
.bar nav a:hover,.bar nav a[aria-current="page"]{color:var(--ink)}
.bar nav a[aria-current="page"]{box-shadow:0 1px 0 var(--gel)}
.bar nav .btn{padding:10px 16px;color:var(--on-gel);box-shadow:none}
.menu-btn{display:none;background:none;border:1px solid var(--line2);border-radius:2px;width:44px;height:40px;cursor:pointer;color:var(--ink)}
@media(max-width:1240px){
  .bar nav a:not(.btn){display:none}
  .menu-btn{display:inline-grid;place-items:center}
  .bar.open nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--ground);border-bottom:1px solid var(--line);padding:8px clamp(16px,4vw,44px) 16px}
  .bar.open nav a:not(.btn){display:block;padding:12px 0;border-bottom:1px solid var(--line);font-size:17px}
  .bar.open nav .btn{margin-top:12px}
}
@media(max-width:560px){
  .bar:not(.open) nav .btn{display:none}
  .bar .logo img{height:42px}
}

/* hero */
.hero{position:relative;padding-top:calc(96px + env(safe-area-inset-top,0px));padding-bottom:40px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 50% at 72% 40%,rgba(63,208,201,.16),transparent 70%),radial-gradient(40% 40% at 10% 90%,rgba(240,164,92,.08),transparent 70%);pointer-events:none}
.hero .grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,64px);align-items:center}
@media(max-width:900px){.hero .grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(54px,7.8vw,124px);line-height:.9;margin-top:18px}
.hero .lede{margin-top:24px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.stats{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:36px;padding-top:18px;border-top:1px solid var(--line);max-width:560px}
.stats b{display:block;font-family:var(--display);font-weight:600;font-variant-numeric:lining-nums;font-size:clamp(34px,3.6vw,46px);line-height:1}
.stats span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.rig{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.2vw,16px);align-items:center}
.mon{position:relative;aspect-ratio:9/16;max-width:100%;background:#000;border-radius:6px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 0 1px var(--line)}
.mon:nth-child(2){transform:translateY(-7%)}
.mon:nth-child(3){transform:translateY(5%)}
.mon video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hud{position:absolute;inset:0;pointer-events:none;font-family:var(--mono);font-size:clamp(8px,.72vw,11px);letter-spacing:.06em;color:rgba(255,255,255,.88);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.hud .tl,.hud .tr,.hud .bl,.hud .br{position:absolute;display:flex;gap:6px;align-items:center}
.hud .tl{top:9px;left:10px}.hud .tr{top:9px;right:10px}.hud .bl{bottom:9px;left:10px}.hud .br{bottom:9px;right:10px}
.rec{width:7px;height:7px;border-radius:50%;background:var(--tally);animation:blink 1.2s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.hud .guides{position:absolute;inset:12% 8%;border:1px solid rgba(255,255,255,.18)}
.hud .guides::before,.hud .guides::after{content:"";position:absolute;left:50%;top:50%;background:rgba(255,255,255,.4)}
.hud .guides::before{width:14px;height:1px;transform:translate(-50%,-50%)}
.hud .guides::after{width:1px;height:14px;transform:translate(-50%,-50%)}
.hud.osd .guides{inset:auto;left:50%;top:50%;width:26px;height:26px;border-radius:50%;transform:translate(-50%,-50%)}
.svc{margin-top:clamp(40px,6vw,72px);border-block:1px solid var(--line);padding-block:18px;display:flex;flex-wrap:wrap;gap:10px 28px;font-family:var(--display);font-style:italic;font-size:clamp(20px,2.2vw,28px);color:var(--dim)}
.svc span{white-space:nowrap}
.svc span::after{content:"/";font-style:normal;color:var(--gel);margin-left:28px;font-family:var(--mono);font-size:.6em;vertical-align:middle}
.svc span:last-child::after{content:none}

/* page hero for the library pages */
.phero{position:relative;min-height:min(72svh,680px);display:flex;align-items:flex-end;overflow:hidden;background:#000}
.phero video,.phero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,18,20,.6) 0,rgba(6,18,20,0) 30%,rgba(6,18,20,.3) 60%,var(--ground) 100%),linear-gradient(90deg,rgba(6,18,20,.75),rgba(6,18,20,0) 70%)}
.phero .wrap{position:relative;z-index:1;width:100%;padding-block:140px 48px}
.phero h1{font-size:clamp(56px,9vw,140px);line-height:.9;margin-top:14px;max-width:12ch}
.phero .lede{color:#d8d1dc}
.crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}

/* parts (home) */
.parts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.part{position:relative;display:block;overflow:hidden;border-radius:4px;background:#000;text-decoration:none;color:var(--ink);min-height:320px;grid-column:span 2;box-shadow:0 0 0 1px var(--line)}
.part.big{grid-column:span 3;min-height:460px}
@media(max-width:900px){.parts{grid-template-columns:repeat(2,minmax(0,1fr))}.part,.part.big{grid-column:span 1;min-height:300px}.part.big{grid-column:span 2}}
@media(max-width:520px){.part,.part.big{grid-column:span 2;min-height:260px}}
.part video,.part img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .4s}
.part:hover video,.part:hover img{transform:scale(1.04)}
.part::after{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(233,181,101,.16),transparent 60%),linear-gradient(180deg,rgba(0,0,0,.25),transparent 35%,rgba(0,0,0,.88))}
.part{transition:transform .25s ease-out,box-shadow .3s;will-change:transform}
.part:hover{box-shadow:0 0 0 1px rgba(233,181,101,.45),0 18px 50px rgba(0,0,0,.45)}
.part .in{position:absolute;inset:auto 0 0 0;z-index:1;padding:clamp(16px,2vw,26px);display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.part h3{font-size:clamp(34px,4vw,60px);line-height:.95}
.part .n{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-top:8px}
.part .go{flex:none;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;font-size:20px;transition:.3s}
.part:hover .go{background:var(--gel);border-color:var(--gel);color:var(--on-gel)}
.part .tag{position:absolute;top:14px;left:16px;z-index:1;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;display:flex;gap:6px;align-items:center}

/* sub-folders inside a part */
.folders{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,16px)}
@media(max-width:1000px){.folders{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.folders{grid-template-columns:repeat(2,minmax(0,1fr))}}
.folders[hidden],.lib-open[hidden]{display:none}
.folder{position:relative;display:block;aspect-ratio:4/5;max-width:100%;overflow:hidden;border-radius:4px;background:var(--plate);text-decoration:none;color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.folder img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.folder:hover img{transform:scale(1.05)}
.folder::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),transparent 40%,rgba(0,0,0,.85))}
.folder .fi{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(12px,1.6vw,20px)}
.folder .fc{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gel)}
.folder h3{font-size:clamp(24px,2.4vw,34px);line-height:1;margin-top:6px}
.folder .go{position:absolute;top:12px;right:12px;z-index:1;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.45);display:grid;place-items:center;transition:.3s}
.folder:hover .go{background:var(--gel);border-color:var(--gel);color:var(--on-gel)}
.folder.all{background:linear-gradient(135deg,var(--plate2),var(--ground));display:flex}
.folder.all::after{content:none}
.lib-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.lib-bar h3{font-size:clamp(30px,3.4vw,48px);line-height:1}
.lib-bar .btn{padding:10px 16px}

/* real AI grade before/after (two synced videos, drag the line) */
.rg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
@media(max-width:760px){.rg-grid{grid-template-columns:1fr}}
.rg-grid .rg:first-child{grid-column:1/-1}
.rg{position:relative;aspect-ratio:16/9;max-width:100%;background:#000;border-radius:4px;overflow:hidden;cursor:ew-resize;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 0 0 1px var(--line)}
.rg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.rg .after{clip-path:inset(0 0 0 var(--split,50%))}
.rg .line{position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none}
.rg .line::after{content:"\2039  \203A";white-space:pre;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;background:#fff;color:#111;font-size:14px;font-weight:600;display:grid;place-items:center}
.rg .tag{top:10px}
/* logo wall + typeset client names */
.logos{grid-template-columns:repeat(8,minmax(0,1fr))}
@media(max-width:1000px){.logos{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:560px){.logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
.logos div{min-height:78px;padding:12px 10px}
.logos img{max-height:34px;max-width:80%}
.logos .wm{font-family:var(--display);font-size:clamp(12px,1.1vw,15px);text-align:center;color:var(--ink);opacity:.72;line-height:1.1;letter-spacing:.02em}
.logos .wm small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:5px}
.logos div:last-child{grid-column:auto}
.bigline{font-family:var(--display);font-size:clamp(30px,4.4vw,64px);line-height:1.02;max-width:20ch;text-wrap:balance}
.bigline em{color:var(--amber)}
.chipline{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chipline span{font-family:var(--mono);font-size:12px;border:1px solid var(--line2);color:var(--dim);padding:7px 12px;border-radius:99px;background:rgba(6,18,20,.6)}

.scenes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media(max-width:860px){.scenes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.scene{margin:0;position:relative;aspect-ratio:16/9;max-width:100%;overflow:hidden;border-radius:3px;background:#000}
.scene video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* before / after pairs */
.ba{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
@media(max-width:860px){.ba{grid-template-columns:1fr}}
.ba figure{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--plate);border:1px solid var(--line);border-radius:4px;padding:8px}
.ba img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px}
.ba figcaption{grid-column:1/-1;display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:6px 2px 2px}
.ba figcaption b{color:var(--gel);font-weight:400}
.note{border-left:2px solid var(--gel);padding:14px 18px;background:var(--gel-soft);border-radius:0 4px 4px 0;max-width:760px;color:var(--ink);margin:0 0 28px}
.note b{color:var(--gel)}

/* about */
.cv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px)}
@media(max-width:860px){.cv{grid-template-columns:1fr}}
.cv h3{font-size:clamp(28px,3vw,40px);margin-bottom:12px}
.skills{display:grid;gap:0;border-top:1px solid var(--line)}
.skills div{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.skills b{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gel);padding-top:3px}
.skills span{color:var(--dim)}
@media(max-width:520px){.skills div{grid-template-columns:1fr;gap:4px}}
.socials{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-top:24px}
.socials a{background:var(--ground);padding:16px 18px;text-decoration:none;display:grid;gap:3px;transition:background .2s}
.socials a:hover{background:var(--gel-soft)}
.socials b{font-weight:500}
.socials span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* library grids */
.reel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
@media(max-width:1000px){.reel{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.reel{grid-template-columns:repeat(2,minmax(0,1fr))}}
.reel.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:640px){.reel.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);margin-bottom:clamp(10px,1.4vw,18px)}
@media(max-width:760px){.wide-grid{grid-template-columns:1fr}}
.wide-grid:empty{display:none}
.wide-grid .clip:last-child:nth-child(odd){grid-column:1/-1}
.clip{position:relative;display:block;width:100%;padding:0;border:0;background:#000;border-radius:4px;overflow:hidden;cursor:pointer;aspect-ratio:9/16;max-width:100%;text-align:left;color:var(--ink)}
.clip.w{aspect-ratio:16/9}
.clip[hidden]{display:none}
.clip img,.clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.clip video{opacity:0;transition:opacity .35s}
.clip.playing video{opacity:1}
.clip:hover img,.clip:hover video{transform:scale(1.03)}
.clip::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0,transparent 22%,transparent 55%,rgba(0,0,0,.85) 100%)}
.clip .meta{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(12px,1.4vw,18px)}
.clip .kind{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.clip h3{font-size:clamp(20px,2vw,30px);line-height:1;margin-top:6px}
.clip .top{position:absolute;top:0;left:0;right:0;z-index:1;display:flex;justify-content:space-between;padding:11px 13px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.85)}
.clip .play{display:inline-flex;align-items:center;gap:6px}
.clip .play::before{content:"";width:0;height:0;border-left:7px solid var(--gel);border-block:5px solid transparent}
.count{font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.08em;margin:0 0 14px}
.empty{color:var(--dim);padding:40px 0}

/* theater */
dialog{padding:0;border:0;background:transparent;color:var(--ink);max-width:100vw;max-height:100vh}
dialog::backdrop{background:rgba(6,5,8,.94);backdrop-filter:blur(6px)}
.theater{width:min(100vw,1100px);height:min(100svh,100vh);display:grid;grid-template-columns:auto minmax(260px,340px);gap:28px;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px)}
@media(max-width:760px){.theater{grid-template-columns:1fr;gap:12px;align-content:center}}
.screen{position:relative;height:min(82svh,760px);aspect-ratio:9/16;max-width:100%;background:#000;border-radius:4px;overflow:hidden;justify-self:center}
@media(max-width:760px){.screen{height:auto;width:min(100%,calc(62svh * 9 / 16))}}
.screen video{width:100%;height:100%;object-fit:cover}
.theater.is-wide{grid-template-columns:1fr;max-width:1100px;align-content:center}
.theater.is-wide .screen{height:auto;width:min(100%,calc(66svh * 16 / 9));aspect-ratio:16/9}
.theater.is-wide .screen video{object-fit:contain}
.theater.is-wide .side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 28px;align-items:end}
@media(max-width:760px){.theater.is-wide .side{display:block}}
.screen .bigplay{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.35);cursor:pointer;display:grid;place-items:center}
.screen .bigplay::before{content:"";border-left:18px solid #fff;border-block:11px solid transparent;margin-left:5px}
.side h3{font-size:clamp(32px,4vw,52px);line-height:1}
.side p{color:var(--dim);margin:12px 0 0}
.tc{font-family:var(--mono);font-size:clamp(22px,2.4vw,30px);letter-spacing:.04em;font-variant-numeric:tabular-nums;margin-top:22px}
.tc small{display:block;font-size:11px;letter-spacing:.14em;color:var(--faint);text-transform:uppercase;margin-bottom:4px}
.scrub{width:100%;margin-top:14px;accent-color:var(--gel)}
.tbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tbtns .btn{padding:10px 14px}
.x{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:16px;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:rgba(6,18,20,.7);color:var(--ink);cursor:pointer;font-size:20px;line-height:1}

/* FPV pilot band */
.pilot{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
@media(max-width:900px){.pilot{grid-template-columns:1fr}}
.pilot .goggle{position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--line)}
.pilot .goggle video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.osd{position:absolute;inset:0;pointer-events:none;font-family:var(--mono);font-size:clamp(9px,1vw,12px);color:#fff;text-shadow:0 1px 2px #000;letter-spacing:.08em}
.osd span{position:absolute}
.osd .c{left:50%;top:50%;width:30px;height:30px;border:1px solid rgba(255,255,255,.7);border-radius:50%;transform:translate(-50%,-50%)}
.feats{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:0;border-top:1px solid var(--line)}
.feats li{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.feats b{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gel);padding-top:3px}
.feats span{color:var(--dim)}

/* A to Z */
.az{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
@media(max-width:1000px){.az{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.az{grid-template-columns:1fr}}
.az > div{background:var(--ground);padding:clamp(20px,2.4vw,30px)}
.az .stage-n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--gel);text-transform:uppercase}
.az h3{font-size:clamp(34px,3.4vw,46px);line-height:1;margin-top:8px;font-style:italic}
.az p{color:var(--dim);font-size:15px;margin:10px 0 16px}
.az ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:15px}
.az li{display:flex;gap:10px;align-items:baseline}
.az li::before{content:"";flex:none;width:6px;height:1px;background:var(--gel);transform:translateY(-4px)}
.promise{display:flex;flex-wrap:wrap;gap:10px 40px;justify-content:space-between;align-items:center;margin-top:22px;font-family:var(--display);font-style:italic;font-size:clamp(22px,2.4vw,32px)}
.promise .btn{font-style:normal}
.inds{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.inds span{font-family:var(--mono);font-size:12px;color:var(--dim);border:1px solid var(--line2);padding:7px 12px;border-radius:2px}

/* website case study */
.case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center;background:var(--plate);border:1px solid var(--line);border-radius:4px;padding:clamp(20px,4vw,48px);overflow:hidden}
@media(max-width:900px){.case{grid-template-columns:1fr}}
.case h3{font-size:clamp(34px,4vw,56px);line-height:1}
.case p{color:var(--dim);margin:14px 0 0;max-width:52ch}
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:26px}
.nums b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(30px,3vw,42px);line-height:1}
.nums span{font-size:13px;color:var(--dim)}
.ticks{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;font-size:14px}
@media(max-width:520px){.ticks{grid-template-columns:1fr}}
.ticks li::before{content:"\2713";color:var(--gel);margin-right:8px}
.phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:center}
.phones figure{margin:0;background:#000;border-radius:18px;padding:6px;box-shadow:0 0 0 1px var(--line2),0 30px 60px -30px #000}
.phones figure:nth-child(2){transform:translateY(-8%)}
.phones img{border-radius:13px;aspect-ratio:9/16;width:100%;object-fit:cover}

/* grade lab */
.lab{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:clamp(16px,2.4vw,32px);align-items:start}
@media(max-width:900px){.lab{grid-template-columns:1fr}}
.viewer{position:relative;background:#000;border:1px solid var(--line);border-radius:4px;overflow:hidden;touch-action:none;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.viewer canvas{width:100%;height:auto;max-height:78svh;object-fit:contain;margin-inline:auto}
.viewer .wipe{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.3);transform:translateX(-1px);pointer-events:none}
.viewer .wipe::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 4px 18px rgba(0,0,0,.5)}
.viewer .wipe::before{content:"\2039  \203A";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;color:#111;font-size:15px;white-space:pre;font-weight:600}
.tag{position:absolute;top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;padding:5px 8px;background:rgba(0,0,0,.62);border-radius:2px;pointer-events:none}
.tag.l{left:12px}.tag.r{right:12px;color:var(--gel)}
.panel{background:var(--plate);border:1px solid var(--line);border-radius:4px;padding:clamp(16px,2vw,24px);display:grid;gap:22px}
.panel h4{margin:0 0 10px;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.knob{display:grid;grid-template-columns:92px 1fr 48px;align-items:center;gap:12px;font-size:14px}
.knob + .knob{margin-top:10px}
.knob label{color:var(--dim)}
.knob output{font-family:var(--mono);font-size:12px;text-align:right;font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--gel)}
.scope{background:#07060a;border:1px solid var(--line);border-radius:2px;position:relative}
.scope canvas{width:100%;height:120px}
.scope .grat{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,transparent 0 calc(25% - 1px),rgba(255,255,255,.07) calc(25% - 1px) 25%)}
.scope span{position:absolute;right:6px;font-family:var(--mono);font-size:9px;color:var(--faint)}
.lab-note{font-size:13px;color:var(--faint);margin:14px 0 0}

/* formats */
.fmt{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center}
@media(max-width:860px){.fmt{grid-template-columns:1fr}}
.stage{height:min(62svh,560px);display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,var(--plate) 0 12px,var(--ground) 12px 24px);border:1px solid var(--line);border-radius:4px;padding:16px;overflow:hidden}
.frame{position:relative;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.35),0 30px 60px -20px #000;transition:width .6s cubic-bezier(.2,.7,.2,1),height .6s cubic-bezier(.2,.7,.2,1)}
.frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame .bgv{filter:blur(22px) brightness(.55);transform:scale(1.2)}
.frame.wide .fgv{object-fit:contain}
.safe{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s}
.safe.on{opacity:1}
.safe i{position:absolute;background:rgba(63,208,201,.26);border:1px dashed rgba(255,255,255,.55);font:normal 9px var(--mono);letter-spacing:.1em;color:#fff;display:flex;align-items:center;justify-content:center;text-transform:uppercase}
.fmt-info .spec{font-family:var(--mono);font-size:clamp(28px,3.4vw,44px);letter-spacing:-.01em;margin-top:24px;font-variant-numeric:tabular-nums}
.fmt-info .where{color:var(--dim);margin-top:6px}
.fmt-info .row{margin-top:22px}
.switch{display:inline-flex;align-items:center;gap:10px;margin-top:22px;cursor:pointer;font-size:14px;color:var(--dim)}
.switch input{accent-color:var(--gel);width:18px;height:18px}

/* AI list */
.ai{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
@media(max-width:860px){.ai{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ai{grid-template-columns:1fr}}
.ai div{padding:26px 24px 28px 0;border-bottom:1px solid var(--line)}
.ai h3{font-size:26px;line-height:1.05}
.ai p{margin:8px 0 0;color:var(--dim);font-size:15px;max-width:36ch}
.ai .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--gel);text-transform:uppercase;margin-bottom:10px}

/* stills */
.masonry{columns:3 280px;column-gap:14px}
.masonry button{display:block;width:100%;margin:0 0 14px;padding:0;border:0;background:var(--plate);border-radius:3px;overflow:hidden;cursor:zoom-in;break-inside:avoid}
.masonry img{width:100%;height:auto;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.masonry button:hover img{transform:scale(1.025)}
.lightbox{width:100vw;height:min(100svh,100vh);display:grid;grid-template-rows:1fr auto;padding:calc(64px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px))}
.lightbox img{max-width:100%;max-height:100%;margin:auto;object-fit:contain;min-height:0}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--dim)}
.lb-bar .btn{padding:10px 14px}

/* concept + planner */
.builder{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
@media(max-width:900px){.builder{grid-template-columns:1fr}}
.form{display:grid;gap:16px}
.field label,.field .lbl{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
.field select,.field input[type=text],.field input[type=date],.field input[type=number],.field textarea{width:100%;background:var(--plate);border:1px solid var(--line2);border-radius:2px;padding:12px;font-size:15px;color:var(--ink)}
.field textarea{min-height:84px;resize:vertical}
.field select:focus,.field input:focus,.field textarea:focus{border-color:var(--gel);outline:none}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.checks label{display:flex;gap:9px;align-items:center;padding:9px 10px;border:1px solid var(--line2);border-radius:2px;font-size:14px;cursor:pointer;text-transform:none;letter-spacing:0;font-family:var(--text);color:var(--ink);margin:0}
.checks input{accent-color:var(--gel)}
.checks label:has(input:checked){border-color:var(--gel);background:var(--gel-soft)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sheet{background:#eee7db;color:#17131b;border-radius:3px;padding:clamp(20px,3vw,36px);box-shadow:0 40px 80px -40px #000;position:relative}
.sheet .hdr{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;border-bottom:1.5px solid #17131b;padding-bottom:12px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.sheet h3{font-size:clamp(32px,4vw,52px);line-height:1;margin-top:18px}
.sheet h3 em{color:#b8651f}
.sheet .logline{font-size:17px;margin:12px 0 0;max-width:60ch;color:#3c3542}
.sheet table{width:100%;border-collapse:collapse;margin-top:22px;font-size:14px}
.sheet th{text-align:left;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#6b6272;padding:8px 10px 8px 0;border-bottom:1px solid #cfc6bb}
.sheet td{padding:10px 10px 10px 0;border-bottom:1px solid #ddd5ca;vertical-align:top}
.sheet td.t{font-family:var(--mono);font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums;color:#0e7a74}
.sheet .cam{font-family:var(--mono);font-size:12px;color:#6b6272;white-space:nowrap}
.tablewrap{overflow-x:auto}
.sheet .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px 24px;margin-top:22px}
.sheet .facts b{display:block;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#6b6272;margin-bottom:4px}
.sheet .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.sheet .btn.ghost{color:#17131b;border-color:#17131b;background:transparent}
.sheet .btn.ghost:hover{background:#17131b;color:#f1ece4}
.gantt{margin-top:22px;display:grid;gap:7px}
.gantt .r{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center;font-size:13px}
.gantt .track{position:relative;height:18px;background:repeating-linear-gradient(90deg,#e4ddd3 0 1px,transparent 1px calc(100% / var(--days,10)))}
.gantt .seg{position:absolute;top:2px;bottom:2px;background:#17131b;border-radius:1px;transition:left .4s,width .4s}
.gantt .seg.hot{background:#1a9f98}
.pill{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;padding:4px 9px;border-radius:99px;text-transform:uppercase}
.pill.ok{background:#d6ead9;color:#1d5a2c}
.pill.warn{background:#f6dcc4;color:#8a3f0c}
.deliv{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.deliv span{font-family:var(--mono);font-size:12px;border:1px solid #cfc6bb;padding:4px 8px;border-radius:2px}

/* clients + contact */
.logos{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
@media(max-width:1000px){.logos{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:560px){.logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
.logos div{background:var(--ground);display:grid;place-items:center;padding:12px 10px;min-height:78px}
.logos img{max-height:34px;width:auto;max-width:80%;opacity:.7;transition:opacity .3s}
.logos div:hover img{opacity:1}
.contact{margin-top:clamp(72px,10vw,128px);border-top:1px solid var(--line);padding-block:clamp(56px,8vw,96px)}
.contact h2{font-size:clamp(46px,8vw,120px);line-height:.92;max-width:14ch}
.rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:44px}
.rows div{background:var(--ground);padding:20px 20px 22px}
.rows dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.rows dd{margin:8px 0 0;font-size:17px}
.todo{color:var(--dim);border:1px dashed var(--faint);padding:2px 8px;border-radius:2px;font-size:14px}
.next{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:clamp(56px,8vw,96px)}
.next a{display:flex;justify-content:space-between;align-items:center;padding:22px;border:1px solid var(--line2);border-radius:4px;text-decoration:none;font-family:var(--display);font-size:clamp(26px,2.6vw,36px);transition:.25s}
.next a:hover{border-color:var(--gel);background:var(--gel-soft)}
.next a span{font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
footer{border-top:1px solid var(--line);margin-top:clamp(56px,8vw,96px);padding-block:28px calc(36px + env(safe-area-inset-bottom,0px));color:var(--faint);font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
footer img{height:44px;width:auto;opacity:.85}
footer nav{display:flex;flex-wrap:wrap;gap:18px}
footer nav a{text-decoration:none}
footer nav a:hover{color:var(--ink)}
.wa-float{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:99px;background:#25d366;color:#07210f;font-weight:600;font-size:14px;text-decoration:none;box-shadow:0 10px 30px -10px rgba(0,0,0,.7)}
.wa-float[hidden]{display:none}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:var(--ground);padding:12px 18px;border-radius:2px;font-size:14px;font-weight:500;max-width:calc(100% - 32px);transition:.3s;z-index:100}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* v3 additions */
.logos .more{font-family:var(--display);font-style:italic;font-size:clamp(15px,1.4vw,19px);color:var(--amber);text-align:center;line-height:1.1}
.rg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.rg.photo{aspect-ratio:2/3}
.rg-grid.photos{max-width:760px}
.rg-grid.photos .rg:first-child{grid-column:auto}
@media(max-width:760px){.rg-grid.photos{grid-template-columns:1fr 1fr;gap:8px}}
.gtabs{display:flex;flex-wrap:wrap;gap:8px}
.grade-home .gpane p{color:var(--dim);font-size:14px;margin:14px 0 0;max-width:70ch}
.grade-home .gpane .rg{max-width:1100px}
.hero h1 em,.phero h1 em{font-weight:500}