.portfolio-case{padding-top:48px;padding-bottom:70px}.case-breadcrumb{display:flex;gap:14px;font-size:13px;color:#6c6c68;margin-bottom:45px}.case-heading{max-width:1000px;margin-bottom:50px}.case-heading h1{font-size:clamp(40px,5vw,76px);line-height:1.12;margin:16px 0 24px}.case-heading .lead{max-width:850px;font-size:19px;line-height:1.65}.portfolio-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.portfolio-photo{display:block;position:relative;border:0;padding:0;background:#e9e7e2;cursor:zoom-in;overflow:hidden;aspect-ratio:4/3;width:100%}.portfolio-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .3s}.portfolio-photo:hover img{transform:scale(1.025)}.portfolio-photo span{position:absolute;bottom:14px;right:14px;background:#fff;color:#222;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;font-size:23px}.portfolio-photo:focus-visible{outline:3px solid #876f4c;outline-offset:4px}.case-bottom{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:45px}.case-gallery-link{margin:30px 0}.portfolio-lightbox{position:fixed;inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:54px 76px 60px;border:0;background:#121212;color:#fff}.portfolio-lightbox[open]{display:flex;justify-content:center;align-items:center}.portfolio-lightbox::backdrop{background:#121212}.portfolio-lightbox>img{width:100%;height:100%;object-fit:contain}.portfolio-lightbox button{position:absolute;background:rgba(0,0,0,.45);color:#fff;border:1px solid #ffffff80;cursor:pointer;border-radius:50%;width:48px;height:48px;display:grid;place-items:center;font:32px/1 Arial}.lightbox-close{top:12px;right:18px}.lightbox-prev{top:calc(50% - 24px);left:15px}.lightbox-next{top:calc(50% - 24px);right:15px}.lightbox-count{position:absolute;bottom:14px;left:0;width:100%;text-align:center;font-size:14px}.portfolio-lightbox button:focus-visible{outline:2px solid #fff;outline-offset:3px}#portfolio .project .image-wrap{aspect-ratio:4/3;overflow:hidden}#portfolio .project .image-wrap img{width:100%;height:100%;object-fit:cover}#portfolio .project-caption h3{font-size:clamp(23px,2vw,34px)}
@media(max-width:700px){.portfolio-case{padding-top:25px}.case-breadcrumb{margin-bottom:28px}.case-heading{margin-bottom:30px}.case-heading .lead{font-size:16px}.portfolio-gallery{gap:14px;grid-template-columns:1fr}.case-bottom{align-items:flex-start;flex-direction:column}.portfolio-lightbox{padding:60px 12px 65px}.portfolio-lightbox button{width:40px;height:40px}.lightbox-prev{left:8px}.lightbox-next{right:8px}}
@media(prefers-reduced-motion:reduce){.portfolio-photo img{transition:none}}
.portfolio-categories{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:45px}.portfolio-categories a{padding:12px 18px;border:1px solid #b7b2a8;border-radius:30px;font-size:14px}.portfolio-categories a:hover{background:#222;color:#fff}.portfolio-group{margin:0 0 65px;scroll-margin-top:160px}.portfolio-group>h3{font-size:clamp(30px,3vw,44px);margin-bottom:26px}.contextual-projects>.lead{max-width:850px;margin-bottom:35px}.contextual-projects .image-wrap,.more-projects .image-wrap{aspect-ratio:4/3;overflow:hidden}.contextual-projects .image-wrap img,.more-projects .image-wrap img{width:100%;height:100%;object-fit:cover}.portfolio-directory .project-caption,.contextual-projects .project-caption,.more-projects .project-caption{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.portfolio-lightbox button[hidden]{display:none}.facade-slides img:focus-visible{outline:3px solid white;outline-offset:-5px}
@media(max-width:700px){.portfolio-categories{gap:8px}.portfolio-categories a{font-size:12px;padding:10px 13px}.portfolio-group{scroll-margin-top:105px;margin-bottom:40px}.contextual-projects .projects{grid-template-columns:1fr}}

/* One stable photo frame for inline galleries, with side controls. */
.case-gallery.project-photo-carousel,.portfolio-gallery.project-photo-carousel{display:block;position:relative;width:100%;max-width:1100px;margin-left:auto;margin-right:auto;aspect-ratio:16/10;overflow:hidden;background:#e9e7e2}
.project-photo-carousel>.case-photo,.project-photo-carousel>.portfolio-photo{display:block;width:100%;height:100%;margin:0;aspect-ratio:auto;overflow:hidden}
.project-photo-carousel>[hidden]{display:none!important}
.project-photo-carousel>.case-photo img,.project-photo-carousel>.portfolio-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.project-photo-carousel>.case-photo>span,.project-photo-carousel>.portfolio-photo>span{display:none}
.project-photo-controls{position:absolute;inset:0;pointer-events:none}
.project-photo-controls button{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:1px solid #ffffffb0;border-radius:50%;background:#161616a6;color:#fff;display:grid;place-items:center;cursor:pointer;pointer-events:auto;font:32px/1 Arial;padding:0;z-index:2}
.project-photo-prev{left:18px}.project-photo-next{right:18px}.project-photo-controls button:hover{background:#161616e6}.project-photo-controls button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.project-photo-count{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:#161616a6;color:#fff;border-radius:20px;padding:6px 13px;font:13px/1.4 Arial}
@media(max-width:700px){.case-gallery.project-photo-carousel,.portfolio-gallery.project-photo-carousel{aspect-ratio:4/3}.project-photo-controls button{width:40px;height:40px}.project-photo-prev{left:10px}.project-photo-next{right:10px}.project-photo-count{bottom:10px}}
.project-photo-carousel>.case-photo img,.project-photo-carousel>.portfolio-photo img{max-height:none;max-width:none}
.gallery-total{font-size:14px;color:#6c6c68;margin-top:24px}.project-details{margin:48px auto;max-width:1100px;line-height:1.75}.project-details p{margin-bottom:20px}.project-facts{max-width:1100px;margin:48px auto}.project-facts h2{font-size:clamp(28px,3vw,42px)}.project-facts dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:26px}.project-facts dt{font-size:18px;margin-bottom:14px}.project-facts dd{margin:0;line-height:1.7;color:#555}.project-details.case-description{padding-top:0}@media(max-width:700px){.project-facts dl{grid-template-columns:1fr;gap:22px}.project-details,.project-facts{margin:32px auto}}

/* Shared project previews outside the design page. */
.more-projects>h2,.contextual-projects>h2{margin-bottom:32px;max-width:1000px;line-height:1.12}
.more-projects .projects,.contextual-projects .projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.more-projects .project,.contextual-projects .project{display:block;min-width:0;text-decoration:none}
.more-projects .image-wrap,.contextual-projects .image-wrap{display:block;width:100%;aspect-ratio:4/3;overflow:hidden}
.more-projects .image-wrap img,.contextual-projects .image-wrap img{display:block;width:100%;height:100%;max-height:none;object-fit:cover}
.more-projects .project-caption,.contextual-projects .project-caption{margin-top:20px;gap:16px}
.more-projects .project-caption h3,.contextual-projects .project-caption h3{font-size:clamp(23px,2.1vw,34px);line-height:1.2;margin:0}
.more-projects .project-status,.contextual-projects .project-status{font-size:13px;color:#777;margin:12px 0 0}
.more-projects>.case-gallery-link,.contextual-projects>.case-gallery-link{margin-top:36px}
@media(max-width:1000px) and (min-width:701px){.more-projects .projects,.contextual-projects .projects{gap:18px}.more-projects .project-caption h3,.contextual-projects .project-caption h3{font-size:24px}}
@media(max-width:700px){.more-projects .projects,.contextual-projects .projects{grid-template-columns:1fr;gap:32px}.more-projects>h2,.contextual-projects>h2{margin-bottom:26px}.more-projects .project-caption,.contextual-projects .project-caption{margin-top:15px}}

/* Responsive viewing: full project photographs, stable frame and accessible controls. */
.project-photo-carousel{touch-action:pan-y pinch-zoom}
.case-gallery.project-photo-carousel,.portfolio-gallery.project-photo-carousel{height:min(68svh,687px);min-height:250px;aspect-ratio:auto}
.project-photo-carousel>.case-photo img,.project-photo-carousel>.portfolio-photo img{object-fit:contain;transform:none;background:#e9e7e2}
.project-photo-controls button,.portfolio-lightbox button{min-width:44px;min-height:44px}
.portfolio-lightbox{padding-top:max(58px,env(safe-area-inset-top));padding-bottom:max(65px,env(safe-area-inset-bottom));overscroll-behavior:contain}
.portfolio-lightbox .lightbox-close{right:max(14px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top))}
.hero-reference .slider-controls .slider-prev,.hero-reference .slider-controls .slider-next{background:#0006}
.facade-carousel button:focus-visible,.project-photo-controls button:focus-visible{outline:3px solid white;outline-offset:3px}
@media(max-width:700px){.case-gallery.project-photo-carousel,.portfolio-gallery.project-photo-carousel{height:auto;min-height:0;aspect-ratio:4/3}.portfolio-lightbox{padding-left:8px;padding-right:8px}.project-photo-prev{left:8px}.project-photo-next{right:8px}}
@media(max-height:500px) and (orientation:landscape){.case-gallery.project-photo-carousel,.portfolio-gallery.project-photo-carousel{height:76svh;min-height:0;aspect-ratio:auto}.portfolio-lightbox{padding:12px 64px 35px}.portfolio-lightbox .lightbox-count{bottom:5px;margin:0}.portfolio-lightbox .lightbox-close{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none!important}.portfolio-photo img{transition:none!important}}
.production-lightbox button{min-width:44px;min-height:44px}.production-lightbox{max-height:calc(100dvh - 24px);overscroll-behavior:contain}.production-lightbox img{object-fit:contain;max-height:calc(100dvh - 160px)}