/* ===== AI Portfolio page (page-ai-portfolio.php) ===== */
#aip{--blue:#000AFF;--grey:#858E8E;--ink:#E3E5E5;--line:rgba(227,229,229,.42);--r:clamp(6.4px,.5208vw,10px);--px:40px;--inner:calc(34.8*var(--r));position:relative;background:#000;color:#fff;font-family:"Neue Machina","Helvetica Neue",Arial,sans-serif;font-weight:300;line-height:1.5;font-size:max(13px,calc(1.6*var(--r)));overflow-x:clip;-webkit-text-size-adjust:100%}
#aip *,#aip *::before,#aip *::after{box-sizing:border-box}
#aip h1,#aip h2,#aip h3,#aip p,#aip ul,#aip ol,#aip figure{margin:0;padding:0}
#aip a{color:inherit;text-decoration:none}
#aip img,#aip video{display:block;max-width:100%;height:auto}
#aip button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;border-radius:0}
#aip ul,#aip ol{list-style:none}
#aip .sq{display:inline-block;width:calc(1*var(--r));height:calc(1*var(--r));min-width:7px;min-height:7px;background:var(--grey);margin-right:calc(1.2*var(--r));vertical-align:.1em}
#aip .sq.on{background:var(--blue)}
body.lock,html.lock{overflow:hidden}
@media (max-width:1023px){#aip{--r:10px;--px:24px;--inner:24px}}
@media (max-width:760px){#aip{--px:20px;--inner:20px}}

/* ---------- 1. hero: wall of projects ---------- */
#aip .hx{position:relative;margin-top:calc(-1*var(--aip-hdr,0px));height:100vh;min-height:680px;max-height:1200px;overflow:hidden;background:#000;isolation:isolate}
#aip .hx-bg{position:absolute;inset:0;background:radial-gradient(55% 50% at 50% 50%,rgba(0,10,255,.22),rgba(0,10,255,0) 70%)}
#aip .hx-wall{position:absolute;left:-8%;right:-8%;top:-12%;bottom:-12%;display:flex;gap:calc(2.4*var(--r));justify-content:center;transform:rotate(-5deg);transform-origin:50% 50%;will-change:transform}
#aip .hx-col{flex:1 1 0;min-width:0;overflow:hidden}
#aip .hx-track{display:flex;flex-direction:column;gap:calc(2.4*var(--r));animation:aipUp var(--d,70s) linear infinite;will-change:transform}
#aip .hx-col:nth-child(even) .hx-track{animation-name:aipDown}
#aip .hx-col:hover .hx-track{animation-play-state:paused}
@keyframes aipUp{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes aipDown{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
#aip .hx-c{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;background:#111;cursor:pointer;opacity:.42;filter:saturate(.8);transition:opacity .6s ease,filter .6s ease,transform .8s cubic-bezier(.2,.7,.2,1);border:0;padding:0;-webkit-tap-highlight-color:transparent}
#aip .hx-c img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
#aip .hx-c:hover,#aip .hx-c:focus-visible{opacity:1;filter:none;transform:scale(1.03);outline:none}
#aip .hx-shade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 45% at 50% 52%,rgba(0,0,0,.72),rgba(0,0,0,.35) 60%,rgba(0,0,0,.12))}
#aip .hx-in{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:var(--aip-hdr,0px) var(--px) 0;pointer-events:none}
#aip .hx-title{font-weight:900;letter-spacing:-.02em;line-height:.92;font-size:clamp(44px,6.3vw,122px);text-transform:uppercase;color:#fff;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:.06em;text-align:center}
#aip .hx-title span{display:block;overflow:hidden;padding:.04em 0;text-align:center}
#aip .hx-title .hx-b{color:transparent;-webkit-text-stroke:1.5px #fff;font-size:.62em;letter-spacing:-.01em}
#aip .hx-title .ch{display:inline-block;will-change:transform}
#aip .hx-foot{width:100%;display:flex;justify-content:flex-start;align-items:center;gap:calc(4*var(--r));margin-top:calc(6*var(--r))}
#aip .hx-go{pointer-events:auto;display:inline-flex;align-items:center;gap:calc(1.6*var(--r));height:max(44px,calc(6*var(--r)));padding:0 calc(3.2*var(--r));border-radius:99px;background:#fff;color:#000;font-weight:500;font-size:max(12px,calc(1.5*var(--r)));letter-spacing:.04em;text-transform:uppercase;transition:background .3s,color .3s}
#aip .hx-go:hover{background:var(--blue);color:#fff}
#aip .hx-go svg{animation:aipArr 1.8s ease-in-out infinite}
@keyframes aipArr{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}
#aip .hx-live{margin-top:calc(4*var(--r));display:flex;align-items:center;gap:calc(1.2*var(--r));font-size:max(12px,calc(1.5*var(--r)));letter-spacing:.06em;text-transform:uppercase;color:var(--grey);min-width:0}
#aip .hx-live i{width:calc(.9*var(--r));height:calc(.9*var(--r));min-width:7px;min-height:7px;background:var(--blue);display:block;flex:none}
#aip .hx-live span{color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1023px){
  #aip .hx{height:82svh;min-height:520px;max-height:820px}
  #aip .hx-in{padding:var(--aip-hdr,0px) var(--px) 0}#aip .hx-foot{margin-top:28px}
  #aip .hx-title{font-size:clamp(40px,9vw,88px)}
  #aip .hx-wall{gap:12px;left:-30%;right:-30%}#aip .hx-track{gap:12px}
  #aip .hx-live{margin-top:20px}
  #aip .hx-wall{top:-10%;bottom:-10%;transform:rotate(-4deg)}
}
@media (max-width:760px){#aip .hx-title{font-size:min(12vw,56px)}}
@media (prefers-reduced-motion:reduce){#aip .hx-track{animation:none}#aip .mq-t{animation:none}}

/* ---------- 2. manifest ---------- */
#aip .mf{padding:calc(18*var(--r)) var(--px) calc(6*var(--r))}
#aip .mf-kick{font-size:max(13px,calc(1.6*var(--r)));letter-spacing:.02em;color:var(--ink);margin-bottom:calc(4*var(--r))}
#aip .mf-text{font-weight:500;font-size:max(26px,calc(6.6*var(--r)));line-height:1;letter-spacing:-.025em;max-width:calc(155*var(--r));text-transform:none}
#aip .mf-text .w{opacity:.14;display:inline-block;margin-right:.26em;will-change:opacity}
#aip .mf-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 calc(8*var(--r));margin:calc(10*var(--r)) 0 0 var(--inner);max-width:calc(140*var(--r))}
#aip .mf-cols p{font-size:max(14px,calc(1.8*var(--r)));line-height:1.5;color:var(--ink)}
#aip .mf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:calc(12*var(--r));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#aip .mf-stats div{padding:calc(3*var(--r)) calc(2*var(--r)) calc(3*var(--r)) 0}
#aip .mf-stats b{display:block;font-weight:900;font-size:max(44px,calc(11*var(--r)));letter-spacing:-.04em;line-height:1}
#aip .mf-stats span{display:block;margin-top:calc(1.4*var(--r));font-size:max(12px,calc(1.5*var(--r)));color:var(--grey);letter-spacing:.02em;max-width:calc(22*var(--r))}
@media (max-width:1023px){#aip .mf{padding:90px var(--px) 36px}#aip .mf-cols{grid-template-columns:1fr;gap:20px;margin:48px 0 0}#aip .mf-stats{grid-template-columns:1fr 1fr;margin-top:64px}#aip .mf-stats div{padding-bottom:28px;padding-top:24px}}
/* marquee */
#aip .mq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:calc(3*var(--r)) 0;user-select:none}
#aip .mq-t{display:flex;width:max-content;animation:aipMq 46s linear infinite}
#aip .mq-t span{font-weight:900;font-size:max(40px,calc(11*var(--r)));line-height:1;letter-spacing:-.03em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(227,229,229,.5);white-space:nowrap;padding:0 calc(3*var(--r));display:flex;align-items:center;gap:calc(6*var(--r))}
#aip .mq-t span::after{content:"";width:calc(2.4*var(--r));height:calc(2.4*var(--r));min-width:14px;min-height:14px;background:var(--blue);display:block;transform:rotate(45deg)}
#aip .mq:hover .mq-t{animation-play-state:paused}
@keyframes aipMq{to{transform:translateX(-50%)}}

/* ---------- 3. projects ---------- */
#aip .wk{padding:calc(7*var(--r)) var(--px) calc(16*var(--r))}
#aip .wk-head{display:flex;justify-content:space-between;align-items:flex-end;gap:calc(6*var(--r));margin-bottom:calc(8*var(--r));flex-wrap:wrap}
#aip .wk-head h2{font-weight:900;font-size:max(40px,calc(12*var(--r)));line-height:.9;letter-spacing:-.04em;text-transform:uppercase;color:#fff}
#aip .wk-head sup{font-size:.28em;font-weight:300;color:var(--blue);letter-spacing:0;vertical-align:top;margin-left:.3em}
#aip .wk-sub{max-width:calc(40*var(--r));color:var(--grey);font-size:max(13px,calc(1.6*var(--r)));line-height:1.5}
#aip .wk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(7*var(--r)) calc(5*var(--r))}
#aip .wc{position:relative;min-width:0;cursor:pointer;outline:none}
#aip .wc.hide{display:none}
#aip .wc-no{display:flex;justify-content:space-between;font-size:max(13px,calc(1.6*var(--r)));line-height:30px;letter-spacing:-.01em}
#aip .wc-no em{font-style:normal;color:var(--grey)}
#aip .wc-img{display:block;position:relative;aspect-ratio:5/6;overflow:hidden;background:#111}
#aip .wc-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
#aip .wc-img img.shot{height:auto;object-fit:initial;position:absolute;left:0;top:0;transform:translate3d(0,0,0);transition:transform 1.6s cubic-bezier(.3,.1,.2,1);will-change:transform}
#aip .wc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 40%);opacity:0;transition:opacity .4s;pointer-events:none}
#aip .wc-act{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%) translateY(calc(1.4*var(--r)));display:flex;gap:calc(.8*var(--r));opacity:0;transition:opacity .35s,transform .35s;pointer-events:none}
#aip .wc-ic{width:calc(7*var(--r));height:calc(7*var(--r));min-width:46px;min-height:46px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.88);color:#fff;transition:background .25s,color .25s}
#aip .wc-ic svg{width:calc(2.2*var(--r));height:calc(2.2*var(--r));min-width:18px;min-height:18px}
#aip .wc-ic:hover,#aip .wc-ic:focus-visible{background:var(--blue);outline:none}
#aip .wc-fav.on{color:#ff3b5c}
#aip .wc-fav.on svg{fill:currentColor}
#aip .wc-name{display:block;margin-top:calc(1*var(--r));font-size:max(13px,calc(1.6*var(--r)));line-height:30px;letter-spacing:-.01em}
#aip .wc-name b{font-weight:700}
@media (hover:hover){
#aip .wc:hover .wc-img img.shot{transform:translate3d(0,var(--dy,0px),0);transition:transform var(--dur,8s) cubic-bezier(.4,.05,.6,.95)}
#aip .wc:hover .wc-img::after{opacity:1}
#aip .wc:hover .wc-act{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}
}
#aip .wc:focus-visible .wc-img{outline:2px solid var(--blue)}
#aip .wk-list{list-style:none;border-bottom:1px solid var(--line)}
#aip .wr{display:grid;grid-template-columns:calc(8*var(--r)) minmax(0,1fr) calc(30*var(--r)) calc(24*var(--r)) calc(6*var(--r));align-items:center;gap:0 calc(3*var(--r));width:100%;text-align:left;padding:calc(3.4*var(--r)) 0;border-top:1px solid var(--line);color:#fff;cursor:pointer;transition:opacity .35s}
#aip .wr.hide{display:none}
#aip .wr-n{font-size:max(13px,calc(1.6*var(--r)));color:var(--grey)}
#aip .wr-b{font-weight:700;font-size:max(24px,calc(6.4*var(--r)));line-height:1;letter-spacing:-.03em;text-transform:uppercase;transition:transform .45s cubic-bezier(.2,.7,.2,1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#aip .wr-t{font-size:max(13px,calc(1.6*var(--r)));color:var(--ink);line-height:1.3}
#aip .wr-c{font-size:max(12px,calc(1.4*var(--r)));letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
#aip .wr-a{justify-self:end;width:calc(5*var(--r));height:calc(5*var(--r));min-width:30px;min-height:30px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;transition:background .3s,color .3s,transform .4s}
#aip .wr-a svg{width:45%;height:45%}
@media (hover:hover){
#aip .wk-list:hover .wr{opacity:.28}
#aip .wk-list:hover .wr:hover{opacity:1}
#aip .wr:hover .wr-b{transform:translateX(calc(2.4*var(--r)));color:var(--blue)}
#aip .wr:hover .wr-a{background:#fff;color:#000;transform:rotate(-45deg)}
}
#aip .wk-empty{padding:calc(12*var(--r)) 0;text-align:center;color:var(--grey);font-size:max(16px,calc(2.4*var(--r)))}
#aip .wk-empty button{margin-top:calc(3*var(--r));height:calc(6*var(--r));min-height:44px;padding:0 calc(3.2*var(--r));border-radius:99px;border:1px solid var(--line);color:#fff;font-size:max(13px,calc(1.6*var(--r)));transition:background .3s,color .3s}
#aip .wk-empty button:hover{background:#fff;color:#000}
#aip .wk-grid[hidden],#aip .wk-list[hidden],#aip .wk-empty[hidden]{display:none!important}
@media (max-width:1023px){
#aip .wk{padding:40px var(--px) 130px}
#aip .wk-head{margin-bottom:40px;gap:20px}
#aip .wk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px}
#aip .wr{grid-template-columns:44px minmax(0,1fr) 40px;gap:0 12px;padding:22px 0}
#aip .wr-t,#aip .wr-c{display:none}
#aip .wr-b{font-size:clamp(22px,5.6vw,40px)}
}
@media (max-width:760px){#aip .wk-grid{grid-template-columns:1fr}#aip .wk-head h2{font-size:min(77px,17vw)}}
/* list preview */
#aip .pv{position:fixed;left:0;top:0;z-index:90;width:calc(32*var(--r));min-width:220px;pointer-events:none;opacity:0;transform:translate3d(-999px,-999px,0)}
#aip .pv-fr{position:relative;aspect-ratio:4/5;overflow:hidden;background:#111;border:1px solid rgba(255,255,255,.18);transform:scale(.8);opacity:0;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s}
#aip .pv.on .pv-fr{transform:scale(1);opacity:1}
#aip .pv-fr img{display:block;width:100%;height:auto;position:absolute;left:0;top:0;transform:translate3d(0,0,0)}
#aip .pv.on .pv-fr img{transform:translate3d(0,var(--dy,0px),0);transition:transform var(--dur,8s) cubic-bezier(.4,.05,.6,.95)}
@media (hover:none),(max-width:1023px){#aip .pv{display:none}}

/* ---------- 4. CTA ---------- */
#aip .cta{position:relative;height:calc(100vh - 150px);min-height:560px;max-height:1000px;overflow:hidden;background:#000}
#aip .cta-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#aip .cta-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.35) 60%,rgba(0,0,0,.1)),linear-gradient(0deg,#000,transparent 30%)}
#aip .cta-in{position:absolute;left:var(--px);right:var(--px);bottom:calc(12*var(--r));display:flex;flex-direction:column;align-items:flex-start;gap:calc(3*var(--r))}
#aip .cta-in p{font-size:max(13px,calc(1.6*var(--r)));letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
#aip .cta-in h2{font-weight:900;font-size:max(30px,calc(9.6*var(--r)));line-height:.98;letter-spacing:-.04em;max-width:calc(130*var(--r));text-transform:uppercase;color:#fff}
#aip .cta-btn{display:inline-flex;align-items:center;gap:calc(2*var(--r));height:max(52px,calc(9*var(--r)));padding:0 calc(5*var(--r));border-radius:99px;background:#fff;color:#000;font-weight:500;font-size:max(14px,calc(2*var(--r)));letter-spacing:.02em;transition:background .3s,color .3s;will-change:transform}
#aip .cta-btn:hover{background:var(--blue);color:#fff}
@media (max-width:1023px){#aip .cta{height:auto;min-height:0;max-height:none}#aip .cta-in{position:relative;left:auto;right:auto;bottom:auto;padding:140px var(--px) 80px}}

/* ---------- dock ---------- */
#aip .dock{position:fixed;left:50%;bottom:calc(2.6*var(--r));z-index:80;display:flex;align-items:center;gap:calc(.4*var(--r));padding:calc(.8*var(--r));border-radius:99px;background:rgba(16,16,16,.74);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.14);transform:translate(-50%,160%);opacity:0;visibility:hidden;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s,visibility .4s;max-width:calc(100vw - 20px)}
#aip .dock.on{transform:translate(-50%,0);opacity:1;visibility:visible}
#aip .dk-b{position:relative;width:max(40px,calc(5*var(--r)));height:max(40px,calc(5*var(--r)));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;transition:background .25s,color .25s;flex:none;font-size:max(12px,calc(1.5*var(--r)));font-weight:500}
#aip .dk-b svg{width:max(17px,calc(2*var(--r)));height:max(17px,calc(2*var(--r)))}
#aip .dk-b:hover{background:rgba(255,255,255,.14)}
#aip .dk-b.on{background:#fff;color:#000}
#aip .dk-b b{position:absolute;right:-2px;top:-2px;min-width:16px;height:16px;border-radius:8px;background:var(--blue);color:#fff;font-size:10px;line-height:16px;text-align:center;font-weight:500;padding:0 4px}
#aip .dk-sep{width:1px;height:max(20px,calc(2.6*var(--r)));background:rgba(255,255,255,.16);margin:0 calc(.4*var(--r));flex:none}
#aip .dk-search{display:flex;align-items:center}
#aip .dk-search input{width:0;opacity:0;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;color:#fff;font:inherit;font-size:max(14px,calc(1.6*var(--r)));outline:none;transition:width .4s cubic-bezier(.2,.8,.2,1),opacity .3s,padding .3s;min-width:0;height:auto}
#aip .dk-search input::placeholder{color:var(--grey)}
#aip .dock.s-open .dk-search input{width:max(160px,calc(22*var(--r)));opacity:1;padding:0 calc(1*var(--r)) 0 calc(.2*var(--r))}
#aip .dock.s-open .dk-search .dk-b{background:rgba(255,255,255,.14)}
#aip .dk-catw{position:relative}
#aip .dk-cat{display:flex;align-items:center;gap:calc(1*var(--r));height:max(40px,calc(5*var(--r)));padding:0 calc(1.8*var(--r));border-radius:99px;color:#fff;font-size:max(13px,calc(1.6*var(--r)));font-weight:500;white-space:nowrap;transition:background .25s}
#aip .dk-cat:hover,#aip .dk-cat[aria-expanded=true]{background:rgba(255,255,255,.14)}
#aip .dk-cat b{font-weight:400;color:var(--grey);font-size:.85em}
#aip .dk-cat svg{transition:transform .3s}
#aip .dk-cat[aria-expanded=true] svg{transform:rotate(180deg)}
#aip .dk-pop{position:absolute;left:50%;bottom:calc(100% + calc(1.4*var(--r)));transform:translateX(-50%);min-width:max(240px,calc(30*var(--r)));padding:calc(.8*var(--r));border-radius:calc(2.2*var(--r));background:#0f0f0f;border:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;transform-origin:50% 100%}
#aip .dk-pop[hidden]{display:none}
#aip .dk-pop button{display:flex;justify-content:space-between;align-items:center;gap:calc(2*var(--r));padding:calc(1.3*var(--r)) calc(1.6*var(--r));border-radius:calc(1.4*var(--r));color:#fff;font-size:max(14px,calc(1.7*var(--r)));text-align:left;transition:background .2s}
#aip .dk-pop button b{font-weight:400;color:var(--grey);font-size:.85em}
#aip .dk-pop button:hover{background:rgba(255,255,255,.1)}
#aip .dk-pop button.on{background:#fff;color:#000}
#aip .dk-pop button.on b{color:#555}
#aip .dk-sort span{letter-spacing:-.02em}
#aip .dk-views{display:flex;align-items:center;gap:calc(.2*var(--r))}
#aip .dk-favb:not(.has) b{display:none}
#aip .toast{position:fixed;left:50%;bottom:calc(11*var(--r));z-index:120;transform:translate(-50%,20px);padding:calc(1.4*var(--r)) calc(2.4*var(--r));border-radius:99px;background:#fff;color:#000;font-size:max(13px,calc(1.5*var(--r)));font-weight:500;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
#aip .toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:760px){
#aip .dock{bottom:12px;padding:6px;gap:2px}
#aip .dk-sort,#aip #dkRnd,#aip .dk-sep{display:none}
#aip .dk-cat{padding:0 14px}
#aip .dock.s-open .dk-catw,#aip .dock.s-open .dk-views,#aip .dock.s-open .dk-favb{display:none}
#aip .dock.s-open .dk-search input{width:calc(100vw - 120px)}
#aip .toast{bottom:84px}
}

/* ---------- project viewer ---------- */
#aip .mv{position:fixed;inset:0;z-index:250;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;visibility:hidden;opacity:0;overflow:hidden;overscroll-behavior:contain}
#aip .mv.open{visibility:visible;opacity:1}
#aip .mv-sheet{position:absolute;left:0;right:0;bottom:0;height:90vh;height:90svh;background:#070707;border-radius:calc(2.8*var(--r)) calc(2.8*var(--r)) 0 0;border-top:1px solid rgba(255,255,255,.16);box-shadow:0 calc(-3*var(--r)) calc(10*var(--r)) rgba(0,10,255,.16);overflow:hidden;will-change:transform}
#aip .mv-sheet::before{content:"";position:absolute;left:50%;top:calc(1.1*var(--r));width:calc(6*var(--r));height:4px;border-radius:2px;background:rgba(255,255,255,.22);transform:translateX(-50%);z-index:4}
#aip .mv-top{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:calc(2.4*var(--r)) var(--px);pointer-events:none}
#aip .mv-tn{font-size:max(13px,calc(1.6*var(--r)));color:var(--grey);letter-spacing:.02em}
#aip .mv-x{pointer-events:auto;width:max(44px,calc(5.6*var(--r)));height:max(44px,calc(5.6*var(--r)));border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:#fff;transition:background .3s,color .3s,transform .4s}
#aip .mv-x svg{width:45%;height:45%}
#aip .mv-x:hover{background:#fff;color:#000;transform:rotate(90deg)}
#aip .mv-stage{position:absolute;inset:0;padding:calc(8*var(--r)) var(--px) calc(4*var(--r));display:grid;grid-template-columns:minmax(0,1fr) calc(40*var(--r));gap:calc(5*var(--r))}
#aip .mv-frame{position:relative;min-height:0;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.16);border-radius:calc(1.4*var(--r));overflow:hidden;background:#111;box-shadow:0 calc(4*var(--r)) calc(12*var(--r)) rgba(0,10,255,.14)}
#aip .mv-bar{flex:none;height:max(38px,calc(4.6*var(--r)));display:flex;align-items:center;gap:calc(.8*var(--r));padding:0 calc(1.6*var(--r));background:#1a1a1a;border-bottom:1px solid rgba(255,255,255,.1)}
#aip .mv-bar i{width:calc(1*var(--r));height:calc(1*var(--r));min-width:8px;min-height:8px;border-radius:50%;background:#444}
#aip .mv-bar i:nth-child(1){background:#ff5f57}
#aip .mv-bar i:nth-child(2){background:#febc2e}
#aip .mv-bar i:nth-child(3){background:#28c840}
#aip .mv-bar span{flex:1;margin:0 calc(1.6*var(--r));text-align:center;font-size:max(11px,calc(1.3*var(--r)));color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}
#aip .mv-play{width:max(28px,calc(3.2*var(--r)));height:max(28px,calc(3.2*var(--r)));border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;transition:background .2s}
#aip .mv-play:hover{background:rgba(255,255,255,.14)}
#aip .mv-play svg{width:55%;height:55%}
#aip .mv-play .i-play{display:none}
#aip .mv-play[aria-pressed=false] .i-play{display:block}
#aip .mv-play[aria-pressed=false] .i-pause{display:none}
#aip .mv-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;cursor:grab;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#aip .mv-scroll::-webkit-scrollbar{display:none}
#aip .mv-scroll.drag{cursor:grabbing}
#aip .mv-scroll img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
#aip .mv-rail{position:absolute;right:6px;top:calc(max(38px,calc(4.6*var(--r))) + 10px);bottom:10px;width:3px;border-radius:2px;background:rgba(255,255,255,.1);pointer-events:none}
#aip .mv-rail i{position:absolute;left:0;right:0;top:0;height:20%;border-radius:2px;background:#fff}
#aip .mv-info{display:flex;flex-direction:column;justify-content:flex-end;gap:calc(2.2*var(--r));min-height:0;padding-bottom:calc(.4*var(--r))}
#aip .mv-cat{font-size:max(12px,calc(1.5*var(--r)));letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
#aip .mv-info h3{font-weight:900;font-size:max(34px,calc(7.4*var(--r)));line-height:.95;letter-spacing:-.04em;text-transform:uppercase;overflow-wrap:anywhere;color:#fff}
#aip .mv-type{font-size:max(14px,calc(2*var(--r)));color:var(--ink);line-height:1.3}
#aip .mv-btns{display:flex;gap:calc(1*var(--r));margin-top:calc(1.4*var(--r))}
#aip .mv-open{flex:1;height:max(48px,calc(7*var(--r)));border-radius:99px;background:#fff;color:#000;display:flex;align-items:center;justify-content:center;gap:calc(1.6*var(--r));font-weight:500;font-size:max(13px,calc(1.6*var(--r)));transition:background .3s,color .3s}
#aip .mv-open:hover{background:var(--blue);color:#fff}
#aip .mv-open.off{opacity:.35;pointer-events:none}
#aip .mv-ic{width:max(48px,calc(7*var(--r)));height:max(48px,calc(7*var(--r)));border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s,border-color .3s}
#aip .mv-ic:hover{background:#fff;color:#000}
#aip .mv-ic.on{color:#ff3b5c;border-color:#ff3b5c}
#aip .mv-ic.on svg{fill:currentColor}
#aip .mv-nav{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:calc(1.6*var(--r))}
#aip .mv-pn{display:flex;align-items:center;gap:calc(1.4*var(--r));padding:calc(2*var(--r)) 0;text-align:left;transition:color .2s}
#aip .mv-pn.r{justify-content:flex-end;text-align:right;border-left:1px solid var(--line);padding-left:calc(2*var(--r))}
#aip .mv-pn em{display:block;font-style:normal;font-size:max(11px,calc(1.3*var(--r)));color:var(--grey);letter-spacing:.04em;text-transform:uppercase;margin-bottom:calc(.5*var(--r))}
#aip .mv-pn b{font-weight:500;font-size:max(13px,calc(1.6*var(--r)));display:block;line-height:1.25}
#aip .mv-pn i{font-style:normal;font-size:max(18px,calc(2.4*var(--r)));transition:transform .3s}
#aip .mv-pn:hover{color:var(--blue)}
#aip .mv-pn:hover i{transform:translateX(calc(-.6*var(--r)))}
#aip .mv-pn.r:hover i{transform:translateX(calc(.6*var(--r)))}
#aip .mv-keys{font-size:max(11px,calc(1.3*var(--r)));color:var(--grey)}
@media (max-width:1023px){
#aip .mv-sheet{height:93svh;border-radius:22px 22px 0 0}
#aip .mv-top{padding:20px 16px 0}
#aip .mv-x{width:40px;height:40px}
#aip .mv-stage{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;padding:72px 16px 16px;gap:16px}
#aip .mv-info{gap:12px;justify-content:flex-start}
#aip .mv-info h3{font-size:34px}
#aip .mv-keys{display:none}
#aip .mv-btns{margin-top:4px}
#aip .mv-nav{margin-top:0}
#aip .mv-pn{padding:12px 0}
#aip .mv-open,#aip .mv-ic{height:50px}
#aip .mv-ic{width:50px}
}

/* ---------- inline category filters (mobile/tablet) + mobile type fixes ---------- */
#aip .wk-head h2{white-space:nowrap}
#aip .wk-filters{display:flex;flex-wrap:wrap;gap:12px 40px;margin:0 0 calc(6*var(--r));padding:0 0 calc(2*var(--r));border-bottom:1px solid var(--line)}
#aip .wf{position:relative;display:inline-flex;align-items:baseline;gap:10px;padding:6px 0;color:var(--grey);font-weight:300;font-size:18px;line-height:1;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;transition:color .3s ease-out}
#aip .wf b{font-weight:300;color:var(--grey);font-size:13px;letter-spacing:0;transition:color .3s}
#aip .wf::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:#fff;transition:width .3s ease-out}
#aip .wf:hover{color:#fff}
#aip .wf:hover::after{width:100%}
#aip .wf.on{color:#fff;padding-right:24px}
#aip .wf.on b{color:#fff}
#aip .wf.on::after{width:0}
#aip .wf.on::before{content:"";position:absolute;right:0;top:50%;width:15px;height:15px;margin-top:-9px;background:url(/wp-content/uploads/2024/02/menu_arrow.svg) center/100% no-repeat}
@media (max-width:1023px){
  #aip .wk-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:8px 28px;margin:0 calc(-1*var(--px)) 36px;padding:0 var(--px) 14px;border-bottom:0}
  #aip .wk-filters::-webkit-scrollbar{display:none}
  #aip .wf{font-size:15px}
  #aip .dock{display:none}
  #aip .mf-text{font-size:clamp(26px,8.2vw,44px)}
  #aip .mf-stats b{font-size:clamp(40px,13vw,64px)}
  #aip .mq-t span{font-size:clamp(36px,12vw,64px);padding:0 16px;gap:28px}
  #aip .mq{padding:18px 0}
  #aip .wk-head h2{font-size:clamp(40px,13vw,64px)}
  #aip .cta-in h2{font-size:clamp(28px,8.6vw,44px)}
  #aip .cta-btn{height:56px;padding:0 28px;font-size:15px}
  #aip .toast{bottom:24px}
}

/* hide site floating elements while the project viewer is open */
body.lock .video__wrapper.preview,body.lock .messenger.popup,body.lock .top_btn,body.lock header#navbar{visibility:hidden!important}

/* viewer: live site in iframe */
#aip .mv-iframe{flex:1;min-height:0;width:100%;border:0;background:#111;display:block}
#aip .mv-iframe[hidden],#aip .mv-scroll[hidden]{display:none}

#aip .mv-play[hidden],#aip .mv-rail[hidden]{display:none!important}
#aip .mv-frame:has(.mv-iframe:not([hidden])) .mv-bar span{text-align:left}

/* header sits above the hero wall */
body:has(#aip) header#navbar{position:relative;z-index:20}

/* keep the site menu readable over the wall (only header height) */
#aip .hx-bg{z-index:0}
#aip .hx::after{content:"";position:absolute;left:0;right:0;top:0;height:var(--aip-hdr,0px);background:linear-gradient(180deg,rgba(0,0,0,.78),rgba(0,0,0,.45) 70%,rgba(0,0,0,0));pointer-events:none;z-index:2}

/* active filter arrow in brand blue */
#aip .wf.on::before{background:var(--blue);-webkit-mask:url(/wp-content/uploads/2024/02/menu_arrow.svg) center/100% no-repeat;mask:url(/wp-content/uploads/2024/02/menu_arrow.svg) center/100% no-repeat}

/* hero line 2: subordinate to line 1 */
#aip .hx-title .hx-b{font-size:.4em;-webkit-text-stroke:1px #fff;letter-spacing:.01em;font-weight:700}
#aip .hx-title{font-size:clamp(44px,7.4vw,142px);gap:.1em}
@media (max-width:1023px){#aip .hx-title{font-size:clamp(40px,10vw,88px)}#aip .hx-title .hx-b{font-size:.42em}}

#aip .mf-stats{grid-template-columns:repeat(var(--n,4),1fr)}
@media (max-width:1023px){#aip .mf-stats{grid-template-columns:1fr 1fr}}
#aip .hx-title .hx-b:empty{display:none}

/* embedded projects block on the AI service page */
#aip.aip-embed .wk{padding:calc(3*var(--r)) 0 0}
#aip.aip-embed .wk-filters{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
.projects__wrapper:has(#aip.aip-embed) > div{padding-bottom:120px!important}
@media (max-width:1023px){#aip.aip-embed .wk{padding:24px 0 0}#aip.aip-embed .wk-filters{margin:0 0 32px;padding:0 0 10px}.projects__wrapper:has(#aip.aip-embed) > div{padding-bottom:70px!important}}

/* sort button: plain sans-serif numero sign */
#aip .dk-sort span{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;font-size:15px;letter-spacing:0}
/* "View" cursor over projects */
.aip-cur{position:fixed;left:0;top:0;z-index:400;pointer-events:none;width:0;height:0}
.aip-cur span{position:absolute;left:-48px;top:-48px;width:96px;height:96px;border-radius:50%;background:#fff;color:#000;display:flex;align-items:center;justify-content:center;font-family:"Neue Machina","Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:12px;letter-spacing:.04em;text-transform:uppercase;transform:scale(0);opacity:0;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .2s}
.aip-cur.on span{transform:scale(1);opacity:1}
@media (hover:hover) and (pointer:fine){#aip.aip-cur-on .wc,#aip.aip-cur-on .hx-c,#aip.aip-cur-on .wr{cursor:none}#aip .wc-act,#aip .wc-act *{cursor:pointer}}

/* list preview: no transition while resetting to the top */
#aip .pv.reset .pv-fr img{transition:none!important;transform:translate3d(0,0,0)!important}
#aip .pv-fr img{top:0}
/* list view: the filter line is the first row's top border */
#aip .wk-list{margin-top:calc(-6*var(--r))}#aip .wr.first{border-top:0}

/* 31.10: projects heading is "AI проєкти" without the counter */
#aip #wkCount{display:none}
/* 31.10: H1 "AI портфоліо" stays on one line on narrow phones (360) */
@media (max-width:420px){#aip .hx-title{font-size:min(40px,10vw)}}
/* 31.10: mobile gap between the projects grid and reviews halved (~212px -> ~106px) */
@media (max-width:760px){#aip .wk{padding-bottom:24px}}