/* The work grid shares five tracks: artwork, role, title, summary and link. */
.site-header .wordmark{font:italic 38px/1 var(--serif);letter-spacing:-.06em;min-width:46px}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;row-gap:0;align-items:stretch}
.project-grid>.project{display:grid;grid-template-rows:subgrid;grid-row:span 5;gap:0;padding:0 0 66px;min-width:0;align-self:stretch}
.project-grid>.project>.project-visual{display:flex;align-items:center;justify-content:center;aspect-ratio:1.12;width:100%;height:auto;min-height:0;margin:0;overflow:hidden;border-radius:16px;container-type:size;background:#f4f5ef}
.project-grid>.project>.project-meta{margin:25px 0 11px;font-size:14px;line-height:1.5;align-self:start}
.project-grid>.project>h3{font-size:clamp(1.75rem,2.4vw,2.25rem);margin:0 0 17px;align-self:start}
.project-grid>.project>.project-description{margin:0 0 23px;font-size:1rem;line-height:1.75;align-self:start}
.project-grid>.project>.text-link{justify-self:start;align-self:end;font-size:1rem}

/* A consistent stage surrounds each complete original screen. The artwork
   scales as one unit; its internal text and controls never reflow. */
.project-grid .project-visual>.screen-showcase.showcase-compact{position:absolute;inset:0;display:flex;width:100%;height:100%;padding:42px 32px;gap:24px;align-items:center;justify-content:center;container-type:normal;overflow:visible;border:0;border-radius:inherit}
.project-grid .project-visual .screen-showcase.showcase-compact .product-device.device-phone{width:min(calc((100cqw - 88px)/2),calc((100cqh - 84px)*var(--screen-ratio)),230px);max-width:none!important;flex:none;translate:none;transform:none;transition:none}
.project-grid .project-visual .screen-showcase.showcase-compact .product-device.device-tablet,
.project-grid .project-visual .screen-showcase.showcase-compact .product-device.device-desktop{width:min(calc(100cqw - 64px),calc((100cqh - 84px)*var(--screen-ratio)));max-width:none;flex:none}
.project-grid .project-visual>img{display:block;width:100%;height:100%;object-fit:contain;padding:32px;transform:none!important}
.project-grid .project-visual.preview-vr>img{padding:45px}
.project-grid .preview-vr{background:#eaf0ef}
.project-grid .preview-nandos{background:#f9eddf}
.project-grid .project-visual:hover{transform:translateY(-3px)}
.project-grid .project-visual:hover .product-device{translate:none;transform:none}
.product-device.source-screen,.source-screen>.device-display{border-radius:9px;background:transparent!important}
.product-device.source-screen{box-shadow:0 12px 24px -15px #163b4733}
.source-screen>.device-display{line-height:0}
.case-body .screen-showcase.showcase-phone{align-items:flex-start}
.case-body .screen-showcase.showcase-phone.screens-1 .device-phone{width:min(100%,310px);max-width:310px!important}
.case-body .screen-showcase.showcase-phone.screens-2 .device-phone{width:min(calc((100% - 28px)/2),300px);max-width:300px!important}

/* A 3D miniature, with a slow camera drift and pointer-responsive perspective. */
.hero-neighborhood.hero-scene{margin-top:clamp(-165px,-11vw,-65px);width:100%;perspective:1400px;animation:none;transform:translate3d(var(--scene-x,0px),var(--scene-y,0px),0) rotateX(var(--scene-rx,0deg)) rotateY(var(--scene-ry,0deg));transform-origin:50% 65%;transition:transform .65s cubic-bezier(.2,.65,.3,1);mask-image:linear-gradient(to bottom,transparent,#000 19%,#000 96%,transparent)}
.hero-scene-motion{width:100%;animation:neighborhood-drift 14s ease-in-out infinite;animation-play-state:paused;transform-origin:50% 70%}
.hero-scene.is-playing .hero-scene-motion{animation-play-state:running}
.hero-neighborhood.hero-scene img{display:block;width:100%;height:auto;aspect-ratio:1983/793;mix-blend-mode:normal;mask-image:none;max-width:none}
.scene-motion-toggle{position:absolute;z-index:4;right:var(--gutter);bottom:23px;display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid #ccd1bd;border-radius:100px;background:#fff8f1e8;color:var(--ink);font:400 13px/1.4 var(--sans);backdrop-filter:blur(8px);transition:background .2s}
.scene-motion-toggle[hidden]{display:none}
.scene-motion-toggle:hover{background:var(--accent)}
.scene-motion-toggle svg{width:16px;height:16px}
.scene-motion-toggle .play-symbol{display:none}
.scene-motion-toggle[aria-pressed="true"] .pause-symbol{display:none}
.scene-motion-toggle[aria-pressed="true"] .play-symbol{display:block}
@keyframes neighborhood-drift{0%,100%{transform:translate3d(-4px,3px,0) scale(1.008)}50%{transform:translate3d(4px,-4px,0) scale(1.022)}}
@media(max-width:900px){.project-grid{column-gap:28px}.project-grid>.project{padding-bottom:50px}.project-grid>.project>h3{font-size:1.8rem}}
@media(max-width:650px){
 .project-grid{grid-template-columns:1fr}
 .project-grid>.project{padding-bottom:45px}
 .project-grid>.project>.project-visual{aspect-ratio:1.05}
 .project-grid .project-visual>.screen-showcase.showcase-compact{padding:32px 23px;gap:18px}
 .project-grid .project-visual .screen-showcase.showcase-compact .product-device.device-phone{width:min(calc((100cqw - 64px)/2),calc((100cqh - 64px)*var(--screen-ratio)),230px)}
 .project-grid .project-visual .screen-showcase.showcase-compact .product-device.device-tablet,
 .project-grid .project-visual .screen-showcase.showcase-compact .product-device.device-desktop{width:min(calc(100cqw - 46px),calc((100cqh - 64px)*var(--screen-ratio)))}
 .project-grid>.project>.project-meta{margin-top:22px}
 .project-grid>.project>h3{font-size:1.9rem}
 .project-grid .project-visual>img{padding:23px}
 .project-grid .project-visual.preview-vr>img{padding:35px}
 .hero-neighborhood.hero-scene{margin-top:-18px;width:100%}
 .hero-explore{bottom:14px;left:22px;translate:none;padding:8px 13px}
 .scene-motion-toggle{bottom:14px;right:22px;padding:8px 10px}
}
@media(max-width:540px){
 .site-header .nav-inner{flex-direction:row;justify-content:space-between;gap:18px;padding-block:16px;min-height:74px}
 .site-header .wordmark{font-size:34px}
 .site-header .nav-links{width:auto;justify-content:flex-end;gap:16px}
 .site-header .nav-links a{font-size:13px}
}
@media(max-width:360px){.site-header .nav-links{gap:12px}.site-header .nav-inner{gap:12px}.site-header .wordmark{font-size:31px;min-width:35px}}
@media(prefers-reduced-motion:reduce){.hero-scene-motion{animation:none!important}.hero-neighborhood.hero-scene{transform:none!important;transition:none}.scene-motion-toggle{display:none}.project-grid .project-visual:hover{transform:none}}