/* ============================================================
   THE ROOM SPEAKS FOR ITSELF — the video testimonial fan (#stories-room).

   Engine: the Framer VideoCarousel port (proof-carousel.js), the design
   Luke picked on the hub rebuild. Here it is opened up into a wall of faces:
   many neighbours visible either side, a light blur instead of the module's
   10px, a shallow rotation, so the point lands at a glance: there are a lot
   of these. Cards are the site's testimonial card: white surface, the film
   inside on the field radius, name and business under it. The section sits
   on the canvas cream so it reads as its own block. Geometry and fan values
   are custom properties on the stage; the JS reads them.
   ============================================================ */
.selr-stories-room .selr-sec-inner { padding-top: 110px; padding-bottom: 120px; gap: 80px; }
/* Header sits left, flush to the content column, matching #from-the-room and
   every section header on the main site. The fan below stays full bleed. */
.selr-fw-head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  width: 100%;
}
.selr-fw-head .selr-section-kicker { margin: 0; }
.selr-fw-sub {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 17px; line-height: 1.5; letter-spacing: -0.02em;
  color: #616161; max-width: 640px; margin: 0;
}
.selr-fw-head .framer-styles-preset-pc4jh9 { text-align: left; max-width: 1100px; }
.selr-fw-h-tone { color: #616161; }
.selr-fw-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
}
.fw__stage {
  --fw-card-w: 272;
  --fw-card-h: 526;
  --fw-spacing: 150;
  --fw-depth:   200;
  --fw-depth-k: 0.28;
  --fw-blur:    1.2;
  --fw-max:     8;
  --fw-fade:    0.07;
  --fw-fade-cap: 0.62;
  --fw-rot:     10;
  --fw-scale:   0.9;
  position: relative;
  width: 100%;
  max-width: 100%;
  height: calc(var(--fw-card-h) * 1px + 110px);
  margin: 0 auto;
  overflow: hidden;
  perspective: 1400px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.fw__stage:focus-visible { outline: 2px solid var(--selr-purple); outline-offset: -2px; border-radius: 30px; }
/* soft edges: the wall runs off both sides of the screen */
.fw__stage::before,
.fw__stage::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: 120px; pointer-events: none;
}
.fw__stage::before { left: 0; background: linear-gradient(90deg, var(--fw-ground, #FFFFFF), rgba(255,255,255,0)); }
.fw__stage::after { right: 0; background: linear-gradient(270deg, var(--fw-ground, #FFFFFF), rgba(255,255,255,0)); }
.fw__deck { position: absolute; inset: 0; transform-style: preserve-3d; }
.fw-card {
  position: absolute; top: 50%; left: 50%;
  width: calc(var(--fw-card-w) * 1px);
  height: calc(var(--fw-card-h) * 1px);
  margin: 0;
  padding: 10px 10px 0;
  display: flex; flex-direction: column;
  border-radius: 28px;
  overflow: hidden;
  background: #F7F5EF;
  border: 1px solid rgba(227,227,227,.55);
  backface-visibility: hidden;
  pointer-events: none;
  transform: var(--fw-t, translate(-50%, -50%));
  transition: transform 380ms var(--selr-ease-over), filter 380ms var(--selr-ease-over), opacity 380ms var(--selr-ease-over), box-shadow 380ms var(--selr-ease);
}
.fw-card.is-active { pointer-events: auto; box-shadow: 0 30px 60px rgba(20,18,30,.16); }
/* while page scroll is driving the fan, cards move short and sharp so the
   riffle keeps pace with the wheel */
.fw__stage.is-scrolling .fw-card { transition-duration: 170ms; }
.fw-card.is-active:hover { transform: var(--fw-t, translate(-50%, -50%)) scale(1.02); }
.fw__stage:not(.is-ready) .fw__deck { opacity: 0; }
.fw__deck { transition: opacity var(--selr-dur-fast) var(--selr-ease); }
.fw-card__media {
  position: relative; flex: none;
  aspect-ratio: 9 / 16;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #17151F;
}
.fw-card__face { position: absolute; inset: 0; display: block; padding: 0; border: 0; background: none; cursor: pointer; }
.fw-card__poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.fw-card__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.14));
  pointer-events: none;
  transition: opacity 380ms var(--selr-ease);
}
.fw-card.is-active .fw-card__veil { opacity: 0; }
.fw-card__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,.35);
  color: var(--selr-ink-invert);
  pointer-events: none;
}
.fw-card.is-active:hover .fw-card__play { transform: translate(-50%, -50%) scale(1.08); }
.fw-card__play-ico { width: 20px; height: 20px; stroke-width: 2; margin-left: 2px; }
/* name and business under the film, inside the card */
.fw-card__cap {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 8px 14px;
  font-family: "Manrope Variable", Manrope, sans-serif;
  color: var(--selr-ink);
}
.fw-card__cap-name { font-weight: 600; font-size: 15px; letter-spacing: -0.02em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-card__cap-biz { font-size: 13px; letter-spacing: -0.01em; color: var(--selr-ink-muted); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-card__player { position: absolute; inset: 0; display: none; }
.fw-card.is-playing .fw-card__player { display: block; }
.fw-card.is-playing .fw-card__face { display: none; }
.fw-card__player iframe { width: 100%; height: 100%; border: 0; display: block; }
.fw__arrow {
  position: absolute; top: 50%; z-index: 3;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: var(--selr-r-round);
  background: #F7F5EF; color: var(--selr-ink);
  cursor: pointer; transform: translateY(-50%);
  box-shadow: 0 6px 18px rgba(20,18,30,.10);
  transition: background-color var(--selr-dur-base) var(--selr-ease), color var(--selr-dur-base) var(--selr-ease);
}
.fw__arrow--prev { left: max(24px, calc(50% - 660px)); }
.fw__arrow--next { right: max(24px, calc(50% - 660px)); }
.fw__arrow:hover { background: var(--selr-purple); color: var(--selr-ink-invert); }
.fw__chev { width: 18px; height: 18px; stroke-width: 2; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.fw__chev--prev { transform: rotate(180deg); }
.fw__dots {
  position: absolute; left: 50%; bottom: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 0;
  /* wide enough that the films this page carries sit on one row now their
     targets are 24px rather than 14px; more of them still wrap rather than
     spilling out of the stage */
  max-width: min(92vw, 780px); flex-wrap: wrap; justify-content: center;
  padding: 1px 6px; border-radius: 999px;
  background: #F7F5EF;
  transform: translateX(-50%);
  box-shadow: 0 6px 18px rgba(20,18,30,.08);
}
/* Same split as the quote dots: the button is the 24px target, the ::before is
   the 7px mark. The rail's own gap moved inside the buttons so two marks are
   24px between centres rather than 14px. */
.fw__dot {
  width: 24px; height: 24px; flex: none; padding: 0; border: 0; background: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.fw__dot::before {
  content: ''; display: block;
  width: 7px; height: 7px; border-radius: 999px;
  background: rgba(36,36,36,.22);
  transition: background-color var(--selr-dur-base) var(--selr-ease);
}
.fw__dot[aria-selected='true']::before { background: var(--selr-ink); }
@media (max-width: 1199px) {
  .fw__stage { --fw-card-w: 240; --fw-card-h: 470; --fw-spacing: 134; --fw-max: 6; }
}
@media (max-width: 809px) {
  .selr-stories-room .selr-sec-inner { padding-top: 70px; padding-bottom: 80px; gap: 28px; }
  .selr-fw-head { gap: 16px; }
  .fw__stage { --fw-card-w: 210; --fw-card-h: 416; --fw-spacing: 118; --fw-max: 4; --fw-blur: 1; }
  .fw__stage::before, .fw__stage::after { width: 40px; }
  .fw__arrow--prev { left: 8px; }
  .fw__arrow--next { right: 8px; }
  .fw__dots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fw-card { transition: opacity var(--selr-dur-fast) var(--selr-ease); }
  .fw-card.is-active:hover { transform: var(--fw-t, translate(-50%, -50%)); }
  .fw-card.is-active:hover .fw-card__play { transform: translate(-50%, -50%); }
  .fw-card__veil, .fw__arrow, .fw__dot, .fw__dot::before { transition: none; }
}