.work-page-reference .site-header {
  background: #fff;
  color: var(--navy);
  border-bottom: 0;
}

.work-page-reference .work-hero-match { background: #fbfbfb; }
.work-page-reference .work-hero-art > img { object-position: center; }
.work-page-reference .work-filter-row {
  padding: 22px max(32px,calc((100vw - 1180px)/2)) 10px;
  display: flex;
  justify-content: flex-end;
  background: #fff;
}
.work-page-reference .work-showcase-head { padding: 72px max(32px,calc((100vw - 1180px)/2)) 18px; display: grid; grid-template-columns: 1fr minmax(360px,.7fr); gap: 70px; align-items: end; background: #fff; }
.work-page-reference .work-showcase-head h2 { max-width: 650px; margin: 0; font-size: clamp(38px,3.5vw,52px); line-height: 1.06; letter-spacing: -.045em; }
.work-page-reference .work-showcase-head > p { max-width: 520px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; }

.work-page-reference .work-filters button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--navy);
  padding: 10px 18px;
  border-radius: 7px;
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.work-page-reference .work-filters button.active {
  background: #edf5ff;
  color: var(--brand);
  font-weight: 800;
  box-shadow: 0 5px 14px rgba(13,28,49,.07);
}

.work-page-reference .work-filters button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.work-page-reference .work-page-grid {
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}

.work-page-reference .work-page-grid .project-picture,
.work-page-reference .work-page-grid .project-card:nth-child(-n+2) .project-picture {
  aspect-ratio: 16/10;
  padding: 0;
}

.work-page-reference .work-page-grid .project-picture img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: top;
}

.work-page-reference .work-page-grid .project-card:hover .project-picture img { transform: scale(1.012); }
.work-page-reference .work-page-grid .project-card { display: flex; flex-direction: column; border: 1px solid #dce5ee; border-radius: 12px; background: #fff; color: var(--navy); box-shadow: 0 12px 30px rgba(13,28,49,.065); }
.work-page-reference .work-page-grid .project-card-head { min-height: 0; display: flex; padding: 19px 20px 10px; border: 0; background: #fff; color: var(--navy); align-items: flex-start; }
.work-page-reference .work-page-grid .project-card-head h3 { margin: 0; font-size: 21px; line-height: 1.2; }
.work-page-reference .work-page-grid .project-card-head span { display: block; color: #5a6d82; font-size: 12px; }
.work-page-reference .work-page-grid .project-card > p.project-summary { display: -webkit-box; min-height: 66px; margin: 0; padding: 0 20px 12px; overflow: hidden; color: #5a6d82; font-size: 13px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.work-page-reference .work-page-grid .project-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding: 0 20px 20px; }
.work-page-reference .work-page-grid .project-meta span { padding: 6px 9px; border-radius: 999px; background: #edf5ff; color: #075fce; font-size: 12px; font-weight: 700; }
.work-page-reference .work-page-grid .project-card:hover { border-color: #b8d7fb; transform: translateY(-3px); box-shadow: 0 18px 38px rgba(13,28,49,.11); }
.work-page-reference .work-page-grid .project-card { transition: transform .22s,border-color .22s,box-shadow .22s; }
.work-page-reference .work-page-grid .view-project { top: 16px; right: 16px; bottom: auto; width: 40px; height: 40px; border-radius: 50%; background: rgba(13,28,49,.9); opacity: 1; transform: none; }
.work-page-reference .work-page-grid .project-placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg,#eef5fd,#f7f2ec); color: var(--brand); }
.work-page-reference .work-page-grid .project-placeholder .dmw-icon { width: 62px; height: 62px; }

.work-page-reference .results-strip {
  position: relative;
  overflow: hidden;
  padding: 28px 34px;
  background: linear-gradient(110deg,#fff,#f3f7fc);
  border: 1px solid #e1e8f0;
  box-shadow: 0 18px 45px rgba(13,28,49,.08);
  text-align: left;
}

.work-page-reference .results-strip h2 { font-size: 21px; line-height: 1.2; }
.work-page-reference .results-strip > div { position: relative; padding: 5px 18px 5px 28px; border-left: 1px solid #d8e0ea; }
.work-page-reference .results-strip > div::before { content: '↗'; position: absolute; left: 8px; top: 10px; color: var(--brand); font-size: 16px; font-weight: 800; }
.work-page-reference .results-strip strong { color: #087cf0; font-size: 34px; letter-spacing: -.03em; }
.work-page-reference .results-strip span { font-size: 12px; }

.work-project-cta {
  padding: 34px 38px;
  border: 1px solid #e3e9f0;
  background: linear-gradient(110deg,rgba(244,248,252,.96),rgba(255,255,255,.98));
  box-shadow: 0 18px 48px rgba(13,28,49,.06);
  color: var(--navy);
}

.work-project-cta h2 { font-size: 40px; }
.work-project-cta > div > img {
  left: -34px;
  bottom: -28px;
  width: 430px;
  height: 230px;
  filter: none;
  opacity: 1;
}
.work-project-cta .contact-form.compact {
  border: 1px solid rgba(218,226,235,.85);
  background: rgba(255,255,255,.82);
  color: var(--navy);
  box-shadow: 0 14px 38px rgba(13,28,49,.07);
  backdrop-filter: blur(12px);
}

@media (max-width: 1050px) {
  .work-page-reference .site-header { color: var(--navy); }
  .work-page-reference .work-showcase-head { padding-left: 24px; padding-right: 24px; grid-template-columns: 1fr; gap: 20px; }
  .work-page-reference .work-filter-row { padding-left: 24px; padding-right: 24px; }
  .work-page-reference .work-page-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 680px) {
  .work-page-reference .work-showcase-head { padding: 52px 18px 12px; }
  .work-page-reference .work-showcase-head h2 { font-size: 38px; }
  .work-page-reference .work-filter-row { padding: 18px 18px 8px; }
  .work-page-reference .work-filter-row .work-filters { width: 100%; }
  .work-page-reference .work-page-grid { grid-template-columns: 1fr; }
  .work-page-reference .work-filters button { padding: 10px 14px; }
  .work-page-reference .results-strip > div { padding: 14px 0 14px 28px; border-left: 0; border-top: 1px solid #d8e0ea; }
}