/* Voice Studio (B1, round 14, DIRECTION_3). Prefix vs-. Type roles only (site.css tokens); the benefit headings use the h2 role. */

/* a tick, drawn (no glyph): marks an outcome the content names */
.vs-tick{display:inline-block;flex:none;width:22px;height:22px;border-radius:50%;background:var(--verm);position:relative}
.vs-tick::after{content:'';position:absolute;left:7px;top:4px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ---- benefits: three different objects, each under its own loud heading, on a texture ---- */
.vs-ben{overflow:hidden}
.vs-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(64px,7vw,104px)}
.vs-b{display:flex;flex-direction:column}
.vs-b .vs-tile{margin-top:auto}
.vs-b .vs-bp{margin-bottom:28px}
.vs-b--log{grid-column:1 / 5}
.vs-b--voice{grid-column:5 / 9}
.vs-b--hand{grid-column:9 / 13}
.vs-bh{position:relative;padding-top:18px;font:var(--w-h3) var(--s-lede)/1.3 var(--f);letter-spacing:-.012em;color:#fff;max-width:16em}
.vs-bh::before{content:'';position:absolute;left:0;top:0;width:28px;height:2px;background:var(--verm)}
.vs-bp{margin-top:10px;color:var(--fg2);max-width:30em}
.vs-tile{position:relative;border-radius:18px;overflow:hidden;min-height:560px;display:flex;align-items:center;justify-content:center;padding:36px 28px;background:#1a1a19 center / cover no-repeat}
.vs-tile::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.08),rgba(10,10,10,.28))}
.vs-tile>*{position:relative}
.vs-tile--loggia{background-image:url(../../img/a5_cap_plate.webp);background-position:88% 60%;background-size:auto 120%}
.vs-tile--sky{background-image:url(../../img/a5_close_sky.webp)}
.vs-tile--sky::before{background:none}
.vs-tile--desk{background-image:url(../../img/close_desk.webp);background-position:62% 70%;background-size:auto 112%}
.vs-mk{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ink)}
.vs-mk svg{width:13px;height:13px}
.vs-mk--lg{width:44px;height:44px}.vs-mk--lg svg{width:20px;height:20px}
.vs-tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:rgba(14,15,15,.07);font:500 var(--s-small)/1 var(--f);color:var(--ink)}
.vs-b .small{font:500 var(--s-small)/1.4 var(--f);color:var(--ink2)}
/* a call log that ends in a check */
.vs-log{width:min(520px,100%);background:#fff;border-radius:16px;box-shadow:0 30px 70px rgba(0,0,0,.4);padding:18px 20px 18px;color:var(--ink)}
.vs-log-top{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--iline)}
.vs-log-top strong{font:560 var(--s-body)/1.25 var(--f)}
.vs-log-top .vs-tag{margin-left:auto}
.vs-log-rows{margin:6px 0 0;padding:0;list-style:none}
.vs-log-rows li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;align-items:start;padding:9px 0;border-bottom:1px dashed var(--iline);opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .4s var(--spring)}
.vs-log-rows li::before{content:'';width:8px;height:8px;margin:6px 0 0 7px;border-radius:50%;border:1.5px solid rgba(14,15,15,.45)}
.vs-log-rows li.a::before{background:var(--ink);border-color:var(--ink)}
.vs-log-rows li p{font:400 var(--s-body)/1.4 var(--f);color:var(--ink2)}
.vs-log-rows li.a p{color:var(--ink)}
.vs-log-rows li.r{border-bottom:0;margin-top:6px;padding:12px;border-radius:12px;background:rgba(226,70,42,.07)}
.vs-log-rows li.r::before{display:none}
.vs-log-rows li.r p{font:560 var(--s-body)/1.4 var(--f);color:var(--ink)}
.vs-sys{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.vs-chip{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(14,15,15,.16);font:500 var(--s-small)/1 var(--f);color:var(--ink2);transition:box-shadow .3s,color .3s}
.vs-b.in .vs-chip.is-hot{box-shadow:inset 0 0 0 1.5px var(--verm);color:var(--ink);transition-delay:.9s}
.vs-b.in .vs-log-rows li{opacity:1;transform:none}
.vs-b.in .vs-log-rows li:nth-child(2){transition-delay:.3s}
.vs-b.in .vs-log-rows li:nth-child(3){transition-delay:1.3s}
.vs-b.in .vs-log-rows li:nth-child(4){transition-delay:.54s}
.vs-b.in .vs-log-rows li:nth-child(5){transition-delay:.85s}
/* a voice persona, heard in two languages */
.vs-persona{width:min(400px,100%);background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border-radius:18px;box-shadow:0 30px 70px rgba(14,30,60,.18);padding:20px;color:var(--ink)}
.vs-pers-top{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--iline)}
.vs-pers-top strong{display:block;font:var(--w-h3) var(--s-lede)/1.2 var(--f);letter-spacing:-.012em}
.vs-say{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;align-items:start;padding-top:16px}
.vs-say+.vs-say{margin-top:6px;border-top:1px dashed var(--iline)}
.vs-play{all:unset;cursor:pointer;width:44px;height:44px;border-radius:50%;background:var(--ink);position:relative;transition:background-color .2s,transform .2s}
.vs-play::after{content:'';position:absolute;left:17px;top:14px;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff}
.vs-say.is-playing .vs-play{background:var(--verm)}
.vs-play:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.vs-say-b canvas{display:block;width:100%;height:34px;margin:6px 0 8px}
.vs-say-b p{font:400 var(--s-body)/1.45 var(--f);color:var(--ink)}
/* a hand-over ticket, landed on the team's desk */
.vs-ticket{width:min(470px,100%);background:#fff;border-radius:6px;box-shadow:0 30px 60px rgba(0,0,0,.4),0 2px 0 rgba(14,15,15,.06);padding:18px 20px 16px;color:var(--ink);transform:translateX(-40px) rotate(-3deg);opacity:0;transition:transform .7s var(--spring),opacity .4s var(--ease)}
.vs-b.in .vs-ticket{transform:rotate(-1.4deg);opacity:1}
.vs-tk-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vs-tk-h{margin-top:14px;padding-bottom:10px;border-bottom:1.5px solid var(--ink);font:var(--w-h3) var(--s-lede)/1.25 var(--f);letter-spacing:-.012em;color:var(--ink)}
.vs-tk-lines{margin:10px 0 0;padding:0;list-style:none}
.vs-tk-lines li{padding:7px 0;border-bottom:1px solid var(--iline);font:400 var(--s-small)/1.45 var(--f);color:var(--ink2)}
.vs-tk-lines li.c{color:var(--ink)}
.vs-tk-lines li:last-child{border-bottom:0}
.vs-team{position:absolute;right:clamp(20px,5vw,72px);bottom:28px;display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.92);font:560 var(--s-body)/1 var(--f);color:var(--ink);box-shadow:0 10px 24px rgba(0,0,0,.2)}
.vs-team::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--verm)}

@media (max-width:1100px){
  .vs-b--log,.vs-b--voice{grid-column:1 / 13}
}
@media (max-width:760px){
  .vs-bento{display:block}
  .vs-b+.vs-b{margin-top:64px}
  .vs-tile{min-height:0;padding:28px 14px;margin-top:22px}
  .vs-tile--desk{padding:28px 14px 84px;background-position:60% 70%}
  .vs-team{right:14px;bottom:20px}
  .vs-log{padding:14px 14px}
}
@media (prefers-reduced-motion:reduce){
  .vs-log-rows li,.vs-ticket,.vs-chip{transition:none!important}
  .vs-log-rows li{opacity:1;transform:none}
  .vs-ticket{opacity:1;transform:rotate(-1.4deg)}
}

/* benefits, tile 3: the hand-over, from the agent to your team, with what travels with it */
.vs-ho{width:min(380px,100%);background:#fff;border-radius:16px;box-shadow:0 30px 60px rgba(0,0,0,.42);padding:16px 18px;color:var(--ink);opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease),transform .6s var(--spring)}
.vs-b.in .vs-ho{opacity:1;transform:none}
.vs-ho-top{display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--iline)}
.vs-ho-top strong{font:560 var(--s-small)/1.2 var(--f)}
.vs-ho-to{flex:1;height:1.5px;min-width:18px;background:var(--verm);position:relative}
.vs-ho-to::after{content:'';position:absolute;right:-1px;top:-4px;border-style:solid;border-width:5px 0 5px 7px;border-color:transparent transparent transparent var(--verm)}
.vs-ho-team{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--ink);color:#fff;font:560 var(--s-small)/1 var(--f)}
.vs-ho-tag{margin-top:10px}
.vs-ho-sec{margin-top:12px}
.vs-ho-sec>.small{display:block;margin-bottom:4px;color:var(--ink2)}
.vs-ho-sec--row{display:flex;align-items:baseline;gap:12px}
.vs-ho-sec--row>.small{margin:0}
.vs-ho-sec p{font:560 var(--s-small)/1.4 var(--f);color:var(--ink)}
.vs-ho .vs-tk-lines li{padding:5px 0}
.vs-ho-done{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:10px;background:rgba(226,70,42,.07)}
.vs-ho-done .vs-tick{width:18px;height:18px}
.vs-ho-done .vs-tick::after{left:6px;top:3px;width:5px;height:9px}

/* How it comes together: three steps. v1.2: they follow the call diagram, on its paper (they stood under the transcript card, on the
   painting, as buttons that drove it); the paper's ink, and the paper's hairline as in .trio */
.vs-path2{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;margin-top:clamp(64px,7vw,104px)}
.vs-path2-h{grid-column:1 / 5}
.vs-path2-h .eyebrow{margin-bottom:16px}
.vs-path2-h .h2{max-width:9em}
.vs-steps2{grid-column:5 / 13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);list-style:none;margin:0;padding:0}
.vs-steps2 li{padding-top:22px;border-top:1px solid rgba(14,15,15,.3)}
.vs-steps2 h3{font:var(--w-h3) var(--s-lede)/1.25 var(--f);letter-spacing:-.012em}
.vs-steps2 p{margin-top:6px;max-width:22em}
@media (max-width:1100px){
  .vs-b--log,.vs-b--voice,.vs-b--hand{grid-column:auto}
  .vs-bento{grid-template-columns:1fr}
}
@media (max-width:760px){
  .vs-path2{display:block}
  .vs-steps2{display:block;margin-top:28px}
  .vs-steps2 li+li{margin-top:22px}
}
@media (prefers-reduced-motion:reduce){
  .vs-ho{transition:none!important;animation:none!important}
  .vs-ho{opacity:1;transform:none}
}

/* r17 (client 306): less text in the three cards. Card 1: the request, the systems, the work done. Card 3: the hand-over's three parts
   side by side with their labels; the transcript drawn as lines */
.vs-log-rows li.s{align-items:center}
.vs-log-rows li.s::before{margin-top:0;background:var(--ink);border-color:var(--ink)}
.vs-log-rows li.s .vs-sys{margin-top:0}
.vs-ho-sec--row{align-items:center}
.vs-ho-sec--row>.small{flex:none;width:122px}
.vs-ho .vs-ho-sec--row+.vs-ho-sec--row{padding-top:12px;border-top:1px dashed var(--iline)}
.vs-bars{flex:1;display:flex;flex-direction:column;gap:6px}
.vs-bars i{display:block;height:6px;border-radius:3px;background:rgba(14,15,15,.3);width:88%}
.vs-bars i.a{width:66%;background:rgba(14,15,15,.14)}
.vs-bars i:nth-child(3){width:52%}
.vs-ho-sec--row .vs-tick{width:18px;height:18px}
.vs-ho-sec--row .vs-tick::after{left:6px;top:3px;width:5px;height:9px}

/* r19 (client: "woman jumps in this scroll"): the painting behind the studio and its shade keep the section's resting height, so the
   conversation growing below no longer re-crops her; the shade ends in the page's ground, which simply continues below it */
.stage--voice .stage-bg{overflow:hidden;background:var(--bg)}
.stage--voice .stage-bg img{height:var(--bgh,100%)}
.stage--voice .stage-bg::after{bottom:auto;height:var(--bgh,100%)}

/* v1.2 (Manav: "Remove this artifact, doesn't add a value and add the below"): in the transcript card's place, the four things the
   voices are: the site's glass card over the painting, at the card's width and tone, in four parts on its hairline; each part a
   heading and a sentence whose first words carry it */
.vs-vox{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;overflow:hidden;background:var(--glass),rgba(8,8,8,.3)}
.vs-vox li{padding:30px 28px 32px}
.vs-vox li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}
.vs-vox li:nth-child(even){border-left:1px solid rgba(255,255,255,.1)}
.vs-vox h3{color:#fff}
.vs-vox p{margin-top:10px;color:rgba(255,255,255,.78);max-width:30em}
.vs-vox strong{font-weight:560;color:#fff}
@media (max-width:760px){
  .vs-vox{grid-template-columns:minmax(0,1fr)}
  .vs-vox li{padding:24px 20px 26px}
  .vs-vox li:nth-child(n+2){border-top:1px solid rgba(255,255,255,.1)}
  .vs-vox li:nth-child(even){border-left:0}
}