.catalog-heading{padding:48px 0 64px}.catalog-heading .section-heading{max-width:900px;margin-inline:auto}.project-catalog{padding-bottom:80px;display:block}.project-list{min-width:0}.project-contents{display:none}@media (width>=901px){.catalog-heading .section-heading h1{font-size:max(28px, calc(48 * var(--u)));line-height:1.25;font-weight:var(--weight-heading)}}.project-preview{padding-bottom:clamp(72px,7vw,120px);scroll-margin-top:112px}.project-preview:focus{outline:none}.preview-visuals{align-items:center;gap:24px;display:grid}.preview-image{cursor:zoom-in;border-radius:var(--radius-card);background:0 0;border:0;min-width:0;padding:0;display:block}.preview-image img{object-fit:contain;border-radius:inherit;width:100%;height:auto;box-shadow:0 5px 18px #19281e12}.preview-copy{max-width:850px;padding-top:28px}.preview-copy h2{font-size:clamp(22px,2vw,32px);font-weight:var(--font-regular);margin:12px 0 20px;line-height:1.3}.preview-copy p{color:#626862;margin:0;font-size:16px;line-height:1.65}.project-open{color:#252e28;cursor:pointer;background:0 0;border:0;flex-wrap:wrap;align-items:baseline;gap:12px;margin-top:24px;padding:0;font-size:14px;transition:color .25s;display:flex}.project-open:hover{color:var(--color-brand-green)}.project-open small{color:#7b847e;font-size:12px}.preview-pair .preview-visuals{grid-template-columns:repeat(2,minmax(0,1fr))}.preview-split{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:36px;display:grid}.preview-split .preview-copy{padding:0}.preview-split .preview-copy h2{font-size:clamp(22px,1.7vw,28px)}.preview-image:focus-visible:not([data-pointer-focus]),.project-open:focus-visible:not([data-pointer-focus]),.project-contents a:focus-visible{outline:2px solid var(--color-brand-green);outline-offset:4px}.project-viewer{width:min(1480px,100% - 32px);height:calc(100dvh - 32px);padding:24px;overflow:hidden}.project-viewer[open]{grid-template-rows:auto minmax(0,1fr) 52px;gap:12px;animation:.22s viewer-open;display:grid}.viewer-heading{justify-content:space-between;align-items:center;gap:20px;display:flex}.viewer-heading h2{font-size:clamp(16px,1.5vw,22px);font-weight:var(--font-regular);margin:0;line-height:1.4}.viewer-close{cursor:pointer;color:#27312b;background:0 0;border:0;flex-shrink:0;width:44px;height:44px;font-size:32px}.viewer-stage{touch-action:pan-y pinch-zoom;min-height:0;padding-inline:64px;position:relative}.viewer-stage img{object-fit:contain;width:100%;height:100%;transition:opacity .16s}.viewer-arrow{width:48px;height:48px;color:var(--color-brand-green);cursor:pointer;background:#f6faf7;border:1px solid #e5e5e5;border-radius:50%;font:32px/1 Arial,sans-serif;position:absolute;top:calc(50% - 24px)}.viewer-prev{left:0}.viewer-next{right:0}.viewer-arrow[aria-disabled=true]{opacity:.28;cursor:default}.viewer-controls{justify-content:space-between;align-items:center;gap:16px;display:flex}.viewer-controls p{color:#727b75;font-variant-numeric:tabular-nums;margin:0;font-size:14px}.viewer-error{background:#fff;width:max-content;max-width:85%;padding:12px;font-size:14px;position:absolute;bottom:80px;left:50%;transform:translate(-50%)}@keyframes viewer-open{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}@media (width<=1199px){.project-contents{z-index:6;margin-bottom:32px;display:block;position:sticky;top:100px}.project-contents details{background:#fafcfbf7;border:1px solid #e5e9e7;border-radius:18px;box-shadow:0 4px 12px #141e190d}.project-contents summary{cursor:pointer;font-size:14px;font-weight:var(--font-regular);padding:16px 20px}.project-contents nav{overscroll-behavior:contain;max-height:55dvh;padding:0 20px 16px;overflow-y:auto}.project-contents ol{margin:0;padding:0;list-style:none}.project-contents a{color:#626862;padding:9px 0;font-size:14px;line-height:1.5;text-decoration:none;transition:color .2s;display:block}.project-contents a:hover{color:var(--color-brand-green)}.project-preview{scroll-margin-top:176px}}@media (width<=600px){.catalog-heading{padding:32px 0}.project-preview{padding-bottom:64px}.preview-pair .preview-visuals{grid-template-columns:minmax(0,1fr);gap:16px}.preview-split{grid-template-columns:minmax(0,1fr);gap:24px}.preview-copy{padding-top:24px}.preview-copy p{font-size:15px}.project-viewer{border-radius:20px;width:calc(100% - 12px);max-width:calc(100% - 12px);height:calc(100dvh - 12px);max-height:calc(100dvh - 12px);padding:12px}.viewer-stage{padding-inline:0}.viewer-arrow{background:#ffffffe6;width:40px;height:40px;top:calc(50% - 20px)}.viewer-heading h2{font-size:15px}.viewer-controls{gap:8px}.viewer-next-project{font-size:12px}}@media (prefers-reduced-motion:reduce){.project-viewer[open]{animation:none}.viewer-stage img{transition:none}}.preview-image[data-pointer-focus]:focus,.project-open[data-pointer-focus]:focus{box-shadow:none;outline:none}.project-viewer button:not(.plain-icon-control):focus-visible{outline:2px solid var(--color-brand-green);outline-offset:3px}.project-viewer button:focus:not(:focus-visible){outline:none}@media (width>=901px){.project-preview{--preview-gap:24px}.preview-visuals{gap:var(--preview-gap);grid-template-columns:repeat(2,minmax(0,1fr));min-height:0}.preview-image{min-height:0;overflow:hidden}.preview-split{gap:var(--preview-gap);grid-template-columns:repeat(2,minmax(0,1fr))}.preview-split .preview-visuals{grid-template-columns:minmax(0,1fr)}.preview-triptych .preview-visuals{grid-template-rows:repeat(2,auto);align-items:stretch}.preview-triptych .preview-image:first-child{grid-area:1/1/3;position:relative}.preview-triptych .preview-image:not(:first-child){aspect-ratio:5/4;grid-column:2}.preview-triptych .preview-image img{object-fit:cover;object-position:center;width:100%;height:100%}.preview-triptych .preview-image:first-child img{position:absolute;inset:0}}.viewer-images{width:100%;height:100%;position:relative}.viewer-images img{transition:none;position:absolute;inset:0}.viewer-loading{color:#46564b;background:#ffffffe6;border-radius:12px;padding:8px 12px;font-size:13px;position:absolute;bottom:12px;left:50%;translate:-50%}.project-open{min-height:44px;padding-block:10px}#project-viewer{width:calc(100vw - 24px);max-width:none;height:calc(100dvh - 24px);max-height:none;box-shadow:none;background:0 0;border:0;border-radius:0;padding:8px;overflow:visible}#project-viewer[open]{grid-template-rows:44px minmax(0,1fr) 56px;gap:8px}#project-viewer::backdrop{backdrop-filter:blur(6px);background:#f0f3f1f0}#project-viewer .viewer-heading h2{color:var(--text-primary,#272727);line-height:1.35}#project-viewer .viewer-stage{padding-inline:64px}#project-viewer .viewer-images{box-shadow:none;background:0 0;border-radius:0;overflow:visible}#project-viewer .viewer-images img{object-fit:contain;background:0 0;border:0;max-width:100%}#project-viewer .viewer-arrow{background:var(--surface-circle);width:56px;height:56px;color:var(--color-brand-green);box-shadow:var(--inner-highlight),var(--surface-shadow);transition:background-color var(--motion-standard),scale var(--motion-standard);border:1px solid #ffffffb3;border-radius:50%;place-items:center;padding:0;display:grid;top:calc(50% - 28px)}#project-viewer .viewer-arrow svg{display:block}#project-viewer .viewer-close{width:44px;height:44px;font-size:28px;line-height:1}#project-viewer .viewer-next-project{border-radius:999px;min-height:48px;padding:12px 22px;font-size:14px}#project-viewer .viewer-controls p{color:var(--color-text-secondary);font-weight:400}body.design-system #project-viewer .viewer-next-project[hidden]{display:none}@media (hover:hover) and (pointer:fine){#project-viewer .viewer-arrow:not([aria-disabled=true]):hover{background:#ffffffe6;scale:1.025}}#project-viewer .viewer-arrow:not([aria-disabled=true]):active{scale:.98}@media (width<=900px){#project-viewer{width:100%;height:100dvh;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}#project-viewer .viewer-stage{padding:0 0 54px}#project-viewer .viewer-arrow{width:48px;height:48px;top:auto;bottom:0}#project-viewer .viewer-prev{left:calc(50% - 60px)}#project-viewer .viewer-next{right:calc(50% - 60px)}}#project-viewer .viewer-images{container-type:size}#project-viewer .viewer-images img{width:min(100cqw, calc(100cqh * var(--image-ratio,1)));border-radius:12px;height:auto;max-height:100%;inset:50% auto auto 50%;transform:translate(-50%,-50%);box-shadow:0 4px 14px #18261d1f}
