.project-hero { position: relative; min-height: min(72vh, 48rem); display: grid; align-items: end; overflow: hidden; color: #fff; background: var(--navy); }
.project-hero > img, .project-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }.project-hero > img { object-fit: cover; }.project-hero-shade { background: linear-gradient(to top, rgba(10,22,40,.9), rgba(10,22,40,.1) 75%); }.project-hero-content { position: relative; padding-bottom: 4rem; }.project-hero h1 { margin: .6rem 0 0; color: #fff; font-size: clamp(2.8rem, 7vw, 5.5rem); }.project-hero .breadcrumb { color: rgba(255,255,255,.76); }.project-hero .breadcrumb a { color: #fff; }.project-kicker { margin-top: 2rem; color: var(--amber); font: 600 .77rem/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.project-overview-copy { max-width: 46rem; }.project-overview-copy h2 { margin: .5rem 0 1rem; }.project-overview-copy > p, .project-information-copy > p { color: var(--gray-500); font-size: 1.05rem; }.project-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.project-gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: .8rem; align-items: start; }.gallery-image { display: block; grid-column: span 4; padding: 0; overflow: hidden; border: 0; background: var(--navy); cursor: zoom-in; }.gallery-image:first-child { grid-column: span 8; }.gallery-image img { display: block; width: 100%; height: auto; transition: transform .35s ease; }.gallery-image:hover img { transform: scale(1.03); }
.project-information { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(16rem, .75fr); gap: 3rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--gray-300); }.project-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1.5rem; }.project-facts div { padding: .8rem 0; border-bottom: 1px solid var(--gray-300); }.project-facts dt { color: var(--gray-500); font: 600 .7rem/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }.project-facts dd { margin: .35rem 0 0; color: var(--navy); font: 500 1rem/1.4 var(--font-ui); }.project-information-copy { align-self: center; }.project-information-copy > p { margin: 0; }
.finishes { background: var(--off-white); }.finishes ul { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin-top: 1.25rem; }.finishes li { padding: .55rem .9rem; border: 1px solid var(--gray-300); border-radius: 99px; background: #fff; font: 600 .75rem var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }.related-grid a { color: var(--navy); }.related-grid img { display: block; width: 100%; height: 14rem; margin-bottom: .75rem; object-fit: cover; }.related-grid span { color: var(--gray-500); font: 600 .68rem var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }.related-grid h3 { margin: .3rem 0; }
.lightbox { width: 100vw; max-width: none; height: 100vh; max-height: none; padding: 3rem 5rem 5.5rem; border: 0; background: rgba(0,0,0,.96); color: #fff; }.lightbox::backdrop { background: rgba(0,0,0,.75); }.lightbox > img { width: 100%; height: 100%; object-fit: contain; }.lightbox button { cursor: pointer; }.lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; z-index: 1; width: 2.8rem; height: 2.8rem; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(0,0,0,.3); color: #fff; font-size: 1.8rem; }.lightbox-close { top: 1rem; right: 1rem; }.lightbox-prev { top: 50%; left: 1rem; }.lightbox-next { top: 50%; right: 1rem; }.lightbox p { position: absolute; bottom: 3.5rem; left: 50%; transform: translateX(-50%); }.lightbox-thumbs { display: flex; gap: .4rem; position: absolute; bottom: .6rem; left: 50%; max-width: 90vw; transform: translateX(-50%); overflow-x: auto; }.lightbox-thumbs button { flex: 0 0 auto; width: 3.6rem; height: 2.8rem; padding: 0; border: 2px solid transparent; background: none; }.lightbox-thumbs button.active { border-color: var(--amber); }.lightbox-thumbs img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .project-gallery { gap: .45rem; }.gallery-image { grid-column: span 6; }.gallery-image:first-child { grid-column: span 12; }.project-information { grid-template-columns: 1fr; gap: 1.25rem; }.project-facts { grid-template-columns: 1fr; gap: 0; }.related-grid { grid-template-columns: 1fr; }.lightbox { padding: 3rem 1rem 5.5rem; }.lightbox-prev { left: .5rem; }.lightbox-next { right: .5rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }