.portfolio{position:relative;z-index:5;background:#101c38;color:#edf3ff;border-radius:28px 28px 0 0;padding:112px var(--gutter) 110px}
.portfolio-enhanced .portfolio{margin-top:-100svh}
.testimonials-exit-shade{position:absolute;inset:0;z-index:5;background:#030813;opacity:var(--testimonials-shade,0);pointer-events:none;border-radius:inherit}
.portfolio>.agency-heading{margin-bottom:56px}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px 24px}
.work-card{display:block;min-width:0;text-align:left;border:0;background:none;color:inherit;padding:0;font:inherit}
.work-image{display:block;position:relative;overflow:hidden;aspect-ratio:3/2;background:#1b2c4e;border-radius:4px 24px 4px 24px}
.work-image>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .65s}
.work-open{position:absolute;right:16px;bottom:16px;display:grid;place-items:center;width:44px;height:44px;background:#315bff;color:#fff;border-radius:3px 12px 3px 12px;transition:transform .3s,background .3s}
.work-open svg{width:20px;height:20px}
.work-card:hover .work-image>img,.work-card:focus-visible .work-image>img{transform:scale(1.045)}
.work-card:hover .work-open{transform:translate(2px,-2px);background:#2048df}
.work-card:focus-visible{outline:2px solid #a7bfff;outline-offset:7px;border-radius:4px}
.work-meta{display:flex;justify-content:space-between;gap:12px;padding-top:18px}
.work-meta>span{display:flex;flex-direction:column;gap:5px}
.work-meta strong{font-size:21px;letter-spacing:-.025em;font-weight:600}
.work-meta>span>span{color:#b6c7e8;font-size:13px;line-height:1.5}
.work-meta small{font-size:10px;line-height:1.5;color:#b6c7e8;text-align:right;padding-top:5px;max-width:12ch}
.project-modal{padding:0;border:1px solid #9db4ed;border-radius:4px 26px 4px 26px;background:#f3f6fc;color:#14203a;width:min(1040px,calc(100% - 48px));max-width:none;max-height:calc(100dvh - 48px);margin:auto;overflow:auto;overscroll-behavior:contain;scrollbar-color:#315bff #e8eef9}
.project-modal::backdrop{background:#050c20bb;backdrop-filter:blur(10px)}
.project-sheet{position:relative}
.project-close{position:sticky;top:16px;float:right;margin:16px 16px -60px 0;z-index:2;width:44px;height:44px;display:grid;place-items:center;border:1px solid #aec0ee;background:#f4f7ff;color:#315bff;border-radius:50%}
.project-close:hover{background:#315bff;color:white}
.project-close svg{width:22px;height:22px}
.project-image{display:block;width:100%;height:auto;max-height:48dvh;object-fit:cover;background:#dce5f5}
.project-copy{padding:36px 42px 42px}
.project-category{color:#315bff;font-size:12px;margin-bottom:14px}
.project-copy h2{font-size:clamp(28px,4vw,46px);line-height:1.13;letter-spacing:-.035em;font-weight:500;max-width:24ch}
.project-details{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:32px}
.project-copy h3{font-size:12px;font-weight:600;color:#315bff;margin-bottom:9px}
.project-copy p:not(.project-category){font-size:14px;line-height:1.75;color:#4b5d7b}
.project-deliverables{border-top:1px solid #c8d3e8;margin-top:28px;padding-top:22px}
.project-modal :focus-visible{outline:2px solid #315bff;outline-offset:3px}
html:has(.project-modal[open]){overflow:hidden}
@media(hover:hover) and (pointer:fine){body .project-modal,body .project-modal *{cursor:url('assets/cursor-orvyn.svg?v=4') 12 12,auto!important}body .project-modal button{cursor:pointer!important}}
@media(max-width:1000px){.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.work-meta{flex-wrap:wrap}.work-meta small{text-align:left;max-width:none}}
@media(max-width:600px){.portfolio{padding:100px 24px 70px}.portfolio-grid{grid-template-columns:1fr;gap:32px}.portfolio>.agency-heading{margin-bottom:32px}.project-modal{width:calc(100% - 24px);max-height:calc(100dvh - 24px)}.project-copy{padding:26px 24px 32px}.project-details{grid-template-columns:1fr;gap:22px;margin-top:24px}.project-image{max-height:34dvh}.work-meta{justify-content:space-between}}
@media(prefers-reduced-motion:reduce){.work-image>img,.work-open{transition:none}.work-card:hover .work-image>img,.work-card:focus-visible .work-image>img,.work-card:hover .work-open{transform:none}}
.motion-off .work-image>img,.motion-off .work-open{transition:none;transform:none!important}
/* A compact brand statement gives the portfolio a deliberate closing beat. */
.brand-statement{position:relative;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:48px;padding:72px var(--gutter) 92px;background:#315bff;color:#fff}
.brand-statement h2{font-size:clamp(40px,5.8vw,84px);font-weight:500;letter-spacing:-.04em;line-height:1.08;margin:0;max-width:16ch}
.brand-statement h2 span{color:#dce6ff}
.statement-mark{width:clamp(68px,12vw,172px);height:clamp(68px,12vw,172px);flex-shrink:0;stroke-width:1.1}
.brand-statement+.services{z-index:7}
@media(max-width:600px){.brand-statement{padding:48px 24px 68px;gap:24px;align-items:flex-start;flex-direction:column}.statement-mark{width:44px;height:44px}.brand-statement h2{font-size:clamp(36px,8.5vw,50px)}}