/* ============================================================
   PPL — "Stories brands tell with people" · B2B layered-capsule showcase
   Auralen tokens only (paper ~88 / sage = verified ~8 / coral = human ~4).
   One wide horizontal capsule built of concentric layers, outside-in:
     1. a soft neutral gradient ring with a round-dot halftone texture
        (the biocode nod — round dots only, never square pixels),
     2. a band of a real project image — the person, present and sharp,
     3. a translucent accent wash (coral = human · sage = verified),
     4. the ink-glass copy band: frosted near-ink glass carrying the
        logo lockup + one impactful line in paper (contrast ≥ 9:1).
   The panel flips between brands; the wash, ring tint, and glow follow
   the active brand's accent. The two accents never sit at equal weight.
   Scoped under .b2bs. Pairs with b2b-stories.js (flip + dots + a11y).
   ============================================================ */

.b2bs{
  --b-ink:        var(--ppl-ink, #281C1C);
  --b-char:       var(--ppl-charcoal, #33383B);
  --b-paper:      var(--ppl-paper, #F2F2F0);
  --b-white:      var(--ppl-white, #FFFFFF);
  --b-mist:       var(--ppl-mist, #E5E8E8);
  --b-cloud:      var(--ppl-cloud, #CFD1D1);
  --b-slate:      var(--ppl-slate, #5E6666);
  --b-coral:      var(--ppl-coral, #ED6369);
  --b-coral-wash: var(--ppl-coral-wash, #F7DBDA);
  --b-mauve:      var(--ppl-mauve-deep, #613D3D);
  --b-sage:       var(--ppl-sage-soft, #BED9C8);
  --b-sage-pop:   var(--ppl-sage-pop, #6FB7A0);   /* locked verified accent */
  --b-sage-deep:  var(--ppl-sage-deep, #5E6B62);
  --b-serif: var(--ppl-font-serif, "Fraunces", Georgia, serif);
  --b-sans:  var(--ppl-font-sans, "Archivo", "Helvetica Neue", sans-serif);
  --b-mono:  var(--ppl-font-mono, "IBM Plex Mono", ui-monospace, monospace);

  /* active accent — flipped by [data-accent] (coral is the default) */
  --b-accent: var(--b-coral);

  position:relative;
  background:var(--b-ink);
  color:var(--b-paper);
  font-family:var(--b-sans);
  -webkit-font-smoothing:antialiased;
  padding:clamp(56px,8vw,116px) 0 clamp(60px,8vw,116px);
  isolation:isolate;
}
.b2bs[data-accent="sage"]{ --b-accent: var(--b-sage-pop); }
.b2bs + .b2bs{padding-top:0;}
.b2bs *{box-sizing:border-box;}

/* warm cinematic ground behind the whole section */
.b2bs::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--b-ink);
  background:
    radial-gradient(100% 60% at 10% -6%, rgba(237,99,105,.12), transparent 56%),
    radial-gradient(110% 80% at 100% 106%, rgba(111,183,160,.08), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--b-ink) 88%, black) 0%,
      var(--b-ink) 44%, color-mix(in srgb, var(--b-ink) 90%, black) 100%);
}
.b2bs::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:var(--ppl-grain, none);mix-blend-mode:overlay;
}
.b2bs-wrap{position:relative;z-index:2;max-width:1140px;margin:0 auto;padding:0 clamp(20px,5vw,72px);}

/* ---- reveal-on-scroll (only hides when JS is on) ---- */
html.js .b2bs .reveal{opacity:0;transform:translateY(20px);
  transition:opacity .8s cubic-bezier(.22,.72,.2,1),transform .8s cubic-bezier(.22,.72,.2,1);}
html.js .b2bs .reveal.in{opacity:1;transform:none;}

/* small kicker above the capsule */
.b2bs-eyebrow{
  font-family:var(--b-mono);font-size:var(--ppl-text-xs,.6875rem);
  letter-spacing:.2em;text-transform:uppercase;color:var(--b-sage);
  display:inline-flex;align-items:center;gap:9px;margin:0 0 24px;
}
.b2bs-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--b-accent);
  display:inline-block;transition:background .7s ease;}

/* ============================================================
   Layer 1 — the outer capsule: neutral gradient ring, dot texture
   ============================================================ */
.b2bs-stage{
  position:relative;border-radius:9999px;
  padding:clamp(10px,1.6vw,18px);
  display:flex;
  background:linear-gradient(120deg, var(--b-white) 0%, var(--b-paper) 45%, var(--b-mist) 100%);
  box-shadow:0 34px 90px -36px rgba(0,0,0,.75);
  box-shadow:
    0 34px 90px -36px rgba(0,0,0,.75),
    0 18px 70px -18px color-mix(in srgb, var(--b-accent) 26%, transparent);
  transition:box-shadow .9s ease;
}
/* accent tints + the round-dot halftone texture (biocode nod) live on two
   stacked pseudo layers so the coral↔sage change can crossfade */
.b2bs-stage::before,
.b2bs-stage::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(40,28,28,.10) 1.05px, transparent 1.45px),
    linear-gradient(120deg, var(--b-coral-wash) 0%, transparent 55%);
  background-size:9px 9px, 100% 100%;
  transition:opacity .9s ease;
}
.b2bs-stage::after{
  background-image:
    radial-gradient(circle, rgba(40,28,28,.10) 1.05px, transparent 1.45px),
    linear-gradient(120deg, var(--b-sage) 0%, transparent 55%);
  background-size:9px 9px, 100% 100%;
  opacity:0;
}
.b2bs[data-accent="sage"] .b2bs-stage::before{opacity:0;}
.b2bs[data-accent="sage"] .b2bs-stage::after{opacity:1;}

/* ============================================================
   Layer 2 — the stair band: the brand's stepped-gradient art
   (same technique as the nav-card pattern; coral ↔ sage swap)
   ============================================================ */
.b2bs-ring-stair{
  position:relative;z-index:1;flex:1 1 auto;min-width:0;display:flex;
  border-radius:9999px;overflow:hidden;
  padding:clamp(16px,2.6vw,28px);
  background:var(--b-ink);
  box-shadow:inset 0 0 0 1.5px rgba(242,242,240,.28);
}
.b2bs-ring-stair::before,
.b2bs-ring-stair::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url(assets/stair-band.png) right 38% / auto 300% no-repeat;
  transition:opacity .9s ease;
}
.b2bs-ring-stair::after{
  background:url(assets/stair-sage.png) right 38% / auto 300% no-repeat;
  opacity:0;
}
.b2bs[data-accent="sage"] .b2bs-ring-stair::before{opacity:0;}
.b2bs[data-accent="sage"] .b2bs-ring-stair::after{opacity:1;}

/* ============================================================
   Layer 3 — the person band: real project imagery, shown sharp
   ============================================================ */
.b2bs-ring-img{
  position:relative;z-index:1;flex:1 1 auto;min-width:0;display:flex;
  border-radius:9999px;overflow:hidden;
  /* thicker top band — the person peeks over the copy, like the reference */
  padding:clamp(26px,4vw,46px) clamp(14px,2.2vw,24px) clamp(16px,2.6vw,28px);
  background:var(--b-char);
  box-shadow:inset 0 0 0 1.5px rgba(242,242,240,.22);
}
.b2bs-img{
  position:absolute;inset:0;z-index:0;
  background-image:var(--img);background-size:cover;background-position:var(--pos,center 30%);
  opacity:0;transform:scale(1.04);
  transition:opacity .9s ease, transform 1.6s cubic-bezier(.22,.72,.2,1);
}
.b2bs-img[data-on]{opacity:1;transform:scale(1);}

/* ============================================================
   Layer 4 — the accent wash: a translucent tint over the person
   ============================================================ */
.b2bs-ring-wash{
  position:relative;z-index:1;flex:1 1 auto;min-width:0;display:flex;
  border-radius:9999px;overflow:hidden;
  padding:clamp(8px,1.3vw,14px);
}
.b2bs-ring-wash::before,
.b2bs-ring-wash::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, rgba(237,99,105,.42), rgba(237,99,105,.10) 55%, rgba(247,219,218,.28));
  transition:opacity .9s ease;
}
.b2bs-ring-wash::after{
  background:linear-gradient(115deg, rgba(111,183,160,.40), rgba(110,183,160,.10) 55%, rgba(190,217,200,.26));
  opacity:0;
}
.b2bs[data-accent="sage"] .b2bs-ring-wash::before{opacity:0;}
.b2bs[data-accent="sage"] .b2bs-ring-wash::after{opacity:1;}

/* ============================================================
   Layer 5 — the ink-glass copy band (contrast lives here)
   Paper on frosted near-ink: ≥ 9:1 even over pure coral. AA/AAA safe.
   ============================================================ */
.b2bs-panel{
  position:relative;z-index:1;flex:1 1 auto;min-width:0;
  border-radius:9999px;overflow:hidden;
  display:grid;
  min-height:clamp(150px,17vw,196px);
  background:rgba(40,28,28,.88);
  -webkit-backdrop-filter:blur(18px) saturate(.94);
  backdrop-filter:blur(18px) saturate(.94);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.05);
}

/* ---- the slides: the line centered as the hero, the logo lockup
   beneath it like a signature (per the reference band) ---- */
.b2bs-slide{
  grid-area:1/1;position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(11px,1.5vw,16px);text-align:center;
  padding:clamp(20px,3vw,32px) clamp(28px,5vw,72px);
  opacity:0;transform:translateY(26px);pointer-events:none;visibility:hidden;
  transition:opacity .55s ease, transform .7s cubic-bezier(.2,.72,.2,1), visibility 0s .55s;
}
.b2bs-slide[data-on]{opacity:1;transform:none;pointer-events:auto;visibility:visible;
  transition:opacity .55s ease, transform .7s cubic-bezier(.2,.72,.2,1), visibility 0s 0s;}

/* the use-case kicker — how the brand runs the story */
.b2bs-use{
  margin:0;
  font-family:var(--b-mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--b-cloud);
}
.b2bs-slide[data-accent="coral"] .b2bs-use{color:var(--b-coral-wash);}
.b2bs-slide[data-accent="sage"]  .b2bs-use{color:var(--b-sage);}

/* the one impactful line — a statement in paper; the emphasis takes the
   soft accent (coral-wash / sage-soft: both ≥ 6.9:1 on the ink glass) */
.b2bs-line{
  margin:0;
  font-family:var(--b-serif);font-weight:500;letter-spacing:-.005em;
  font-size:clamp(1.24rem,2.4vw,1.9rem);line-height:1.22;color:var(--b-paper);
  text-wrap:balance;max-width:26ch;
}
.b2bs-line em{font-style:italic;}
.b2bs-slide[data-accent="coral"] .b2bs-line em{color:var(--b-coral-wash);}
.b2bs-slide[data-accent="sage"]  .b2bs-line em{color:var(--b-sage);}

/* the logo lockup — monogram chip + wordmark + sparkle, Auralen tokens only */
.b2bs-logo{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.b2bs-logo .chip{
  width:clamp(34px,3.4vw,42px);height:clamp(34px,3.4vw,42px);border-radius:50%;
  display:grid;place-items:center;flex:0 0 auto;
  background:var(--b-paper);color:var(--b-ink);
  font-family:var(--b-serif);font-weight:700;font-size:clamp(.8rem,1vw,.95rem);letter-spacing:-.03em;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.8);
}
.b2bs-slide[data-accent="coral"] .chip{color:var(--b-mauve);}
.b2bs-slide[data-accent="sage"]  .chip{color:var(--b-sage-deep);}
/* real brand marks (simple-icons paths) — rendered in Auralen ink tones */
.b2bs-logo .chip svg{width:56%;height:56%;display:block;fill:currentColor;}
.b2bs-logo .mark{
  font-family:var(--b-serif);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1rem,1.4vw,1.2rem);color:var(--b-paper);white-space:nowrap;
}

/* a small 4-point sparkle — the biocode's star, borrowed */
.b2bs-spark{flex:0 0 auto;width:clamp(12px,1.3vw,15px);height:auto;opacity:.9;}
.b2bs-slide[data-accent="coral"] .b2bs-spark{fill:var(--b-coral-wash);}
.b2bs-slide[data-accent="sage"]  .b2bs-spark{fill:var(--b-sage);}

@media (max-width:680px){
  .b2bs-stage{border-radius:44px;}
  .b2bs-ring-stair{border-radius:38px;padding:10px;}
  .b2bs-ring-img{border-radius:32px;padding:clamp(40px,14vw,64px) 10px 12px;}
  .b2bs-ring-wash{border-radius:30px;padding:7px;}
  .b2bs-panel{border-radius:26px;min-height:240px;}
  .b2bs-slide{gap:14px;padding:24px 22px;}
}

/* ---- controls: pause/play + flip dots + count (revealed by JS) ---- */
.b2bs-controls{display:none;align-items:center;gap:16px;margin-top:24px;}
.b2bs.is-live .b2bs-controls{display:flex;}
.b2bs-pause{
  font-family:var(--b-mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--b-cloud);background:none;cursor:pointer;
  border:1px solid rgba(242,242,240,.32);border-radius:9999px;padding:6px 14px;
  transition:border-color .4s ease, color .4s ease;
}
.b2bs-pause:hover{border-color:var(--b-accent);color:var(--b-paper);}
.b2bs-dots{display:flex;gap:7px;}
.b2bs-dots button{
  width:26px;height:25px;border:0;padding:10px 0;border-radius:3px;cursor:pointer;
  background:rgba(242,242,240,.42);background-clip:content-box;
  transition:background .4s ease, width .4s ease;
}
.b2bs-dots button[aria-current="true"]{background:var(--b-accent);background-clip:content-box;width:38px;}
.b2bs-pause:focus-visible,.b2bs-dots button:focus-visible{
  outline:2px solid var(--b-accent);outline-offset:2px;
}
.b2bs-count{
  font-family:var(--b-mono);font-size:.6875rem;letter-spacing:.14em;color:var(--b-cloud);
  margin-left:auto;
}

/* illustrative disclaimer — one shared note after the last capsule */
.b2bs-notewrap{max-width:1140px;margin:0 auto;
  padding:0 clamp(20px,5vw,72px) clamp(48px,7vw,88px);background:transparent;
  /* lives outside .b2bs, so reference the global Auralen tokens directly */
  font-family:var(--ppl-font-mono, "IBM Plex Mono", ui-monospace, monospace);
  color:var(--ppl-cloud, #CFD1D1);}

.b2bs-note{
  margin-top:clamp(22px,3vw,34px);
  font-family:var(--ppl-font-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size:.625rem;line-height:1.7;letter-spacing:.04em;
  color:var(--ppl-cloud, #CFD1D1);max-width:76ch;
}

@media (prefers-reduced-motion: reduce){
  html.js .b2bs .reveal{transition:opacity .3s ease;transform:none;}
  .b2bs-stage,.b2bs-stage::before,.b2bs-stage::after,
  .b2bs-ring-wash::before,.b2bs-ring-wash::after{transition:none;}
  .b2bs-img{transition:opacity .3s ease;transform:none;}
  .b2bs-img[data-on]{transform:none;}
  .b2bs-slide{transform:none;transition:opacity .3s ease, visibility 0s .3s;}
  .b2bs-slide[data-on]{transform:none;transition:opacity .3s ease, visibility 0s 0s;}
}