/* ---------- Who we are (Figma: white, title y+78, 2x callout bleeds off right, 5 product cards scroll) ---------- */
.who { background: var(--c-white); color: var(--c-black); padding-block: 78px 100px; overflow-x: clip; }
.who__grid { display: grid; grid-template-columns: minmax(0, 546px) minmax(0, 1fr); column-gap: 67.5px; align-items: start; width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.who__text { margin-left: -3.7px; }                       /* Figma sets this block at x=62.3 (others at 66) */
.who__title { margin-bottom: 37px; }
.who__lede { font-size: var(--fs-body); line-height: var(--lh-auto); margin-bottom: 31px; }
.who__callout-wrap { margin-top: 126px; margin-right: calc((100% - 100vw) / 2); }   /* bleed to viewport edge */

.callout {
  display: flex; align-items: center; gap: 55px; min-height: 150px; padding: 0 var(--edge-pad, 40px) 0 48px;
  background: #f2f2f2; --c: 25px;
  clip-path: polygon(var(--c) 0, 100% 0, 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.callout__figure { flex: none; line-height: 0.799; }
.callout__text { max-width: 502px; font-size: var(--fs-body); line-height: var(--lh-copy); }

/* Product scroller: first card aligns to the content edge, row bleeds off the right */
.products { margin-top: 59px; }
.products__track { display: flex; gap: 45.6px; padding-inline: var(--edge); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--edge); scrollbar-width: none; }
.products__track::-webkit-scrollbar { display: none; }
.product { flex: 0 0 371.9px; scroll-snap-align: start; }
.product__media { position: relative; aspect-ratio: 371.91 / 241.3; overflow: hidden; background: #000; }
.product__media img { position: absolute; left: var(--x, 0); top: var(--y, 0); width: var(--w, 100%); min-height: 100%; object-fit: cover; max-width: none; height: auto; transition: transform var(--dur-slow) var(--ease); }
.product:hover .product__media img { transform: scale(1.03); }   /* [ASSUMED] subtle card hover */
.product__title { margin-top: 24.8px; margin-bottom: 12px; }
.product__text { font-size: var(--fs-body-sm); line-height: var(--lh-card); max-width: 372px; }

@media (max-width: 1024px) {
  .who__grid { grid-template-columns: 1fr; row-gap: 3rem; }
  .who__callout-wrap { margin-top: 0; }
  .who__text { margin-left: 0; }
}
@media (max-width: 767px) {
  .who { padding-block: 56px 64px; }
  .callout { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.75rem 1.5rem 1.75rem 2rem; }
  .products__track { gap: 20px; }
  .product { flex-basis: min(80vw, 372px); }
}