/* Portfolio v2. Load after site.css; all rules are scoped to this section/grid. */
/* Preserve the complete client-supplied Manserv Shop artwork. */
#project-grid.portfolio-v2-grid [data-slug=manserv] .pv2-main-image{object-fit:contain}
#project-grid.portfolio-v2-grid [data-slug=manserv] .pv2-stage-index{display:none}
#project-grid.portfolio-v2-grid [data-slug=manserv] .pv2-open:hover .pv2-main-image{transform:none}
#portfolio.portfolio-v2{--pv2-plum:#241028;--pv2-night:#160820;--pv2-wine:#3D1236;--pv2-paper:#F4EFE6;--pv2-white:#F7F1E7;--pv2-gold:#FFC24B;width:100%;max-width:none;margin:0;background:var(--pv2-plum);color:var(--pv2-white);padding:76px clamp(20px,4vw,72px) 80px;overflow:hidden}
#portfolio.portfolio-v2>.section-top,#portfolio.portfolio-v2>.portfolio-title-row,#portfolio.portfolio-v2>.project-toolbar,#portfolio.portfolio-v2>.project-grid{max-width:1456px;margin-inline:auto}
#portfolio.portfolio-v2 .section-top{padding-bottom:30px}
#portfolio.portfolio-v2 .section-top .eyebrow{color:var(--pv2-gold)}
#portfolio.portfolio-v2 .section-top p{color:#d7cbd6;font-size:14px}
#portfolio.portfolio-v2 .portfolio-title-row{position:relative;margin-bottom:34px;gap:26px}
#portfolio.portfolio-v2 h2{position:relative;z-index:1;font-size:clamp(44px,5.7vw,88px)}
#portfolio.portfolio-v2 h2 em{color:var(--pv2-gold)}
#portfolio.portfolio-v2 .section-note{position:relative;z-index:1;color:#d7cbd6;line-height:1.55}
.pv2-heading-orbit{position:absolute;right:19%;top:3%;width:clamp(140px,23vw,330px);height:clamp(78px,11vw,165px);border:1px solid #FFC24B4d;border-radius:50%;transform:rotate(-18deg);pointer-events:none}
.pv2-heading-orbit svg{position:absolute;right:13%;top:-24%;width:clamp(35px,5vw,68px);height:auto;fill:#FFC24B;transform:rotate(18deg)}
#portfolio.portfolio-v2 .project-toolbar{border-top-color:#F7F1E72b;padding:18px 0 27px;gap:20px}
#portfolio.portfolio-v2 .project-filters{gap:8px 12px}
#portfolio.portfolio-v2 .project-filters button{border:1px solid #F7F1E740;border-radius:100px;padding:9px 17px;font-size:12px;line-height:1.2;transition:background .2s,color .2s,border-color .2s}
#portfolio.portfolio-v2 .project-filters button:hover{border-color:var(--pv2-gold)}
#portfolio.portfolio-v2 .project-filters button[aria-pressed=true]{background:var(--pv2-gold);border-color:var(--pv2-gold);color:var(--pv2-plum);font-weight:700}
#portfolio.portfolio-v2 #project-count{font-size:12px;color:#d7cbd6;font-variant-numeric:tabular-nums}
#project-grid.portfolio-v2-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:38px 24px;align-items:start}
#project-grid.portfolio-v2-grid .project-card{grid-column:span 6;min-width:0;padding:0;margin:0}
#project-grid.portfolio-v2-grid .project-card[data-slug=neon],#project-grid.portfolio-v2-grid .project-card[data-slug=will],#project-grid.portfolio-v2-grid .project-card[data-slug=arteris]{grid-column:span 7}
#project-grid.portfolio-v2-grid .project-card[data-slug=wicked],#project-grid.portfolio-v2-grid .project-card[data-slug=zurich-santander],#project-grid.portfolio-v2-grid .project-card[data-slug=shopee]{grid-column:span 5}
#project-grid.portfolio-v2-grid .project-card[data-slug=loft]{grid-column:span 5}
#project-grid.portfolio-v2-grid .project-card[data-slug=olx]{grid-column:span 7}
#project-grid.portfolio-v2-grid .pv2-open{position:relative;display:block;width:100%;padding:0;text-align:left;background:transparent;color:inherit}
#project-grid.portfolio-v2-grid .pv2-open:focus-visible{outline:2px solid #FFC24B;outline-offset:7px}
.pv2-stage{display:block;position:relative;height:clamp(260px,29vw,420px);isolation:isolate;overflow:hidden;background:#F4EFE6;color:#241028}
.pv2-stage img{display:block;width:100%;height:100%;max-width:none;aspect-ratio:auto;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.pv2-main-image{object-fit:cover;object-position:center}
.pv2-stage-index{position:absolute;z-index:3;top:17px;left:18px;font-size:9px;line-height:1;letter-spacing:.14em;font-weight:700;background:#F7F1E7ed;color:#241028;padding:8px 10px}
.pv2-stage-label{position:absolute;z-index:3;left:18px;bottom:17px;font-size:11px;line-height:1.25;background:#F7F1E7ed;color:#241028;padding:8px 11px}
.pv2-open-cue{position:absolute;z-index:4;right:18px;bottom:17px;display:flex;align-items:center;gap:16px;background:#241028;color:#F7F1E7;padding:9px 12px;font-size:11px;line-height:1.2;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
.pv2-open-cue span{font-size:16px;line-height:1}
#project-grid.portfolio-v2-grid .pv2-open:hover .pv2-open-cue,#project-grid.portfolio-v2-grid .pv2-open:focus-visible .pv2-open-cue{opacity:1;transform:none}
#project-grid.portfolio-v2-grid .pv2-open:hover .pv2-main-image{transform:scale(1.025)}
.pv2-copy{display:block;border-bottom:1px solid #F7F1E72b;padding:15px 0 18px}
#project-grid.portfolio-v2-grid .pv2-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:0;font-size:9px;line-height:1.45;letter-spacing:.06em;color:#cdbdca;text-transform:uppercase}
.pv2-meta>span:last-child{flex-shrink:0;font-variant-numeric:tabular-nums}
.pv2-title-line{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:10px 0 4px}
#project-grid.portfolio-v2-grid h3{margin:0;font:600 clamp(25px,2.35vw,36px)/1.08 Hanken,Arial,sans-serif;letter-spacing:-.035em;color:#F7F1E7}
.pv2-title-line svg{width:22px;height:22px;flex-shrink:0;fill:#FFC24B}
#project-grid.portfolio-v2-grid .pv2-copy p{font-size:13px;line-height:1.4;color:#d7cbd6;margin:0}
.pv2-photo-detail{position:absolute;z-index:2;right:0;top:0;bottom:0;width:28%;background:#160820;border-left:4px solid #241028}
.pv2-photo-detail img{object-fit:cover;height:100%}
.pv2-photo-detail>span{position:absolute;left:0;right:0;bottom:0;padding:9px;background:#F7F1E7eb;color:#241028;font-size:9px;line-height:1;text-align:center}
#project-grid.portfolio-v2-grid [data-slug=neon] .pv2-stage{background:#160820}
#project-grid.portfolio-v2-grid [data-slug=neon] .pv2-main-image{width:72%;object-fit:contain;object-position:50% 50%;transform:none}
#project-grid.portfolio-v2-grid [data-slug=neon] .pv2-open-cue{bottom:auto;top:17px}
#project-grid.portfolio-v2-grid [data-slug=wicked] .pv2-stage{background:#160820}
#project-grid.portfolio-v2-grid [data-slug=wicked] .pv2-main-image{object-fit:contain;object-position:50% 50%;padding:34px 0}
#project-grid.portfolio-v2-grid [data-slug=loft] .pv2-main-image{object-position:50% 50%}
#project-grid.portfolio-v2-grid [data-slug=olx] .pv2-stage{background:#F7F2E8}
.pv2-object-pair{display:grid;grid-template-columns:1.35fr 1fr;width:100%;height:100%;gap:0;padding:24px 20px 36px;align-items:center}
.pv2-phone,.pv2-bag{display:block;min-width:0;height:100%;min-height:0}
.pv2-object-pair img{object-fit:contain}
.pv2-bag{height:83%}
#project-grid.portfolio-v2-grid [data-slug=will] .pv2-main-image{object-position:50% 46%}
#project-grid.portfolio-v2-grid [data-slug=zurich-santander] .pv2-stage{background:#fff}
#project-grid.portfolio-v2-grid [data-slug=zurich-santander] .pv2-main-image{object-fit:contain;padding:22px}
#project-grid.portfolio-v2-grid [data-slug=arteris] .pv2-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#3D1236;color:#F7F1E7;padding:50px 26px 48px}
.pv2-browser{display:block;position:relative;flex:1;min-height:0;width:100%;max-width:620px;background:#fff;border:1px solid #F7F1E74d;border-radius:7px;box-shadow:0 20px 45px #16082048;overflow:hidden}
.pv2-browser-bar{display:flex;align-items:center;gap:5px;height:24px;background:#F4EFE6;color:#5e4b60;padding:0 10px;border-bottom:1px solid #24102817}
.pv2-browser-bar i{display:block;width:4px;height:4px;flex-shrink:0;border-radius:50%;background:#947c93}
.pv2-browser-bar>span{flex:1;text-align:center;font-size:8px;line-height:1;letter-spacing:.06em;margin-right:22px}
.pv2-browser img{width:100%;height:calc(100% - 24px);object-fit:contain;transform:none!important}
.pv2-interface-note{display:flex;justify-content:space-between;width:100%;font-size:11px;letter-spacing:.03em;color:#F7F1E7;line-height:1.4}
#project-grid.portfolio-v2-grid [data-slug=arteris] .pv2-stage-label{display:none}
#project-grid.portfolio-v2-grid [data-slug=arteris] .pv2-open-cue{background:#FFC24B;color:#241028}
#project-grid.portfolio-v2-grid [data-slug=shopee] .pv2-stage{background:#F4EFE6}
#project-grid.portfolio-v2-grid [data-slug=shopee] .pv2-main-image{object-fit:contain;padding:25px 44px}
#project-grid.portfolio-v2-grid.is-filtered .project-card{grid-column:span 6;padding:0}
#project-grid.portfolio-v2-grid.is-filtered:not(:has(.project-card:not([hidden])~.project-card:not([hidden]))) .project-card:not([hidden]){grid-column:span 8}
#project-grid.portfolio-v2-grid.is-filtered .pv2-stage{height:clamp(260px,29vw,390px)}
@media(hover:none){.pv2-open-cue{opacity:1;transform:none}}
@media(min-width:1600px){.pv2-stage{height:420px}}
@media(max-width:960px){#portfolio.portfolio-v2{padding-top:58px;padding-bottom:62px}.pv2-heading-orbit{right:8%;opacity:.7}.pv2-stage{height:290px}#project-grid.portfolio-v2-grid{gap:28px 20px}.pv2-stage-index{left:12px;top:12px;font-size:8px}.pv2-stage-label{left:12px;bottom:12px;font-size:10px}.pv2-open-cue{right:12px;bottom:12px}.pv2-object-pair{padding:30px 8px}.pv2-photo-detail{right:0;top:0;bottom:0;width:28%}#project-grid.portfolio-v2-grid [data-slug=arteris] .pv2-stage{padding:46px 18px 38px}#project-grid.portfolio-v2-grid [data-slug=shopee] .pv2-main-image{padding:30px}.pv2-meta>span:last-child{display:none}}
@media(max-width:680px){#portfolio.portfolio-v2{padding:44px 20px 50px}#portfolio.portfolio-v2 .section-top{padding-bottom:24px}#portfolio.portfolio-v2 .section-top p{font-size:11px;max-width:150px}#portfolio.portfolio-v2 h2{font-size:clamp(38px,10vw,62px)}#portfolio.portfolio-v2 .portfolio-title-row{margin-bottom:28px}.pv2-heading-orbit{width:144px;height:76px;right:-45px;top:17%;opacity:.6}.pv2-heading-orbit svg{width:36px}#portfolio.portfolio-v2 .project-toolbar{display:flex;flex-wrap:wrap;gap:16px;padding:15px 0 24px}#portfolio.portfolio-v2 .project-filters{gap:8px}#portfolio.portfolio-v2 .project-filters button{font-size:11px;padding:8px 13px}#portfolio.portfolio-v2 #project-count{margin:0;font-size:10px}#project-grid.portfolio-v2-grid{grid-template-columns:minmax(0,1fr);gap:27px}#project-grid.portfolio-v2-grid .project-card:nth-child(n),#project-grid.portfolio-v2-grid.is-filtered .project-card:nth-child(n),#project-grid.portfolio-v2-grid.is-filtered:not(:has(.project-card:not([hidden])~.project-card:not([hidden]))) .project-card:not([hidden]){grid-column:1;padding:0;margin:0}.pv2-stage,#project-grid.portfolio-v2-grid.is-filtered .pv2-stage{height:auto;aspect-ratio:1.3}.pv2-stage>.pv2-main-image{position:absolute;inset:0}.pv2-stage-index{font-size:8px}.pv2-open-cue{font-size:10px;padding:8px 10px;gap:9px}.pv2-stage-label{max-width:57%;font-size:9px}.pv2-copy{padding:12px 0 15px}#project-grid.portfolio-v2-grid h3{font-size:28px}#project-grid.portfolio-v2-grid .pv2-copy p{font-size:12px}.pv2-meta>span:last-child{display:inline}.pv2-object-pair{position:absolute;inset:0;padding:27px 9px 30px}.pv2-title-line{margin-top:8px}.pv2-title-line svg{width:19px;height:19px}#project-grid.portfolio-v2-grid [data-slug=arteris] .pv2-stage{padding:44px 18px 25px;aspect-ratio:1.3;gap:13px}.pv2-browser-bar{height:20px}.pv2-browser-bar>span{font-size:7px}.pv2-interface-note{font-size:10px}#project-grid.portfolio-v2-grid [data-slug=wicked] .pv2-main-image{padding:32px 0}#project-grid.portfolio-v2-grid [data-slug=zurich-santander] .pv2-main-image{padding:16px}#project-grid.portfolio-v2-grid [data-slug=shopee] .pv2-main-image{padding:18px 48px}}
@media(prefers-reduced-motion:reduce){#portfolio.portfolio-v2 *{transition:none!important;scroll-behavior:auto}.pv2-open-cue{transform:none}}
.motion-paused #portfolio.portfolio-v2 *{transition:none!important}

@media(max-width:680px){#project-grid.portfolio-v2-grid [data-slug=neon] .pv2-stage{aspect-ratio:1.5}#project-grid.portfolio-v2-grid [data-slug=neon] .pv2-main-image{width:100%}.pv2-photo-detail{display:none}.pv2-browser img{height:calc(100% - 20px)}}
