/* results — full-bleed proof carousel. Agent F. Every selector prefixed .rs- */

.rs-root{
  --rs-ink:#24202d;
  --rs-muted:#91889d;
  --rs-purple:#7c3aed;
  --rs-ease:cubic-bezier(.16,1,.3,1);
  position:relative;
  padding:clamp(72px,9vw,128px) 0;
  background:#f7f6fa;
  overflow-x:clip;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Inter,system-ui,Arial,sans-serif;
}

.rs-sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---- header ------------------------------------------------------------ */

.rs-head{
  max-width:1500px;margin:0 auto;padding:0 5vw clamp(34px,4vw,58px);
}
.rs-head .rs-eyebrow{
  margin:0 0 14px;
  font-family:ui-monospace,Menlo,monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--rs-purple);
}
.rs-head .rs-h{
  margin:0;
  font-size:clamp(30px,3.5vw,54px);
  font-weight:650;letter-spacing:-.04em;line-height:1.05;
  color:var(--rs-ink);
}
.rs-head .rs-sub{
  margin:16px 0 0;max-width:560px;
  font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:var(--rs-muted);
}

/* ---- carousel shell ---------------------------------------------------- */

.rs-carousel{
  position:relative;width:100%;
  max-width:1500px;margin:0 auto;
  padding:0 5vw;
  box-sizing:border-box;
}

.rs-stage{
  position:relative;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr);
}

.rs-track{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  width:100%;
}

.rs-slide{
  grid-area:1 / 1;
  position:relative;
  min-width:0;
  opacity:0;
  visibility:hidden;
  transform:translate3d(0,0,0) scale(.994);
  transition:opacity .62s var(--rs-ease),transform .62s var(--rs-ease),visibility 0s linear .62s;
  pointer-events:none;
}
.rs-slide.is-active{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .62s var(--rs-ease),transform .62s var(--rs-ease),visibility 0s;
}

/* ---- media ------------------------------------------------------------- */

.rs-media{
  position:relative;
  isolation:isolate; /* contain the graded overlay's z-index/blend-mode to this box only —
                         without it the ::after paints above the sibling .rs-card */
  width:100%;
  height:clamp(440px,45vw,660px);
  aspect-ratio:16 / 9;
  background:#2a2333;
  overflow:hidden;
  border-radius:28px;
  box-shadow:
    0 30px 70px -28px #24113854,
    0 14px 34px -20px #7c3aed26,
    inset 0 0 0 1px #ffffff22;
}
.rs-img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:var(--rs-focus-x,35%) 50%;
  background:#2a2333;
  border:0;
  transform:scale(1.055);
  transition:transform 1.1s var(--rs-ease);
  will-change:transform;
}
.rs-slide.is-active .rs-img{transform:scale(1)}

/* the image is now an abstract product scene, not a portrait — a light, symmetric
   tone-wash only (no headroom bias, no corner-crushing dark). The photo must still
   read clearly; card-side legibility is handled by .rs-scrim below, not here. */
.rs-media::after{
  content:"";
  position:absolute;inset:0;
  z-index:1;
  pointer-events:none;
  mix-blend-mode:multiply;
  background:
    radial-gradient(120% 130% at 14% 8%,#ffffff14 0%,#ffffff00 40%),
    linear-gradient(148deg,#3a1f5f2c 0%,#1c0f2e00 55%);
}

/* legibility scrim — darkens only the strip behind the card, on the card's side.
   Default is card-on-right (slides without .rs-l); .rs-l flips it for card-on-left.
   Max alpha ~40% at the card edge, transparent well before mid-frame, so most of
   the photo stays clear. */
.rs-scrim{
  position:absolute;inset:0;pointer-events:none;
  z-index:2;
  background:
    linear-gradient(90deg,#18122200 46%,#18122240 72%,#15102166 100%),
    linear-gradient(0deg,#150f2030 0%,#150f2000 24%);
}
.rs-slide.rs-l .rs-scrim{
  background:
    linear-gradient(270deg,#18122200 46%,#18122240 72%,#15102166 100%),
    linear-gradient(0deg,#150f2030 0%,#150f2000 24%);
}

/* ---- glass card -------------------------------------------------------- */

/* card position alternates per slide: default is right (subject-focus biased left,
   away from the card, via --rs-focus-x on .rs-media above); .rs-l flips both */
.rs-media{--rs-focus-x:35%}
.rs-slide.rs-l .rs-media{--rs-focus-x:65%}

.rs-card{
  position:absolute;
  top:50%;
  right:clamp(18px,4.2vw,74px);
  left:auto;
  transform:translateY(-50%);
  width:clamp(322px,29vw,428px);
  padding:clamp(22px,1.9vw,32px);
  border-radius:24px;
  border:1px solid #ffffff40;
  background:#1a132879;
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 34px 84px -30px #0d0620c4,inset 0 1px 0 #ffffff26;
  color:#fff;
}
@supports not (backdrop-filter:blur(1px)){
  .rs-card{background:#1d1629e6}
}
.rs-slide.rs-l .rs-card{right:auto;left:clamp(18px,4.2vw,74px)}

.rs-card .rs-kicker{
  margin:0;
  font-family:ui-monospace,Menlo,monospace;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#ffffffab;
}
.rs-card .rs-brand{
  margin:7px 0 0;
  font-size:clamp(14px,1.05vw,16px);font-weight:600;letter-spacing:-.01em;
  color:#fff;
}
.rs-card .rs-quote{margin:clamp(18px,1.6vw,24px) 0 0;padding:0;border:0}
.rs-card .rs-quote p{
  margin:0;
  font-size:clamp(19px,1.55vw,26px);
  font-weight:550;letter-spacing:-.03em;line-height:1.2;
  color:#fff;
  text-wrap:balance;
}

.rs-by{display:flex;align-items:center;gap:11px;margin-top:clamp(18px,1.6vw,24px)}
.rs-mark{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:#ffffff1f;border:1px solid #ffffff3d;
}
.rs-mark svg{width:19px;height:19px;fill:none;stroke:#ffffffd6;stroke-width:1.5;stroke-linecap:round}
.rs-by-t{display:flex;flex-direction:column;min-width:0}
.rs-by-t b{font-size:12.5px;font-weight:600;color:#fff;letter-spacing:-.005em}
.rs-by-t i{font-style:normal;font-size:11.5px;color:#ffffffa3;line-height:1.35}

/* stat tiles */
.rs-stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  margin:clamp(18px,1.6vw,24px) 0 0;padding:0;list-style:none;
}
.rs-stat{
  min-width:0;
  padding:9px 10px 11px;
  border:1px solid #ffffff36;border-radius:13px;
  background:#ffffff14;
}
.rs-stat .rs-ar{
  display:block;font-size:11px;line-height:1;color:#ffffffb8;margin-bottom:3px;
}
.rs-stat b{
  display:block;font-size:clamp(17px,1.35vw,22px);font-weight:600;
  letter-spacing:-.035em;line-height:1.05;color:#fff;
}
.rs-stat small{
  display:block;margin-top:4px;
  font-size:10px;line-height:1.3;color:#ffffffa8;text-wrap:balance;
}

.rs-cta{
  display:inline-flex;align-items:center;gap:12px;
  margin-top:clamp(18px,1.6vw,24px);
  padding:5px 5px 5px 18px;
  border-radius:999px;
  background:#fff;color:var(--rs-ink);
  font-size:13.5px;font-weight:600;text-decoration:none;
  box-shadow:0 10px 26px -14px #0d081c99;
  transition:transform .4s var(--rs-ease),box-shadow .4s var(--rs-ease);
}
.rs-cta i{
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--rs-purple);color:#fff;font-style:normal;font-size:13px;line-height:1;
}
.rs-cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px -14px #0d081ca6}
.rs-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---- arrows ------------------------------------------------------------ */

.rs-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:3;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid #ffffff5c;
  background:#ffffffeb;color:var(--rs-ink);
  cursor:pointer;padding:0;
  box-shadow:0 14px 34px -16px #10081f8f;
  transition:transform .4s var(--rs-ease),background .3s var(--rs-ease);
}
.rs-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rs-prev{left:clamp(14px,2.2vw,34px)}
.rs-next{right:clamp(14px,2.2vw,34px)}
.rs-nav:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.rs-nav:focus-visible{outline:2px solid var(--rs-purple);outline-offset:3px}

/* ---- dots -------------------------------------------------------------- */

/* the photo is light now, so the dots carry their own small pill of contrast
   rather than relying on the (much lighter) bottom fade */
.rs-dots{
  position:absolute;left:50%;bottom:clamp(16px,1.6vw,26px);
  transform:translateX(-50%);
  z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 13px;
  border-radius:999px;
  background:#1a12263d;
}
.rs-dot{
  width:8px;height:8px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:#ffffff73;
  transition:width .45s var(--rs-ease),background .45s var(--rs-ease);
}
.rs-dot.is-on{width:22px;background:#fff}
.rs-dot:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---- tablet ------------------------------------------------------------ */

@media (max-width:1080px){
  /* keep the card clear of the next arrow at these widths */
  .rs-card{width:min(54vw,386px);right:78px;left:auto}
  .rs-slide.rs-l .rs-card{right:auto;left:78px}
  .rs-media{height:clamp(420px,56vw,560px)}
}

/* ---- phone / stacked --------------------------------------------------- */

@media (max-width:820px){
  .rs-carousel{padding:0 4vw}
  .rs-media{height:auto;aspect-ratio:4 / 3;border-radius:20px}
  .rs-scrim,.rs-slide.rs-l .rs-scrim{background:linear-gradient(0deg,#150f2066 0%,#150f2000 40%)}
  .rs-card,.rs-slide.rs-l .rs-card{
    position:relative;top:auto;right:auto;left:auto;transform:none;
    width:auto;margin:-48px 0 0;
    border-radius:22px;
    padding:22px 20px 24px;
    /* most of the card sits off the photo here, so it carries its own ground */
    background:#211a30e8;
    border-color:#ffffff2e;
    box-shadow:0 26px 60px -28px #1a0f3396;
  }
  @supports not (backdrop-filter:blur(1px)){
    .rs-card{background:#211a30f2}
  }
  .rs-card .rs-quote p{font-size:21px}
  .rs-nav{top:clamp(110px,24vw,190px);width:40px;height:40px}
  .rs-nav:hover{transform:translateY(-50%) scale(1)}
  .rs-prev{left:10px}
  .rs-next{right:10px}
  .rs-dots{position:static;left:auto;transform:none;margin-top:20px;padding:0;background:none}
  .rs-dot{background:#c3bbd0}
  .rs-dot.is-on{background:var(--rs-purple)}
  .rs-stats{
    grid-template-columns:repeat(3,minmax(96px,1fr));
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .rs-stats::-webkit-scrollbar{display:none}
}

@media (max-width:420px){
  .rs-carousel{padding:0 3.5vw}
  .rs-stat small{font-size:9.5px}
}

/* ---- motion ------------------------------------------------------------ */

@media (prefers-reduced-motion:reduce){
  /* !important overrides the transition shorthands on .rs-slide, .rs-slide.is-active,
     .rs-cta, .rs-nav, .rs-dot and .rs-img above — nothing else declares transition here. */
  .rs-slide,.rs-cta,.rs-nav,.rs-dot,.rs-img{transition:none !important}
  .rs-slide{transform:none}
  .rs-img{transform:none !important}
}