.portfolio { padding: clamp(62px, 7vw, 116px) 0 clamp(72px, 9vw, 144px); }

.portfolio__filters { display: flex; gap: 0; margin-bottom: 30px; overflow-x: auto; scrollbar-width: none; }
.portfolio__filters::-webkit-scrollbar { display: none; }
.portfolio-filter { position: relative; display: inline-flex; flex: 0 0 auto; min-height: 64px; align-items: center; padding: 0 clamp(10px, 1.15vw, 18px); border: 0; background: transparent; color: var(--color-text-muted); cursor: pointer; font: inherit; font-size: 17px; font-weight: 700; letter-spacing: -.018em; line-height: 1; transition: background 180ms var(--ease-out), color 160ms ease, transform 180ms var(--ease-out); }
.portfolio-filter::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--color-accent); content: ""; transform: scaleX(0); transform-origin: left center; transition: transform 220ms var(--ease-out); }
.portfolio-filter:hover, .portfolio-filter:focus-visible { background: var(--color-surface); color: var(--color-text); }
.portfolio-filter:focus-visible { outline: 1px solid var(--color-accent); outline-offset: 4px; }
.portfolio-filter:active { transform: scale(.97); }
.portfolio-filter.is-active { background: var(--color-surface); color: var(--color-text); }
.portfolio-filter.is-active::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .portfolio-filter:not(.is-active):hover { transform: translateY(-2px); } }

.portfolio__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px; overflow: clip; border: 1px solid var(--color-border); background: var(--color-border); }
.portfolio-card { grid-column: span 4; min-width: 0; min-height: clamp(290px, 29vw, 410px); background: #050505; }
.portfolio-card--wide { grid-column: span 8; }
.portfolio-card__button { position: relative; display: block; width: 100%; height: 100%; min-height: inherit; padding: 0; overflow: hidden; border: 0; background: #050505; color: var(--color-text); font: inherit; text-align: left; cursor: pointer; isolation: isolate; }
.portfolio-card__media, .portfolio-card__scrim { position: absolute; inset: 0; pointer-events: none; }
.portfolio-card__media { display: grid; place-items: center; overflow: hidden; background: #050505; }
.portfolio-card__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) brightness(.58) contrast(1.08); opacity: .92; transform: scale(1.012); transition: filter 560ms var(--ease-smooth), opacity 420ms var(--ease-smooth), transform 700ms var(--ease-smooth); }
.portfolio-card__button[data-project-fit="contain"] .portfolio-card__media img { width: auto; height: auto; max-width: min(84%, 650px); max-height: min(84%, 440px); object-fit: contain; transform: none; }
.portfolio-card[data-project-id="sw-mobile"] .portfolio-card__button[data-project-fit="contain"] .portfolio-card__media img,
.portfolio-card[data-project-id="cims-mobile"] .portfolio-card__button[data-project-fit="contain"] .portfolio-card__media img { width: auto; height: calc(90% - 24px); max-width: 90%; max-height: calc(90% - 24px); align-self: end; margin-top: 24px; }
.portfolio-card[data-project-id="suporg"] .portfolio-card__button[data-project-fit="contain"] .portfolio-card__media img,
.portfolio-card[data-project-id="aft"] .portfolio-card__button[data-project-fit="contain"] .portfolio-card__media img,
.portfolio-card[data-project-id="braintension"] .portfolio-card__button[data-project-fit="contain"] .portfolio-card__media img { max-width: min(84%, 720px); max-height: 320px; }
.portfolio-card__scrim { background: linear-gradient(180deg, rgba(5, 5, 5, .04) 21%, rgba(5, 5, 5, .28) 55%, rgba(5, 5, 5, .92) 100%); opacity: .96; transition: opacity 400ms var(--ease-smooth); }
.portfolio-card__copy { position: relative; z-index: 1; display: flex; height: 100%; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: clamp(22px, 2.7vw, 42px); }
.portfolio-card__category, .portfolio-dialog__category { color: var(--color-accent); font-size: 11px; font-weight: 800; letter-spacing: .08em; line-height: 1.25; text-transform: uppercase; }
.portfolio-card__title { max-width: 16ch; margin-top: 8px; font-size: clamp(1.55rem, 2.25vw, 2.8rem); font-weight: 600; letter-spacing: -.052em; line-height: .97; text-wrap: balance; }
.portfolio-card__action { display: inline-flex; min-height: 24px; align-items: center; gap: 11px; margin-top: 20px; color: var(--color-text-muted); font-size: 12px; font-weight: 700; opacity: .78; transition: color 220ms var(--ease-out), opacity 220ms var(--ease-out); }
.portfolio-card__action i { width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); transition: transform 220ms var(--ease-out); }
.portfolio-card--text .portfolio-card__button { background: var(--color-bg-elevated); }
.portfolio-card--text .portfolio-card__copy { justify-content: center; }
.portfolio-card--text .portfolio-card__title { max-width: 14ch; }
.portfolio__grid[data-active-filter="portals"] { grid-auto-flow: dense; }
.portfolio__grid[data-active-filter="ai"] .portfolio-card[data-project-id="cims"], .portfolio__grid[data-active-filter="ai"] .portfolio-card[data-project-id="suporg"] { grid-column: 1 / -1; }
@media (min-width: 881px) {
	.portfolio__grid[data-active-filter="portals"] .portfolio-card[data-project-id="sap-support-portal"] { grid-column: 1 / span 4; grid-row: 3; }
	.portfolio__grid[data-active-filter="portals"] .portfolio-card[data-project-id="sap-partner-portal"] { grid-column: 5 / span 4; grid-row: 3; }
	.portfolio__grid[data-active-filter="portals"] .portfolio-card[data-project-id="sap-one"] { grid-column: 9 / span 4; grid-row: 3; }
	.portfolio__grid[data-active-filter="mobile"] .portfolio-card[data-project-id="cims-mobile"] { grid-column: 1 / span 4; grid-row: 1; }
	.portfolio__grid[data-active-filter="mobile"] .portfolio-card[data-project-id="shopping-centre-navigator"] { grid-column: 5 / span 8; grid-row: 1; }
	.portfolio__grid[data-active-filter="mobile"] .portfolio-card[data-project-id="vademecum"] { grid-column: 1 / span 8; grid-row: 2; }
	.portfolio__grid[data-active-filter="mobile"] .portfolio-card[data-project-id="sw-mobile"] { grid-column: 9 / span 4; grid-row: 2; }
	.portfolio__grid[data-active-filter="devops"] .portfolio-card[data-project-id="findevsecops-aft"] { grid-column: 1 / span 4; grid-row: 1; }
	.portfolio__grid[data-active-filter="devops"] .portfolio-card[data-project-id="aem-migration"] { grid-column: 5 / span 8; grid-row: 1; }
}
@media (hover: hover) and (pointer: fine) { .portfolio-card__button:hover .portfolio-card__media img, .portfolio-card__button:focus-visible .portfolio-card__media img { filter: saturate(.98) brightness(.82) contrast(1.04); opacity: 1; transform: scale(1.045); } .portfolio-card__button:hover .portfolio-card__scrim, .portfolio-card__button:focus-visible .portfolio-card__scrim { opacity: .78; } .portfolio-card__button:hover .portfolio-card__action, .portfolio-card__button:focus-visible .portfolio-card__action { color: var(--color-text); opacity: 1; } .portfolio-card__button:hover .portfolio-card__action i, .portfolio-card__button:focus-visible .portfolio-card__action i { transform: translateX(4px) rotate(45deg); } }
.portfolio-card__button[data-project-fit="contain"]:hover .portfolio-card__media img, .portfolio-card__button[data-project-fit="contain"]:focus-visible .portfolio-card__media img { transform: none; }
.portfolio-card__button:active { transform: scale(.992); }
.portfolio-card[hidden] { display: none; }


.portfolio-dialog { width: min(100% - 40px, 1080px); max-height: min(820px, calc(100dvh - 40px)); padding: 0; overflow: auto; border: 1px solid var(--color-border); background: #0a0a0c; color: var(--color-text); }
.portfolio-dialog::backdrop { background: rgba(0, 0, 0, .68); }
.portfolio-dialog[open] { animation: portfolio-dialog-in 300ms var(--ease-smooth) both; }
.portfolio-dialog__frame { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); min-height: 570px; }
.portfolio-dialog__visual { display: grid; min-height: 100%; place-items: center; overflow: hidden; border-right: 1px solid var(--color-border); background: #050505; }
.portfolio-dialog__visual img { width: 100%; height: 100%; min-height: 570px; object-fit: cover; filter: saturate(.88) brightness(.78) contrast(1.04); }
.portfolio-dialog__visual img.is-contain { width: min(85%, 630px); height: min(80%, 470px); min-height: 0; object-fit: contain; }
.portfolio-dialog[data-project-id="sw-mobile"] .portfolio-dialog__visual img.is-contain,
.portfolio-dialog[data-project-id="cims-mobile"] .portfolio-dialog__visual img.is-contain { width: auto; height: auto; max-width: 88%; max-height: min(78%, 400px); }
.portfolio-dialog__content { display: flex; min-width: 0; flex-direction: column; justify-content: flex-end; padding: clamp(32px, 4.6vw, 70px); }
.portfolio-dialog__content h2 { max-width: 12ch; margin: 10px 0 28px; font-size: clamp(2.1rem, 3.25vw, 3.75rem); font-weight: 600; letter-spacing: -.04em; line-height: .94; text-wrap: balance; }
.portfolio-dialog__description { max-width: 37ch; color: var(--color-text-muted); font-size: 15px; line-height: 1.62; }
.portfolio-dialog__facts { display: grid; gap: 18px; margin: 34px 0 0; }
.portfolio-dialog__facts div { padding-top: 16px; border-top: 1px solid var(--color-border); }
.portfolio-dialog__facts dt { margin-bottom: 5px; color: var(--color-text); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.portfolio-dialog__facts dd { margin: 0; color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }
.portfolio-dialog__close { position: absolute; z-index: 2; top: 16px; right: 16px; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; background: rgba(5, 5, 5, .8); color: var(--color-text); cursor: pointer; transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out), transform 180ms var(--ease-out); }
.portfolio-dialog__close span, .portfolio-dialog__close span::after { width: 15px; height: 1px; background: currentColor; content: ""; transform: rotate(45deg); }
.portfolio-dialog__close span::after { display: block; transform: rotate(90deg); }
.portfolio-dialog__close:hover, .portfolio-dialog__close:focus-visible { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); }
.portfolio-dialog__close:active { transform: scale(.94); }
.portfolio-dialog--text .portfolio-dialog__frame { grid-template-columns: 1fr; min-height: 0; }
.portfolio-dialog--text .portfolio-dialog__visual { display: none; }
.portfolio-dialog--text .portfolio-dialog__content { min-height: 520px; }
@keyframes portfolio-dialog-in { from { opacity: 0; transform: translateY(14px) scale(.988); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 880px) { .portfolio-card, .portfolio-card--wide { grid-column: span 6; min-height: clamp(290px, 48vw, 410px); } .portfolio-dialog__frame { grid-template-columns: 1fr; } .portfolio-dialog__visual { min-height: min(54vw, 440px); border-right: 0; border-bottom: 1px solid var(--color-border); } .portfolio-dialog__visual img { min-height: min(54vw, 440px); } .portfolio-dialog__content { min-height: 420px; } }
@media (max-width: 767px) { .portfolio { padding: 46px 0 72px; } .portfolio__filters { width: calc(100% + 48px); gap: 0; margin-inline: -24px; padding: 0 24px 2px; } .portfolio-filter { min-height: 56px; padding: 0 14px; font-size: 16px; } .portfolio__grid { grid-template-columns: 1fr; } .portfolio-card, .portfolio-card--wide, .portfolio__grid[data-active-filter="ai"] .portfolio-card[data-project-id="cims"], .portfolio__grid[data-active-filter="ai"] .portfolio-card[data-project-id="suporg"] { grid-column: auto; min-height: 330px; } .portfolio-card__copy { padding: 24px; } .portfolio-card__title { max-width: 18ch; font-size: clamp(1.65rem, 7vw, 2.25rem); } .portfolio-dialog { width: min(100% - 24px, 620px); max-height: calc(100dvh - 24px); } .portfolio-dialog__visual { min-height: 275px; } .portfolio-dialog__visual img { min-height: 275px; } .portfolio-dialog[data-project-id="sw-mobile"] .portfolio-dialog__visual img.is-contain, .portfolio-dialog[data-project-id="cims-mobile"] .portfolio-dialog__visual img.is-contain { max-width: 78%; max-height: 33vh; max-height: min(33dvh, 220px); } .portfolio-dialog__content { min-height: 0; padding: 34px 26px 30px; } .portfolio-dialog__content h2 { margin-bottom: 24px; font-size: clamp(1.85rem, 8.4vw, 2.75rem); } .portfolio-dialog__facts { margin-top: 28px; } }
@media (prefers-reduced-motion: reduce) { .portfolio-filter, .portfolio-card__media img, .portfolio-card__scrim, .portfolio-card__action, .portfolio-card__action i, .portfolio-dialog__close { transition: none; } .portfolio-dialog[open] { animation: none; } }

@media (max-width: 767px) {
	.portfolio__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.portfolio-card,
	.portfolio-card--wide,
	.portfolio__grid[data-active-filter="ai"] .portfolio-card[data-project-id="cims"],
	.portfolio__grid[data-active-filter="ai"] .portfolio-card[data-project-id="suporg"] {
		grid-column: span 1;
		min-height: 0;
		aspect-ratio: 1;
	}
	.portfolio-card__copy { padding: 14px; }
	.portfolio-card__category { font-size: 9px; letter-spacing: .06em; }
	.portfolio-card__title { margin-top: 6px; font-size: clamp(.98rem, 4.7vw, 1.36rem); line-height: .96; }
	.portfolio-card__action { gap: 7px; margin-top: 10px; font-size: 10px; }
	.portfolio-card__action i { width: 7px; height: 7px; }
}