.references {
  background: #fff;
  position: relative;
  overflow: hidden;
}
@media (min-width: 901px) {
  .site-header nav { gap: 15px; font-size: 12px; }
}
.references::before {
  content: "PARTNERS";
  position: absolute;
  right: -18px;
  top: -48px;
  color: rgba(7,27,45,.035);
  font: 900 180px var(--display);
  letter-spacing: -.08em;
}
.references-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 60px;
  margin-bottom: 52px;
  position: relative;
}
.references-head h2 {
  color: var(--navy);
  font-size: clamp(38px,4.3vw,58px);
}
.references-head h2 span { color: var(--red); }
.references-head > p { max-width: 430px; color: var(--muted); margin: 0 0 5px; font-size: 16px; }
.references-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; position: relative; }
.reference-card {
  min-height: 310px;
  padding: 30px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--turq);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  background: #fff;
  transition: transform .3s ease, box-shadow .3s ease;
}
.reference-card:hover { transform: translateY(-5px); box-shadow: 0 20px 45px rgba(7,27,45,.1); }
.reference-card:nth-child(2) { border-top-color: var(--red); }
.reference-card:nth-child(3) { border-top-color: var(--navy); }
.reference-no { position: absolute; top: 25px; right: 27px; color: #9baab3; font: 800 11px var(--font); letter-spacing: .15em; }
.reference-mark {
  position: absolute;
  top: 28px;
  left: 28px;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--turq);
  font: 900 20px var(--display);
}
.reference-fiolet .reference-mark { background: var(--red); color: #fff; }
.reference-schavemaker .reference-mark { background: var(--turq); color: var(--navy); }
.reference-card p { margin: 0 0 10px; color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.reference-card h3 { margin: 0; color: var(--navy); font: 800 25px/1.15 var(--display); }
.reference-card strong { margin-top: 5px; color: #71838f; font-size: 13px; font-weight: 700; }

@media (max-width: 900px) {
  .references-head { align-items: start; flex-direction: column; }
  .references-grid { grid-template-columns: 1fr; }
  .reference-card { min-height: 250px; }
}