/*
 * OUR MEMBERS — Figma 511:608 (1440 × 7877).
 * Loaded only for this template; the shared site chrome stays in preview.css.
 */
.sfix-members {
  --members-unit: calc(100vw / 1440);
  --members-gutter: calc(120 * var(--members-unit));
  --members-gap: calc(140 * var(--members-unit));
  --members-text: max(14px, calc(16 * var(--members-unit)));
  color: #000;
  background: #fff;
}

.sfix-members .sfix-hero {
  display: block;
  height: calc(542 * var(--members-unit));
  padding: calc(174 * var(--members-unit)) var(--members-gutter) 0;
}
.sfix-members .sfix-hero-en {
  font-size: calc(100 * var(--members-unit));
  line-height: 1.2;
}
.sfix-members .sfix-hero-ja {
  min-height: calc(45 * var(--members-unit));
  font-size: max(18px, calc(24 * var(--members-unit)));
}

.sfix-members-content,
.sfix-members-leadership {
  display: grid;
  gap: var(--members-gap);
}
.sfix-members-content { padding-bottom: var(--members-gap); }
.sfix-member { min-width: 0; }
.sfix-member-photo {
  aspect-ratio: 1;
  overflow: hidden;
  background: #d9d4d1;
}
.sfix-member-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sfix-member-featured {
  display: grid;
  grid-template-columns: calc(620 * var(--members-unit)) calc(680 * var(--members-unit));
  align-items: end;
  gap: calc(64 * var(--members-unit));
}
.sfix-member-featured .sfix-member-copy {
  display: grid;
  gap: calc(56 * var(--members-unit));
}
.sfix-member-featured .sfix-member-heading {
  display: grid;
  gap: calc(24 * var(--members-unit));
}
.sfix-member-role {
  font-size: var(--members-text);
  font-weight: 700;
  line-height: 1.8;
}
.sfix-member-featured .sfix-member-role {
  font-size: max(16px, calc(20 * var(--members-unit)));
}
.sfix-member-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(16 * var(--members-unit));
  font-size: max(26px, calc(32 * var(--members-unit)));
  font-weight: 700;
  line-height: 1.8;
}
.sfix-member-name > span {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.sfix-member-featured .sfix-member-name {
  font-size: max(28px, calc(40 * var(--members-unit)));
}
.sfix-member-name .sfix-member-english {
  color: #d9d9d9;
  font-size: max(14px, calc(20 * var(--members-unit)));
  white-space: nowrap;
}
.sfix-member-bio {
  font-size: var(--members-text);
  font-weight: 400;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.sfix-member-bio p { margin: 0; }

.sfix-member-reverse {
  grid-template-columns: minmax(0, 1fr) calc(550 * var(--members-unit));
  padding-left: var(--members-gutter);
}
.sfix-member-reverse .sfix-member-photo {
  grid-column: 2;
  grid-row: 1;
}
.sfix-member-reverse .sfix-member-copy {
  grid-column: 1;
  grid-row: 1;
}

.sfix-members-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(64 * var(--members-unit)) calc(96 * var(--members-unit));
  padding-inline: var(--members-gutter);
}
.sfix-member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(48 * var(--members-unit));
}
.sfix-member-card .sfix-member-photo {
  width: calc(480 * var(--members-unit));
  max-width: 100%;
}
.sfix-member-card:nth-child(even) { padding-top: calc(80 * var(--members-unit)); }
.sfix-member-card:nth-child(even) .sfix-member-photo {
  width: calc(470 * var(--members-unit));
}
.sfix-member-card:last-child:nth-child(odd) {
  width: calc(568 * var(--members-unit));
  max-width: calc(100% + 16 * var(--members-unit));
}
.sfix-member-card .sfix-member-copy {
  display: grid;
  gap: calc(24 * var(--members-unit));
  width: 100%;
}
.sfix-member-card .sfix-member-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px calc(16 * var(--members-unit));
}
.sfix-member-card .sfix-member-bio { text-align: justify; }

/* Keep the reference's unbroken white space before the shared CONTACT band. */
.sfix-members > .pv-contact { isolation: isolate; }
.sfix-members .pv-contact-inner { padding-inline: var(--members-gutter); }
.sfix-members .pv-contact-wave {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 1;
  mix-blend-mode: multiply;
  animation: none;
  transform: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sfix-members .sfix-hero { min-height: 320px; padding-top: 140px; }
  .sfix-member-featured {
    grid-template-columns: 40% minmax(0, 1fr);
    padding-right: var(--members-gutter);
  }
  .sfix-member-reverse {
    grid-template-columns: minmax(0, 1fr) 40%;
    padding-right: 0;
  }
  .sfix-member-card .sfix-member-heading { gap: 8px 12px; }
}

@media (max-width: 767px) {
  .sfix-members {
    --members-gutter: 24px;
    --members-gap: 72px;
    --members-text: 15px;
  }
  .sfix-members .sfix-hero {
    height: auto;
    min-height: 290px;
    padding: 150px var(--members-gutter) 64px;
  }
  .sfix-members .sfix-hero-en {
    font-size: clamp(28px, 7.3vw, 56px);
    white-space: nowrap;
  }
  .sfix-members .sfix-hero-ja { min-height: 0; margin-top: 8px; font-size: 18px; }
  .sfix-member-featured,
  .sfix-member-reverse {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding: 0 var(--members-gutter);
  }
  .sfix-member-featured .sfix-member-photo {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    max-width: 480px;
    justify-self: center;
  }
  .sfix-member-reverse .sfix-member-copy { grid-column: auto; grid-row: auto; }
  .sfix-member-featured .sfix-member-copy { gap: 24px; }
  .sfix-member-featured .sfix-member-heading { gap: 12px; }
  .sfix-member-featured .sfix-member-name { gap: 8px 14px; font-size: 30px; }
  .sfix-member-name .sfix-member-english { font-size: 14px; }
  .sfix-member-featured .sfix-member-role { font-size: 16px; }

  .sfix-members + .pv-footer .pv-footer-sitemap { column-gap: clamp(16px, 5vw, 32px); }

  .sfix-members-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }
  .sfix-member-card { gap: 24px; }
  .sfix-member-card:nth-child(even) { padding-top: 0; }
  .sfix-member-card .sfix-member-photo,
  .sfix-member-card:nth-child(even) .sfix-member-photo {
    width: min(100%, 480px);
  }
  .sfix-member-card:last-child:nth-child(odd) { width: 100%; max-width: 100%; }
  .sfix-member-card .sfix-member-copy { gap: 16px; }
  .sfix-member-card .sfix-member-heading { gap: 8px 12px; }
  .sfix-member-card .sfix-member-name { font-size: 28px; }
}