/* Sandbox block: exact brand geometry, isolated from team-network. */
.team-sygnet { padding-block: var(--section-y); background: var(--paper); }
.team-sygnet-layout { display: grid; align-items: center; gap: var(--layout-gap); }
.team-sygnet .intro { display: flex; flex-direction: column; gap: 0; min-width: 0; margin: 0; }
.team-sygnet .intro p { max-width: 42ch; color: var(--dark-60); }
.team-sygnet-art { position: relative; isolation: isolate; width: 100%; max-width: 1120px; margin-inline: auto; aspect-ratio: 56 / 42; container-type: inline-size; }
.team-sygnet-art::before { content: ""; position: absolute; inset: calc(-1 * var(--space-24)); z-index: -1; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--gray-warm) 26%, transparent) 1.3px, transparent 1.6px) 0 0 / 28px 28px; mask-image: radial-gradient(ellipse, black 45%, transparent 75%); }
.team-sygnet-shape { display: block; width: 100%; height: 100%; overflow: visible; }
.team-sygnet-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.is-sygnet-ready .team-sygnet-shape { visibility: hidden; }
.team-sygnet-fill { fill: var(--red); }
.team-sygnet-people { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.team-sygnet-person { position: absolute; width: 15.178571%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.team-sygnet-person-link { position: relative; display: grid; place-items: center; width: 100%; height: 100%; color: var(--dark); border-radius: var(--sygnet-radius, 30.481283%); text-decoration: none; outline-offset: var(--space-4); }
.team-sygnet-person-link:focus-visible { outline: 2px solid var(--dark); }
.team-sygnet-person-link > img { position: absolute; inset: 6.5%; display: block; width: 87%; height: 87%; object-fit: cover; border-radius: calc(var(--sygnet-radius, 4.627cqw) - var(--sygnet-inset, .987cqw)); opacity: 0; transition: opacity 180ms var(--ease-out); }
.team-sygnet-label { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-8); width: 100%; text-align: center; transition: opacity 180ms var(--ease-out); }
.team-sygnet-label strong { font-size: clamp(var(--fs-caption), 2.35cqw, var(--fs-h4)); line-height: 1.1; font-weight: var(--weight-heading); letter-spacing: var(--tracking-heading); }
.team-sygnet-label > span { font-size: clamp(10px, 1.65cqw, var(--fs-body)); line-height: 1.25; text-wrap: balance; }
.team-sygnet-person.has-photo:focus-within img,
.team-sygnet-person.has-photo.is-selected img { opacity: 1; }
.team-sygnet-person.has-photo:focus-within .team-sygnet-label,
.team-sygnet-person.has-photo.is-selected .team-sygnet-label { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .team-sygnet-person.has-photo:hover img { opacity: 1; }
  .team-sygnet-person.has-photo:hover .team-sygnet-label { opacity: 0; }
}
@media (min-width: 1200px) { .team-sygnet-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
@media (max-width: 575px) {
  .team-sygnet-label { padding: var(--space-4); }
  .team-sygnet-label strong { font-size: clamp(9px, 2.7cqw, var(--fs-small)); }
  .team-sygnet-label > span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .team-sygnet-person-link > img, .team-sygnet-label { transition: none; }
}
/* The canvas owns the two intersecting clips and the settling portrait. Keep
   the real image for lazy loading/alt text without a second CSS crossfade. */
.is-sygnet-ready .team-sygnet-person.has-photo .team-sygnet-person-link > img { opacity: 0; transition: none; }
.is-sygnet-ready .team-sygnet-label { transition: none; }