/* Project portfolio, using the established Derijks palette and Arboria typography. */
.project-breadcrumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:.82rem;color:#b9d9ef;margin-bottom:34px;line-height:1.5}.project-breadcrumbs a:hover{text-decoration:underline;color:#fff}.project-all-link{display:inline-block;margin-bottom:25px}.filter-card:focus-visible{outline:3px solid var(--orange);outline-offset:5px}.filter-card:focus-visible .filter-image span{opacity:1;transform:none}.filter-grid{align-items:start}.filter-grid>.filter-card:nth-child(2) .filter-image{height:420px}.project-related .first-card{grid-column:auto}.project-related>.filter-card:nth-child(2) .filter-image{height:300px}.project-related .first-card .filter-image{height:300px}
.project-detail-hero{background:var(--navy);color:white;padding-top:55px}.project-detail-heading{display:flex;gap:40px;justify-content:space-between;align-items:flex-end;padding:30px 0 65px}.project-detail-heading>div{max-width:1000px}.project-detail-heading .eyebrow{color:var(--sky)}.project-detail-heading h1{font:700 clamp(2.8rem,5.7vw,6.8rem)/1.04 "arboria",Arial,sans-serif;letter-spacing:-.055em;overflow-wrap:anywhere;margin:22px 0 0}.project-photo-link{white-space:nowrap;border-bottom:1px solid var(--sky);padding-bottom:12px;display:flex;gap:30px;font-weight:700}.project-photo-link span{color:var(--orange)}.project-cover{position:relative;max-width:1920px;margin:auto;height:min(58vw,760px);min-height:380px;overflow:hidden}.project-cover>img{width:100%;height:100%;object-fit:cover}.project-cover-label{position:absolute;bottom:28px;right:4%;background:var(--blue);border-left:4px solid var(--orange);padding:12px 20px;font-weight:700}
.project-story{background:#e8f3fb}.project-story-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:12%;align-items:start}.project-story .eyebrow{color:var(--blue)}.project-story h2{margin:18px 0 30px}.project-story p{color:#4b657e;font-size:1.08rem;line-height:1.8;margin:0 0 22px;max-width:760px}.project-story .project-lead{font-size:clamp(1.35rem,2.15vw,2rem);line-height:1.5;color:var(--navy);font-weight:500}
.project-images{background:#dceefa}.project-image-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.project-image{display:block;position:relative;overflow:hidden;background:#bfd4e3;aspect-ratio:4/3}.project-image:nth-child(5n+1){grid-column:1/-1;aspect-ratio:16/9}.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.project-image:hover img{transform:scale(1.025)}.project-image>span{position:absolute;bottom:18px;left:18px;background:var(--navy);color:white;padding:8px 14px;display:flex;align-items:center;gap:22px;font-size:.8rem}.project-image b{color:var(--orange);font-size:1.2rem}.project-image:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.project-lightbox{width:100vw;max-width:none;height:100dvh;max-height:none;border:0;padding:20px 30px;background:#071b35;color:white;margin:0;overflow:auto}.project-lightbox::backdrop{background:#071b35ed}.lightbox-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;max-width:1800px;margin:auto}.lightbox-toolbar button{background:none;border:1px solid #5a7e9e;padding:10px 18px;color:white;cursor:pointer}.lightbox-toolbar button:hover{border-color:var(--orange)}.lightbox-stage{height:calc(100dvh - 145px);display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:15px;max-width:1800px;margin:15px auto}.lightbox-stage img{width:100%;height:100%;max-height:100%;object-fit:contain;min-height:0}.lightbox-stage button{background:var(--blue);color:white;border:0;cursor:pointer;width:48px;height:48px;font-size:1.5rem}.lightbox-stage button:hover{background:var(--orange);color:var(--navy)}.lightbox-name{text-align:center;font-size:.9rem;margin:12px 0}.lightbox-counter{color:var(--sky)}
@media(max-width:760px){.project-detail-heading{display:block;padding:16px 0 45px}.project-detail-heading h1{font-size:clamp(2.8rem,9vw,4.5rem)}.project-photo-link{margin-top:30px;width:max-content}.project-cover{height:62vw;min-height:260px}.project-cover-label{bottom:14px;padding:9px 13px;font-size:.85rem}.project-story-grid{grid-template-columns:1fr;gap:35px}.project-story h2{margin-bottom:20px}.project-image-grid{gap:12px}.project-image>span{bottom:10px;left:10px;padding:5px 9px;gap:10px}.project-lightbox{padding:16px 10px}.lightbox-stage{grid-template-columns:32px minmax(0,1fr) 32px;gap:5px}.lightbox-stage button{width:32px;height:44px}.project-related .first-card .filter-image{height:250px}}
@media(max-width:500px){.project-image-grid{grid-template-columns:1fr}.project-image:nth-child(5n+1){aspect-ratio:4/3}.project-cover{min-height:230px}}
@media(prefers-reduced-motion:reduce){.project-image img{transition:none}.filter-image img{transition:none}}

@media(max-width:1000px){.filter-grid>.filter-card:nth-child(2) .filter-image{height:300px}}
@media(max-width:760px){.filter-grid>.filter-card:nth-child(2) .filter-image{height:250px}}
.portfolio-design-preview{background:#bddcf0}
.portfolio-design-preview .section-top>p{font-size:1.1rem;max-width:460px}
.portfolio-design-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.portfolio-design-single{grid-template-columns:1fr}
.portfolio-design-card{display:block;background:#deedf8;min-width:0}
.portfolio-design-image{position:relative;overflow:hidden}
.portfolio-design-image>img{display:block;width:100%;height:auto;transition:transform .5s}
.portfolio-design-image>span{position:absolute;bottom:20px;left:20px;background:#0d2950;color:#edf6fc;padding:10px 15px;font-size:.875rem}
.portfolio-design-copy{padding:30px}
.portfolio-design-copy>span{font-size:.875rem;color:#315579}
.portfolio-design-copy h3{font-size:clamp(1.7rem,2.8vw,3.2rem);line-height:1.15;letter-spacing:-.035em;margin:18px 0}
.portfolio-design-copy p{font-size:1.125rem;line-height:1.7;margin-bottom:25px}
.portfolio-design-copy .under-link{font-size:1rem}
.portfolio-design-single .portfolio-design-card{display:grid;grid-template-columns:1.65fr 1fr;align-items:center}
.portfolio-design-card:hover .portfolio-design-image img{transform:scale(1.025)}
.portfolio-design-card:hover h3{color:#144184}
@media(max-width:800px){.portfolio-design-grid{grid-template-columns:1fr}.portfolio-design-single .portfolio-design-card{display:block}.portfolio-design-copy{padding:25px}.portfolio-design-image>span{bottom:14px;left:14px;padding:8px 12px}.portfolio-design-copy h3{font-size:2rem}}
@media(prefers-reduced-motion:reduce){.portfolio-design-card:hover .portfolio-design-image img{transform:none}.portfolio-design-image>img{transition:none}}

.portfolio-design-copy{min-width:0}.portfolio-design-copy h3{overflow-wrap:anywhere;hyphens:auto}
