/* results — full-bleed proof carousel. Agent F. Every selector prefixed .rs-
   Round 4 (client note): the overlaid heading is gone, so the section opens on
   the photograph itself. Two consequences run through this file:
     1. the card is real glass — the shared --gl-* tokens from shell.css — so the
        picture reads through it instead of a purple slab sitting on top of it;
     2. nothing tints the photographs any more. Three different pictures are
        allowed to be three different colours; only a neutral legibility wash
        sits behind the card.
   One consolidated file: no override layers, so a value edited here is the value
   that renders. */

.rs-root{
  --rs-ink:#24202d;
  --rs-purple:#7c3aed;   /* CTA badge and focus rings only — never a surface */
  --rs-ease:cubic-bezier(.16,1,.3,1);
  --rs-gutter:clamp(24px,5vw,96px);
  position:relative;
  padding:0;
  background:transparent;  /* the site ground is the fixed .gv-aurora field */
  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;
}

/* ---- carousel shell: edge to edge ------------------------------------- */

.rs-carousel{
  position:relative;
  width:100%;
  box-sizing:border-box;
}

/* ---- stage: one viewport tall, photo covers all of it ------------------
   With the heading deleted the stage is the first thing in the section, so the
   fixed 76px nav floats over the photo's top edge. That is the full-bleed
   intent and nothing readable lives up there — the card sits at the bottom — so
   the stage keeps its full height rather than being pushed down by a pad that
   would only show a strip of page ground. */

.rs-stage{
  position:relative;
  width:100%;
  height:min(100vh,900px);
  height:min(100svh,900px);
  min-height:640px;
  background:#14131a;   /* neutral: a photo still loading must not flash a colour */
  overflow:hidden;
}

.rs-track{
  position:absolute;inset:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
}

.rs-slide{
  grid-area:1 / 1;
  position:relative;
  min-width:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  /* exit: quicker than the entry so the incoming photo owns the frame */
  transition:opacity .34s var(--rs-ease),visibility 0s linear .34s;
}
.rs-slide.is-active{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .62s var(--rs-ease),visibility 0s;
}

/* ---- media: the full stage, nothing cut ------------------------------- */

.rs-media{
  position:absolute;inset:0;
  isolation:isolate;   /* keeps the scrim's z-index inside this box, below .rs-card */
  background:#14131a;
  overflow:hidden;
}
.rs-img{
  display:block;width:100%;height:100%;
  object-fit:cover;
  object-position:var(--rs-focus-x,30%) 50%;
  background:#14131a;
  border:0;
  transform:scale(1.04);
  transition:transform 1.2s var(--rs-ease);
}
.rs-slide.is-active .rs-img{transform:scale(1)}

/* Subject side. The stage is much taller than the 1600×893 source, so `cover`
   crops horizontally and this value chooses which third survives. It points at
   the SUBJECT, i.e. away from the card: the default (card right) keeps the LEFT
   third, .rs-l (card left) keeps the RIGHT third. All three current photos put
   their quiet space on the card's side, so no slide needs its own value —
   an earlier 58% override for the skincare slide belonged to a previous shot
   whose bottles sat right of centre and is gone with it. */
.rs-media{--rs-focus-x:30%}
.rs-slide.rs-l .rs-media{--rs-focus-x:70%}

/* Legibility: one soft directional wash on the card's side, gone before
   mid-frame, in a neutral near-black so it darkens the photo without tinting
   it. Slightly stronger than round 3 because the card is now transparent glass
   rather than a 58% purple fill, so the wash — not the card — is what keeps the
   white copy off a bright patch of photograph. There is no top band any more:
   that existed only to hold the deleted heading. */
/* Two layers, and they do different jobs.

   The first is a black-purple wash across the WHOLE frame — deliberately very
   light. Three photographs shot in three different palettes (slate blue, warm
   brass, brown wood) otherwise arrive as three unrelated pictures; a common
   wash at this strength settles them onto one ground without tinting them the
   way the old 55%-purple multiply did.

   The second is the side scrim, which darkens only the strip the card sits on
   so white copy holds. It is neutral, not purple: the wash supplies the hue. */
.rs-scrim{
  position:absolute;inset:0;pointer-events:none;
  z-index:2;
  background:linear-gradient(270deg,#0d0d1052 0%,#0d0d1029 30%,#0d0d1000 58%);
}
/* The wash rides its own layer so its strength is ONE number in one place. As
   three hex alphas inside the gradient it was unreadable, and it had drifted to
   a near-black that put no colour on the photo at all. */
.rs-scrim::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(176deg,#3a1878 0%,#2a1052 46%,#0d0620 100%);
  opacity:.16;
}
/* the top strip carries a little more, because the nav has no surface of its
   own and the skincare frame is palest exactly where the nav sits */
.rs-scrim::before{
  content:"";position:absolute;left:0;right:0;top:0;height:150px;
  background:linear-gradient(180deg,#1a0b3859,#1a0b3800);
}
.rs-slide.rs-l .rs-scrim{
  background:linear-gradient(90deg,#0d0d1052 0%,#0d0d1029 30%,#0d0d1000 58%);
}

/* ---- the glass card ----------------------------------------------------
   The shared recipe from shell.css. --gl-bg-strong is the neutral fill meant
   for glass sitting over a photograph: dark enough to hold white copy, light
   enough that the picture behind it still reads. No colour of its own — the
   photo supplies the colour. */

.rs-card{
  position:absolute;
  /* centred on the banner's vertical midline, not pinned to its floor: left and
     right slides then read as the same composition mirrored, which is the point
     of alternating them */
  top:50%;
  bottom:auto;
  right:var(--rs-gutter);
  left:auto;
  width:clamp(330px,28vw,430px);
  padding:clamp(22px,1.9vw,30px);
  box-sizing:border-box;
  border-radius:28px;
  border:1px solid var(--gl-border);
  background:var(--gl-bg-strong);
  -webkit-backdrop-filter:var(--gl-blur);
  backdrop-filter:var(--gl-blur);
  box-shadow:var(--gl-shadow);
  color:#fff;
  opacity:0;
  /* every transform here carries the -50% that does the vertical centring;
     dropping it in any one state makes the card jump half its own height */
  transform:translate3d(28px,-50%,0);
  transition:opacity .34s var(--rs-ease),transform .34s var(--rs-ease);
}
.rs-slide.rs-l .rs-card{
  right:auto;left:var(--rs-gutter);
  transform:translate3d(-28px,-50%,0);
}
.rs-slide.is-active .rs-card,
.rs-slide.rs-l.is-active .rs-card{
  opacity:1;
  transform:translate3d(0,-50%,0);
  transition:opacity .62s var(--rs-ease) .08s,transform .62s var(--rs-ease) .08s;
}
/* Without the blur there is no glass, only a 27% film the photo would show
   straight through, so the fallback goes almost opaque — the same neutral dark
   shell.css falls back to. Both prefixes are tested: Safari before 18 supports
   only the -webkit- form, and checking the unprefixed one alone would push
   those browsers onto the fallback while the blur was in fact working. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .rs-card{background:#1d1629e6}
}

.rs-card .rs-kicker{
  margin:0;
  font-family:ui-monospace,Menlo,monospace;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#ffffffbd;
}
.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(16px,1.5vw,22px) 0 0;padding:0;border:0}
.rs-card .rs-quote p{
  margin:0;
  font-size:clamp(19px,1.5vw,25px);
  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(16px,1.5vw,22px)}
.rs-mark{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:#ffffff1c;border:1px solid #ffffff33;
}
.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}

/* stat tiles: --gl-chip is the token for a tile sitting ON glass, so they read
   as one step up from the card surface rather than a second material */
.rs-stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  margin:clamp(16px,1.5vw,22px) 0 0;padding:0;list-style:none;
}
.rs-stat{
  min-width:0;
  padding:9px 10px 11px;
  border:1px solid var(--gl-chip-border);border-radius:14px;
  background:var(--gl-chip);
}
.rs-stat .rs-ar{
  display:block;font-size:11px;line-height:1;color:#c7f0e3;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:#ffffffb3;text-wrap:balance;
}

/* the one solid thing on the card: it is the call to action, so it stays white */
.rs-cta{
  display:inline-flex;align-items:center;gap:12px;
  margin-top:clamp(16px,1.5vw,22px);
  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;
  transition:transform .4s var(--rs-ease);
}
@media (hover:hover) and (pointer:fine){
  .rs-cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px -14px #0d081ca6}
  .rs-cta:hover i{transform:translateX(2px)}
}
.rs-cta:active{transform:scale(.97);transition-duration:.16s}
.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)}
@media (hover:hover) and (pointer:fine){
  .rs-nav:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
}
.rs-nav:active{transform:translateY(-50%) scale(.96);transition-duration:.16s}
.rs-nav:focus-visible{outline:2px solid var(--rs-purple);outline-offset:3px}

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

.rs-dots{
  position:absolute;left:50%;bottom:clamp(16px,2.4vh,26px);
  transform:translateX(-50%);
  z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 13px;
  border-radius:999px;
  background:#0d0d1047;   /* neutral, so it does not tint the photo under it */
}
.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}

/* ---- short desktop windows: the card needs to stop eating the frame ----- */

@media (min-width:821px) and (max-height:760px){
  .rs-card{bottom:clamp(28px,5vh,44px);padding:20px 22px}
  .rs-card .rs-quote,.rs-by,.rs-stats,.rs-cta{margin-top:14px}
  .rs-card .rs-quote p{font-size:clamp(18px,1.4vw,22px)}
}

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

@media (max-width:1080px) and (min-width:821px){
  /* keep the card clear of the arrows at these widths */
  .rs-card{width:min(50vw,400px);right:76px}
  .rs-slide.rs-l .rs-card{left:76px}
}

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

@media (max-width:820px){
  /* the section's own air, now that no heading supplies any */
  .rs-root{padding:clamp(56px,9vw,80px) 0 clamp(56px,9vw,80px)}

  /* the photo is a tall full-bleed frame; the card hangs off its bottom edge */
  .rs-stage{
    height:auto;
    min-height:0;
    overflow:visible;
    background:transparent;
  }
  .rs-track{
    position:relative;inset:auto;
  }
  .rs-slide{display:flex;flex-direction:column}
  .rs-media{
    position:relative;inset:auto;
    width:100%;
    aspect-ratio:4 / 5;
    max-height:70svh;
  }
  /* stacked, the card is below the photo rather than beside it, so the wash
     runs bottom-up into the overlap instead of in from one side */
  .rs-scrim,.rs-slide.rs-l .rs-scrim{
    background:linear-gradient(180deg,#0d0d1000 62%,#0d0d104d 100%);
  }
  .rs-card,.rs-slide.rs-l .rs-card{
    position:relative;top:auto;right:auto;left:auto;bottom:auto;
    width:auto;
    margin:-120px 4vw 0;
    border-radius:24px;
    padding:22px 20px 24px;
    /* Same glass — border, blur and shadow are the shared tokens — but the fill
       is denser here. Only the top ~120px of this card is over the photograph;
       the rest hangs onto the light page ground, where --gl-bg-strong's 27%
       film would leave white copy on near-white. Neutral dark, no purple. */
    background:#1d1629e0;
  }
  .rs-slide .rs-card,.rs-slide.rs-l .rs-card{transform:translate3d(0,22px,0)}
  .rs-slide.is-active .rs-card,.rs-slide.rs-l.is-active .rs-card{transform:none}
  .rs-card .rs-quote p{font-size:21px}
  .rs-nav{top:clamp(150px,34vw,300px);width:40px;height:40px}
  .rs-prev{left:12px}
  .rs-next{right:12px}
  .rs-dots{position:static;left:auto;transform:none;margin:22px auto 0;padding:0;background:none;display:flex;justify-content:center}
  .rs-dot{background:#c3bbd0}
  .rs-dot.is-on{background:var(--rs-purple)}
  .rs-stats{gap:6px}
}

@media (max-width:420px){
  .rs-card .rs-quote p{font-size:19px}
  .rs-stat{padding:8px 8px 10px}
  .rs-stat small{font-size:9.5px}
}

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

@media (prefers-reduced-motion:reduce){
  /* !important overrides the transition shorthands declared above on these
     same selectors; nothing else declares transition in this file. */
  .rs-slide,.rs-card,.rs-cta,.rs-cta i,.rs-nav,.rs-dot,.rs-img{transition:none !important}
  .rs-img{transform:none !important}
  .rs-slide .rs-card{transform:none !important}
}

/* ===========================================================================
   RD round 7, note 15 — the section title, back above the stage.

   It is centred and set at the shared --gv-h2 like every other section head,
   and it carries a hairline rule above it: the carousel is full-bleed and dark,
   so without a break the light section above it ran straight into a
   photograph. The head sits on the site ground, NOT over the picture — that
   overlay is what round 4 removed, and it is not coming back.
   =========================================================================== */
.rs-head{
  max-width:820px;
  margin:0 auto;
  padding:clamp(56px,7vw,104px) var(--rs-gutter) clamp(34px,4.4vw,56px);
  text-align:center;
}
.rs-rule{
  width:min(100%,220px);height:1px;margin:0 auto clamp(26px,3vw,40px);
  border:0;background:linear-gradient(90deg,#17121f00,#17121f2b,#17121f00);
}
.rs-eyebrow{
  margin:0 0 12px;
  font-family:ui-monospace,Menlo,monospace;
  font-size:var(--gv-eyebrow);letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:#8b7f9b;
}
.rs-h{
  margin:0;
  font-size:var(--gv-h2);
  font-weight:700;letter-spacing:-.04em;line-height:1.05;
  color:#17121f;text-wrap:balance;
}
.rs-sub{
  margin:clamp(14px,1.6vw,20px) auto 0;max-width:56ch;
  font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:#5f566f;text-wrap:pretty;
}