/* Static project detail only; Header, Footer and shared page Hero are untouched. */
.project-detail { color: #555; font-size: 17px; line-height: 1.41176; -webkit-font-smoothing: antialiased; }
.project-detail p { margin: 0; }
.project-detail__hero { padding: 203px 30px 139px; background: url('../images/breadcrumb-project.jpg') center bottom / cover no-repeat; }
.project-detail__breadcrumb { max-width: 1410px; margin-inline: auto; color: #fff; font-size: 14px; font-weight: 600; line-height: 24px; text-align: center; text-transform: uppercase; }
.project-detail__breadcrumb ol { margin: 0; padding: 0; list-style: none; }
.project-detail__breadcrumb li { display: inline; }
.project-detail__breadcrumb li + li::before { display: inline-block; content: '\e004'; margin: -2px 8px 0; font: 12px/1 "Tongzheng Icons"; vertical-align: middle; }
.project-detail__breadcrumb a { transition: color .3s; }
.project-detail__breadcrumb a:hover { color: #ffbe2e; }
.project-detail__shell { width: calc(100% - 60px); max-width: 1410px; margin: 150px auto 124px; }
.project-detail__featured { margin-bottom: 46px; }
.project-detail__featured img { width: 100%; height: 720px; object-fit: cover; }
.project-detail__meta { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 30px; margin: 0 0 50px; }
.project-detail__meta > div { padding-bottom: 20px; border-bottom: 1px solid #dfdfdf; }
.project-detail__meta dt { margin-bottom: 8px; color: #1f1f1f; font-size: 20px; font-weight: 600; line-height: 24px; letter-spacing: -.01em; text-transform: uppercase; }
.project-detail__meta dd { margin: 0; line-height: 24px; }
.project-detail__split { display: grid; grid-template-columns: minmax(0,31fr) minmax(0,69.5fr); gap: 66px; }
.project-detail__intro h1, .project-detail__features h2 { align-self: start; margin: 0; font-size: 40px; font-weight: 600; line-height: 44px; letter-spacing: -.01em; text-transform: uppercase; }
.project-detail__intro-copy { display: grid; gap: 24px; }
.project-detail__gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 70px; margin: 55px 0 63px; }
.project-detail__gallery img { width: 100%; height: auto; }
.project-detail__features { margin-bottom: 89px; }
.project-detail__services { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 39px 30px; margin-top: 44px; padding-bottom: 53px; border-bottom: 1px solid #dfdfdf; }
.project-detail__service { display: flex; align-items: flex-start; gap: 26px; width: 100%; max-width: 431px; }
.project-detail__service > div { min-width: 0; }
.project-detail__icon { display: block; flex-shrink: 0; padding: 12px; background: #fff; color: #1f1f1f; font: 50px/1 "Tongzheng Icons"; transition: background-color .3s; }
.project-detail__icon--design::before { content: '\e013'; }
.project-detail__icon--testing::before { content: '\e012'; }
.project-detail__icon--planning::before { content: '\e010'; }
.project-detail__icon--results::before { content: '\e011'; }
.project-detail__service:hover .project-detail__icon { background: #ffbe2e; }
.project-detail__service h3 { margin: 0 0 15px; font-size: 24px; font-weight: 600; line-height: 28px; letter-spacing: -.01em; text-transform: uppercase; }
.project-detail__service:nth-child(n+3) h3 { margin-bottom: 13px; }
.project-detail__checklist { margin: 32px 0 24px; padding: 0; list-style: none; color: #1f1f1f; font-size: 16px; font-weight: 600; line-height: 28px; letter-spacing: -.01em; }
.project-detail__navigation { display: grid; grid-template-columns: minmax(0,1fr) 30px minmax(0,1fr); padding-top: 30px; border-top: 1px solid #dfdfdf; text-transform: uppercase; }
.project-detail__previous, .project-detail__next { display: flex; align-items: flex-start; min-width: 0; }
.project-detail__next { justify-content: flex-end; text-align: right; }
.project-detail__nav-text { display: flex; flex-direction: column; min-width: 0; max-width: 378px; }
.project-detail__nav-label { color: #555; font-size: 12px; font-weight: 600; line-height: 28px; }
.project-detail__nav-title { color: #1f1f1f; font-size: 20px; font-weight: 600; line-height: 24px; letter-spacing: -.01em; transition: color .3s; }
.project-detail__nav-title:hover { color: #ffbe2e; }
.project-detail__chevron { flex-shrink: 0; margin-top: 8px; font: 10px/1 "Tongzheng Icons"; }
.project-detail__previous .project-detail__chevron { padding-right: 9px; }
.project-detail__next .project-detail__chevron { padding-left: 9px; }
.project-detail__previous .project-detail__chevron::before { content: '\e04b'; }
.project-detail__next .project-detail__chevron::before { content: '\e04c'; }
.project-detail__back { align-self: start; color: #a1a1a1; font: 30px/1 "Tongzheng Icons"; transition: color .3s; }
.project-detail__back span::before { content: '\e020'; }
.project-detail__back:hover { color: #ffbe2e; }
.project-detail a:focus-visible { outline: 2px solid #d69a00; outline-offset: 4px; }
@media(max-width:1200px) {
  .project-detail__hero { padding-block: 180px 100px; }
  .project-detail__shell { margin-block: 100px; }
  .project-detail__featured img { height: 620px; }
  .project-detail__features { margin-bottom: 60px; }
}
@media(max-width:1024px) {
  .project-detail__hero { padding-block: 160px 80px; }
  .project-detail__shell { margin-block: 80px; }
  .project-detail__featured { margin-bottom: 30px; }
  .project-detail__featured img { height: 520px; }
  .project-detail__meta { margin-bottom: 30px; }
  .project-detail__split { grid-template-columns: minmax(0,1fr); gap: 0; }
  .project-detail__intro { gap: 30px; }
  .project-detail__intro h1 { width: 70%; margin-inline: auto; text-align: center; }
  .project-detail__gallery { gap: 30px; margin-block: 30px; }
  .project-detail__features { margin-bottom: 30px; }
  .project-detail__features h2 { margin-bottom: 20px; font-size: 30px; line-height: 33px; text-align: center; }
  .project-detail__services { margin-top: 30px; gap: 30px; padding-bottom: 30px; }
  .project-detail__checklist { margin-block: 30px; }
}
@media(max-width:880px) {
  .project-detail__shell { margin-block: 60px; }
  .project-detail__featured img { height: 420px; }
  .project-detail__meta { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .project-detail__intro h1 { width: 100%; font-size: 30px; line-height: 35px; }
  .project-detail__icon { font-size: 40px; }
  .project-detail__service h3 { font-size: 20px; line-height: 25px; }
  .project-detail__nav-text { max-width: 100%; }
}
@media(max-width:767px) {
  .project-detail__hero { padding: 120px 15px 60px; }
  .project-detail__shell { width: calc(100% - 30px); }
  .project-detail__featured img { height: 250px; }
  .project-detail__meta, .project-detail__gallery, .project-detail__services { grid-template-columns: minmax(0,1fr); }
  .project-detail__intro h1 { font-size: 25px; line-height: 30px; }
  .project-detail__features h2 { font-size: 25px; line-height: 27.5px; }
  .project-detail__service { flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: none; }
  .project-detail__service h3, .project-detail__service:nth-child(n+3) h3 { margin-bottom: 5px; }
  .project-detail__checklist li { display: flex; justify-content: center; }
  .project-detail__navigation { column-gap: 10px; }
  .project-detail__nav-label { font-size: 0; line-height: 0; }
  .project-detail__nav-title { font-size: 16px; line-height: 20px; }
  .project-detail__chevron { font-size: 0; margin: 0; }
}
@media(prefers-reduced-motion:reduce) { .project-detail *, .project-detail *::before { transition: none !important; } }