.portfolio-hero{min-height:365px;display:flex;align-items:center;padding-top:90px;padding-bottom:80px}
.portfolio-hero h1{max-width:730px}
.portfolio-filters{justify-content:flex-start;gap:10px 26px;padding-top:20px;padding-bottom:20px;flex-wrap:wrap;background:rgba(255,255,255,.2)}
.portfolio-filters span{font:500 10px 'DM Mono',monospace;letter-spacing:.03em;margin-right:auto;color:#67635e}
.portfolio-filters button{position:relative;appearance:none;border:0;border-bottom:1px solid transparent;background:transparent;color:var(--ink);padding:5px 0;font:500 11.3px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;cursor:pointer}
.portfolio-filters button:not(:last-child):after{position:absolute;top:50%;right:-13px;width:1px;height:16px;background:currentColor;content:"";opacity:.3;transform:translateY(-50%)}
.portfolio-filters button:hover,.portfolio-filters button:focus-visible{color:#42208f}
.portfolio-filters button:focus-visible{outline:2px solid #42208f;outline-offset:4px}
.portfolio-filters button.selected{color:#42208f;border-color:currentColor}
.portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:43px 24px;padding-top:68px;padding-bottom:120px}
.portfolio-card{min-width:0}
.portfolio-card>a{display:block;color:inherit;text-decoration:none}
.portfolio-card-trigger{display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.portfolio-card-trigger:focus-visible{outline:2px solid #42208f;outline-offset:6px;border-radius:9px}
.portfolio-card[hidden]{display:none}
.portfolio-card-visual{height:auto;aspect-ratio:16/10;position:relative;overflow:hidden;border:1px solid rgba(24,20,29,.22);border-radius:8px;isolation:isolate;box-shadow:0 9px 24px rgba(48,35,66,.12);transition:transform .25s ease,box-shadow .25s ease}
.portfolio-card:hover .portfolio-card-visual{transform:translateY(-5px);box-shadow:0 16px 30px rgba(48,35,66,.2)}
.portfolio-card-visual:before{position:absolute;inset:0;z-index:1;background:linear-gradient(145deg,rgba(15,11,28,.06) 15%,rgba(15,11,28,.13) 52%,rgba(15,11,28,.7));content:"";transition:background .25s ease}
.portfolio-card-visual:after{position:absolute;inset:12px;z-index:2;border:1px solid rgba(255,255,255,.65);content:"";opacity:.72;transition:inset .25s ease,opacity .25s ease}
.portfolio-card-visual img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.05);transform:scale(1.01);transition:transform .45s cubic-bezier(.2,.65,.25,1),filter .3s ease}
.portfolio-card:hover .portfolio-card-visual img{filter:saturate(1.06) contrast(1.08);transform:scale(1.06)}
.portfolio-card:hover .portfolio-card-visual:after{inset:16px;opacity:1}
.portfolio-card-visual>span{position:absolute;left:17px;top:15px;font:500 10px 'DM Mono',monospace;letter-spacing:.08em;z-index:2}
.portfolio-card-visual>b{position:absolute;right:24px;bottom:24px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#171423;font-size:12px;line-height:1;z-index:3;box-shadow:0 8px 20px rgba(0,0,0,.25);transition:transform .25s ease,background .25s ease}
.portfolio-card:hover .portfolio-card-visual>b{background:#c7ff3c;transform:scale(1.08)}
.portfolio-card-meta{padding-top:15px}
.portfolio-card-meta p{font:500 9px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.02em;margin:0 0 7px;color:#514c56;line-height:1.45}
.portfolio-card-meta h2{font-size:19px;line-height:1;letter-spacing:-.06em;margin:0}
.portfolio-card-meta>span{display:block;margin-top:9px;font:500 8px 'DM Mono',monospace;text-transform:uppercase;color:#7a746f;letter-spacing:.03em}
.portfolio-video-overlay{position:fixed;z-index:9999;inset:0;display:grid;place-items:center;padding:24px;background:rgba(12,8,27,.76);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .22s ease}
.portfolio-video-overlay.is-open{opacity:1;pointer-events:auto}
.portfolio-video-dialog{position:relative;width:min(960px,100%);padding:18px;border:1px solid rgba(255,255,255,.35);border-radius:16px;background:#171326;box-shadow:0 28px 100px rgba(0,0,0,.5);transform:translateY(12px) scale(.985);transition:transform .22s ease}
.portfolio-video-overlay.is-open .portfolio-video-dialog{transform:translateY(0) scale(1)}
.portfolio-video-dialog p{margin:0 48px 13px 0;color:#f7f2ff;font:500 11px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase}
.portfolio-video-frame{overflow:hidden;aspect-ratio:16/9;border-radius:9px;background:#090710}
.portfolio-video-frame iframe{display:block;width:100%;height:100%;border:0}
.portfolio-video-close{position:absolute;top:12px;right:12px;width:34px;height:34px;padding:0;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:transparent;color:#fff;font:400 28px/28px Arial,sans-serif;cursor:pointer}
.portfolio-video-close:hover,.portfolio-video-close:focus-visible{border-color:#c7ff3c;background:#c7ff3c;color:#171423;outline:0}
body.portfolio-video-open{overflow:hidden}
.portfolio-card--lime .portfolio-card-visual{background:#c7ff3c;color:#fff}
.portfolio-card--violet .portfolio-card-visual{background:#42208f;color:#fff}
.portfolio-card--coral .portfolio-card-visual{background:#ff7043;color:#fff}
.portfolio-card--blue .portfolio-card-visual{background:#1745d5;color:#fff}
.portfolio-card--peach .portfolio-card-visual{background:#ffecb8;color:#fff}
.portfolio-card--navy .portfolio-card-visual{background:#1c254e;color:#fff}
.portfolio-card--mint .portfolio-card-visual{background:#b8d2c1;color:#fff}
.portfolio-card--gold .portfolio-card-visual{background:#edbb4f;color:#fff}
.dark-mode .portfolio-filters{background:rgba(255,255,255,.025)}
.dark-mode .portfolio-filters span{color:#c5bbd0}
.dark-mode .portfolio-filters button{color:#f7f2ff}
.dark-mode .portfolio-filters button:hover,.dark-mode .portfolio-filters button.selected{color:#d8ff61}
.dark-mode .portfolio-filters button:focus-visible{outline-color:#d8ff61}
.dark-mode .portfolio-card-meta p{color:#d0c7da}
.dark-mode .portfolio-card-meta>span{color:#b8aebe}
@media(max-width:980px){.portfolio-filters span{width:100%;margin-right:0}.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.portfolio-hero{min-height:275px;padding-top:70px;padding-bottom:60px}.portfolio-filters{gap:10px 21px;padding-top:17px;padding-bottom:17px}.portfolio-filters button{font-size:10.2px}.portfolio-filters button:not(:last-child):after{right:-10.5px;height:14px}.portfolio-grid{grid-template-columns:1fr;gap:34px;padding-top:45px;padding-bottom:76px}.portfolio-card-meta h2{font-size:18px}.portfolio-video-overlay{padding:12px}.portfolio-video-dialog{padding:12px;border-radius:12px}.portfolio-video-dialog p{font-size:10px;margin-bottom:10px}.portfolio-video-close{top:8px;right:8px;width:32px;height:32px}}