.project-details-page { background: #fff; color: #201f1e; }
.project-detail-hero { padding: 124px 24px 52px; }
.project-detail-hero__layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: start; gap: clamp(30px, 4vw, 58px); width: 100%; max-width: 1320px; margin: 0 auto; }
.project-detail-image { position: relative; height: 500px; margin: 0; overflow: hidden; border-radius: 16px; background: #f5f0e9; }
.project-detail-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-detail-image::after { position: absolute; inset: 55% 0 0; content: ''; background: linear-gradient(transparent,rgba(0,0,0,.62)); }
.project-detail-image__badge { position: absolute; z-index: 1; top: 16px; left: 16px; padding: 8px 12px; border-radius: 999px; color: #fff; background: rgba(32,31,30,.78); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.project-detail-image figcaption { position: absolute; z-index: 1; right: 18px; bottom: 18px; left: 18px; color: #fff; font-size: 14px; }
.project-detail-copy { min-width: 0; }
.project-detail-status { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; padding: 7px 12px; border-radius: 999px; color: #236a53; background: #eaf6f0; font-size: 12px; font-weight: 600; }
.project-detail-status i { width: 7px; height: 7px; border-radius: 50%; background: #25815f; }
.project-detail-copy h1 { margin: 0 0 10px !important; color: #201f1e; font-size: clamp(30px, 3.4vw, 44px) !important; font-weight: 600 !important; letter-spacing: -.035em !important; line-height: 1.15 !important; }
.project-detail-location { display: flex; align-items: center; gap: 7px; margin: 0 0 22px; color: #706961; font-size: 14px; }
.project-detail-location svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.project-detail-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-bottom: 20px; }
.project-detail-stats > div { min-height: 80px; padding: 14px 16px; border: 1px solid #eaded5; border-radius: 12px; background: #fffaf7; }
.project-detail-stats > div > span { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; color: #776f68; font-size: 12px; }
.project-detail-stats b { color: #b84a24; font-size: 14px; }
.project-detail-stats strong { display: block; color: #201f1e; font-size: 18px; font-weight: 650; }
.project-detail-stats small { color: #69635e; font-size: 12px; font-weight: 400; }
.project-detail-description { margin: 0 0 18px; color: #6b645e; font-size: 14px; line-height: 1.6; }
.project-detail-copy h2 { margin: 0 0 10px !important; color: #201f1e; font-size: 15px !important; font-weight: 650 !important; }
.project-detail-promises { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.project-detail-promises li { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 999px; color: #514b45; background: #f5f2ee; font-size: 11px; font-weight: 550; }
.project-detail-promises li span { color: #b84a24; font-weight: 700; }
.project-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.project-detail-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 12px; padding: 0 20px; border: 1px solid #f05a29; border-radius: 999px; color: #fff; background: #f05a29; font-size: 14px; font-weight: 650; text-decoration: none; }
.project-detail-button:hover { color: #fff; background: #d94c20; }
.project-detail-button--outline { color: #c94d25; background: #fff; border-color: #ead4c8; }
.project-detail-button--outline:hover { color: #b64220; background: #fff8f4; }
.project-detail-back { display: inline-block; margin-top: 18px; color: #292522; font-size: 14px; text-decoration: none; }
.project-detail-back:hover { color: #c94d25; }
.related-projects { width: 100%; max-width: 1320px; margin: 0 auto; padding: 22px 24px 64px; }
.related-projects__header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; }
.related-projects__header h2 { margin: 0 !important; color: #201f1e; font-size: clamp(25px, 3vw, 34px) !important; font-weight: 600 !important; }
.related-projects__header a { color: #a94321; font-size: 13px; font-weight: 600; text-decoration: none; }
.related-projects__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.related-project-card { overflow: hidden; border: 1px solid #eee3dc; border-radius: 14px; background: #fff; }
.related-project-card > img { display: block; width: 100%; height: 180px; object-fit: cover; }
.related-project-card__body { padding: 14px 16px 16px; }
.related-project-card__body > span { color: #236a53; font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.related-project-card h3 { margin: 7px 0 !important; color: #201f1e; font-size: 17px !important; font-weight: 600 !important; }
.related-project-card p { margin: 0 0 8px; color: #736c66; font-size: 12px; }
.related-project-card small { color: #423d38; font-size: 12px; }
.project-detail-cta { display: flex; justify-content: space-between; align-items: center; gap: 30px; max-width: 1240px; margin: 0 auto 64px; padding: 34px 40px; border: 1px solid #eedfd4; border-radius: 20px; background: #fffaf6; }
.project-detail-cta > div > span { color: #b84a24; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.project-detail-cta h2 { margin: 8px 0 !important; color: #201f1e; font-size: clamp(24px,3vw,34px) !important; font-weight: 600 !important; }
.project-detail-cta p { margin: 0; color: #6b645e; font-size: 14px; }
@media (max-width: 850px) {
  .project-detail-hero__layout { grid-template-columns: 1fr; max-width: 680px; }
  .project-detail-image { height: 400px; }
  .related-projects__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .project-detail-cta { margin-right: 24px; margin-left: 24px; }
}
@media (max-width: 580px) {
  .project-detail-hero { padding: 92px 18px 36px; }
  .project-detail-image { height: 300px; }
  .project-detail-stats { gap: 8px; }
  .project-detail-stats > div { padding: 12px; }
  .project-detail-actions { flex-direction: column; align-items: stretch; }
  .related-projects { padding: 12px 18px 44px; }
  .related-projects__header { align-items: flex-start; flex-direction: column; gap: 8px; }
  .related-projects__grid { grid-template-columns: 1fr; gap: 14px; }
  .project-detail-cta { align-items: flex-start; flex-direction: column; margin: 0 18px 42px; padding: 24px; }
}