/* BI-Enterprises: portfolio (/work/), layered on site.css */
.pf{--acc:var(--lime)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- HERO ---------- */
.pf-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:140px 0 0;isolation:isolate}
.pf-wall{position:absolute;inset:-10% -20% -10% -20%;z-index:-2;perspective:1400px;pointer-events:none}
.pf-wall-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,1.6vw,22px);transform:rotateX(18deg) rotateZ(-8deg) translateY(-4%);transform-style:preserve-3d}
.pf-row{display:flex;gap:clamp(12px,1.6vw,22px);width:max-content;animation:pfslide var(--dur,70s) linear infinite}
.pf-row:nth-child(2){animation-direction:reverse;--dur:84s;margin-left:-14vw}
.pf-row:nth-child(3){--dur:62s;margin-left:-6vw}
.pf-row img{width:clamp(200px,24vw,380px);aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#1a1a1a;box-shadow:0 20px 50px rgba(0,0,0,.5)}
@keyframes pfslide{to{transform:translateX(-50%)}}
.pf-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
 linear-gradient(90deg,rgba(15,15,15,.94) 0%,rgba(15,15,15,.78) 38%,rgba(15,15,15,.28) 72%,rgba(15,15,15,.45) 100%),
 linear-gradient(180deg,rgba(15,15,15,.7) 0%,rgba(15,15,15,0) 30%,rgba(15,15,15,.15) 70%,var(--bg) 100%)}
@media(max-width:999px){.pf-hero::before{background:linear-gradient(180deg,rgba(15,15,15,.55) 0%,rgba(15,15,15,.72) 40%,rgba(15,15,15,.94) 70%,var(--bg) 100%)}}
.pf-hero-in{position:relative;padding-bottom:clamp(36px,6vw,72px)}
.pf-title{margin:22px 0 0;font-size:clamp(64px,14.5vw,236px);line-height:.84;letter-spacing:-.01em}
.pf-title .ln{display:block;overflow:hidden;padding-bottom:.03em}
.pf-title .ln>span{display:inline-block;transform:translateY(105%);transition:transform 1.2s var(--ease)}
.loaded .pf-title .ln>span{transform:none}
.loaded .pf-title .ln:nth-child(2)>span{transition-delay:.12s}
.pf-title .stroke{color:transparent;-webkit-text-stroke:2px var(--text)}
.pf-title .dot{color:var(--lime)}
.pf-hero-grid{display:grid;gap:32px;margin-top:clamp(24px,3vw,40px);align-items:end}
@media(min-width:1000px){.pf-hero-grid{grid-template-columns:minmax(0,1fr) auto}}
.pf-lead{max-width:600px;margin:0;font-size:clamp(17px,1.6vw,21px);color:#d6d6d3}
.pf-stats{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.pf-stats div{min-width:132px;padding:16px 20px;border:1px solid var(--line-2);border-radius:18px;background:rgba(15,15,15,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pf-stats dt{order:2;font-size:13px;color:var(--muted);font-weight:600;margin-top:4px}
.pf-stats dd{margin:0;font-family:var(--display);font-weight:900;font-size:clamp(40px,4vw,56px);line-height:.9;color:var(--lime)}
.pf-stats div{display:flex;flex-direction:column}
.pf-hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- INDEX ---------- */
.pf-index{padding:clamp(80px,10vw,140px) 0 clamp(40px,6vw,80px)}
.pf-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}
.pf-tools .filters{margin:0}
.pf-count{margin:0;font-size:14px;color:var(--muted);font-weight:600}
.pf-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pf-list li{border-bottom:1px solid var(--line)}
.pf-list li[hidden]{display:none}
.pf-row-a{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 48px;align-items:center;gap:14px;padding:22px 0;min-height:44px}
@media(min-width:900px){.pf-row-a{grid-template-columns:70px minmax(0,1.6fr) minmax(0,1fr) 70px 56px;gap:24px;padding:26px 0}}
.pf-row-a::before{content:"";position:absolute;inset:0 -12px;border-radius:16px;background:var(--acc);opacity:0;transform:scaleY(.6);transition:opacity .35s,transform .5s var(--ease);z-index:-1}
.pf-row-n{font-family:var(--display);font-weight:800;font-size:22px;color:var(--muted);transition:color .3s}
.pf-row-name{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(30px,4.6vw,76px);line-height:.9;transition:transform .5s var(--ease),color .3s;min-width:0;hyphens:manual}
.pf-row-meta{display:none;color:var(--muted);font-size:15px;line-height:1.45}
.pf-row-meta b{display:block;color:var(--text);font-weight:700}
.pf-row-y{display:none;font-weight:700;color:var(--muted);font-size:14px}
@media(min-width:900px){.pf-row-meta{display:block}.pf-row-y{display:block}}
.pf-row-go{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:background .3s,border-color .3s,transform .5s var(--ease),color .3s}
.pf-row-go svg{width:18px;height:18px}
.pf-row-thumb{display:none;grid-column:1/-1;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:#1a1a1a;margin-top:4px}
.pf-row-thumb img{width:100%;height:100%;object-fit:cover;object-position:top}

.pf-status{display:inline-block;vertical-align:middle;margin-left:10px;font-family:var(--body);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--line-2);color:#e6e6e3;transform:translateY(-.4em)}
@media(hover:hover) and (pointer:fine){
 .pf-row-a:hover .pf-row-name,.pf-row-a:focus-visible .pf-row-name{color:var(--acc);transform:translateX(14px)}
 .pf-row-a:hover .pf-row-n{color:var(--acc)}
 .pf-row-a:hover .pf-row-go{background:var(--acc);border-color:var(--acc);color:#111;transform:rotate(-45deg)}
}
.pf-float{position:fixed;left:0;top:0;z-index:60;width:min(34vw,460px);aspect-ratio:16/10;border-radius:16px;overflow:hidden;pointer-events:none;opacity:0;transform:translate3d(-50%,-50%,0) scale(.85) rotate(-4deg);transition:opacity .35s,transform .5s var(--ease);box-shadow:0 40px 90px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.12);background:#1a1a1a}
.pf-float.on{opacity:1}
.pf-float img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:opacity .25s}
@media(hover:none),(pointer:coarse){.pf-float{display:none}}

/* ---------- SHOWCASE ---------- */
.pf-show-head{padding:clamp(60px,8vw,110px) 0 clamp(30px,4vw,50px)}
.pf-h{position:relative}
.pf-sticky{position:relative}
.pf-track{display:grid;gap:clamp(60px,9vw,120px)}
.pf-panel{position:relative;display:grid;gap:28px;align-items:center;--acc:var(--lime)}
.pf-panel[hidden]{display:none}
@media(min-width:1000px){.pf-panel{grid-template-columns:minmax(300px,.78fr) minmax(0,1.5fr);gap:clamp(36px,4vw,64px)}}
.pf-num{font-family:var(--display);font-weight:900;font-size:clamp(72px,9vw,150px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--acc);display:block;margin-bottom:10px}
.pf-panel h3{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(40px,4.8vw,76px);line-height:.9;margin:0 0 10px}
.pf-client{margin:0 0 16px;color:var(--muted);font-weight:600;font-size:15px}
.pf-sum{margin:0 0 18px;color:#d4d4d1;font-size:16.5px;max-width:520px}
.pf-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.pf-tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:none;cursor:pointer;font-weight:700;font-size:14px;color:var(--text);transition:background .3s,border-color .3s,color .3s}
.pf-tab:hover{border-color:#fff}
.pf-tab[aria-selected=true]{background:var(--text);color:#111;border-color:var(--text)}
.pf-tab i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.1);color:#cfcfcc}
.pf-tab i.bk{background:var(--acc);color:#111}
.pf-tab[aria-selected=true] i{background:rgba(0,0,0,.1);color:#333}
.pf-tab[aria-selected=true] i.bk{background:var(--acc);color:#111}
.pf-links{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pf-links .btn{--h:50px;padding:0 22px}
.pf-ext{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;font-size:14px;color:#dcdcda;text-decoration:underline;text-underline-offset:4px}
.pf-ext:hover{color:#fff}
.pf-ext svg{width:14px;height:14px}

.pf-stage{position:relative;min-width:0}
.pf-stage::before{content:"";position:absolute;inset:8% -4% -6% 10%;border-radius:40px;background:radial-gradient(closest-side,var(--acc),transparent);opacity:.18;filter:blur(40px);z-index:-1}
.pf-browser{position:relative;border-radius:16px;overflow:hidden;background:#111;border:1px solid rgba(255,255,255,.1);box-shadow:0 50px 100px rgba(0,0,0,.55);transform:perspective(1800px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform .6s var(--ease)}
.pf-bar{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;background:#1c1c1c;border-bottom:1px solid rgba(255,255,255,.06)}
.pf-bar i{width:10px;height:10px;border-radius:50%;background:#3a3a3a}
.pf-bar i:nth-child(1){background:#ff6058}.pf-bar i:nth-child(2){background:#ffbd2e}.pf-bar i:nth-child(3){background:#28c941}
.pf-bar span{margin-left:12px;flex:1;max-width:340px;height:22px;border-radius:7px;background:#262626;color:#bdbdba;font-size:12px;line-height:22px;padding:0 10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pf-bar b{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--acc);color:#111;opacity:0;transform:translateY(-4px);transition:.3s}
.pf-browser.is-back .pf-bar b{opacity:1;transform:none}
.pf-screens{position:relative;aspect-ratio:16/10;background:#0c0c0c}
.pf-screen{position:absolute;inset:0;margin:0;clip-path:inset(0 0 0 100%);transition:clip-path .8s var(--ease);visibility:hidden}
.pf-screen.on{clip-path:inset(0 0 0 0);visibility:visible;z-index:2}
.pf-screen.was{visibility:visible;z-index:1;clip-path:inset(0 0 0 0)}
.pf-screen img{width:100%;height:100%;object-fit:cover;object-position:top center}
.pf-screen.fit img{object-fit:contain;background:var(--sbg,#0c0c0c)}
.pf-screen .pf-cap{margin:0;position:absolute;left:14px;bottom:14px;z-index:3;max-width:calc(100% - 28px);font-size:13px;font-weight:600;padding:8px 12px;border-radius:12px;background:rgba(10,10,10,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#eee;border:1px solid rgba(255,255,255,.1)}
.pf-note{margin:10px 2px 0;font-size:13px;color:var(--muted)}

/* coded screens (no public screenshot available) */
.pf-code{position:absolute;inset:0}
.pf-code .dash{padding:5%}
.pf-code .mock{position:absolute;inset:0}

/* desktop: pinned horizontal gallery */
@media(min-width:1000px){
 .js-hscroll .pf-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
 .js-hscroll .pf-track{display:flex;gap:0;width:max-content;will-change:transform}
 .js-hscroll .pf-panel{width:100vw;padding:96px max(var(--pad),calc((100vw - var(--max))/2 + var(--pad))) 64px;flex:none;height:100svh;align-content:center}
 .js-hscroll .pf-screens{aspect-ratio:auto;height:min(58vh,calc((100vw - 2*var(--pad))*.5*.62))}
 .pf-prog{position:absolute;left:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));right:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));bottom:28px;display:none;align-items:center;gap:18px;font-weight:800;font-size:13px;letter-spacing:.12em}
 .js-hscroll .pf-prog{display:flex}
 .pf-prog .t{flex:1;height:2px;background:var(--line-2);border-radius:2px;overflow:hidden}
 .pf-prog .t i{display:block;height:100%;width:100%;background:var(--lime);transform-origin:left;transform:scaleX(0)}
}
.pf-prog{display:none}

/* ---------- BACK OF HOUSE ---------- */
.pf-boh{padding:clamp(90px,12vw,170px) 0;position:relative;overflow:hidden;background:
 radial-gradient(ellipse 60% 50% at 80% 10%,rgba(227,36,43,.16),transparent 70%),var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pf-boh-grid{display:grid;gap:clamp(28px,4vw,56px);align-items:start}
@media(min-width:1000px){.pf-boh-grid{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)}}
.pf-side{display:grid;gap:16px}
.pf-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);overflow:hidden}
.pf-card img{width:100%;height:auto}
.pf-card p{margin:0;padding:16px 18px;font-size:14.5px;color:var(--muted)}
.pf-card p b{display:block;color:var(--text);font-size:16px;margin-bottom:4px}
.pf-console{position:relative}
.pf-console .pf-browser{--ry:0deg}
.pf-console .pf-screens{aspect-ratio:1319/748}
.pf-pins{position:absolute;inset:36px 0 0 0;z-index:5}
.pf-pin{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;border:0;background:none;cursor:pointer;display:grid;place-items:center;padding:0}
.pf-pin span{position:relative;width:30px;height:30px;border-radius:50%;background:#ff4b52;color:#111;font-weight:900;font-size:14px;display:grid;place-items:center;box-shadow:0 0 0 0 rgba(255,75,82,.6);animation:pfpulse 2.4s infinite}
.pf-pin span::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(255,75,82,.5)}
@keyframes pfpulse{70%{box-shadow:0 0 0 16px rgba(255,75,82,0)}100%{box-shadow:0 0 0 0 rgba(255,75,82,0)}}
.pf-tip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,6px);width:min(260px,70vw);padding:12px 14px;border-radius:14px;background:#fff;color:#111;font-size:13.5px;line-height:1.45;font-weight:600;text-align:left;opacity:0;visibility:hidden;transition:.25s var(--ease);box-shadow:0 20px 50px rgba(0,0,0,.45);pointer-events:none}
.pf-pin:hover .pf-tip,.pf-pin:focus-visible .pf-tip,.pf-pin.open .pf-tip{opacity:1;visibility:visible;transform:translate(-50%,0)}
.pf-pin.r .pf-tip{left:auto;right:-6px;transform:translate(0,6px)}
.pf-pin.r:hover .pf-tip,.pf-pin.r:focus-visible .pf-tip,.pf-pin.r.open .pf-tip{transform:none}
.pf-pin.l .pf-tip{left:-6px;transform:translate(0,6px)}
.pf-pin.l:hover .pf-tip,.pf-pin.l:focus-visible .pf-tip,.pf-pin.l.open .pf-tip{transform:none}
.pf-legend{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;counter-reset:pl}
@media(min-width:700px){.pf-legend{grid-template-columns:1fr 1fr}}
.pf-legend li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:#d4d4d1;counter-increment:pl}
.pf-legend li::before{content:counter(pl);flex:none;width:26px;height:26px;border-radius:50%;background:#ff4b52;color:#111;font-weight:900;font-size:13px;display:grid;place-items:center}
.pf-views{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
@media(max-width:699px){.pf-pins{display:none}}

/* ---------- NUMBERS ---------- */
.pf-nums{padding:clamp(70px,9vw,120px) 0}
.pf-nums-grid{display:grid;gap:0;border-top:1px solid rgba(0,0,0,.2)}
@media(min-width:700px){.pf-nums-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.pf-nums-grid{grid-template-columns:repeat(4,1fr);border-top:0}}
.pf-n{padding:30px 0;border-bottom:1px solid rgba(0,0,0,.2)}
@media(min-width:1100px){.pf-n{padding:8px 28px 8px 0;border-bottom:0}.pf-n+.pf-n{padding-left:28px;border-left:1px solid rgba(0,0,0,.2)}}
.pf-n b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(84px,9vw,140px);line-height:.82;letter-spacing:-.01em}
.pf-n>span{display:block;margin-top:14px;font-size:16px;font-weight:600;color:#26300a;max-width:260px}
.pf-n small{display:block;margin-top:8px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#3b4a0a}

/* ---------- Stack marquee (static for SR) ---------- */
.pf-stack .marquee-track span{color:#8a8a87}

/* cursor label */
.cursor.view{width:92px;height:92px;margin:-46px 0 0 -46px;mix-blend-mode:normal;background:var(--lime)}
.cursor.view::after{content:attr(data-l);position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:12px;letter-spacing:.14em;color:#111}

:lang(el) .pf-title{font-size:clamp(52px,11.4vw,190px)}
:lang(el) .pf-row-name{font-size:clamp(30px,4.8vw,74px)}
:lang(el) .pf-panel h3{font-size:clamp(36px,4.2vw,66px)}

@media(prefers-reduced-motion:reduce){
 .pf-row{animation:none}
 .pf-title .ln>span{transform:none}
 .pf-screen{transition:none}
 .pf-pin span{animation:none}
}
.no-js .pf-title .ln>span{transform:none}

/* mobile panel order + scrollable tabs */
@media(max-width:999px){
 .pf-panel{grid-template-columns:minmax(0,1fr)}
 .pf-stage{order:-1}
 .pf-num{font-size:64px;margin-bottom:4px}
 .pf-tabs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(-1*var(--pad));padding-right:var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .pf-tabs::-webkit-scrollbar{display:none}
 .pf-tab{flex:none;scroll-snap-align:start;white-space:nowrap}
 .pf-screens{aspect-ratio:16/11}
 .pf-screen .pf-cap{margin:0;font-size:12px;padding:6px 10px;left:10px;bottom:10px}
}
@media(min-width:1000px){.js-hscroll .pf-track{max-width:none;margin:0;padding:0}}
.pf-tabs,.pf-tab,.pf-row-a,.pf-row-name{position:relative}
/* mobile: fit every screen fully inside the frame, centred */
@media(max-width:999px){
.pf-screen img{object-fit:contain;object-position:center center;background:#0c0c0c}
.pf-screens{aspect-ratio:16/10}
.pf-row img{object-position:center top}
}