/* A quiet, continuously rotating WebGL sculpture on the shared page grid. */
.people4 {
  color: #1d1d1f;
  background: var(--neutral-surface);
  color-scheme: light;
  padding: 24px var(--gutter) clamp(88px, 7vw, 132px);
  font-family: 'Raleway', Arial, sans-serif;
}
.people4-shell {
  display: grid;
  grid-template-columns: repeat(var(--site-grid-columns), minmax(0, 1fr));
  column-gap: var(--site-grid-gap);
  row-gap: 32px;
  align-items: center;
  width: 100%;
  margin-inline: auto;
}
.people4-portrait { grid-row: 1; grid-column: 1 / span 4; position: relative; left: 48px; isolation: isolate; width: min(100%, 420px); justify-self: center; }
.people4-portrait-stage { position: relative; isolation: isolate; aspect-ratio: 1; width: 100%; }
/* Keep a still fallback for unavailable WebGL and reduced-motion preferences.
   The canvas never participates in layout, so creating it cannot move the copy. */
.people4-fallback { display: block; width: 100%; height: auto; }
.people4-model { display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.people4-portrait[data-people-renderer="webgl"] .people4-model {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2;
}
.people4-portrait[data-people-renderer="webgl"] .people4-fallback {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.people4-copy { grid-row: 1; grid-column: 6 / -1; min-width: 0; max-width: 810px; }
.people4-eyebrow { margin: 0 0 21px; color: #6e6e73; font-size: 15px; font-weight: 600; line-height: 1.5; }
.people4-copy h2 { margin: 0 0 28px; color: #6e6e73; font-size: clamp(42px, 5.5vw, 84px); font-weight: 600; line-height: 1.08; letter-spacing: -.04em; }
.people4-copy h2 span { color: #1d1d1f; }
.people4-copy > p:not(.people4-eyebrow) { max-width: 740px; margin: 0; color: #6e6e73; font-size: 20px; font-weight: 400; line-height: 1.7; }
.people4-copy > p:not(.people4-eyebrow) + p { margin-top: 18px; }
.people4-b2p-container {
  margin-top: 36px;
  width: min(746px, 100%);
}
.people4-b2p {
  --b2p-content-x: 28px;
  --b2p-content-y: 24px;
  --b2p-chip-h: 29px;
  width: 100%;
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  box-sizing: border-box;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .05)) drop-shadow(0 1px 3px rgba(0, 0, 0, .02));
  transition: padding 560ms cubic-bezier(.18, .7, .25, 1);
}
/* The white card surface is physically cut out with real notch geometry */
.people4-b2p::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #ffffff;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  border-radius: 20px;
  -webkit-clip-path: var(--_b2p-clip, none);
  clip-path: var(--_b2p-clip, none);
  transition: opacity 560ms cubic-bezier(.18, .7, .25, 1);
}
.people4-b2p[data-expanded="true"] {
  padding: var(--b2p-content-y) var(--b2p-content-x);
}
.people4-b2p[data-expanded="true"]::before {
  opacity: 1;
}
.people4-b2p-notch {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  width: fit-content;
  background: transparent;
  padding: 0;
  margin: 0;
  transition: margin 560ms cubic-bezier(.18, .7, .25, 1), transform 560ms cubic-bezier(.18, .7, .25, 1);
}
.people4-b2p[data-expanded="true"] .people4-b2p-notch {
  margin-left: 0;
  margin-top: calc(-1 * (var(--b2p-content-y) + 14px));
  margin-bottom: 8px;
}
.people4-b2p .people4-b2p-kicker {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 8px;
  border: none;
  outline: none;
  background: var(--violet, #b7a0eb);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .01em;
  box-shadow: none;
  white-space: nowrap;
}
.people4-b2p[data-expanded="true"] .people4-b2p-kicker {
  background: var(--violet, #b7a0eb);
  color: #ffffff;
  border: none;
  outline: none;
  box-shadow: none;
}
.people4-b2p-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(4px);
  margin-top: 0;
  pointer-events: none;
  transition: grid-template-rows 560ms cubic-bezier(.18, .7, .25, 1), opacity 380ms cubic-bezier(.18, .7, .25, 1) 100ms, transform 380ms cubic-bezier(.18, .7, .25, 1) 100ms, margin-top 560ms cubic-bezier(.18, .7, .25, 1);
}
.people4-b2p-content > p {
  min-height: 0;
  overflow: hidden;
  margin: 0;
  color: #6e6e73;
  font-size: 17px;
  line-height: 1.65;
}
.people4-b2p[data-expanded="true"] .people4-b2p-content {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
  margin-top: 14px;
  pointer-events: auto;
}
@media (max-width: 1099px) {
  .people4-portrait { grid-column: 1 / span 3; left: 24px; width: min(100%, 300px); }
  .people4-copy { grid-column: 5 / -1; }
}
@media (max-width: 1000px) {
  .people4-copy h2 { font-size: clamp(39px, 5vw, 50px); }
}
@media (max-width: 700px) {
  .people4 { padding-top: 12px; padding-bottom: 72px; }
  .people4-shell { row-gap: 22px; }
  .people4-portrait { grid-row: 2; grid-column: 1 / -1; left: 0; width: min(100%, 184px); justify-self: start; }
  .people4-copy { grid-column: 1 / -1; }
  .people4-copy h2 { font-size: clamp(35px, 8.3vw, 48px); margin-bottom: 23px; }
  .people4-b2p { padding: 20px; }
  .people4-eyebrow { margin-bottom: 16px; font-size: 14px; }
  .people4-copy > p:not(.people4-eyebrow) { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce), print {
  .people4-portrait[data-people-renderer] .people4-model { display: none; }
  .people4-portrait[data-people-renderer] .people4-fallback { visibility: visible; }
}