/* Office identity and representative portrait. */
.brand { flex-direction: row; align-items: center; gap: 10px; }
.brand-copy { display: flex; flex-direction: column; }
.brand-mark { width: 42px; height: 42px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 8px rgba(20, 48, 50, .14); }

.hero::before {
  background-color: #eef5f3;
  background-image: url("../images/makoto-sr-representative-hero-v2.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 851px) {
  .hero::before { top: 104px; }
}

@media (max-width: 680px) {
  .brand { gap: 8px; }
  .brand-mark { width: 38px; height: 38px; }
  .hero .wrap::after {
    background-image: linear-gradient(180deg, rgba(19, 47, 48, .02), rgba(19, 47, 48, .08)), url("../images/makoto-sr-representative-hero-v2.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

@media (max-width: 390px) {
  .brand-mark { width: 34px; height: 34px; }
}