.project-detail { --project-red: #f41640; color: #202329; }
.project-detail__hero { min-height: clamp(560px, 49vw, 760px); position: relative; display: flex; align-items: end; isolation: isolate; background: #18232d; color: #fff; }
.project-detail__cover, .project-detail__shade { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.project-detail__cover { object-fit: cover; object-position: center; }
.project-detail__shade { background: linear-gradient(180deg, rgba(12,24,35,.46) 0%, rgba(8,15,20,.62) 42%, rgba(0,0,0,.97) 100%); }
.project-detail__hero-content { padding-block: 150px 42px; }
.project-detail h1 { max-width: 860px; margin: 0 0 20px; font-size: clamp(30px, 3.35vw, 52px); line-height: 1.15; font-weight: 700; letter-spacing: -.025em; overflow-wrap: anywhere; }
.project-detail__intro { max-width: 820px; margin: 0 0 36px; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6; white-space: pre-line; }
.project-detail__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; margin: 0; }
.project-detail__fact { border-left: 2px solid var(--project-red); padding: 2px 0 2px 13px; }
.project-detail__fact dt { color: #ff4a6b; font-size: 12px; font-weight: 600; line-height: 1.45; margin-bottom: 5px; }
.project-detail__fact dd { margin: 0; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-line; }
.project-detail h2 { color: var(--project-red); font-size: clamp(26px, 2.2vw, 34px); font-weight: 650; line-height: 1.2; margin: 0 0 30px; }
.project-detail__role { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding-block: 76px; }
.project-detail__role h2 { margin: 0; }
.project-detail__role-text { font-size: 15px; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; }
.project-detail__scope { background: #f6f6f6; padding-block: 62px 76px; }
.project-detail__scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.project-detail__scope-card { padding: 26px 28px 34px; background: #fff; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%); }
.project-detail__number { color: var(--project-red); font-size: 12px; display: block; margin-bottom: 5px; }
.project-detail__scope-card h3 { font-size: 19px; line-height: 1.3; font-weight: 700; margin: 0 0 10px; overflow-wrap: anywhere; }
.project-detail__scope-card p { font-size: 14px; line-height: 1.65; margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.project-detail__gallery { padding-block: 80px 36px; }
.project-detail__gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.project-detail__gallery-link { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: #eef0f2; }
.project-detail__gallery-link--lead { grid-column: 1 / -1; aspect-ratio: 1.84; }
.project-detail__gallery-link img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.project-detail__gallery-link:hover img { transform: scale(1.025); }
.project-detail__gallery-link:focus-visible, .project-detail__back a:focus-visible { outline: 3px solid var(--project-red); outline-offset: 5px; }
.project-detail__back { padding-block: 8px 64px; }
.project-detail__back a { color: var(--project-red); font-weight: 600; text-decoration: none; }
.project-lightbox { border: 0; padding: 50px 24px 18px; background: #10151b; color: white; max-width: 94vw; max-height: 94vh; }
.project-lightbox::backdrop { background: rgba(0,0,0,.86); }
.project-lightbox img { display: block; max-width: 86vw; max-height: 73vh; width: auto; height: auto; margin: auto; object-fit: contain; }
.project-lightbox p { margin: 14px 0 0; text-align: center; font-size: 14px; }
.project-lightbox__close { position: absolute; top: 3px; right: 12px; border: 0; background: transparent; color: white; font-size: 32px; padding: 0 10px; }
@media (max-width: 767px) {
    .project-detail__hero { min-height: 0; }
    .project-detail__hero-content { padding-block: 110px 32px; }
    .project-detail__intro { margin-bottom: 28px; }
    .project-detail__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
    .project-detail__fact dd { font-size: 14px; }
    .project-detail__role { grid-template-columns: 1fr; gap: 20px; padding-block: 42px; }
    .project-detail__scope { padding-block: 42px; }
    .project-detail__scope-grid { grid-template-columns: 1fr; gap: 18px; }
    .project-detail__scope-card { padding: 24px; }
    .project-detail__gallery { padding-block: 42px 24px; }
    .project-detail__gallery-grid { grid-template-columns: 1fr; gap: 16px; }
    .project-detail__gallery-link--lead { aspect-ratio: 16 / 9; }
    .project-detail__back { padding-bottom: 42px; }
}
@media (prefers-reduced-motion: reduce) { .project-detail__gallery-link img { transition: none; } }