.portfoliohero{background:var(--navy);color:white;padding-top:80px;padding-bottom:80px}.portfoliohero .eyebrow{color:#ff9b4f}.portfoliohero h1{font-size:clamp(48px,6vw,80px)}.portfoliohero p{max-width:600px;font-size:19px;color:#e3e8f5}.filters{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0}.filters button{background:white;color:var(--navy);padding:13px 20px;border:1px solid #c9d0e0;font-weight:bold;cursor:pointer}.filters button.active{background:var(--navy);color:white;border-color:var(--navy)}button:focus-visible{outline:3px solid var(--orange);outline-offset:4px}.gallery{display:grid;grid-template-columns:1fr 1fr;gap:35px}.gallery article{min-width:0;background:var(--pale)}.gallery article[hidden]{display:none}.photobutton{display:block;width:100%;position:relative;border:0;padding:0;background:var(--navy);cursor:zoom-in}.photobutton img{display:block;width:100%;height:330px;object-fit:cover}.photobutton span{position:absolute;bottom:16px;right:16px;background:var(--navy);color:white;font-size:12px;padding:10px 14px}.gallerycaption{padding:30px}.gallerycaption h3{font-size:27px}.gallerycaption p{font-size:15px}.portfoliointro{background:var(--pale)}.fine{font-size:12px;line-height:1.8;color:var(--muted);margin-top:25px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}dialog{padding:20px;border:0;max-width:94vw;max-height:94vh;background:var(--navy);color:white}dialog::backdrop{background:rgba(0,0,0,.8)}dialog>img{display:block;max-width:85vw;max-height:72vh;object-fit:contain}dialog>button{display:block;margin:0 0 15px auto;background:var(--orange);border:0;padding:12px 18px;cursor:pointer;font-weight:bold}dialog p{font-size:13px;margin:15px 0 0}@media(max-width:750px){.gallery{grid-template-columns:1fr}.photobutton img{height:270px}.gallerycaption{padding:24px}.portfoliohero{padding-top:55px;padding-bottom:55px}}
/* Keep the two photographs together as one project, with full portrait views. */
.gallery .project-comparison{grid-column:1/-1;scroll-margin-top:24px}.project-comparison .gallerycaption{padding-bottom:22px}.comparison-photos{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:840px;margin:0 auto;padding:0 30px 30px}.comparison-photos figure{margin:0;min-width:0}.comparison-photos .photobutton img{height:auto;aspect-ratio:9/16;object-fit:contain}.comparison-photos figcaption{display:flex;flex-direction:column;gap:6px;padding-top:14px;font-size:14px;line-height:1.5}.comparison-photos figcaption strong{font-size:18px;color:var(--navy)}@media(max-width:600px){.comparison-photos{grid-template-columns:1fr;padding:0 24px 24px;gap:28px}}

.gallery .project-case-study{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:start;scroll-margin-top:24px}.project-case-study .case-story p{line-height:1.8}.case-material{font-weight:bold;color:var(--navy)}.case-photos{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:30px 30px 30px 0}.case-photos figure{margin:0;min-width:0}.case-lead{grid-column:1/-1}.case-photos .case-lead img{height:auto;aspect-ratio:16/9;object-fit:contain}.case-photos .case-detail img{height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 65%}.case-photos figcaption{padding-top:8px;font-size:13px;color:var(--navy)}.case-photos .case-detail .photobutton span{font-size:11px;bottom:8px;right:8px;padding:7px 10px}@media(max-width:850px){.gallery .project-case-study{grid-template-columns:1fr}.case-photos{padding:0 24px 24px}.project-case-study .case-story{padding:24px}}@media(max-width:420px){.case-photos{gap:12px}.case-photos .case-detail .photobutton span{font-size:10px;padding:6px 8px;right:5px;bottom:5px}}

.project-case-study .case-owner{font-size:13px;font-weight:bold;margin-top:24px;color:var(--navy)}

/* Maple Ridge: native swipe/scroll, with buttons and keyboard navigation. */
.case-carousel{min-width:0;padding:30px 30px 30px 0}
.carousel-hint{font-size:13px;color:var(--muted);margin:0 0 12px}
.carousel-track{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-color:var(--navy) #dce2ed;scrollbar-width:thin}
.carousel-track:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.carousel-slide{flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.carousel-slide .photobutton img{height:clamp(360px,42vw,550px);width:100%;object-fit:contain}
.carousel-slide figcaption{display:flex;flex-direction:column;gap:5px;padding:16px 10px 18px 0;min-height:100px;font-size:13px;line-height:1.6;color:var(--navy)}
.carousel-slide figcaption strong{font-size:16px}
.carousel-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px}
.carousel-controls[hidden]{display:none}
.carousel-controls button{min-height:44px;padding:10px 14px;border:1px solid var(--navy);background:var(--navy);color:white;font:inherit;font-size:13px;font-weight:bold;cursor:pointer}
.carousel-controls button:disabled{background:transparent;color:var(--muted);border-color:#c9d0e0;cursor:default}
.carousel-position{font-size:12px;font-weight:bold;color:var(--navy);white-space:nowrap}
.case-capability{border-left:3px solid var(--orange);padding-left:18px;margin:24px 0}
.case-capability h4{font-size:18px;line-height:1.4;margin:0 0 8px;color:var(--navy)}
.case-capability p{margin:0}
@media(max-width:850px){.case-carousel{padding:0 24px 24px}.carousel-slide .photobutton img{height:clamp(340px,70vw,550px)}}
@media(max-width:420px){.carousel-controls button{padding:10px}.carousel-slide .photobutton img{height:400px}}