.project-detail-page { color: #25243a; }
.project-return-link { display: inline-flex; min-height: 40px; align-items: center; padding: 8px 17px; border: 1px solid #d9d6ec; border-radius: 999px; color: #3c3273; background: #f4f1ff; font-size: .83rem; font-weight: 800; text-decoration: none; transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.project-return-link:hover, .project-return-link:focus-visible { border-color: #9f8be8; background: #eae3ff; transform: translateY(-2px); }
.project-detail-main { padding: clamp(28px, 4vw, 54px) 0 clamp(76px, 9vw, 118px); }
.project-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: clamp(27px, 4vw, 45px); color: #68677d; font-size: .83rem; }
.project-breadcrumb a { color: #5141a7; font-weight: 800; text-decoration: none; }
.project-breadcrumb a:hover, .project-breadcrumb a:focus-visible { text-decoration: underline; }
.project-detail-hero { max-width: 900px; margin: 0 auto clamp(28px, 4vw, 46px); text-align: center; }
.project-detail-kicker { margin: 0 0 10px; color: #6b51ce; font-size: .82rem; font-weight: 900; }
.project-detail-hero h1 { margin: 0; color: #201d40; font-size: clamp(2.15rem, 5vw, 4rem); line-height: 1.2; letter-spacing: -.045em; text-wrap: balance; }
.project-detail-hero > p:last-child { margin: 18px auto 0; color: #5c5b70; font-size: clamp(.98rem, 1.45vw, 1.16rem); line-height: 1.9; }
.project-detail-gallery { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); grid-template-rows: repeat(2, minmax(230px, 280px)); gap: 18px; }
.project-detail-gallery-item { position: relative; min-width: 0; margin: 0; overflow: hidden; border: 1px solid #dedfea; border-radius: 24px; background: #eef1f8; box-shadow: 0 16px 38px rgba(31, 35, 68, .12); }
.project-detail-gallery-item--employees { grid-row: 1 / 3; }
.project-detail-gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.project-detail-gallery-item--profile img { object-position: center 8%; }
.project-detail-gallery-item figcaption { position: absolute; right: 16px; bottom: 16px; padding: 8px 13px; border-radius: 999px; color: #fff; background: rgba(20, 24, 44, .82); font-size: .75rem; font-weight: 800; backdrop-filter: blur(7px); }
.project-detail-article, .project-detail-features { max-width: 1020px; margin: clamp(42px, 6vw, 70px) auto 0; }
.project-detail-article { display: grid; gap: clamp(27px, 4vw, 42px); }
.project-detail-copy h2, .project-detail-features h2 { margin: 0 0 21px; color: #201d40; font-size: clamp(1.65rem, 2.7vw, 2.3rem); line-height: 1.35; }
.project-detail-copy p { margin: 0 0 16px; color: #50536b; font-size: 1rem; line-height: 2; }
.project-detail-copy p:last-child { margin-bottom: 0; }
.project-detail-installation { padding: clamp(22px, 4vw, 38px); border: 1px solid #d9d0f3; border-radius: 24px; background: #f7f4ff; }
.project-detail-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.project-detail-feature-grid > div { padding: 21px 23px; border: 1px solid #e0e0ed; border-radius: 18px; background: #f8f8fc; }
.project-detail-feature-grid h3 { margin: 0 0 7px; color: #332b69; font-size: 1rem; }
.project-detail-feature-grid p { margin: 0; color: #686a7c; font-size: .88rem; line-height: 1.8; }
.project-detail-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 1020px; margin: 42px auto 0; padding-top: 29px; border-top: 1px solid #dedfea; }
.project-detail-button { display: inline-flex; min-width: 180px; min-height: 50px; align-items: center; justify-content: center; padding: 10px 24px; border: 1px solid transparent; border-radius: 999px; font-size: .9rem; font-weight: 900; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease, background-color .2s ease; }
.project-detail-button:hover, .project-detail-button:focus-visible { transform: translateY(-2px); }
.project-detail-button--primary { color: #fff; background: linear-gradient(135deg, #5836dc, #8060f3); box-shadow: 0 12px 28px rgba(91, 60, 211, .27); }
.project-detail-button--primary:hover, .project-detail-button--primary:focus-visible { color: #fff; box-shadow: 0 16px 34px rgba(91, 60, 211, .36); }
.project-detail-button--secondary { border-color: #cfc8ed; color: #3c3273; background: #f0edff; }
.project-detail-button--secondary:hover, .project-detail-button--secondary:focus-visible { color: #fff; background: #322b55; }
html[data-theme="dark"] .project-detail-page { color: #f7f6ff; }
html[data-theme="dark"] .project-return-link { border-color: #554c78; color: #e7e1ff; background: #2b2843; }
html[data-theme="dark"] .project-return-link:hover, html[data-theme="dark"] .project-return-link:focus-visible { border-color: #806cbf; background: #393252; }
html[data-theme="dark"] .project-breadcrumb { color: #afb3c8; }
html[data-theme="dark"] .project-breadcrumb a, html[data-theme="dark"] .project-detail-kicker { color: #c3b3ff; }
html[data-theme="dark"] .project-detail-hero h1, html[data-theme="dark"] .project-detail-copy h2, html[data-theme="dark"] .project-detail-features h2 { color: #f7f6ff; }
html[data-theme="dark"] .project-detail-hero > p:last-child, html[data-theme="dark"] .project-detail-copy p { color: #bec3d5; }
html[data-theme="dark"] .project-detail-installation { border-color: #554c78; background: #25243b; }
html[data-theme="dark"] .project-detail-gallery-item { border-color: #3c4156; background: #222638; box-shadow: 0 16px 38px rgba(0, 0, 0, .3); }
html[data-theme="dark"] .project-detail-feature-grid > div { border-color: #3b4055; background: #1d2132; }
html[data-theme="dark"] .project-detail-feature-grid h3 { color: #eeeaff; }
html[data-theme="dark"] .project-detail-feature-grid p { color: #b8bed0; }
html[data-theme="dark"] .project-detail-actions { border-color: #3b4055; }
html[data-theme="dark"] .project-detail-button--secondary { border-color: #554c78; color: #e7e1ff; background: #2b2843; }
@media (max-width: 760px) {
    .project-detail-gallery { grid-template-columns: 1fr; grid-template-rows: auto; }
    .project-detail-gallery-item { height: min(65vw, 400px); }
    .project-detail-gallery-item--employees { grid-row: auto; height: min(90vw, 520px); }
    .project-detail-feature-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .project-return-link { min-height: 36px; padding-inline: 11px; font-size: .72rem; }
    .project-detail-gallery-item { border-radius: 18px; }
    .project-detail-gallery-item figcaption { right: 10px; bottom: 10px; max-width: calc(100% - 20px); font-size: .67rem; }
    .project-detail-actions { flex-direction: column; }
    .project-detail-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .project-return-link, .project-detail-button { transition: none; }
    .project-return-link:hover, .project-return-link:focus-visible, .project-detail-button:hover, .project-detail-button:focus-visible { transform: none; }
}