/* Vire Design — explanatory layer in the Vire Solutions design language:
   workspace panels with status pills that change state as each service plays.
   Loaded after styles.css / story.css / explain.css; behaviour in js/premium.js. */

/* ================= Shared: Vire workspace panel ================= */
.vpanel{border:1px solid rgba(255,255,255,.1);border-radius:14px;background:linear-gradient(180deg,#0e0f13,#0a0b0d);box-shadow:0 50px 100px -50px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden}
.vpanel__top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 22px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--dim);white-space:nowrap}
.vpanel__top b{color:var(--fg);font-weight:500}
.vpanel__top i{font-style:normal;margin:0 9px;opacity:.45}
.vtag{font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-t);border:1px solid rgba(147,166,255,.45);padding:5px 8px;border-radius:3px}
.vpanel__foot{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-top:1px solid var(--line);font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.vbtn{min-height:34px;padding:0 14px;border:1px solid var(--line2);border-radius:7px;background:rgba(255,255,255,.02);color:var(--fg);font:500 12.5px/1 var(--sans);letter-spacing:0;text-transform:none;cursor:pointer;transition:border-color .25s,background .25s}
.vbtn:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.05)}
.vk{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-t)}
.vh{margin:12px 0 22px;font-size:clamp(22px,2vw,29px);font-weight:500;letter-spacing:-.03em;line-height:1.12}
.vrows{border-top:1px solid var(--line)}
.vr{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.vr__k{color:var(--muted)}
.vr__t{flex:1;color:var(--fg)}
.vr__v{display:flex;align-items:center;gap:8px}
.vr:nth-child(2){--i:1}.vr:nth-child(3){--i:2}.vr:nth-child(4){--i:3}.vr:nth-child(5){--i:4}.vr:nth-child(6){--i:5}
.vpill{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid var(--line2);border-radius:4px;font:500 9.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.vpill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75}
.vpill--ok{color:#3ecf8e;border-color:rgba(62,207,142,.35);background:rgba(62,207,142,.06)}
.vpill--hot{color:var(--blue-t);border-color:rgba(147,166,255,.42);background:rgba(10,92,255,.09)}
.vpill--keep{color:var(--fg);border-color:rgba(255,255,255,.22)}
/* a pill that changes state: the first label shows, then the second replaces it */
.vflip{display:inline-grid;justify-items:end}
.vflip>b{grid-area:1/1}
.vflip>b:first-child{opacity:0}
@keyframes v-in{from{opacity:0;transform:translateY(10px);filter:blur(6px)}}
@keyframes vr-in{from{opacity:0;transform:translateY(8px)}}
@keyframes vf-out{from{opacity:1}to{opacity:0;transform:translateY(-4px)}}
@keyframes vf-in{from{opacity:0;transform:scale(.88)}}
@keyframes v-pop{from{opacity:0;transform:scale(.4)}}
@keyframes v-grow{from{transform:scaleX(0)}}
@keyframes v-rise{from{opacity:0;transform:scaleY(.2)}}
@keyframes v-flow{to{background-position-x:8px}}

/* ================= 3 · Services: list drives the panel ================= */
.svs{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(32px,5vw,80px);align-items:start}
.svs__list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.svs__tab{position:relative;display:grid;grid-template-columns:46px 1fr;column-gap:6px;padding:20px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--dim);font:inherit;text-align:left;cursor:pointer}
.svs__n{font:500 11.5px/1 var(--mono);letter-spacing:.08em;padding-top:8px;transition:color .4s}
.svs__name{font-size:clamp(21px,1.9vw,27px);font-weight:500;letter-spacing:-.025em;line-height:1.1;transition:color .4s}
.svs__line{grid-column:2;display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.svs__line>span{overflow:hidden;color:var(--muted);font-size:15px;line-height:1.5}
.svs__tab:hover .svs__name{color:var(--muted)}
.svs__tab[aria-selected="true"] .svs__name{color:var(--fg)}
.svs__tab[aria-selected="true"] .svs__n{color:var(--blue-t)}
.svs__tab[aria-selected="true"] .svs__line{grid-template-rows:1fr}
.svs__tab[aria-selected="true"] .svs__line>span{padding-top:8px}
.svs__bar{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--blue),var(--blue-t));transform:scaleX(0);transform-origin:0 50%}
.svs__tab[aria-selected="true"] .svs__bar{transform:scaleX(1)}
.svs.is-auto .svs__tab[aria-selected="true"] .svs__bar{animation:v-grow var(--dur,7s) linear both}
.svs.is-hold .svs__tab[aria-selected="true"] .svs__bar{animation-play-state:paused}
.svs__views{display:grid;padding:30px 28px 22px;min-height:476px}
.svv{grid-area:1/1}
.svv.is-on{animation:v-in .6s var(--ease) both}
.svv.is-on .vk,.svv.is-on .vh{animation:vr-in .5s var(--ease) both}
.svv.is-on .vh{animation-delay:.06s}
.svv.is-on .vr{animation:vr-in .55s var(--ease) both;animation-delay:calc(.18s + var(--i,0) * .1s)}
.svv.is-on .vflip>b:first-child{animation:vf-out .3s both;animation-delay:calc(.9s + var(--i,0) * .3s)}
.svv.is-on .vflip>b:last-child{animation:vf-in .45s var(--ease) both;animation-delay:calc(.9s + var(--i,0) * .3s)}
/* design: type, color, layout */
.vtype{gap:14px;align-items:baseline}
.vtype b{font-weight:400;font-size:24px;line-height:1;color:var(--fg)}
.vtype b:first-child{font-family:var(--serif);font-style:italic;font-size:28px}
.vsw i{display:block;width:22px;height:22px;border-radius:6px;border:1px solid rgba(255,255,255,.14)}
.svv.is-on .vsw i{animation:v-pop .45s var(--ease) both}
.svv.is-on .vsw i:nth-child(1){animation-delay:.45s}.svv.is-on .vsw i:nth-child(2){animation-delay:.53s}.svv.is-on .vsw i:nth-child(3){animation-delay:.61s}.svv.is-on .vsw i:nth-child(4){animation-delay:.69s}
.vwire{display:grid;grid-template-columns:62px 40px;grid-template-rows:6px 6px 10px;gap:5px 10px;align-items:stretch}
.vwire i{display:block;border-radius:2px;background:rgba(147,166,255,.35);transform-origin:0 50%}
.vwire i:nth-child(1){width:62px}.vwire i:nth-child(2){grid-column:2;grid-row:1/4;background:linear-gradient(160deg,#1c2b66,var(--blue))}
.vwire i:nth-child(3){width:44px}.vwire i:nth-child(4){width:30px;border-radius:99px;background:var(--blue)}
.svv.is-on .vwire i{animation:v-grow .6s var(--ease) both}
.svv.is-on .vwire i:nth-child(1){animation-delay:.6s}.svv.is-on .vwire i:nth-child(2){animation:v-pop .5s var(--ease) .75s both}.svv.is-on .vwire i:nth-child(3){animation-delay:.7s}.svv.is-on .vwire i:nth-child(4){animation-delay:.8s}
/* development: the same layout on three screens */
.vdev{display:flex;align-items:flex-end;gap:4%;margin:-2px 0 22px}
.dv{display:grid;justify-items:center;gap:9px}
.dv--d{width:52%}.dv--t{width:26%}.dv--p{width:14%}
.dv__s{display:flex;flex-direction:column;gap:6%;width:100%;padding:9%;border:1px solid var(--line2);border-radius:8px;background:#0b0c10}
.dv--d .dv__s{aspect-ratio:16/10;display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:auto auto auto 1fr;gap:6px 9%;padding:7%}
.dv--t .dv__s{aspect-ratio:3/4}
.dv--p .dv__s{aspect-ratio:9/18;border-radius:10px;padding:14% 12%}
.dv__s i{display:block;height:5px;border-radius:2px;background:#2a2e3a;transform-origin:0 50%}
.dv__s i.h{background:var(--fg);opacity:.85;height:7px;width:80%}
.dv__s i.im{height:auto;flex:1;min-height:18px;background:linear-gradient(165deg,#1c2b66,var(--blue) 140%);border-radius:3px}
.dv--d .dv__s i.im{grid-column:2;grid-row:1/5}
.dv__s i.bt{width:46%;height:7px;border-radius:99px;background:var(--blue)}
.dv em{font:500 9.5px/1 var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.dv em::after{content:" ✓";color:#3ecf8e}
.svv.is-on .dv__s i{animation:v-grow .5s var(--ease) both}
.svv.is-on .dv__s i.im{animation:v-rise .55s var(--ease) both;transform-origin:50% 100%}
.svv.is-on .dv--d .dv__s i{animation-delay:.25s}.svv.is-on .dv--t .dv__s i{animation-delay:.55s}.svv.is-on .dv--p .dv__s i{animation-delay:.85s}
.svv.is-on .dv em{animation:vr-in .4s both}
.svv.is-on .dv--d em{animation-delay:.6s}.svv.is-on .dv--t em{animation-delay:.9s}.svv.is-on .dv--p em{animation-delay:1.2s}
/* e-commerce: the path from browsing to an order */
.vflow{display:flex;align-items:center;margin:-2px 0 24px}
.vflow span{flex:none;padding:7px 9px;border:1px solid var(--line2);border-radius:5px;font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
.vflow span.ok{color:#3ecf8e;border-color:rgba(62,207,142,.45);background:rgba(62,207,142,.06)}
.vflow i{flex:1;min-width:10px;height:4px;background:radial-gradient(circle,var(--blue-t) 1.1px,transparent 1.6px) 0 50%/8px 4px repeat-x;animation:v-flow .6s linear infinite}
.vflow span:nth-child(3){--c:1}.vflow span:nth-child(5){--c:2}.vflow span:nth-child(7){--c:3}.vflow span:nth-child(9){--c:4}
.vflow i:nth-child(2){--c:0}.vflow i:nth-child(4){--c:1}.vflow i:nth-child(6){--c:2}.vflow i:nth-child(8){--c:3}
.svv.is-on .vflow span{animation:vf-in .4s var(--ease) both;animation-delay:calc(.2s + var(--c,0) * .32s)}
.svv.is-on .vflow i{animation:v-grow .32s linear both,v-flow .6s linear infinite;animation-delay:calc(.38s + var(--c,0) * .32s),0s;transform-origin:0 50%}
.svs:not(.is-vis) .vflow i{animation-play-state:paused}
/* hosting: the address goes live */
.vurl{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding:11px 14px;border:1px solid var(--line2);border-radius:9px;background:#0b0c10;font:400 12.5px/1 var(--mono);color:var(--fg)}
.vurl span{display:flex;align-items:center;gap:10px}
.vurl span i{width:7px;height:7px;border-radius:50%;background:#3ecf8e;box-shadow:0 0 0 3px rgba(62,207,142,.18)}
.vurl b{font-weight:500;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#3ecf8e}
.svv.is-on .vurl{animation:vf-in .5s var(--ease) 2.2s both}
/* care: a year of small updates */
.vtl{position:relative;height:56px;margin:-4px 0 18px}
.vtl__line{position:absolute;left:0;right:0;top:18px;height:1px;background:var(--line2)}
.vtl__line i{position:absolute;inset:0;background:linear-gradient(90deg,var(--blue),var(--blue-t));transform-origin:0 50%}
.vtl>b{position:absolute;top:13px;left:calc((var(--m) + .5) / 12 * 100%);width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(10,92,255,.2)}
.vtl__m{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(12,1fr);text-align:center;font:500 9.5px/1 var(--mono);color:var(--dim)}
.vtl__m i{font-style:normal}
.svv.is-on .vtl__line i{animation:v-grow 2.2s cubic-bezier(.3,.1,.3,1) .2s both}
.svv.is-on .vtl>b{animation:v-pop .4s var(--ease) both;animation-delay:calc(.25s + var(--m) * .18s)}
@media (max-width:900px){
  .svs{grid-template-columns:1fr;gap:20px}
  .svs__list{flex-direction:row;gap:8px;overflow-x:auto;border-top:0;margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 4px;scrollbar-width:none}
  .svs__list::-webkit-scrollbar{display:none}
  .svs__tab{flex:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line2);border-radius:999px}
  .svs__n{padding:0}.svs__name{font-size:15px}
  .svs__line,.svs__bar{display:none}
  .svs__tab[aria-selected="true"]{background:var(--fg);border-color:var(--fg)}
  .svs__tab[aria-selected="true"] .svs__name,.svs__tab[aria-selected="true"] .svs__n{color:#050506}
  .svs__views{padding:24px 18px 16px;min-height:0}
  .vpanel__top,.vpanel__foot{padding-left:18px;padding-right:18px}
  .vflow span{padding:6px 6px;font-size:8.5px;letter-spacing:.06em}
  .vr{font-size:14px}
}

/* ================= Services page: concept poster art ================= */
.cposter{position:relative;display:block;overflow:hidden;background:#0b0c10}
.cposter img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.16 - var(--v,0) * .14));will-change:transform}
.cposter::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.4),transparent 34%,transparent 55%,rgba(0,0,0,.66))}
.svc__art[data-xp] .cposter{position:absolute;inset:0}
.svc__art[data-xp]{overflow:hidden;border-radius:14px}
.pv-mark{position:absolute;left:0;right:0;bottom:12%;z-index:1;text-align:center;color:#fff;font-size:clamp(22px,2.2vw,34px);line-height:1;white-space:nowrap;text-shadow:0 6px 30px rgba(0,0,0,.45)}
.pv-cap{position:absolute;left:16px;top:16px;right:16px;z-index:1;display:flex;justify-content:space-between;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82)}

/* ================= 6 · Process: pinned horizontal track ================= */
.hz{padding:0}
.hz__pin{position:relative;padding:clamp(88px,12vw,140px) 0}
.hz__head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(36px,5vh,64px)}
.hz__meta{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.hz__count{font:500 13px/1 var(--mono);letter-spacing:.1em;color:var(--dim);font-variant-numeric:tabular-nums}
.hz__count b{display:inline-block;color:var(--fg);font-weight:500}
.hz__count.is-roll b{animation:hz-roll .55s var(--ease)}
@keyframes hz-roll{from{opacity:0;transform:translateY(70%)}}
.hz__bar{position:relative;height:1px;margin:0 auto clamp(36px,5vh,60px);width:calc(100% - 2 * var(--pad));max-width:calc(var(--max) - 2 * var(--pad));background:var(--line2)}
.hz__bar i{position:absolute;inset:0;background:linear-gradient(90deg,var(--blue),var(--blue-t));transform-origin:0 50%;transform:scaleX(var(--p,0))}
.hz__track{list-style:none;margin:0;display:flex;padding:0 var(--pad) 0 max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)));will-change:transform}
.hz__p{flex:0 0 clamp(300px,31vw,440px);display:flex;flex-direction:column;gap:clamp(28px,4vh,48px);padding:6px clamp(24px,2.8vw,44px) 0;border-left:1px solid var(--line)}
.hz__p:first-child{padding-left:0;border-left:0}
.hz__n{display:block;font-size:clamp(110px,13vw,210px);font-weight:300;line-height:.8;letter-spacing:-.07em;font-variant-numeric:tabular-nums;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);background:linear-gradient(180deg,#fff,#c9d3ff) 0 100%/100% 0 no-repeat;-webkit-background-clip:text;background-clip:text;transition:background-size 1.1s var(--ease),-webkit-text-stroke-color .8s}
.hz__p.is-on .hz__n,.hz__p.is-past .hz__n{background-size:100% 100%;-webkit-text-stroke-color:transparent}
.hz__p.is-past .hz__n{opacity:.4}
.hz__b{max-width:34ch;transition:opacity .6s}
.hz__p:not(.is-on):not(.is-past) .hz__b{opacity:.42}
.hz__b h3{font-size:clamp(26px,2.4vw,38px);font-weight:500;letter-spacing:-.035em}
.hz__b p{margin-top:12px;color:var(--muted);font-size:16px;line-height:1.55}
.hz__tag{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:7px 13px;border:1px solid var(--line2);border-radius:999px;font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--muted)}
.hz__tag--ok{border-color:rgba(62,207,142,.4);color:#7fe0b4}
.hz__tag--ok::before{content:"✓";color:#3ecf8e}
@media (min-width:861px){
  .js .hz.is-live{height:var(--hz-h,auto)}
  .js .hz.is-live .hz__pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:74px 0 0;overflow:hidden}
  .js .hz.is-live .hz__track{transform:translate3d(calc(var(--x,0) * -1px),0,0)}
  .hz:not(.is-live) .hz__bar{display:none}
  .hz:not(.is-live) .hz__track{flex-wrap:wrap;row-gap:64px;padding-right:max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)))}
  .hz:not(.is-live) .hz__p{flex:0 0 33.333%}
  .hz:not(.is-live) .hz__p:nth-child(3n+1){padding-left:0;border-left:0}
  .hz:not(.is-live) .hz__b{opacity:1!important}
  .hz:not(.is-live) .hz__n{background-size:100% 100%;-webkit-text-stroke-color:transparent}
}
@media (max-width:860px){
  .hz__head{flex-direction:column;align-items:flex-start}
  .hz__meta{align-items:flex-start}.hz__count,.hz__bar{display:none}
  .hz__track{flex-direction:column;padding:0 var(--pad)}
  .hz__p{flex:none;flex-direction:row;gap:20px;padding:28px 0;border-left:0;border-top:1px solid var(--line)}
  .hz__p:first-child{border-top:0;padding-top:0}
  .hz__n{font-size:84px;min-width:1.25em}
}

/* ================= Reduced motion: final states, nothing looping ================= */
@media (prefers-reduced-motion:reduce){
  .svv,.svv *,.vflow i{animation:none!important}
  .hz__n{background-size:100% 100%;-webkit-text-stroke-color:transparent;transition:none}
  .hz__p:not(.is-on):not(.is-past) .hz__b{opacity:1}
}