/* Shared references for service pages: one balanced, quiet brand shelf. */
.service-reference-showcase {
  margin-block: 30px 0;
  padding-block: 54px 50px;
  border-block: 1px solid #e9e6e2;
  background: #fcfbf9;
  color: #30363c;
}
.service-reference-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 33px;
}
.service-reference-heading .detail-label { margin-bottom: 12px; }
.service-reference-heading h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -.55px;
  text-wrap: balance;
}
.service-reference-heading p {
  margin: 12px 0 0;
  color: #69717a;
  font-size: 14px;
  line-height: 1.7;
}
.service-reference-all {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 11px;
  padding-block: 8px;
  color: #424b54;
  border-bottom: 1px solid #cfc6c0;
  font-size: 13px;
  line-height: 1.6;
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.service-reference-all:hover { color: #a83a46; border-color: #c6636c; }
.service-reference-brands {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.service-reference-brands > li { min-width: 0; }
.service-reference-brand {
  display: flex;
  flex-direction: column;
  padding: 7px 10px 14px;
  border-bottom: 1px solid #e1ddd7;
  color: #5f666f;
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.service-reference-mark {
  display: flex;
  height: 75px;
  align-items: center;
  justify-content: center;
}
.service-reference-mark img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 110px);
  max-height: 46px;
  object-fit: contain;
  filter: none;
  mix-blend-mode: multiply;
  transition: transform .2s;
}
.service-reference-brands [data-client="fuga"] img { max-width: 77px; }
.service-reference-brands [data-client="bb"] img { max-width: 69px; max-height: 58px; }
.service-reference-brands [data-client="sina"] img { max-width: 87px; }
.service-reference-brands [data-client="teka"] img { max-width: 77px; }
.service-reference-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  min-height: 20px;
  font-size: 11px;
  line-height: 1.6;
}
.service-reference-caption svg { flex-shrink: 0; color: #8b827d; transition: transform .2s, color .2s; }
.service-reference-brand:hover { border-color: #c6636c; color: #30363c; }
.service-reference-brand:hover img { transform: translateY(-3px); }
.service-reference-brand:hover .service-reference-caption svg { color: #b84d58; transform: translate(2px, -2px); }
.service-reference-brand:focus-visible,
.service-reference-all:focus-visible { outline: 2px solid #d4515d; outline-offset: 5px; border-radius: 2px; }
@media (max-width: 1050px) {
  .service-reference-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 32px; }
  .service-reference-mark { height: 68px; }
  .service-reference-caption { margin-top: 8px; }
}
@media (max-width: 760px) {
  .service-reference-showcase { margin-top: 20px; padding-block: 37px 32px; }
  .service-reference-heading { display: block; margin-bottom: 24px; }
  .service-reference-heading h2 { font-size: 24px; letter-spacing: -.4px; }
  .service-reference-heading p { max-width: 310px; font-size: 13px; margin-top: 10px; }
  .service-reference-heading .detail-label { margin-bottom: 10px; }
  .service-reference-all { margin-top: 16px; font-size: 12px; }
  .service-reference-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
  .service-reference-brand { padding: 3px 4px 11px; }
  .service-reference-mark { height: 65px; }
  .service-reference-mark img { max-width: min(100%, 99px); max-height: 41px; }
  .service-reference-brands [data-client="bb"] img { max-height: 51px; }
  .service-reference-caption { margin-top: 7px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-reference-all, .service-reference-brand, .service-reference-mark img, .service-reference-caption svg { transition: none; }
  .service-reference-brand:hover img, .service-reference-brand:hover .service-reference-caption svg { transform: none; }
}

/* Compact brand credentials; project films live in their own archive. */
.service-reference-showcase.service-reference-v2{background:#fff;border:0;padding-block:46px;margin-top:20px}.service-reference-v2>.section-shell{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;border-top:1px solid #e6e8e2;border-bottom:1px solid #e6e8e2;padding-block:36px}.service-reference-v2 .service-reference-heading{display:block;margin:0}.service-reference-v2 .service-reference-heading h2{font-size:27px;max-width:290px}.service-reference-v2 .service-reference-heading p{font-size:13px;line-height:1.8;max-width:280px;margin-top:15px}.service-reference-v2 .service-reference-all{margin-top:18px;font-size:12px;border-bottom:0;gap:20px}.service-reference-v2 .service-reference-brands{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px;align-content:center}.service-reference-v2 .service-reference-brand{border:0;padding:8px 12px}.service-reference-v2 .service-reference-mark{height:63px}.service-reference-v2 .service-reference-mark img{max-width:100px;max-height:36px}.service-reference-v2 .service-reference-brands [data-client=fuga] img{max-width:65px}.service-reference-v2 .service-reference-caption{display:none}.service-reference-v2 .service-reference-brand:hover{background:#fafaf8;border-radius:4px}.service-reference-v2 .service-reference-brand:focus-visible{outline:2px solid #d45b65;outline-offset:3px}@media(max-width:760px){.service-reference-showcase.service-reference-v2{padding-block:20px}.service-reference-v2>.section-shell{grid-template-columns:1fr;gap:25px;padding-block:28px}.service-reference-v2 .service-reference-heading h2{font-size:24px;max-width:none}.service-reference-v2 .service-reference-heading p{max-width:330px}.service-reference-v2 .service-reference-all{margin-top:10px}.service-reference-v2 .service-reference-brands{gap:10px 14px}.service-reference-v2 .service-reference-mark{height:57px}.service-reference-v2 .service-reference-mark img{max-width:80px;max-height:31px}}