/* People and real photography (preview): faces on the pod and the contact, photos on the results. */

/* a stack of faces */
.faces { display: flex; }
.faces img, .faces .ai { width: 40px; height: 40px; margin-left: -10px; border-radius: 50%; border: 2px solid var(--surface); object-fit: cover; background: var(--sk); }
.faces img:first-child { margin-left: 0; }
.faces .ai { display: grid; place-items: center; background: var(--ink); font-size: 12px; font-weight: 600; color: #FFFFFF; }

/* hero: who does the work */
.hx-people { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-size: 14.5px; line-height: 1.4; color: var(--muted); }
.hx-people b { display: block; font-weight: 600; color: var(--ink); }

/* pods: the team at work, with the pod on top */
.pod-photo { position: relative; width: 100%; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; box-shadow: 0 40px 70px -48px rgba(var(--shade), 0.55); }
.pod-photo > img { width: 100%; height: 100%; object-fit: cover; }
.pod-photo .pod-team { position: absolute; left: 14px; right: 14px; bottom: 14px; justify-self: auto; padding: 12px 14px; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 0; border-radius: 14px; backdrop-filter: blur(6px); }
.pod-photo .pod-team p { color: var(--muted); }
.pod-photo .pod-team b { color: var(--ink); }
.pod-head:has(.pod-photo) { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(32px, 5vw, 80px); align-items: center; }

/* results: a photo on every card */
.re-ph { display: block; margin: calc(-1 * clamp(14px, 1.2vw, 20px)) calc(-1 * clamp(14px, 1.2vw, 20px)) 22px; aspect-ratio: 16 / 7; overflow: hidden; border-radius: 12px; }
.re-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.re:hover .re-ph img { transform: scale(1.04); }
.re.hero-re .re-ph { aspect-ratio: 16 / 6; }

/* contact: who replies */
.ask-who { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.ask-who .ask-note { margin-top: 0 !important; }
.ask-who .faces img { width: 44px; height: 44px; border-color: var(--sunken); }

@media (max-width: 760px) {
  .hx-teal .hx-people { order: 7; margin-top: 4px; }
  .pod-head:has(.pod-photo) { grid-template-columns: minmax(0, 1fr); }
}