html:has(.valpum-portfolio),body:has(.valpum-portfolio){background:#f5f3ef}
body:has(.valpum-portfolio){margin:0;padding:0}
.vpf-host{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;gap:0!important;min-width:0!important}
.valpum-portfolio{--vpf-ink:#28232f;--vpf-muted:#746d7c;--vpf-purple:#7054d8;--vpf-gold:#d5ab71;--vpf-line:#ded9e2;--vpf-paper:#f5f3ef;position:relative;isolation:isolate;background:var(--vpf-paper);color:var(--vpf-ink);margin:0;width:100%;overflow:clip;font:14px/1.6 Arial,Helvetica,sans-serif;text-align:left;-webkit-font-smoothing:antialiased}
.valpum-portfolio *{box-sizing:border-box}
.valpum-portfolio :is(h1,h2,p){margin:0;font-family:inherit;color:inherit}
.valpum-portfolio :is(button,a){font:inherit;letter-spacing:normal;text-transform:none;box-shadow:none;-webkit-tap-highlight-color:transparent}
.valpum-portfolio button{cursor:pointer;appearance:none}
.valpum-portfolio a{color:inherit;text-decoration:none}
.valpum-portfolio :is(button,a):focus-visible,.valpum-portfolio .vpf-surface:focus-visible{outline:3px solid var(--vpf-purple);outline-offset:4px}
.valpum-portfolio button:disabled{opacity:.3;cursor:default}
.valpum-portfolio [hidden]{display:none!important}
.vpf-stage{position:relative;min-height:900px;height:100svh;width:100%;overflow:hidden}
.vpf-heading{position:absolute;z-index:3;left:6%;right:6%;top:max(120px,var(--vpm-menu-clearance,120px));pointer-events:none;transition:opacity .4s,transform .5s}
.vpf-kicker{font-size:9px;letter-spacing:2.3px;color:var(--vpf-muted)!important;margin-bottom:17px!important}
.vpf-heading h1{font-size:clamp(34px,3.8vw,56px);font-weight:500;line-height:1.16;letter-spacing:-1.6px;max-width:800px;text-wrap:wrap}
.vpf-heading h1 span{color:var(--vpf-purple)}
.vpf-intro{font-size:12px;line-height:1.75;color:var(--vpf-muted)!important;margin-top:18px!important;max-width:440px}
.vpf-mobile-note{display:none;font-size:9px;margin-top:9px}
.vpf-surface{position:absolute;inset:0;z-index:1;touch-action:pan-y pinch-zoom;outline:none}
.vpf-art{position:absolute;inset:0}
.vpf-art canvas{display:block;width:100%;height:100%;outline:none}
.vpf-selection{position:absolute;left:6%;right:6%;bottom:152px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:20px;transition:opacity .4s,transform .5s}
.vpf-selected-category{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--vpf-muted)!important;margin-bottom:6px!important}
.vpf-selected-title{font-size:clamp(24px,2.5vw,36px);line-height:1.15;font-weight:500;letter-spacing:-1px;max-width:700px;overflow-wrap:anywhere}
.vpf-inspect,.vpf-open-work{display:inline-flex;align-items:center;justify-content:center;gap:32px;min-height:48px;padding:12px 20px;border-radius:11px;border:1px solid transparent;background:var(--vpf-purple);color:white!important;font-size:12px!important;font-weight:700!important;transition:background .2s,transform .2s;flex:none}
.vpf-inspect:hover,.vpf-open-work:hover{background:#5c3ebd;transform:translateY(-2px)}
.vpf-bottom{position:absolute;z-index:3;bottom:28px;left:6%;right:6%;transition:opacity .4s,transform .5s}
.vpf-controls{display:flex;align-items:center;gap:12px;border-top:1px solid var(--vpf-line);padding-top:17px}
.vpf-controls button{display:grid;place-items:center;min-width:46px;min-height:46px;font-size:20px;border:1px solid #cfc7d8;border-radius:50%;background:#ffffff88;color:var(--vpf-ink);transition:background .2s,transform .3s}
.vpf-controls button:not(:disabled):hover{background:white;transform:scale(1.06)}
.vpf-counter{min-width:64px;font-size:11px;text-align:center;color:var(--vpf-muted)}
.vpf-hint{margin-left:auto!important;font-size:10px;color:var(--vpf-muted)!important}
.vpf-strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;margin-top:12px;padding:3px 3px 6px;max-width:100%;overscroll-behavior-x:contain}
.vpf-strip button{white-space:nowrap;flex:none;background:transparent;color:var(--vpf-muted);border:1px solid transparent;border-radius:8px;padding:8px 12px;font-size:10px;min-height:37px;transition:background .25s,color .25s,border-color .25s}
.vpf-strip button[aria-pressed=true]{border-color:#cfc2e6;background:white;color:#6042ac}
.vpf-status{position:absolute;left:6%;right:6%;bottom:12px;z-index:3;font-size:10px;color:var(--vpf-muted)!important;pointer-events:none;text-align:right}
.vpf-status:empty{display:none}
.vpf-screen{position:absolute;z-index:4;background:#faf9f6;color:var(--vpf-ink);display:flex;flex-direction:column;overflow:hidden;border-radius:3px;opacity:0;transition:opacity .45s ease;box-shadow:inset 0 0 0 1px #fff8;transform-origin:top left;container-type:inline-size}
.vpf-screen.is-visible{opacity:1}
.vpf-screen-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;padding:12px 18px;border-bottom:1px solid #ded9e2;background:#faf9f6;min-height:50px}
.vpf-screen-head button{min-height:38px;border:0;background:transparent;color:#695483;border-radius:6px;padding:6px 9px;font-size:11px;white-space:nowrap}
.vpf-screen-head button:hover{background:#eee8f6}
.vpf-screen-label{font-size:8px;letter-spacing:1.6px;color:var(--vpf-muted)}
.vpf-screen-body{display:grid;grid-template-columns:1.2fr 1fr;gap:0;min-height:0;flex:1;overflow:hidden}
.vpf-media{position:relative;min-width:0;display:flex;align-items:center;justify-content:center;background:#eae6ee;overflow:hidden}
.vpf-media :is(img,video){display:block;width:100%;height:100%;object-fit:contain;margin:0;max-width:100%;border:0;border-radius:0;background:#eeeaf2}
.vpf-media-caption{position:absolute;bottom:9px;left:12px;right:12px;color:#665879;font-size:9px;pointer-events:none}
.vpf-no-media{text-align:center;padding:30px;color:#766684}
.vpf-no-media span{font-size:20px;letter-spacing:6px}
.vpf-no-media p{font-size:11px;line-height:1.8;margin-top:10px!important}
.vpf-copy{padding:clamp(18px,3.2vw,40px);overflow:auto;min-width:0;min-height:0;overscroll-behavior:contain;scrollbar-width:thin}
.vpf-category{font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:#806799!important;margin-bottom:13px!important}
.vpf-title{font-size:clamp(24px,2.5vw,40px);line-height:1.1;font-weight:500;letter-spacing:-1px;overflow-wrap:anywhere}
.vpf-client{font-size:10px;color:var(--vpf-muted)!important;margin-top:13px!important}
.vpf-description{font-size:13px;line-height:1.85;white-space:pre-line;color:#68616e!important;margin-top:20px!important;overflow-wrap:anywhere}
.vpf-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:19px}
.vpf-tags span{padding:5px 8px;background:#eee8f5;border-radius:6px;color:#776186;font-size:9px}
.vpf-screen-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;background:#faf9f6;border-top:1px solid #ded9e2;padding:12px 18px;min-height:62px}
.vpf-open-work{min-height:41px;padding:10px 15px;gap:25px;font-size:11px!important;border-radius:8px}
.vpf-visit{font-size:11px;color:#695483!important;min-height:40px;display:inline-flex;align-items:center}
.valpum-portfolio:not([data-phase=overview]) :is(.vpf-heading,.vpf-selection,.vpf-bottom){opacity:0;pointer-events:none;transform:translateY(12px)}
.valpum-portfolio:not([data-phase=overview]) .vpf-status{visibility:hidden}
.valpum-portfolio[data-phase=entering] .vpf-screen,.valpum-portfolio[data-phase=entered] .vpf-screen{transition:none;will-change:transform}
.valpum-portfolio.vpf-ready .vpf-fallback{display:none}
.vpf-fallback{padding:30px 6% 70px;background:var(--vpf-paper)}
.vpf-fallback-label{font-size:12px;color:var(--vpf-muted)!important;margin-bottom:22px!important}
.vpf-fallback-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.vpf-fallback-card{display:flex;flex-direction:column;padding:18px;border:1px solid var(--vpf-line);border-radius:16px;background:white;min-width:0}
.vpf-fallback-card img{width:100%;height:160px;object-fit:cover;border-radius:8px;margin:0 0 17px}
.vpf-fallback-card span{font-size:9px;color:var(--vpf-muted)}
.vpf-fallback-card strong{font-size:20px;line-height:1.3;font-weight:500;margin-top:7px;overflow-wrap:anywhere}
.valpum-portfolio.vpf-static .vpf-stage{min-height:420px;height:420px}
.valpum-portfolio.vpf-static .vpf-art{background:radial-gradient(ellipse at 50% 70%,#e4dbef 0,transparent 50%)}
.valpum-portfolio.vpf-static :is(.vpf-selection,.vpf-bottom){display:none}
.valpum-portfolio.vpf-static:not([data-phase=overview]) .vpf-stage{height:max(800px,100svh);min-height:800px}
.valpum-portfolio.vpf-static .vpf-screen{left:5%;top:max(120px,var(--vpm-menu-clearance,120px));width:90%;height:calc(100% - max(120px,var(--vpm-menu-clearance,120px)) - 40px);border:12px solid #37323f;border-radius:14px;box-shadow:0 20px 50px #7054d822}
.valpum-portfolio.vpf-static:not([data-phase=overview]) .vpf-fallback{display:none}
.vpf-empty{font-size:12px;text-align:center;color:var(--vpf-muted);padding:25px 6%}
.vpf-empty a{text-decoration:underline;color:var(--vpf-purple)}
.vpf-case{background:#f5f3ef;border:1px solid #e5dfea;border-radius:18px;padding:28px;color:#342c3e;font:14px/1.8 Arial,Helvetica,sans-serif}
.vpf-case :is(img,video){display:block;width:100%;max-width:100%;height:auto;border-radius:10px;margin:0 0 24px}
.vpf-case-meta{font-size:11px;letter-spacing:1px;color:#776285}
.vpf-case-actions{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:26px}
.vpf-case-actions a{font-size:12px;color:#7054d8;text-decoration:none;padding:10px 0}
.valpum-portfolio.vpf-ready .vpf-empty{position:absolute;z-index:3;bottom:115px;left:0;right:0}
@container(max-width:650px){.vpf-screen-body{display:flex;flex-direction:column;overflow-y:auto}.vpf-media{min-height:0;flex:none;aspect-ratio:16/10}.vpf-copy{overflow:visible;flex:none;padding:22px}.vpf-title{font-size:28px}.vpf-description{font-size:12px}.vpf-screen-label{display:none}.vpf-screen-foot{align-items:stretch;flex-direction:column;gap:4px}.vpf-visit{justify-content:center;min-height:33px;font-size:10px}.vpf-open-work{width:100%;font-size:10px!important;min-height:42px}.vpf-screen-head{padding:7px 9px;min-height:46px}.vpf-screen-head button{font-size:10px;min-height:38px}}
@media(max-width:767px){.vpf-mobile-note{display:block}.vpf-stage{min-height:940px}.vpf-heading{left:6%;right:6%;top:max(116px,var(--vpm-menu-clearance,116px))}.vpf-heading h1{font-size:38px;letter-spacing:-1.5px;max-width:460px}.vpf-intro{font-size:11px;max-width:290px;margin-top:14px!important}.vpf-selection{bottom:165px;display:block}.vpf-selected-title{font-size:25px;max-width:100%}.vpf-selected-category{font-size:8px}.vpf-inspect{min-height:43px;padding:10px 16px;font-size:10px!important;gap:30px;margin-top:16px}.vpf-bottom{bottom:28px}.vpf-hint{font-size:8px;max-width:120px;text-align:right}.vpf-controls{gap:9px}.vpf-controls button{min-width:43px;min-height:43px}.vpf-counter{min-width:50px;font-size:10px}.vpf-strip{margin-top:13px}.vpf-strip button{font-size:9px;padding:8px 9px}.vpf-fallback-grid{grid-template-columns:1fr 1fr;gap:12px}.vpf-fallback-card{padding:13px}.vpf-fallback-card img{height:100px}.vpf-fallback-card strong{font-size:16px}.vpf-screen-body{display:flex;flex-direction:column;overflow-y:auto}.vpf-media{flex:none;min-height:0;aspect-ratio:16/10}.vpf-copy{overflow:visible;flex:none;padding:20px}.vpf-title{font-size:27px}.vpf-description{font-size:12px}.vpf-screen-label{display:none}.vpf-screen-foot{align-items:stretch;flex-direction:column;gap:4px;padding:9px 12px}.vpf-visit{justify-content:center;min-height:33px}.vpf-open-work{width:100%;font-size:10px!important;min-height:42px}.vpf-screen-head{padding:7px 9px;min-height:46px}.vpf-screen-head button{font-size:10px;min-height:38px}.vpf-empty{font-size:11px}}
@media(max-width:359px){.vpf-heading h1{font-size:33px}.vpf-hint{max-width:90px}.vpf-fallback-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.valpum-portfolio *{animation:none!important;transition:none!important}.vpf-inspect:hover,.vpf-open-work:hover,.vpf-controls button:hover{transform:none}}
