/* ═══════════════════════════════════════════════════════════
   HALÁSZ HUNOR — hub. Dark, modern, amber.
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#0b0b0c;--bg2:#121214;--fg:#ebe8e2;--dim:rgba(235,232,226,.6);--line:rgba(235,232,226,.14);--acc:#ffb257;--onacc:#170e03;--glow:rgba(255,178,87,.2);
  --disp:"Inter Tight","Hanken Grotesk",system-ui,sans-serif;--body:"Hanken Grotesk",system-ui,sans-serif;--mono:"DM Mono",ui-monospace,monospace;
  --g:clamp(18px,4vw,56px);--ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:300 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0;list-style:none}
img,canvas,video{display:block;max-width:100%}
::selection{background:var(--acc);color:var(--onacc)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.M{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:400}
.dim{color:var(--dim)}
.in{max-width:1320px;margin:0 auto;padding:0 var(--g)}
.skip{position:fixed;left:12px;top:-60px;z-index:300;background:var(--fg);color:var(--bg);padding:10px 14px;border-radius:6px;transition:top .2s}
.skip:focus{top:12px}

/* ───── header ───── */
.hdr{position:fixed;top:0;left:0;right:0;z-index:80;height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--g);transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.hdr.s{background:rgba(11,11,12,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:var(--line)}
.brand{display:flex;align-items:center;gap:12px;font-size:12px;white-space:nowrap}
.brand i{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 14px 2px var(--acc)}
.nav{display:flex;gap:clamp(14px,2.2vw,32px);color:rgba(235,232,226,.78)}
.nav a{padding:6px 0;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.nav a:hover,.nav a.on{color:var(--fg);border-color:var(--acc)}
.hdr-r{display:flex;gap:10px;align-items:center}
.lang{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:rgba(10,10,12,.5)}
.lang button,.lang a{padding:6px 11px;border-radius:999px;color:var(--dim);transition:all .25s}
.lang button:hover,.lang a:hover{color:var(--fg)}
.lang button.on,.lang a.on{background:var(--acc);color:var(--onacc)}
.chip{display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1px solid var(--line);border-radius:999px;transition:all .3s;background:rgba(10,10,12,.5)}
.chip:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.menu-btn{display:none;align-items:center;gap:12px;height:44px;padding:0 16px 0 18px;border:1px solid var(--line);border-radius:999px;background:rgba(10,10,12,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;transition:border-color .3s}
.menu-btn b{font-weight:400;min-width:38px;text-align:left}
.menu-btn span{position:relative;width:18px;height:10px;display:block}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--fg);transition:transform .45s var(--ease),top .45s var(--ease),width .45s var(--ease)}
.menu-btn span:nth-of-type(1){display:none}
.menu-btn span::before{top:0}.menu-btn span::after{top:8px;width:60%;left:auto;right:0}
body.menu .menu-btn{border-color:var(--acc)}
body.menu .menu-btn span::before{top:4px;transform:rotate(45deg)}body.menu .menu-btn span::after{top:4px;width:100%;transform:rotate(-45deg)}
.lang.big{padding:4px}.lang.big button,.lang.big a{padding:12px 22px;font-size:13px}
@media(max-width:980px){.chip{display:none}}
@media(max-width:860px){.nav,.hdr-r .lang{display:none}.menu-btn{display:inline-flex}}

/* mobile menu */
.mnav{position:fixed;inset:0;z-index:70;background:rgba(9,9,10,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .7s cubic-bezier(.76,0,.24,1),visibility 0s .7s;overflow-y:auto;overscroll-behavior:contain}
.mnav::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 80% 0,var(--glow),transparent 60%);pointer-events:none}
body.menu{overflow:hidden}
body.menu .mnav{clip-path:inset(0);visibility:visible;transition:clip-path .7s cubic-bezier(.76,0,.24,1),visibility 0s}
.mnav-in{min-height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:88px var(--g) calc(26px + env(safe-area-inset-bottom,0px));position:relative}
.mnav-list{display:grid;border-top:1px solid var(--line)}
.mnav-list li{border-bottom:1px solid var(--line);opacity:0;transform:translateY(26px);transition:opacity .5s,transform .7s var(--ease)}
body.menu .mnav-list li{opacity:1;transform:none}
body.menu .mnav-list li:nth-child(1){transition-delay:.28s}body.menu .mnav-list li:nth-child(2){transition-delay:.34s}body.menu .mnav-list li:nth-child(3){transition-delay:.4s}body.menu .mnav-list li:nth-child(4){transition-delay:.46s}body.menu .mnav-list li:nth-child(5){transition-delay:.52s}
.mnav-list a{display:grid;grid-template-columns:34px 1fr auto;align-items:baseline;gap:10px;padding:clamp(14px,2.6vh,22px) 0;transition:color .25s,padding-left .35s var(--ease)}
.mnav-list i{font:400 11px var(--mono);letter-spacing:.1em;color:var(--acc);font-style:normal}
.mnav-list span{font-family:var(--disp);font-weight:300;font-size:clamp(2.6rem,12.5vw,4.4rem);letter-spacing:-.04em;line-height:1}
.mnav-list b{font-weight:400;color:var(--dim);font-size:1.1rem;transition:color .25s,transform .35s var(--ease)}
.mnav-list a:active,.mnav-list a.on{color:var(--acc);padding-left:8px}
.mnav-list a.on b,.mnav-list a:active b{color:var(--acc);transform:translate(3px,-3px)}
.mnav-foot{display:grid;gap:20px;margin-top:28px;opacity:0;transform:translateY(20px);transition:opacity .5s .6s,transform .7s .6s var(--ease)}
body.menu .mnav-foot{opacity:1;transform:none}
.mnav-foot .lang{justify-self:start}
.mnav-mail{font-family:var(--disp);font-weight:300;font-size:clamp(1.5rem,7vw,2.2rem);letter-spacing:-.02em;overflow-wrap:anywhere}
.mnav-links{display:flex;gap:18px;flex-wrap:wrap;color:var(--dim)}
.mnav-links a:active{color:var(--acc)}
@media(min-width:861px){.mnav{display:none}}

/* ───── buttons / shared ───── */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border:1px solid var(--line);border-radius:999px;transition:all .3s;background:rgba(10,10,12,.4)}
.btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn-p{background:var(--acc);color:var(--onacc);border-color:var(--acc);font-weight:500}
.btn-p:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.rv.in-v{opacity:1;transform:none}
.sec{padding:clamp(70px,10vw,140px) 0;position:relative}
.sec.alt{background:var(--bg2);border-block:1px solid var(--line)}
.sh{display:grid;gap:14px;margin-bottom:clamp(30px,4.5vw,60px);max-width:900px}
.kick{color:var(--acc)}
h2{font-family:var(--disp);font-weight:300;font-size:clamp(2.7rem,7.2vw,6.6rem);line-height:.92;letter-spacing:-.04em}
.sub{color:var(--dim);max-width:54ch;font-size:clamp(1rem,1.3vw,1.15rem)}
.rec{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff3b30;box-shadow:0 0 10px #ff3b30;margin-right:10px;animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}

/* ═════════ 0 · THE SHOWREEL ═════════ */
.reel{position:relative;height:100svh;min-height:420px;background:#000;overflow:hidden}
.reel::before,.reel::after{content:"";position:absolute;left:0;right:0;background:#000;z-index:2;pointer-events:none}
.reel::before{top:0;height:var(--bt,64px)}.reel::after{bottom:0;height:var(--bb,88px)}
.reel canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer}
.vsrc{position:absolute;width:2px;height:2px;opacity:0;pointer-events:none}
.ytwrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1.2s;background:#000}
.ytwrap.on{opacity:1}
.ytwrap.manual{pointer-events:auto}
.ytwrap.manual iframe{pointer-events:auto}
.ytwrap iframe{position:absolute;left:50%;top:var(--yc,50%);width:var(--yw,100vw);height:var(--yh,56.25vw);transform:translate(-50%,-50%);border:0}
.ytlink{margin-top:2px;color:var(--acc)}
.ytlink:hover{color:var(--fg)}
.reel-ui{position:absolute;left:var(--g);right:var(--g);bottom:16px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;z-index:3}
.reel-id{display:grid;gap:4px}
.reel-id .M{display:flex;align-items:center}
.reel-ctl{display:flex;gap:10px;align-items:center}
.sbtn{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 22px 0 18px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s;position:relative}
.sbtn:hover{border-color:var(--fg)}
.sbtn[aria-pressed="true"]{background:var(--acc);color:var(--onacc);border-color:var(--acc)}
.sbtn.attn::after{content:"";position:absolute;inset:-5px;border-radius:999px;border:1px solid var(--acc);animation:ping 2s ease-out infinite}
@keyframes ping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}
.eq{display:flex;gap:2px;align-items:flex-end;height:14px}
.eq i{width:3px;height:30%;background:currentColor;border-radius:1px}
.sbtn[aria-pressed="true"] .eq i{animation:eq .9s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.2s!important}.eq i:nth-child(3){animation-delay:.4s!important}.eq i:nth-child(4){animation-delay:.1s!important}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
.fbtn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px 0 16px;border-radius:999px;border:1px solid var(--acc);background:rgba(0,0,0,.55);color:var(--acc);font-size:12px;letter-spacing:.06em;text-transform:uppercase;transition:background .3s,color .3s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.fbtn b{font-size:15px;font-weight:400}
.fbtn:hover{background:var(--acc);color:var(--onacc)}
.reel:not(.clean) .fbtn{animation:fsb 2.2s ease-in-out infinite,fsg 2.2s ease-in-out infinite}
@keyframes fsb{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes fsg{0%,100%{box-shadow:0 0 14px 1px rgba(255,178,87,.4)}50%{box-shadow:0 0 34px 8px rgba(255,178,87,.75)}}
.pbtn{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:13px;transition:all .3s}
.pbtn:hover{background:var(--fg);color:var(--bg)}
.reel .prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.18);z-index:4;cursor:pointer}
.reel .prog::before{content:"";position:absolute;inset:-12px 0}
.reel .prog i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--acc)}
.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:3;color:rgba(255,255,255,.8)}
.cue i{width:1px;height:34px;background:linear-gradient(var(--acc),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1)}}
@media(max-width:700px){.reel-ui{flex-direction:column;align-items:flex-start;bottom:26px}.cue{display:none}.fbtn{padding:0;width:48px;justify-content:center}.fbtn span{display:none}}

/* ───── intro, laid over the showreel ───── */
.ov{position:absolute;left:0;right:0;top:var(--mt,64px);bottom:var(--mb,92px);z-index:3;display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,5vw,80px);align-items:center;padding:0 var(--g);pointer-events:none;transition:opacity .8s var(--ease),transform .8s var(--ease),visibility 0s .8s}
.reel-dim{position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.48);pointer-events:none;transition:opacity .8s var(--ease)}
.reel.clean .reel-dim{opacity:0}
.ov .btn,.ov a{pointer-events:auto}
.ov .kick{margin-bottom:clamp(8px,1.6vw,18px)}
.ov .name{margin-bottom:0;font-size:clamp(3.6rem,10.4vw,10.5rem)}
.ov .lede{max-width:34ch}
.ov .meta{color:rgba(235,232,226,.78)}
.ov .kick,.ov .meta,.ov .lede{text-shadow:0 1px 20px rgba(0,0,0,.85),0 0 4px rgba(0,0,0,.5)}
.reel.clean .ov{opacity:0;visibility:hidden;transform:translateY(14px)}
.ov .name{text-shadow:0 2px 40px rgba(0,0,0,.45)}
.name{font-family:var(--disp);font-weight:300;letter-spacing:-.04em;line-height:.88;font-size:clamp(4rem,11.4vw,11rem);display:flex;flex-direction:column;margin-left:-.04em;overflow:hidden;padding-bottom:.06em}
.name>span:last-child{font-weight:300}
.ch{display:inline-block;transform:translateY(110%);opacity:0;transition:transform 1.2s var(--ease),opacity 1s;transition-delay:calc(var(--i)*70ms)}
.name.go .ch{transform:none;opacity:1}
.lede{font-size:clamp(1.05rem,1.6vw,1.4rem);line-height:1.4;color:rgba(235,232,226,.85);max-width:34ch}
.ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.meta{margin-top:26px}
@media(max-width:900px){.ov{grid-template-columns:1fr;align-content:center;gap:clamp(14px,3vw,24px)}.ov .lede{max-width:none}}
@media(max-width:560px){.ov .meta{display:none}.ov .ctas{margin-top:18px}}

/* ───── work ───── */
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:26px}
.filters button{padding:9px 16px;border:1px solid var(--line);border-radius:999px;color:var(--dim);font-size:14px;transition:all .25s}
.filters button.on{border-color:var(--acc);color:var(--acc);background:var(--glow)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px)}
.card{display:grid;gap:14px;text-align:left;align-content:start}
.card.hide{display:none}
.card .t{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:10px;border:1px solid var(--line)}
.card .t canvas{width:100%;height:100%;transition:transform 1.2s var(--ease),filter .6s;filter:saturate(.85)}
.card:hover .t canvas{transform:scale(1.06);filter:saturate(1.15)}
.card .t::after{content:attr(data-view);position:absolute;right:12px;bottom:12px;padding:3px 10px;background:var(--acc);color:var(--onacc);border-radius:2px;font:400 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:all .3s}
.card:hover .t::after{opacity:1;transform:none}
.card .n{color:var(--acc)}
.card h3{font-family:var(--disp);font-weight:300;font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.025em;line-height:1.05}
.card p{color:var(--dim);font-size:15px}
.nda{margin-top:28px}
.brands{margin-top:clamp(40px,6vw,80px);border-top:1px solid var(--line);padding-top:20px}
.brands ul{display:flex;flex-wrap:wrap;gap:0 clamp(16px,3vw,40px);margin-top:12px;font-family:var(--disp);font-weight:300;font-size:clamp(1.6rem,3.6vw,3.4rem);letter-spacing:-.03em;line-height:1.15;}
.brands li{color:var(--dim);transition:color .3s}.brands li:hover{color:var(--fg)}.brands li.more{color:var(--line)}
@media(max-width:900px){.grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.grid{grid-template-columns:1fr}}

/* ═════════ editing teaser + the edit room (overlay) ═════════ */
.edit-g{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,6vw,100px);align-items:center}
.edit-g .sub{margin-top:18px}
.edit-g h2{margin-top:14px}
.edit-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ecard{display:grid;gap:10px;align-content:start;text-align:left;padding:clamp(16px,2vw,26px);border:1px solid var(--line);border-radius:14px;background:var(--bg2);transition:border-color .3s,transform .5s var(--ease),background .3s;position:relative}
.ecard i{width:34px;height:34px;border:1px solid var(--acc);border-radius:50%;display:grid;place-items:center;color:var(--acc);font-style:normal;font-size:13px}
.ecard h3{font-family:var(--disp);font-weight:300;font-size:clamp(1.3rem,1.9vw,1.7rem);letter-spacing:-.02em;line-height:1.05}
.ecard p{color:var(--dim);font-size:14.5px;line-height:1.45}
.ecard::after{content:"↗";position:absolute;right:16px;top:14px;color:var(--dim);transition:all .3s}
.ecard:hover{border-color:var(--acc);transform:translateY(-4px);background:var(--bg)}
.ecard:hover::after{color:var(--acc);transform:translate(2px,-2px)}
@media(max-width:900px){.edit-g{grid-template-columns:1fr}}@media(max-width:480px){.edit-cards{grid-template-columns:1fr}}
.room{width:100vw;height:100dvh;margin:0;background:var(--bg);border:0;overflow:hidden;display:none;flex-direction:column}
.room[open]{display:flex;animation:roomIn .55s var(--ease) both}
@keyframes roomIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.room::backdrop{background:#000}
.room-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:12px var(--g);border-bottom:1px solid var(--line);background:rgba(255,255,255,.025);flex:none}
.nle-title{display:flex;align-items:center;white-space:nowrap}
.room-r{display:flex;align-items:center;justify-content:flex-end;gap:16px}
.tcode{font-variant-numeric:tabular-nums}
.room .x{padding:9px 16px;border:1px solid var(--line);border-radius:999px;transition:all .3s}
.room .x:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.room-body{flex:1;overflow-y:auto;overflow-x:hidden;max-width:1400px;width:100%;margin:0 auto}
.nle-tabs{display:flex;gap:4px;padding:4px;border-radius:999px;border:1px solid var(--line);background:rgba(0,0,0,.3)}
.nle-tabs button{display:flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;color:var(--dim);transition:all .3s}
.nle-tabs button i{font-style:normal;font-size:12px}
.nle-tabs button:hover{color:var(--fg)}
.nle-tabs button.on{background:var(--acc);color:var(--onacc)}
.pg{padding:clamp(16px,2.6vw,36px) var(--g) 40px}
.pg[hidden]{display:none}
.pg-g{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(16px,2.6vw,38px);align-items:start}
.viewer{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;border:1px solid var(--line)}
.viewer canvas{width:100%;height:100%;display:block}
.viewer video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.viewer video[hidden]{display:none}
.vtag{position:absolute;left:10px;top:10px;padding:2px 8px;background:rgba(0,0,0,.6);border:1px solid var(--line);border-radius:3px;color:var(--dim)}
.insp{display:grid;gap:16px;align-content:start}
.insp h3{font-family:var(--disp);font-weight:300;font-size:clamp(2rem,3.4vw,3.2rem);letter-spacing:-.035em;line-height:.95}
.insp .lab{margin-bottom:8px}
.facts{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.facts li{display:flex;gap:10px}.facts li::before{content:"▸";color:var(--acc)}
/* timeline */
.tl{margin-top:20px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.35);padding:10px 12px;position:relative;--p:0;cursor:pointer}
.tl .row{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center;height:30px}
.tl .row>b{font:400 10px var(--mono);letter-spacing:.1em;color:var(--dim)}
.tl .lane{position:relative;height:24px;background:rgba(255,255,255,.035);border-radius:4px}
.clip{position:absolute;top:2px;bottom:2px;border-radius:3px;padding:0 8px;font:400 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;overflow:hidden;white-space:nowrap;color:#120a02}
.clip.v{background:var(--acc)}.clip.v2{background:#ffd9a0}.clip.v3{background:#e8964a}
.clip.a{background:rgba(235,232,226,.78)}.clip.a2{background:rgba(235,232,226,.5)}
.tl .playh{position:absolute;top:6px;bottom:6px;width:2px;background:#fff;left:calc(12px + 46px + (100% - 24px - 46px) * var(--p));box-shadow:0 0 12px rgba(255,255,255,.5);pointer-events:none;z-index:2}
.tl .playh::before{content:"";position:absolute;left:-5px;top:-2px;border:6px solid transparent;border-top:8px solid #fff;border-bottom:0}
/* colour */
.cmp{aspect-ratio:16/9;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.lay{position:absolute;inset:0}
.lay canvas{width:100%;height:100%;object-fit:cover}
.lay.before canvas{filter:contrast(.52) saturate(.32) brightness(1.2)}
.cmp.real .lay.before canvas{filter:none}
.lookdesc{font-size:15px;line-height:1.5;min-height:3em}
.lookfeel{font-size:15px;line-height:1.5;color:var(--fg);padding-left:14px;border-left:2px solid var(--acc)}
.cmp.swap .lay.after canvas{animation:lookin .5s var(--ease)}
@keyframes lookin{from{opacity:.15}to{opacity:1}}
.lay.after{clip-path:inset(0 0 0 var(--x))}
.lay.after canvas{filter:var(--look,none);transition:filter .6s}
.cmp .handle{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--fg);z-index:3;box-shadow:0 0 22px rgba(255,255,255,.35)}
.cmp .handle b{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--fg);color:var(--bg);display:grid;place-items:center;font-weight:500}
.lb{position:absolute;bottom:12px;z-index:4;padding:3px 10px;background:rgba(0,0,0,.6);border:1px solid var(--line);border-radius:3px}
.lb.l{left:12px;color:var(--dim)}.lb.r{right:12px;color:var(--acc)}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{padding:9px 16px;border:1px solid var(--line);border-radius:999px;color:var(--dim);font-size:14px;transition:all .25s}
.seg button:hover{color:var(--fg)}
.seg button.on{border-color:var(--acc);color:var(--acc);background:var(--glow)}
/* sound */
.snd-badge{position:absolute;right:10px;top:10px;z-index:3;padding:2px 8px;border-radius:3px;background:rgba(0,0,0,.6);color:var(--dim);border:1px solid var(--line);transition:all .3s}
.snd-badge.on{background:var(--acc);color:var(--onacc);border-color:var(--acc)}
#timeline,#wave{width:100%;margin-top:10px;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.35)}
.ab{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ab button{display:flex;align-items:center;gap:12px;padding:16px;font-family:var(--disp);font-weight:300;font-size:1.35rem;letter-spacing:-.02em;color:var(--dim);transition:all .3s;text-align:left}
.ab button em{font-style:normal}
.ab button span{width:26px;height:26px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font-size:11px;flex:none}
.ab button.on{background:var(--acc);color:var(--onacc)}
.ab.three{grid-template-columns:repeat(3,1fr)}
.ab.wait{opacity:.45;pointer-events:none}
#cutMap{width:100%;margin-top:10px;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.35);cursor:pointer;display:block}
.cstats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.cs{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:4px}
.cs b{font-family:var(--disp);font-weight:300;font-size:clamp(1.7rem,2.6vw,2.4rem);letter-spacing:-.03em;line-height:1;color:var(--acc)}
.cslegend{font-size:13.5px;line-height:1.5}
.cstats:empty,.cslegend:empty{display:none}
.scene-cap{margin:12px 2px 0;font-size:12px;line-height:1.5;letter-spacing:.04em}
.vol{display:grid;grid-template-columns:auto 1fr 3.4em;gap:14px;align-items:center}
.vol input{width:100%;accent-color:var(--acc);cursor:pointer}
.vol b{font-weight:400;text-align:right;color:var(--fg)}
.viewer video{cursor:pointer}
.viewer .pp{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.4);color:var(--fg);font-size:26px;z-index:4;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.viewer .pp[hidden]{display:none}

.ab.three button{font-size:1.05rem;padding:14px 12px;gap:8px}
#scenePick{margin-bottom:14px}
.layers{display:grid;gap:8px}
.layers[hidden]{display:none}
.layers li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:12px;transition:all .3s;cursor:pointer}
.layers li b{display:block;font-weight:400;font-family:var(--disp);font-size:1.1rem}
.layers li small{display:block;color:var(--dim);font-size:13px;line-height:1.35}
.sw{width:38px;height:22px;border-radius:999px;background:var(--line);position:relative;transition:background .3s;flex:none}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--fg);transition:transform .3s var(--ease)}
.layers li.on .sw{background:var(--acc)}.layers li.on .sw::after{transform:translateX(16px);background:var(--onacc)}
.layers li.off{opacity:.5}
.layers.locked{opacity:.4;pointer-events:none}
.note{line-height:1.5;text-transform:none;letter-spacing:.02em;font-size:12px}
/* deliver */
.stage{position:relative;height:min(58vh,520px);display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;background:radial-gradient(circle at 50% 35%,#1a1a1d,#050506)}
.frame{position:relative;overflow:hidden;border-radius:5px;width:300px;height:520px;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px var(--line)}
.frame canvas{position:absolute;inset:0;width:100%;height:100%}
.guides i{position:absolute;z-index:2;background:rgba(255,255,255,.22);pointer-events:none}
.guides i:nth-child(1){left:33.33%;top:0;bottom:0;width:1px}.guides i:nth-child(2){left:66.66%;top:0;bottom:0;width:1px}
.guides i:nth-child(3){top:33.33%;left:0;right:0;height:1px}.guides i:nth-child(4){top:66.66%;left:0;right:0;height:1px}
.ftag{position:absolute;left:10px;top:10px;z-index:3;background:var(--acc);color:var(--onacc);padding:2px 8px;border-radius:2px}
.fmts small.comp{color:var(--acc);margin-top:2px}
.stage.master{display:block;height:auto;aspect-ratio:16/9;overflow:hidden;background:#000;border-radius:12px}
.stage.master img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-select:none}
.m-bg{filter:blur(4px) brightness(.5) saturate(.85);transform:scale(1.03)}
.m-box{position:absolute;border:2px solid var(--acc);border-radius:2px;pointer-events:none;box-shadow:0 0 28px rgba(255,178,87,.28)}
.m-box i{position:absolute;background:rgba(255,255,255,.1);pointer-events:none}
.m-box i:nth-child(1){left:33.33%;top:0;bottom:0;width:1px}.m-box i:nth-child(2){left:66.66%;top:0;bottom:0;width:1px}
.m-box i:nth-child(3){top:33.33%;left:0;right:0;height:1px}.m-box i:nth-child(4){top:66.66%;left:0;right:0;height:1px}
.stage.master .ftag{left:8px;top:8px}
.stage.master .mtag{position:absolute;right:12px;bottom:10px;font-size:10px;color:rgba(255,255,255,.7);letter-spacing:.08em;text-transform:uppercase;z-index:2}
.fmts{display:grid;gap:8px}
.fmts button{display:grid;grid-template-columns:auto 1fr;gap:2px 16px;align-items:baseline;padding:14px 16px;border:1px solid var(--line);border-radius:12px;text-align:left;color:var(--dim);transition:all .3s}
.fmts button b{grid-row:span 2;font-family:var(--disp);font-weight:300;font-size:2.1rem;line-height:1;letter-spacing:-.03em;color:var(--fg);min-width:78px}
.fmts button small{display:none;grid-column:2;color:var(--fg);font-size:14px;line-height:1.4;margin-top:4px}
.fmts button:hover{border-color:var(--dim)}
.fmts button.on{border-color:var(--acc);background:var(--glow)}
.fmts button.on small{display:block}
@media(max-width:980px){.pg-g{grid-template-columns:1fr}.room-bar{grid-template-columns:auto 1fr}.nle-title{display:none}.nle-tabs{justify-self:start}.nle-tabs button span{display:none}.nle-tabs button{padding:10px 16px}.stage{height:min(52vh,440px)}.stage.master{height:auto}}
@media(max-width:520px){.tcode{display:none}.room-bar{padding:10px 14px}}

/* ───── process + craft ───── */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,2vw,30px);position:relative;padding-top:26px}
.steps .line{position:absolute;left:0;right:0;top:6px;height:1px;background:var(--line)}
.steps .line i{position:absolute;left:0;top:-1px;height:3px;width:0;background:var(--acc);box-shadow:0 0 12px var(--acc)}
.steps li:not(.line){position:relative}
.steps li:not(.line)::before{content:"";position:absolute;top:-26px;left:0;width:13px;height:13px;border-radius:50%;background:var(--bg);border:2px solid var(--line);transition:all .4s}
.steps li.on::before{border-color:var(--acc);background:var(--acc);box-shadow:0 0 14px var(--acc)}
.steps .n{color:var(--acc);margin-bottom:10px}
.steps h3{font-family:var(--disp);font-weight:300;font-size:clamp(1.3rem,2vw,1.8rem);letter-spacing:-.02em;line-height:1.1;margin-bottom:10px}
.steps p{color:var(--dim);font-size:15px;line-height:1.5}
.craft{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.craft li{background:var(--bg2);padding:clamp(18px,2.2vw,30px);display:grid;gap:10px;align-content:start;transition:background .3s}
.craft li:hover{background:var(--bg)}
.craft .ic{width:34px;height:34px;border:1px solid var(--acc);border-radius:50%;display:grid;place-items:center;color:var(--acc);font-size:13px}
.craft h3{font-family:var(--disp);font-weight:400;font-size:1.25rem;letter-spacing:-.01em}
.craft p{color:var(--dim);font-size:14.5px;line-height:1.5}
@media(max-width:1000px){.steps{grid-template-columns:1fr;padding-top:0;padding-left:28px}.steps .line{left:6px;right:auto;top:0;bottom:0;width:1px;height:auto}.steps .line i{width:3px;height:0;left:-1px;top:0}.steps li:not(.line)::before{top:6px;left:-28px}.steps li:not(.line){padding-bottom:22px}.craft{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.craft{grid-template-columns:1fr}}

/* ───── story ───── */
.tline{display:grid;gap:clamp(26px,4vw,56px);position:relative}
.tline::before{content:"";position:absolute;left:78px;top:6px;bottom:6px;width:1px;background:var(--line)}
.te{display:grid;grid-template-columns:78px 1fr minmax(0,1fr);gap:clamp(16px,3vw,40px);align-items:center;position:relative}
.te .y{font-family:var(--disp);font-weight:300;font-size:2rem;letter-spacing:-.03em;line-height:1}
.te .y::after{content:"";position:absolute;left:73px;top:10px;width:11px;height:11px;border-radius:50%;background:var(--acc);box-shadow:0 0 12px var(--acc)}
.te h3{font-family:var(--disp);font-weight:300;font-size:clamp(1.5rem,2.6vw,2.3rem);letter-spacing:-.025em;line-height:1.05;margin-bottom:8px}
.te p{color:var(--dim);max-width:44ch}
.phb{position:relative;aspect-ratio:3/2;border-radius:10px;overflow:hidden;border:1px dashed var(--line);display:block;width:100%;text-align:left}
.phb canvas{width:100%;height:100%;filter:saturate(.5) brightness(.7)}
.phb span{position:absolute;left:12px;bottom:10px;padding:3px 10px;background:rgba(0,0,0,.6);border-radius:3px;color:var(--dim)}
.phb:hover span{color:var(--acc)}
@media(max-width:820px){.tline::before{left:5px}.te{grid-template-columns:1fr;padding-left:26px;gap:12px}.te .y::after{left:-26px;top:10px}}
.bts{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;scrollbar-width:thin;scrollbar-color:var(--acc) transparent}
.bts figure{flex:0 0 min(78vw,380px);scroll-snap-align:start}
.bts figcaption{margin-top:10px;color:var(--dim);font-size:15px;line-height:1.45}
.soon{padding:clamp(40px,6vw,80px) 0;border-top:1px solid var(--line)}
.soon-t{font-family:var(--disp);font-weight:300;font-size:clamp(1.8rem,4vw,3.4rem);letter-spacing:-.03em;line-height:1.1;margin-top:10px}
.soon-t em{font-style:normal;color:var(--acc)}

/* ───── contact ───── */
.contact{background:radial-gradient(ellipse at 50% 120%,var(--glow),transparent 62%)}
.mega{font-family:var(--disp);font-weight:300;letter-spacing:-.04em;line-height:.88;font-size:clamp(3rem,9.6vw,9.6rem);margin-top:16px}
.mega span{color:var(--acc)}
.cgrid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(30px,6vw,100px);margin-top:clamp(40px,6vw,90px);align-items:start}
.brief{display:grid;gap:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{height:40px;padding:0 18px;border:1px solid var(--line);border-radius:999px;color:var(--dim);font-size:14px;transition:all .25s}
.chips button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--onacc);font-weight:500}
.fld{display:grid;gap:6px;border-bottom:1px solid var(--line);padding-bottom:8px;transition:border-color .3s}
.fld:focus-within{border-color:var(--acc)}
.fld span{color:var(--dim)}
.fld input,.fld textarea{background:none;border:0;outline:0;color:var(--fg);font:inherit;font-size:clamp(1.1rem,1.6vw,1.4rem);resize:none;width:100%;padding:2px 0}
.fld ::placeholder{color:rgba(235,232,226,.3)}
.row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.row .note{margin:0}
.direct{display:grid;border-top:1px solid var(--line)}
.dl{display:grid;gap:4px;padding:20px 0;border-bottom:1px solid var(--line);transition:padding-left .4s var(--ease),color .3s}
.dl small{color:var(--dim)}
.dl span{font-family:var(--disp);font-weight:300;font-size:clamp(1.5rem,2.6vw,2.4rem);letter-spacing:-.02em;line-height:1.05;overflow-wrap:anywhere}
a.dl:hover{padding-left:14px;color:var(--acc)}
@media(max-width:900px){.cgrid{grid-template-columns:1fr}}
.foot{border-top:1px solid var(--line);padding:24px 0 40px;color:var(--dim)}
.foot .in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 30px}
.foot a:hover{color:var(--fg)}

/* ───── dialog ───── */
dialog{padding:0;border:0;color:var(--fg);max-width:none;max-height:none}
dialog::backdrop{background:rgba(3,3,4,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.case{width:min(720px,94vw);margin:auto;background:var(--bg2);border:1px solid var(--line);border-radius:16px;overflow:hidden;max-height:92dvh}
.case[open]{animation:pop .5s var(--ease) both}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.case .x{position:absolute;right:16px;top:14px;z-index:5;padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.6);transition:all .3s}
.case .x:hover{background:var(--fg);color:var(--bg)}
.case-g{display:grid;grid-template-columns:1fr;max-height:92dvh}
.case-i{padding:clamp(22px,3vw,44px);display:grid;gap:14px;align-content:center;overflow:auto}
.case-i #cK{color:var(--acc)}
.case-i h3{font-family:var(--disp);font-weight:300;font-size:clamp(2.4rem,4.4vw,4.2rem);letter-spacing:-.04em;line-height:.92}
.case-i #cD{color:var(--dim)}
.cc{color:var(--dim)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tags li{border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--dim)}
.case-i .btn{justify-self:start}
@media(max-width:860px){.case-g{overflow:auto}}

@media (prefers-reduced-motion:reduce){.fbtn,.cue i,.rec,.sbtn.attn::after{animation:none}.rv{opacity:1;transform:none;transition:none}.ch{transform:none;opacity:1;transition:none}html{scroll-behavior:auto}}

/* ───── the film ───── */
.film{padding:clamp(60px,9vw,130px) 0;position:relative;overflow:hidden}
.film::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,var(--glow),transparent 60%);opacity:.7;pointer-events:none}
.film-g{display:grid;grid-template-columns:minmax(260px,.8fr) 1.1fr;gap:clamp(30px,6vw,100px);align-items:center;position:relative}
.poster{display:block;width:100%;max-width:470px;justify-self:center;border-radius:6px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.65),0 0 0 1px var(--line);transition:transform .8s var(--ease),box-shadow .8s;transform-style:preserve-3d;cursor:pointer}
.poster img{width:100%;height:auto;display:block}
.poster:hover{transform:translateY(-4px);box-shadow:0 60px 120px rgba(0,0,0,.7),0 0 60px var(--glow),0 0 0 1px var(--acc)}
.film-t{display:grid;gap:14px;align-content:center}
.film-t h2{font-size:clamp(3.4rem,9vw,8.6rem)}
.film-sub{font-family:var(--disp);font-weight:300;font-size:clamp(1.3rem,2.4vw,2rem);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);line-height:1.2}
.film-when{display:flex;gap:10px 22px;flex-wrap:wrap;align-items:baseline;color:var(--dim)}
.film-when b{color:var(--fg);font-weight:400;font-size:13px}
.film-p{color:var(--dim);max-width:46ch;font-size:clamp(1.02rem,1.3vw,1.18rem)}
.credits{margin:6px 0 0;display:grid;gap:0;border-top:1px solid var(--line);max-width:560px}
.credits div{display:grid;grid-template-columns:minmax(120px,.45fr) 1fr;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.credits dt{color:var(--dim)}.credits dd{margin:0;color:var(--fg);letter-spacing:.06em;line-height:1.5}
@media(max-width:860px){.film-g{grid-template-columns:1fr}.poster{max-width:380px}}

/* ───── work list ───── */
.wlist{border-top:1px solid var(--line)}
.wrow{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,.9fr) 30px;gap:clamp(12px,2vw,30px);align-items:center;width:100%;padding:16px 0;border-bottom:1px solid var(--line);text-align:left;transition:padding-left .45s var(--ease),background .4s}
.wrow.hide{display:none}
.wrow:hover,.wrow:focus-visible{padding-left:16px;background:linear-gradient(90deg,var(--glow),transparent 60%)}
.wrow .n{color:var(--acc)}
.wrow h3{font-family:var(--disp);font-weight:300;font-size:clamp(1.9rem,4.4vw,4rem);letter-spacing:-.035em;line-height:.98;transition:color .3s}
.wrow:hover h3{color:var(--acc)}
.wrow .mt{color:var(--dim);margin-top:6px;display:block}
.wrow .rl{color:var(--dim);font-size:14.5px;line-height:1.45}
.wrow .ar{color:var(--dim);font-size:1.1rem;transition:all .3s;justify-self:end}
.wrow:hover .ar{color:var(--acc);transform:translate(3px,-3px)}
@media(max-width:860px){.wrow{grid-template-columns:34px minmax(0,1fr) 24px;gap:12px}.wrow .rl{display:none}}
@media(max-width:480px){.wrow{grid-template-columns:28px minmax(0,1fr)}.wrow .ar{display:none}.wrow h3{font-size:1.7rem}}

/* ═══════════ v2 · services, process strip, about, FAQ, journal, articles, production room ═══════════ */
.nav{gap:clamp(12px,1.6vw,26px)}
.lang a{display:block;padding:6px 11px;border-radius:999px;color:var(--dim);transition:all .25s}
.lang a.on{background:var(--acc);color:var(--onacc)}
@media(max-width:1180px){.nav{font-size:10px}}
.film-lead{font-family:var(--disp);font-weight:300;font-size:clamp(1.3rem,2.3vw,1.9rem);line-height:1.2;letter-spacing:-.02em;color:var(--fg);max-width:26ch}
.facts2{display:grid;margin:10px 0 0;border-top:1px solid var(--line);max-width:620px}
.facts2 div{display:grid;grid-template-columns:minmax(100px,.4fr) 1fr;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.facts2 dt{color:var(--dim);font-size:13px}.facts2 dd{margin:0;font-size:15px}
.credits-d{max-width:620px}.credits-d summary{cursor:pointer;color:var(--acc);padding:10px 0;list-style:none}
.credits-d summary::-webkit-details-marker{display:none}.credits-d summary::after{content:" +";}.credits-d[open] summary::after{content:" −"}
.film-t .ctas{margin-top:8px}

/* brands band */
.brandband{padding:34px 0 26px;border-block:1px solid var(--line);overflow:hidden}
.bb-l{margin-bottom:14px}
.marq{display:flex;overflow:hidden;white-space:nowrap}
.marq-t{display:flex;flex:none;align-items:center;min-width:100%;animation:marq 42s linear infinite;font-family:var(--disp);font-weight:300;font-size:clamp(1.8rem,4vw,3.4rem);letter-spacing:-.03em;color:var(--dim)}
.marq-t li{display:flex;align-items:center;padding-right:clamp(28px,4vw,56px)}
.marq-t li::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);margin-left:clamp(28px,4vw,56px);opacity:.7}
.marq-t li.more{color:var(--line)}
@keyframes marq{to{transform:translateX(-100%)}}
.brandband .nda{margin-top:18px}

/* services */
.ticker{overflow:hidden;margin:clamp(10px,2vw,30px) 0 clamp(34px,5vw,64px);border-block:1px solid var(--line);padding:6px 0}
.ticker-t{display:flex;gap:clamp(30px,4vw,60px);white-space:nowrap;width:max-content;animation:tick 70s linear infinite;font-family:var(--disp);font-weight:300;font-size:clamp(2.6rem,7vw,6rem);letter-spacing:-.035em;color:transparent;-webkit-text-stroke:1px rgba(235,232,226,.28)}
.ticker-t span{position:relative;padding-right:clamp(30px,4vw,60px)}
.ticker-t span::after{content:"✦";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:.35em;color:var(--acc);-webkit-text-stroke:0}
@keyframes tick{to{transform:translateX(-33.333%)}}
.svcs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.svc{position:relative;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--bg2);overflow:hidden;min-height:240px;display:flex;flex-direction:column;gap:10px;transition:border-color .3s,transform .6s var(--ease),opacity .9s var(--ease)}
.svc::before{content:"";position:absolute;inset:0;background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),rgba(255,178,87,.17),transparent 62%);opacity:0;transition:opacity .35s;pointer-events:none}
.svc:hover{border-color:rgba(255,178,87,.55);transform:translateY(-4px)}.svc:hover::before{opacity:1}
.svc .ic{width:40px;height:40px;border:1px solid var(--acc);border-radius:50%;display:grid;place-items:center;color:var(--acc);font-size:15px;margin-bottom:auto}
.svc .sn{position:absolute;right:18px;top:16px;color:var(--dim)}
.svc h3{font-family:var(--disp);font-weight:400;font-size:clamp(1.3rem,1.8vw,1.55rem);letter-spacing:-.02em;line-height:1.1}
.svc p{color:var(--dim);font-size:14.5px;line-height:1.5}
.tags{margin-top:clamp(28px,4vw,50px)}.tags ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tags li{padding:9px 16px;border:1px solid var(--line);border-radius:999px;color:var(--dim);font-size:14px;transition:all .3s}
.tags li:hover{border-color:var(--acc);color:var(--fg)}
@media(max-width:1100px){.svcs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svcs{grid-template-columns:1fr}.svc{min-height:0}}

/* process — a film strip that travels sideways while you scroll */
.proc{position:relative;padding:clamp(70px,10vw,140px) 0;background:var(--bg2);border-block:1px solid var(--line)}
.proc .sh{margin-bottom:clamp(24px,3.5vw,44px)}
.strip{overflow:hidden}
.track{display:flex;gap:clamp(12px,1.6vw,22px);padding:0 var(--g);will-change:transform}
.fr{flex:0 0 clamp(270px,27vw,400px);position:relative;border:1px solid var(--line);border-radius:14px;padding:clamp(20px,2vw,30px) clamp(20px,2vw,30px) 56px;background:#0e0e10;min-height:clamp(250px,36vh,340px);display:flex;flex-direction:column;gap:12px;transition:border-color .5s,background .5s,opacity .5s,transform .6s var(--ease)}
.fr .fn{color:var(--acc)}
.fr h3{font-family:var(--disp);font-weight:300;font-size:clamp(1.8rem,3vw,2.8rem);letter-spacing:-.03em;line-height:1}
.fr p{color:var(--dim);font-size:15.5px;line-height:1.5}
.perf{position:absolute;left:16px;right:16px;bottom:14px;height:12px;background:repeating-linear-gradient(90deg,rgba(235,232,226,.15) 0 14px,transparent 14px 28px);border-radius:2px}
.proc-bar{height:2px;background:var(--line);margin-top:clamp(20px,3vh,36px);position:relative}
.proc-bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0)*100%);background:var(--acc);box-shadow:0 0 14px var(--acc)}
.proc-bar{margin:0 0 clamp(18px,2.4vw,30px)}
.proc-bar i::after{content:"";position:absolute;right:-5px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:var(--acc);box-shadow:0 0 16px 2px var(--acc)}
.track{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.fr{flex:none;min-height:clamp(220px,30vh,300px);opacity:.42;padding:clamp(18px,1.6vw,26px) clamp(18px,1.6vw,26px) 52px}
.fr.on{opacity:1;border-color:var(--acc);background:#17130d}
.fr h3{font-size:clamp(1.3rem,1.8vw,1.8rem);overflow-wrap:anywhere}
.fr p{font-size:15px}
@media(max-width:1100px){.track{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.track{grid-template-columns:1fr}.fr{min-height:0}}

/* production room teaser reuses the edit-room card layout */
#setCards{grid-template-columns:1fr 1fr}#setCards .ecard:last-child{grid-column:span 2}

/* about */
.answer{font-family:var(--disp);font-weight:300;font-size:clamp(1.45rem,2.9vw,2.5rem);line-height:1.18;letter-spacing:-.022em;max-width:26em;color:var(--fg)}
#about .sub{margin-top:22px;max-width:60ch}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:clamp(34px,5vw,64px) 0 clamp(40px,6vw,80px)}
.stat{border-top:1px solid var(--line);padding-top:14px}
.stat b{display:block;font-family:var(--disp);font-weight:200;font-size:clamp(3rem,7vw,6rem);letter-spacing:-.045em;line-height:1;color:var(--acc);font-variant-numeric:tabular-nums}
.stat small{display:block;margin-top:10px;max-width:24ch;line-height:1.45}
#about .tline{position:relative;margin:0;padding-left:clamp(22px,3.4vw,46px);--tp:0}
#about .tline::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;background:var(--line)}
#about .tline::after{content:"";position:absolute;left:0;top:10px;width:1px;height:calc((100% - 20px)*var(--tp));background:var(--acc);box-shadow:0 0 12px var(--acc)}
#about .te{position:relative;display:grid;grid-template-columns:minmax(120px,.3fr) 1fr;gap:clamp(14px,3vw,40px);padding:clamp(22px,3.2vw,40px) 0;opacity:.32;transition:opacity .6s;border:0;background:none}
#about .te::before{content:"";position:absolute;left:calc(-1*clamp(22px,3.4vw,46px) - 4px);top:clamp(34px,4.6vw,56px);width:9px;height:9px;border-radius:50%;background:var(--bg2);border:1px solid var(--dim);transition:all .5s}
#about .te.on{opacity:1}#about .te.on::before{background:var(--acc);border-color:var(--acc);box-shadow:0 0 14px var(--acc)}
#about .te .y{font-family:var(--disp);font-weight:200;font-size:clamp(2.8rem,6.4vw,5.4rem);letter-spacing:-.04em;line-height:.95;color:var(--fg);transition:color .5s}
#about .te.on .y{color:var(--acc)}
#about .te h3{font-family:var(--disp);font-weight:300;font-size:clamp(1.4rem,2.5vw,2.2rem);letter-spacing:-.025em;line-height:1.08;margin-bottom:8px}
#about .te p{color:var(--dim);max-width:52ch}
.ixl{margin-top:clamp(34px,5vw,60px);color:var(--dim)}.ixl a{color:var(--acc)}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}#about .te{grid-template-columns:1fr;gap:6px}}

/* FAQ */
.faq-g{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,90px);align-items:start}
.faq-g .sh{position:sticky;top:96px;margin:0}
.qas{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:22px 0;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa h3{font-family:var(--disp);font-weight:400;font-size:clamp(1.12rem,1.8vw,1.45rem);letter-spacing:-.015em;line-height:1.2;transition:color .3s}
.qa summary:hover h3{color:var(--acc)}
.qa i{position:relative;width:22px;height:22px;flex:none;margin-top:2px}
.qa i::before,.qa i::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:1.5px;background:var(--acc);transition:transform .4s var(--ease)}
.qa i::after{transform:rotate(90deg)}.qa[open] i::after{transform:rotate(0)}
.qa-a{padding:0 0 26px;color:var(--dim);max-width:64ch}
.qa[open] .qa-a{animation:qaIn .5s var(--ease)}
@keyframes qaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(max-width:900px){.faq-g{grid-template-columns:1fr}.faq-g .sh{position:static}}

/* journal */
.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.jc a{display:flex;flex-direction:column;gap:12px;height:100%;padding:clamp(20px,2.4vw,30px);border:1px solid var(--line);border-radius:18px;background:var(--bg);transition:border-color .3s,transform .5s var(--ease),background .3s}
.sec.alt .jc a{background:var(--bg)}
.jc a:hover{border-color:var(--acc);transform:translateY(-5px)}
.jc h3{font-family:var(--disp);font-weight:400;font-size:clamp(1.25rem,1.9vw,1.7rem);letter-spacing:-.022em;line-height:1.12}
.jc p{color:var(--dim);font-size:15px;line-height:1.5}
.jr{margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;align-items:center;color:var(--acc)}
.jr em{font-style:normal;color:var(--dim)}
.jgrid .jc:first-child{grid-column:span 2}
.jgrid .jc:first-child h3{font-size:clamp(1.6rem,2.8vw,2.5rem)}
.jall{margin-top:26px}
@media(max-width:980px){.jgrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.jgrid{grid-template-columns:1fr}.jgrid .jc:first-child{grid-column:auto}}

/* footer */
.foot{padding:clamp(34px,5vw,60px) 0 40px}
.foot-g{display:grid;grid-template-columns:1.3fr 1fr auto;gap:clamp(20px,4vw,50px);align-items:start}
.foot-name{font-family:var(--disp);font-weight:300;font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.03em;color:var(--fg);margin-bottom:8px}
.foot-nav{display:grid;gap:10px}.foot-nav a:hover{color:var(--acc)}
.foot-r{display:grid;gap:10px;justify-items:end}
@media(max-width:800px){.foot-g{grid-template-columns:1fr}.foot-r{justify-items:start}}

/* articles */
.artpage{padding:calc(64px + clamp(34px,5vw,70px)) 0 clamp(60px,8vw,110px)}
.crumbs{display:flex;gap:10px;flex-wrap:wrap;color:var(--dim);margin-bottom:28px}.crumbs a:hover{color:var(--fg)}
.art-h{max-width:960px;display:grid;gap:18px;margin-bottom:clamp(30px,4.5vw,60px)}
.art-h h1,h1.h1big{font-family:var(--disp);font-weight:300;font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:1.02;letter-spacing:-.035em}
h1.h1big{font-size:clamp(2.7rem,7.2vw,6.6rem);line-height:.95}
.art-meta a{color:var(--fg)}.art-meta a:hover{color:var(--acc)}
.art-g{display:grid;grid-template-columns:230px minmax(0,740px);gap:clamp(30px,5vw,90px);align-items:start}
.toc{position:sticky;top:96px}.toc ol{display:grid;gap:11px;margin-top:14px}.toc a{color:var(--dim);line-height:1.35;display:block}.toc a:hover{color:var(--acc)}
.art-b{font-size:1.06rem;line-height:1.7}
.art-b .lead{font-family:var(--disp);font-weight:300;font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.3;letter-spacing:-.015em;color:var(--fg);margin:0 0 36px}
.art-b h2{font-family:var(--disp);font-weight:400;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.025em;line-height:1.1;margin:46px 0 12px;scroll-margin-top:90px}
.art-b p{margin:0 0 16px;color:rgba(235,232,226,.84)}
.art-b ul{margin:0 0 20px;padding-left:1.25em;list-style:disc;color:rgba(235,232,226,.84)}.art-b li{margin:7px 0;padding-left:4px}.art-b li::marker{color:var(--acc)}
.art-b a{color:var(--acc);border-bottom:1px solid rgba(255,178,87,.4);transition:border-color .3s}.art-b a:hover{border-color:var(--acc)}
.art-b strong{font-weight:500;color:var(--fg)}
.art-b table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:.95rem}
.art-b th,.art-b td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.art-b th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:400;color:var(--dim)}
.art-cta{margin:clamp(50px,7vw,90px) 0;padding:clamp(26px,4vw,52px);border:1px solid var(--line);border-radius:20px;background:var(--bg2);display:grid;gap:14px;justify-items:start;position:relative;overflow:hidden}
.art-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 90% 0,var(--glow),transparent 60%);pointer-events:none}
.art-cta h2{font-size:clamp(1.9rem,3.8vw,3.2rem)}.art-cta p{color:var(--dim);max-width:46ch}
.art-more h2{font-size:12px;font-family:var(--mono);margin-bottom:18px;line-height:1;letter-spacing:.1em}
@media(max-width:900px){.art-g{grid-template-columns:1fr}.toc{position:static;border-bottom:1px solid var(--line);padding-bottom:18px}}

/* production room */
.daybar{display:flex;gap:4px;height:100px}
.dseg{flex:var(--w,1) 1 0;min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.03);transition:all .35s;overflow:hidden;cursor:pointer;text-align:left}
.dseg b{color:var(--dim);font-weight:400}.dseg span{font-size:12.5px;line-height:1.2;color:var(--dim)}
.dseg.on{border-color:var(--acc);background:var(--glow)}.dseg.on b,.dseg.on span{color:var(--fg)}
.daycard{margin-top:16px;padding:clamp(18px,2.6vw,30px);border:1px solid var(--line);border-radius:16px;background:var(--bg2);display:grid;gap:10px;min-height:200px;align-content:start}
.daycard .tm{font-family:var(--disp);font-weight:200;font-size:clamp(3rem,7vw,5.6rem);letter-spacing:-.04em;line-height:1;color:var(--acc)}
.daycard h4{font-family:var(--disp);font-weight:400;font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.02em;margin:0}
.daycard p{color:var(--dim);max-width:52ch;margin:0}
.scrub{display:grid;gap:8px;margin-top:18px}.scrub input{width:100%;accent-color:var(--acc);cursor:pointer}
.crew{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 8px}.crew li{padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;animation:crewIn .45s var(--ease) both}
@keyframes crewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.crew-note{font-size:14px;line-height:1.5;margin-top:6px}
.evrow{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;margin-top:14px}
.evbar{position:relative;height:6px;border-radius:3px;background:linear-gradient(90deg,#27456b,#3a3a3d 42%,#3a3a3d 58%,#c9792a)}
.evbar::after{content:"";position:absolute;left:50%;top:-5px;bottom:-5px;width:1px;background:var(--fg)}
.evbar i{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--acc);box-shadow:0 0 14px var(--acc);left:calc(50% + var(--ev,0)*7.5%);transition:left .12s}
#evTxt{min-width:130px;text-align:right;color:var(--fg)}
.dial{display:grid;gap:6px;margin-top:14px}.dial label{display:flex;justify-content:space-between;align-items:baseline}.dial b{font-weight:400;color:var(--acc)}
.dial input{width:100%;accent-color:var(--acc);cursor:pointer}.dial small{font-size:13px;line-height:1.45}
#camReset{margin-top:18px}
.litv{touch-action:none}
.lh{position:absolute;left:var(--x);top:var(--y);width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:2px solid var(--c);background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:grab;display:grid;place-items:center;font-style:normal;box-shadow:0 0 22px var(--c);z-index:3}
.lh::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--c)}
.lh b{position:absolute;top:100%;margin-top:6px;font-weight:400;color:var(--fg);white-space:nowrap;text-shadow:0 1px 6px #000}
.lh:active{cursor:grabbing}
.lh.key{--c:#ffb257}.lh.fill{--c:#8fb6ff}.lh.back{--c:#f2f2f2}
.kelvin{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;margin-top:14px}
.kbar input{width:100%;-webkit-appearance:none;appearance:none;height:8px;border-radius:4px;background:linear-gradient(90deg,#ff9d3d,#ffd5a1 35%,#fff 55%,#cfe2ff 78%,#8db6ff);cursor:pointer}
.kbar input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--fg);border:3px solid var(--bg);box-shadow:0 0 0 1px var(--fg)}
.kbar input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--fg);border:3px solid var(--bg)}
#kV{min-width:70px;text-align:right;color:var(--fg)}
.presets{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 4px}
.presets button{text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:12px;display:grid;gap:4px;transition:all .3s}
.presets button b{font-weight:400}.presets small{color:var(--dim);font-size:12.5px;line-height:1.35}
.presets button:hover{border-color:var(--dim)}.presets button.on{border-color:var(--acc);background:var(--glow)}
@media(max-width:520px){.presets{grid-template-columns:1fr}.daybar{height:84px}.dseg span{display:none}}

.daycard.flip>*{animation:crewIn .45s var(--ease) both}
.camv canvas,.litv canvas{width:100%;height:auto;display:block;border-radius:inherit}
#about .te .y::after{display:none}

#about .te.has-img{grid-template-columns:minmax(120px,.3fr) 1fr minmax(0,.9fr);align-items:center}
#about .te .shot{margin:0;overflow:hidden;border-radius:12px;border:1px solid var(--line);aspect-ratio:4/3;clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease) .15s}
#about .te .shot img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.18);transition:transform 1.6s var(--ease) .15s;filter:saturate(.9) contrast(1.04)}
#about .te.on .shot{clip-path:inset(0)}#about .te.on .shot img{transform:none}
@media(max-width:1000px){#about .te.has-img{grid-template-columns:minmax(100px,.3fr) 1fr}#about .te .shot{grid-column:1/-1}}
@media(max-width:860px){#about .te.has-img{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){#about .te .shot{clip-path:none}#about .te .shot img{transform:none}}

.strip{overflow:visible}.track{padding:0}
#about .te{grid-template-columns:clamp(150px,17vw,250px) 1fr}
#about .te.has-img{grid-template-columns:clamp(150px,17vw,250px) 1fr minmax(0,.85fr)}
@media(max-width:1000px){#about .te.has-img{grid-template-columns:clamp(120px,20vw,200px) 1fr}}
@media(max-width:860px){#about .te,#about .te.has-img{grid-template-columns:1fr}}

/* ───── production room v2: monitor chrome, lens rings, set plan ───── */
.hud{position:absolute;inset:0;pointer-events:none;z-index:4;font-size:11px;color:#fff;text-shadow:0 1px 4px #000}
.hud::before{content:"";position:absolute;inset:12px;--c:rgba(255,255,255,.7);background:
 linear-gradient(var(--c),var(--c)) 0 0/18px 1.5px,linear-gradient(var(--c),var(--c)) 0 0/1.5px 18px,
 linear-gradient(var(--c),var(--c)) 100% 0/18px 1.5px,linear-gradient(var(--c),var(--c)) 100% 0/1.5px 18px,
 linear-gradient(var(--c),var(--c)) 0 100%/18px 1.5px,linear-gradient(var(--c),var(--c)) 0 100%/1.5px 18px,
 linear-gradient(var(--c),var(--c)) 100% 100%/18px 1.5px,linear-gradient(var(--c),var(--c)) 100% 100%/1.5px 18px;background-repeat:no-repeat}
.hrec{position:absolute;left:22px;top:20px;display:flex;align-items:center;gap:7px}
.hrec b{width:9px;height:9px;border-radius:50%;background:#ff3b30;box-shadow:0 0 10px #ff3b30;animation:blink 1.2s steps(2) infinite}
.hud-r{position:absolute;right:22px;top:20px}
.monv,.prev,.litv{background:#050506}
#monCanvas{position:absolute;inset:0;width:100%;height:100%}
#monOver{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.monv{cursor:crosshair;touch-action:manipulation}
.noise{position:absolute;inset:-20px;pointer-events:none;mix-blend-mode:overlay;opacity:0;background-size:160px 160px;z-index:3;animation:grain .45s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-14px,9px)}40%{transform:translate(11px,-12px)}60%{transform:translate(-8px,-6px)}80%{transform:translate(13px,10px)}100%{transform:translate(0,0)}}
.histc{position:absolute;right:22px;bottom:22px;width:128px!important;height:46px!important;border:1px solid rgba(255,255,255,.25);border-radius:4px;z-index:4;pointer-events:none}
.histc[hidden]{display:none}
#monRead{top:auto;bottom:20px;left:22px;z-index:4;background:rgba(0,0,0,.55)}
.fpt{position:absolute;width:15%;aspect-ratio:1.2;transform:translate(-50%,-50%);border:2px solid #4cff7a;border-radius:3px;z-index:4;pointer-events:none;box-shadow:0 0 14px rgba(76,255,122,.5);transition:left .15s,top .15s}
.fpt[hidden]{display:none}
.fpt b{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:6px;white-space:nowrap;font-weight:400;color:#4cff7a;font-size:11px;text-shadow:0 1px 4px #000}
.fpt.tap{animation:tapf .5s ease-out}
@keyframes tapf{from{transform:translate(-50%,-50%) scale(1.5);opacity:.3}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
.tools button:not(.btn){padding:9px 16px;border:1px solid var(--line);border-radius:999px;color:var(--dim);font-size:12px;letter-spacing:.06em;text-transform:uppercase;transition:all .25s}
.tools button[aria-pressed="true"]{border-color:var(--acc);color:var(--acc);background:var(--glow)}
.ring{position:relative;height:48px;border:1px solid var(--line);border-radius:10px;background:#0c0c0e;cursor:ew-resize;touch-action:none;overflow:hidden;--o:0px;user-select:none}
.ring::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,rgba(235,232,226,.5) 0 1px,transparent 1px 12px),repeating-linear-gradient(90deg,rgba(255,178,87,.95) 0 2px,transparent 2px 60px);background-size:auto 38%,auto 70%;background-repeat:repeat-x;background-position:var(--o) 100%,var(--o) 100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
.ring::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.ring:hover{border-color:var(--dim)}.ring.grab,.ring:focus-visible{border-color:var(--acc);outline:0}
.ringw{margin-top:14px}
/* set */
.setg{grid-template-columns:1.18fr 1fr}
.planbox{border:1px solid var(--line);border-radius:14px;background:#0a0a0c;padding:8px}
#planSvg{width:100%;height:auto;display:block;touch-action:none;user-select:none;-webkit-user-select:none}
.pl-floor{fill:#101013}.pl-grid line{stroke:rgba(255,255,255,.05)}
.pl-wall{fill:none;stroke:#8a867f;stroke-width:5}
.pl-zone{fill:rgba(143,182,255,.05);stroke:rgba(143,182,255,.75);stroke-width:1.5;stroke-dasharray:8 7}
.pl-door{fill:#101013}.pl-swing{fill:none;stroke:#8a867f;stroke-width:1;stroke-dasharray:3 3}
.pl-ins,.pl-mon{fill:#1b1b1f;stroke:#6c6862}
.pl-table{fill:#1d1d21;stroke:#c9c5bd;stroke-width:1.5}
.pl-pat{fill:rgba(255,178,87,.22);stroke:rgba(255,178,87,.7)}
.pl-lamp{fill:none;stroke:#ebe8e2;stroke-dasharray:3 4;opacity:.5}.pl-lamp2{fill:#ebe8e2;opacity:.25}
.pl-ppl{fill:#26262b;stroke:#ebe8e2}
.pl-t{font:500 10.5px "DM Mono",monospace;fill:#8f8b83;text-transform:uppercase;letter-spacing:.06em;pointer-events:none}
.pl-fov{fill:rgba(255,178,87,.05);cursor:pointer}.pl-fov.on{fill:rgba(255,178,87,.17)}
.pl-cam{cursor:grab}.pl-cam rect,.pl-cam path{fill:#18181b;stroke:#8a867f;stroke-width:1.6}
.pl-cam.on rect,.pl-cam.on path{fill:#1b140a;stroke:#ffb257;filter:drop-shadow(0 0 6px #ffb257)}
.pl-cl{font:600 12px "DM Mono",monospace;fill:#ebe8e2;pointer-events:none}
.pl-hdl{fill:#0b0b0c;stroke:#ffb257;stroke-width:2.5;cursor:grab;filter:drop-shadow(0 0 5px #ffb257)}
.camseg button b{color:var(--acc);margin-right:8px;font-weight:500}
.lensseg{align-items:center}.lensseg span{margin-left:4px}
.reads{display:grid;gap:0;margin:4px 0 0}.reads div{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--line)}
.reads dt{color:var(--dim);font-size:12px}.reads dd{margin:0;color:var(--fg);text-align:right;font-size:12.5px}
.chip{display:inline-block;padding:8px 14px;border:1px solid var(--acc);color:var(--acc);border-radius:999px;font-size:12px;line-height:1.35;margin:4px 0}
.chip.warn{border-color:#ff6a5e;color:#ff6a5e;background:rgba(255,106,94,.08)}
.realshot{margin:6px 0 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;animation:crewIn .6s var(--ease) both}
.realshot[hidden]{display:none}.realshot img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}.realshot figcaption{padding:8px 12px}
@media(max-width:980px){.setg{grid-template-columns:1fr}}

.stats{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* ───── legal pages, footer legal row, consent banner ───── */
.foot-legal{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:11.5px;line-height:1.6}
.foot-legal p{max-width:62ch}.foot-legal nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-legal a,.foot-legal button{color:var(--dim);transition:color .25s;font:inherit;letter-spacing:inherit;text-transform:inherit}
.foot-legal a:hover,.foot-legal button:hover{color:var(--acc)}
.legal-b{max-width:760px}.legal-b h2{font-size:clamp(1.3rem,2vw,1.7rem);margin:2em 0 .6em}.legal-b p,.legal-b li{color:var(--dim);line-height:1.7}.legal-b ul{padding-left:1.1em;display:grid;gap:12px;margin:.8em 0}.legal-b b{color:var(--fg);font-weight:500}.legal-b a{color:var(--acc)}
.legal-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.legal-nav a{padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:var(--dim)}.legal-nav a[aria-current]{border-color:var(--acc);color:var(--acc)}
.co{display:grid;gap:0;margin:1.2em 0;border:1px solid var(--line);border-radius:12px;overflow:hidden}.co div{display:grid;grid-template-columns:minmax(120px,.35fr) 1fr;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line)}.co div:last-child{border:0}.co dt{color:var(--dim);font-size:12px}.co dd{margin:0;color:var(--fg);font-size:13px}
.legal-t{width:100%;border-collapse:collapse;font-size:14px;margin:1em 0}.legal-t th,.legal-t td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--dim)}.legal-t th{color:var(--fg);font-weight:400;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.linkbtn{color:var(--acc);text-decoration:underline;text-underline-offset:3px;font:inherit}
.consent{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:120;width:min(760px,calc(100vw - 24px));display:flex;gap:18px;align-items:center;justify-content:space-between;padding:16px 18px;background:rgba(14,14,16,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:crewIn .5s var(--ease) both}
.consent[hidden]{display:none}.consent p{margin:0;font-size:13.5px;line-height:1.5}.consent p.M{color:var(--fg);margin-bottom:4px}.consent a{color:var(--acc)}
.consent-b{display:flex;gap:8px;flex:none}
@media(max-width:640px){.consent{flex-direction:column;align-items:stretch}.consent-b{justify-content:stretch}.consent-b .btn{flex:1}.co div{grid-template-columns:1fr;gap:2px}}

/* ───── set v2: talking-head interview ───── */
.prev{aspect-ratio:960/402}
.pl-beam.amber{fill:rgba(255,178,87,.13)}.pl-beam.white{fill:rgba(255,255,255,.07)}
.pl-aglow{fill:url(#ambG)}.pl-amb{fill:#4cc8ff;filter:drop-shadow(0 0 5px #4cc8ff)}
.pl-key{fill:#2a1b08;stroke:#ffb257;stroke-width:1.6;filter:drop-shadow(0 0 5px rgba(255,178,87,.7))}
.pl-ref{fill:#d8d3c8;stroke:#fff;stroke-width:1}
.pl-scr{fill:#10253a;stroke:#6ec0ff;stroke-width:1.4}
.pl-prm{fill:rgba(160,205,255,.22);stroke:#9ccfff;stroke-width:1.2}
.pl-eye{stroke:#ebe8e2;stroke-dasharray:3 4;opacity:.45;fill:none}
.pl-arm{stroke:#6c6862;stroke-width:3}
.pl-op{fill:#26262b;stroke:#4cff7a;stroke-width:1.5}
.pl-pole{stroke:#4cff7a;stroke-width:2;stroke-dasharray:4 3}
.pl-mic{fill:#0a1a0f;stroke:#4cff7a;stroke-width:2.5;cursor:grab;filter:drop-shadow(0 0 6px #4cff7a)}
.boomdial{margin:4px 0}.boomdial input{width:100%;accent-color:#4cff7a}.boomdial b{color:#4cff7a}
.rig-h{margin:14px 0 4px;letter-spacing:.1em;text-transform:uppercase}
.rig{display:grid;gap:0;margin:0;padding:0}.rig li{padding:10px 0;border-bottom:1px solid var(--line)}.rig b{font-weight:500;color:var(--fg)}.rig span{color:var(--acc);margin-left:8px;font-size:11.5px}.rig p{margin:4px 0 0;color:var(--dim);font-size:13.5px;line-height:1.5}
.realshot img{aspect-ratio:2000/837}
.chk{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}.chk li{position:relative;padding-left:22px;color:var(--fg);font-size:15px;line-height:1.45}.chk li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.daycard{min-height:300px}
.rig{grid-template-columns:1fr 1fr;column-gap:22px}.rig li:nth-last-child(-n+2){border-bottom:0}
@media(max-width:700px){.rig{grid-template-columns:1fr}.rig li:nth-last-child(2){border-bottom:1px solid var(--line)}}
.realshot{margin:0 0 6px}.setg .prev{margin-bottom:6px}

/* the consent banner no longer slides off screen: centred with auto margins instead of a transform the animation would cancel */
.consent{left:0;right:0;margin-inline:auto;transform:none}
@media(max-width:560px){.hdr-r .chip{display:none}}


/* ───── about: portrait + 2026 gallery ───── */
.about-top{display:grid;grid-template-columns:1fr minmax(220px,.42fr);gap:clamp(24px,4vw,64px);align-items:end}
.about-ph{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 60px rgba(255,178,87,.08)}
.about-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
@media(max-width:860px){.about-top{grid-template-columns:1fr}.about-ph{max-width:340px;aspect-ratio:4/4.6}}
#about .te .shot.port{aspect-ratio:3/4;max-height:520px}#about .te .shot.port img{object-position:50% 28%}
#about .te.has-img{align-items:start}
#about .te .te-gal{grid-column:1/-1;display:flex;gap:clamp(8px,1.2vw,14px);overflow-x:auto;scrollbar-width:none;margin-top:clamp(10px,2vw,22px)}#about .te .te-gal::-webkit-scrollbar{display:none}
#about .te .te-gal figure{margin:0;flex:0 0 auto;height:clamp(180px,22vw,300px);border-radius:12px;overflow:hidden;border:1px solid var(--line);clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease) .2s}
#about .te.on .te-gal figure{clip-path:inset(0)}#about .te .te-gal figure:nth-child(2){transition-delay:.3s}#about .te .te-gal figure:nth-child(3){transition-delay:.4s}#about .te .te-gal figure:nth-child(4){transition-delay:.5s}
#about .te .te-gal img{height:100%;width:auto;display:block}
@media(prefers-reduced-motion:reduce){#about .te .te-gal figure{clip-path:none}}

/* ───── what I do: behind-the-scenes row ───── */
.wi-ph{display:flex;gap:clamp(10px,1.4vw,18px);height:clamp(240px,30vw,430px);margin:clamp(22px,3vw,40px) 0}
.wi-ph figure{flex:var(--ar) 1 0;min-width:0;margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);position:relative}
.wi-ph img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.06);transition:transform 1.4s var(--ease),filter .6s;filter:saturate(.92)}
.wi-ph figure:hover img{transform:scale(1.1);filter:saturate(1.05)}
.wi-ph figure:nth-child(2){transition-delay:.12s}.wi-ph figure:nth-child(3){transition-delay:.24s}
@media(max-width:700px){.wi-ph{flex-direction:column;height:auto}.wi-ph figure{flex:none;aspect-ratio:var(--ar)}}

/* story photos: small, tidy thumbnails beside the text (never taller than 300 px) */
#about .te.has-img{grid-template-columns:clamp(150px,17vw,250px) 1fr clamp(170px,18vw,240px);align-items:start}
#about .te .shot,#about .te .shot.port{width:100%;aspect-ratio:var(--ar,1.333);max-height:300px}
#about .te .shot img{object-position:50% 30%}
@media(max-width:1000px){#about .te.has-img{grid-template-columns:clamp(110px,22vw,190px) 1fr}#about .te .shot{grid-column:2;max-width:260px}}
@media(max-width:860px){#about .te.has-img{grid-template-columns:1fr}#about .te .shot{grid-column:auto;max-width:280px}}

/* ───── header v2: more room, larger type, fewer boxes ───── */
.hdr{height:80px;display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,3vw,48px);padding:0 clamp(24px,3.4vw,56px)}
.brand{font-family:var(--disp);font-weight:400;font-size:clamp(17px,1.35vw,20px);letter-spacing:-.01em;text-transform:none;gap:14px;justify-self:start}
.brand i{width:9px;height:9px}
.nav{font-family:var(--disp);font-weight:400;font-size:clamp(14.5px,1.12vw,16.5px);letter-spacing:0;text-transform:none;gap:clamp(24px,2.7vw,46px);color:rgba(235,232,226,.82);justify-self:center}
.nav a{padding:8px 0;border-bottom:1.5px solid transparent;white-space:nowrap}
.hdr-r{justify-self:end;gap:clamp(12px,1.6vw,24px)}
.lang{padding:4px;gap:3px}
.lang button,.lang a{padding:8px 14px;font-size:12.5px;letter-spacing:.06em}
.chip{height:auto;padding:8px 0;border:0;border-radius:0;background:none;font-family:var(--disp);font-size:clamp(14px,1.05vw,15.5px);letter-spacing:0;text-transform:none;color:rgba(235,232,226,.82);border-bottom:1.5px solid transparent}
.chip:hover{background:none;color:var(--acc);border-color:var(--acc)}
.menu-btn{height:46px}
.artpage{padding-top:calc(80px + clamp(34px,5vw,70px))}
@media(max-width:1240px){.chip{display:none}}
@media(max-width:1020px){.hdr{display:flex;height:72px}.nav,.hdr-r .lang{display:none}.menu-btn{display:inline-flex}}