.project-windows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:30px 0 42px;--window-transition:650ms}.project-window{position:relative;margin:0;min-width:0;aspect-ratio:16/10;overflow:hidden;border:1px solid color-mix(in srgb,var(--project-ink,#fff) 30%,transparent);border-radius:9px;background:var(--project-field,#101923)}.project-window-open{display:block;position:absolute;inset:0;z-index:2;color:inherit}.project-window-open:focus-visible{outline:3px solid currentColor;outline-offset:-4px}.project-window img{width:100%;height:100%;display:block;object-fit:contain}.project-window iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;opacity:0;transition:opacity var(--window-transition) ease-in-out;background:var(--project-field)}.project-window[data-ready=true] iframe{opacity:1}.project-window[data-ready=true] .project-window-open img{opacity:0}.project-window-toggle{position:absolute;right:10px;bottom:10px;z-index:3;width:44px;height:44px;display:grid;place-items:center;border:1px solid #ffffff70;border-radius:50%;background:#111d;color:white;cursor:pointer;font:20px/1 system-ui}.project-window-toggle:focus-visible{outline:3px solid var(--project-ink,#fff);outline-offset:3px}.project-teaser .project-windows{margin:0;width:100%}.oog .project-teaser:has(.project-windows){display:flex;flex-direction:column;height:auto;max-height:calc(100svh - 135px);min-height:0}.project-teaser:has(.project-windows) .project-teaser-copy{order:-1;align-self:stretch;padding:30px 38px 24px;display:grid;grid-template-columns:minmax(220px,.9fr) minmax(0,1.8fr);column-gap:35px;align-items:start}.project-teaser:has(.project-windows) .project-teaser-identity{grid-column:1;grid-row:1/5}.project-teaser:has(.project-windows) .project-teaser-copy>p,.project-teaser:has(.project-windows) .project-teaser-link{grid-column:2;margin-bottom:12px}.project-teaser:has(.project-windows) .project-teaser-link{justify-self:start}.project-teaser:has(.project-windows) .project-teaser-media{padding:0 30px 28px;max-height:none;min-height:0;flex-shrink:0;background:transparent}.project-teaser:has(.project-windows) .project-teaser-promise{font-size:21px}.project-teaser:has(.project-windows) .project-teaser-copy>p:not(.project-teaser-promise){font-size:14px;line-height:1.5}.project-teaser:has(.project-windows) .project-teaser-identity h2{margin:0}.project-teaser .project-window{aspect-ratio:16/10}@media(max-width:700px){.project-windows{grid-template-columns:1fr;gap:16px}.oog .project-teaser:has(.project-windows){max-height:calc(100svh - 110px)}.project-teaser:has(.project-windows) .project-teaser-copy{display:block;padding:30px 24px 20px}.project-teaser:has(.project-windows) .project-teaser-identity{margin-bottom:18px;padding-right:28px}.project-teaser:has(.project-windows) .project-teaser-copy>p{margin-bottom:12px}.project-teaser:has(.project-windows) .project-teaser-media{padding:0 18px 22px}.project-teaser:has(.project-windows) .project-teaser-promise{font-size:19px}.project-window-toggle{right:8px;bottom:8px}}@media(prefers-reduced-motion:reduce){.project-window iframe{transition:none}}
.project-window picture{display:contents}@media(max-width:700px){.project-window[data-window-kind=tool]{aspect-ratio:var(--window-phone-aspect,3/4)}}
/* A real source viewport keeps the complete landing composition intact inside its preview. */
.project-window iframe{width:var(--window-native-width,1000px);height:var(--window-native-height,625px);transform:scale(var(--window-native-scale,1));transform-origin:top left}
.project-window .project-window-toggle{width:44px;height:44px;border:1px solid #ffffff70;border-radius:50%;background:#111d;color:#fff;font:20px/1 system-ui;padding:0;display:grid;place-items:center}.project-window-slide{position:absolute;inset:0;display:block;opacity:0;transition:opacity var(--window-transition) ease-in-out}.project-window-slide[data-active=true]{opacity:1}.project-window img{position:absolute;inset:0}@media(prefers-reduced-motion:reduce){.project-window-slide{transition:none}}

@media(max-width:700px){.project-window[data-window-kind=website]{aspect-ratio:var(--window-phone-aspect,3/4)}}