.project-card-image { aspect-ratio: 4 / 5; overflow: hidden; }
.project-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.portfolio-box:hover .project-card-image img { transform: scale(1.035); }

/* Project hero */
.project-detail-hero {
    min-height: 78vh;
    display: flex;
    align-items: end;
    position: relative;
    overflow: hidden;
    background-image: none !important;
}
.project-hero-media {
    position: absolute;
    inset: -7%;
    background-image: var(--project-hero-image);
    background-position: center;
    background-size: cover;
    transform: translate3d(var(--hero-x, 0), calc(var(--hero-shift, 0px) + var(--hero-y, 0px)), 0) scale(1.08);
    will-change: transform;
}
.project-detail-hero::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 10, 14, .42) 0%, rgba(3, 10, 14, .58) 100%);
}
.project-detail-hero .container { position: relative; z-index: 2; }
.project-detail-hero .container > * { opacity: 0; transform: translateY(30px); animation: projectIntro .9s .15s cubic-bezier(.2,.7,.2,1) forwards; }
.project-scroll-cue {
    position: absolute;
    z-index: 3;
    right: clamp(24px, 4vw, 70px);
    bottom: 56px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.project-scroll-cue::after { content: ""; width: 54px; height: 1px; background: currentColor; transform-origin: left; animation: cuePulse 1.8s ease-in-out infinite; }

/* Facts and editorial gallery */
.project-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.project-fact { padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.project-fact, .project-gallery-item { opacity: 0; transform: translateY(42px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.project-fact.is-visible, .project-gallery-item.is-visible { opacity: 1; transform: none; }
.project-gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.project-gallery-item { grid-column: span 6; position: relative; display: block; overflow: hidden; background: #171717; cursor: none; }
.project-gallery-item:nth-child(5n + 1) { grid-column: 1 / -1; }
.project-gallery-item:nth-child(5n + 2) { grid-column: span 7; }
.project-gallery-item:nth-child(5n + 3) { grid-column: span 5; }
.project-gallery-item:nth-child(5n + 4) { grid-column: span 5; }
.project-gallery-item:nth-child(5n + 5) { grid-column: span 7; }
.project-gallery-item img { width: 100%; height: clamp(360px, 48vw, 650px); object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.project-gallery-item:nth-child(5n + 2) img, .project-gallery-item:nth-child(5n + 5) img { height: clamp(430px, 54vw, 720px); }
.project-gallery-item:hover img { transform: scale(1.035); filter: brightness(.76); }
.project-image-number { position: absolute; left: 22px; bottom: 18px; color: #fff; font-size: 11px; letter-spacing: 2px; opacity: 0; transform: translateY(8px); transition: .35s ease; }
.project-gallery-item:hover .project-image-number { opacity: 1; transform: none; }
.project-view-cursor { position: fixed; z-index: 9998; width: 74px; height: 74px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; pointer-events: none; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; opacity: 0; transform: translate(-50%, -50%) scale(.7); transition: opacity .2s ease, transform .2s ease; }
.project-view-cursor.is-active { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Custom lightbox */
.project-lightbox { position: fixed; z-index: 10000; inset: 0; background: rgba(4, 7, 8, .97); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }
.project-lightbox.is-open { opacity: 1; visibility: visible; }
.project-lightbox-image { max-width: min(88vw, 1500px); max-height: 82vh; object-fit: contain; transform: scale(.97); transition: transform .4s ease; }
.project-lightbox.is-open .project-lightbox-image { transform: scale(1); }
.project-lightbox-close, .project-lightbox-arrow { position: absolute; border: 0; background: transparent; color: #fff; cursor: pointer; }
.project-lightbox-close { top: 24px; right: 28px; width: 48px; height: 48px; font-size: 30px; }
.project-lightbox-arrow { top: 50%; transform: translateY(-50%); width: 64px; height: 64px; font-size: 27px; }
.project-lightbox-prev { left: 20px; }
.project-lightbox-next { right: 20px; }
.project-lightbox-meta { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); color: #fff; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.project-lightbox-image.is-zoomed { max-width: none; max-height: none; width: auto; height: 145vh; cursor: zoom-out; }
.project-lightbox-image { cursor: zoom-in; }
.project-lightbox-zoom { position: absolute; top: 28px; left: 28px; z-index: 2; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.25); color: #fff; padding: 9px 14px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; }
.project-lightbox-thumbs { position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%); max-width: min(70vw, 900px); display: flex; gap: 7px; overflow-x: auto; padding: 5px; scrollbar-width: none; }
.project-lightbox-thumb { flex: 0 0 54px; width: 54px; height: 38px; padding: 0; border: 1px solid transparent; background: transparent; opacity: .45; cursor: pointer; transition: opacity .25s, border-color .25s; }
.project-lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; }
.project-lightbox-thumb.is-active { opacity: 1; border-color: #35b7e6; }
body.project-lightbox-open { overflow: hidden; }

/* Sticky section navigator */
.project-section-nav { position: fixed; z-index: 100; right: 24px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 16px; }
.project-section-link { display: flex; align-items: center; justify-content: flex-end; gap: 9px; color: #fff; font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase; text-shadow: 0 1px 6px #000; opacity: .55; }
.project-section-link::after { content: ""; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; transition: background .25s, transform .25s; }
.project-section-link span { opacity: 0; transform: translateX(8px); transition: .25s ease; }
.project-section-link:hover span, .project-section-link.is-active span { opacity: 1; transform: none; }
.project-section-link.is-active { opacity: 1; color: #35b7e6; }
.project-section-link.is-active::after { background: currentColor; transform: scale(1.35); }

/* Visual project navigation */
.project-nav { display: grid; grid-template-columns: repeat(2, 1fr); background: #111; }
.project-nav-card { position: relative; min-height: 310px; overflow: hidden; display: flex; align-items: end; padding: clamp(28px, 4vw, 60px); color: #fff; }
.project-nav-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.84)); }
.project-nav-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.project-nav-card:hover img { transform: scale(1.055); }
.project-nav-content { position: relative; z-index: 2; }
.project-nav-label { display: block; margin-bottom: 8px; color: #35b7e6; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; }
.project-nav-title { font-size: clamp(21px, 2.4vw, 34px); line-height: 1.15; }

@keyframes projectIntro { to { opacity: 1; transform: none; } }
@keyframes cuePulse { 0%, 100% { transform: scaleX(.45); opacity: .5; } 50% { transform: scaleX(1); opacity: 1; } }

@media (max-width: 767px) {
    .project-detail-hero { min-height: 68vh; }
    .project-scroll-cue { display: none; }
    .project-facts { grid-template-columns: 1fr; }
    .project-gallery { grid-template-columns: 1fr; }
    .project-gallery-item, .project-gallery-item:nth-child(n) { grid-column: auto; cursor: pointer; }
    .project-gallery-item img, .project-gallery-item:nth-child(n) img { height: auto; aspect-ratio: 4 / 3; }
    .project-view-cursor { display: none; }
    .project-nav { grid-template-columns: 1fr; }
    .project-nav-card { min-height: 230px; }
    .project-lightbox-arrow { width: 46px; }
    .project-lightbox-prev { left: 0; }
    .project-lightbox-next { right: 0; }
    .project-lightbox-thumbs, .project-lightbox-zoom, .project-section-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .project-hero-media, .project-detail-hero .container > *, .project-scroll-cue::after, .project-fact, .project-gallery-item, .project-gallery-item img, .project-nav-card img, .project-lightbox, .project-lightbox-image { animation: none !important; transition: none !important; transform: none !important; }
    .project-detail-hero .container > *, .project-fact, .project-gallery-item { opacity: 1; }
}