/* XMAJOKA portfolio page adapted from the supplied public_html portfolio. */
.portfolio-page{--header-h:76px;--glass-border:rgba(130,166,226,.3);--muted:#afc0dc;--lime:#4ad8e5;position:relative;min-height:70vh;padding:94px 0 0;background:radial-gradient(ellipse at 50% 0,rgba(43,87,161,.28),transparent 48%),#08142e;color:#f7f9ff}
.portfolio-page .pf-wrap{max-width:940px;margin:0 auto;padding:24px 20px 88px;display:flex;flex-direction:column;gap:22px;position:relative}
.portfolio-page .pf #work{display:flex;flex-direction:column;gap:22px}
.portfolio-page .pf .card{background:linear-gradient(145deg,rgba(17,37,76,.96),rgba(10,24,51,.98));border:1px solid var(--glass-border);border-radius:18px;padding:clamp(22px,4vw,38px);box-shadow:0 20px 54px rgba(0,0,0,.14)}
.portfolio-page .pf .label{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:750;letter-spacing:.17em;text-transform:uppercase;color:#9db6ff;margin-bottom:14px}
.portfolio-page .pf .label:before{content:"";width:18px;height:3px;background:#4ad8e5;border-radius:2px}
.portfolio-page .pf h1{font-size:clamp(38px,8vw,60px);font-weight:800;line-height:1.05;letter-spacing:-.05em;margin:0;color:#fff}
.portfolio-page .pf .tag{font-size:19px;font-weight:700;margin:12px 0 0;color:#fff}
.portfolio-page .pf .sub{color:#c6d5ee;font-size:14px;margin:5px 0 0}
.portfolio-page .pf .cover{width:min(calc(100vw - 48px),1360px);min-height:390px;align-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(30px,5vw,58px) 30px;background:transparent;border:0;border-radius:0;box-shadow:none}
.portfolio-page .pf .cover-logo{display:block;width:min(60vw,500px);max-height:160px;object-fit:contain;margin:0 auto 14px}
.portfolio-page .pf .cover-eyebrow{margin:0 0 24px;color:#46d6bd;font-size:clamp(11px,1.2vw,15px);font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.portfolio-page .pf .cover h1{max-width:920px;font-size:clamp(32px,4.2vw,58px);line-height:1.12;letter-spacing:-.035em}
.portfolio-page .pf .cover h1 span{color:#46d6bd}
.portfolio-page .pf .kicker{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9db6ff;margin-bottom:7px}
.portfolio-page .pf .lime{color:#55dce8;font-size:clamp(25px,5vw,33px);font-weight:750;margin:0 0 14px}
.portfolio-page .pf .about p{font-size:15px;margin:0 0 12px;max-width:720px;color:#d7e1f2}
.portfolio-page .pf .pill{display:inline-block;background:linear-gradient(100deg,#4264f5,#42c8de);color:#fff;font-size:10px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;padding:6px 14px;border-radius:999px}
.portfolio-page .pf .project h2,.portfolio-page .pf .contact h2{font-size:clamp(22px,4vw,28px);font-weight:750;line-height:1.25;margin:14px 0 8px;color:#fff}
.portfolio-page .pf .desc{font-size:14px;max-width:760px;color:#c4d2e8;line-height:1.75;margin:0}
.portfolio-page .pf .gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px;align-items:start}
.portfolio-page .pf .tile{display:block;width:100%;border:1px solid rgba(146,178,230,.18);border-radius:12px;overflow:hidden;background:#071127;padding:0;margin:0;cursor:zoom-in;transition:transform .28s,border-color .28s,box-shadow .28s}
.portfolio-page .pf .tile:hover,.portfolio-page .pf .tile:focus-visible{transform:translateY(-3px);border-color:rgba(74,216,229,.7);box-shadow:0 12px 30px rgba(0,0,0,.32);outline:none}
.portfolio-page .pf .tile img{display:block;width:100%;height:auto}
.portfolio-page .pf .gallery.videos .tile{cursor:default;aspect-ratio:9/16}
.portfolio-page .pf .tile video{display:block;width:100%;height:100%;object-fit:contain;background:#030916}
.portfolio-page .pf .contact dl{display:grid;grid-template-columns:110px 1fr;gap:10px 16px;margin:18px 0 0;font-size:14px}
.portfolio-page .pf .contact dt{font-size:11px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:#57dbe6;align-self:center}
.portfolio-page .pf .contact dd{margin:0;overflow-wrap:anywhere;color:#dae4f5}
.portfolio-page .pf .contact dd a:hover{color:#57dbe6}
.portfolio-filters{width:min(900px,calc(100% - 40px));margin:0 auto 24px;display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.portfolio-filters button{border:1px solid rgba(151,178,222,.35);border-radius:999px;padding:9px 15px;background:rgba(17,37,76,.9);color:#c9d6eb;font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:background .22s,border-color .22s,color .22s,transform .22s}
.portfolio-filters button:hover,.portfolio-filters button:focus-visible,.portfolio-filters button.is-active{background:#4264f5;border-color:#4264f5;color:#fff;outline:none}
.portfolio-filters button:hover{transform:translateY(-1px)}
.portfolio-page .project[hidden]{display:none!important}
.portfolio-lightbox{position:fixed;inset:0;z-index:100;background:rgba(2,8,22,.94);display:flex;align-items:center;justify-content:center;padding:24px}
.portfolio-lightbox[hidden]{display:none}
.portfolio-lightbox img{max-width:min(1200px,100%);max-height:100%;object-fit:contain;border-radius:8px}
.portfolio-lightbox-close{position:absolute;top:14px;right:18px;border:0;background:none;color:#fff;font-size:38px;line-height:1;cursor:pointer}
.portfolio-back-top{position:fixed;right:28px;bottom:156px;z-index:20;width:42px;height:42px;border:1px solid rgba(123,167,230,.45);border-radius:50%;background:#102c5b;color:#fff;font-size:22px;line-height:1;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,visibility .25s,transform .25s,background .25s}
.portfolio-back-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.portfolio-back-top:hover,.portfolio-back-top:focus-visible{background:#4264f5;outline:2px solid #75dfe8;outline-offset:2px}
@media(max-width:700px){.portfolio-page{padding-top:82px}.portfolio-page .pf-wrap{padding:16px 16px 68px;gap:16px}.portfolio-page .pf #work{gap:16px}.portfolio-page .pf .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.portfolio-page .pf .contact dl{grid-template-columns:82px 1fr}.portfolio-page .pf .cover{width:calc(100vw - 32px);min-height:300px;padding:30px 18px}.portfolio-page .pf .cover-logo{width:min(78vw,420px);max-height:125px}.portfolio-page .pf .cover-eyebrow{margin-bottom:18px;letter-spacing:.13em}.portfolio-page .pf .cover h1{font-size:clamp(30px,7vw,44px)}.portfolio-filters{width:calc(100% - 28px);justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:0 0 7px;margin-bottom:18px;scrollbar-width:thin}.portfolio-filters button{flex:none;white-space:nowrap}.portfolio-back-top{right:18px;bottom:150px}}
@media(prefers-reduced-motion:reduce){.portfolio-page .pf .tile,.portfolio-filters button,.portfolio-back-top{transition:none}}