.warehouse-project { background: #eff1ed; border-block: 1px solid #d9dcd7; }
.warehouse-project .project-heading { display: flex; justify-content: space-between; align-items: end; gap: 36px; margin-bottom: 35px; }
.warehouse-project .section-title { margin-top: 16px; }
.warehouse-project .project-description { max-width: 720px; margin-top: 16px; font-size: 1rem; line-height: 1.9; color: var(--muted); }
.project-completion { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; gap: 8px; color: #80683f; padding-left: 32px; border-left: 1px solid #b6a586; }
.project-completion strong { font: 400 clamp(3.25rem,5.5vw,5rem)/1 var(--latin); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.055em; }
.project-completion span { font-size: .875rem; line-height: 1.6; letter-spacing: .05em; }
.project-film { margin: 0; }
.project-player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0b1820; }
.project-player video { display: block; width: 100%; height: 100%; object-fit: contain; }
.project-play { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; border: 0; background: linear-gradient(180deg,#09151c00 35%,#09151c55); color: white; font: 500 .875rem/1.5 var(--sans); letter-spacing: .08em; cursor: pointer; }
.project-play[hidden] { display: none; }
.project-play-icon { width: 76px; height: 76px; display: grid; place-items: center; border: 1px solid #ffffffb0; border-radius: 50%; background: #0b182099; font-size: 24px; padding-left: 4px; transition: background .2s; }
.project-play:hover .project-play-icon { background: #80683f; }
.project-play:focus-visible { outline: 3px solid var(--gold); outline-offset: -6px; }
.project-film figcaption { margin-top: 17px; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px 25px; color: var(--muted); font-size: .8125rem; line-height: 1.7; }
.project-film figcaption p { margin: 0; }
.project-film figcaption a { border-bottom: 1px solid #a18b6660; padding-bottom: 2px; }
.project-film figcaption a:hover { color: var(--ink); }
@media (max-width:760px) {
  .warehouse-project .project-heading { align-items: flex-start; gap: 25px; }
  .project-completion { padding-left: 22px; }
  .project-completion strong { font-size: 3rem; }
}
@media (max-width:640px) {
  .warehouse-project .project-heading { flex-direction: column; margin-bottom: 25px; gap: 24px; }
  .project-completion { flex-direction: row; align-items: baseline; border-left: 0; border-top: 1px solid #b6a586; width: 100%; padding: 19px 0 0; gap: 16px; }
  .project-completion strong { font-size: 3rem; }
  .warehouse-project .project-description { font-size: 1rem; }
  .project-play { gap: 9px; font-size: .8125rem; }
  .project-play-icon { width: 55px; height: 55px; font-size: 19px; }
  .project-film figcaption { font-size: .75rem; margin-top: 13px; }
}