/* from v7 04-mid.css:55 */
/* ===================== v4 WORK ===================== */
.work{padding:var(--s7) 0 var(--s6);overflow-x:clip}
.work .container{z-index:1}
.work-title{font-size:var(--fd-xl);line-height:.9}
.wt{display:block;white-space:nowrap;will-change:transform}
.dim{color:var(--mute)}
.lead{font-size:var(--fs-xl);line-height:1.3;letter-spacing:var(--ls-text);max-width:34ch;margin:clamp(26px,3vw,44px) 0 0 calc((100% + clamp(16px,2vw,32px))/6*3);color:var(--paper);text-wrap:balance}
.wk-lead{display:grid;grid-template-columns:repeat(6,1fr);gap:0 clamp(16px,2vw,32px);margin-top:var(--s7);padding-top:26px;border-top:2px solid var(--paper)}
.wk-lead>div:first-child{grid-column:1/4;padding-right:clamp(0px,2vw,30px)}
.wk-meta{color:var(--blue-text);margin-bottom:22px}
.wk-h{font-family:var(--d);font-variation-settings:"wdth" var(--dw),"wght" var(--dwg);text-transform:uppercase;font-size:var(--fd-m);line-height:.88;margin-bottom:22px}
.wk-role{font-size:var(--fs-m);color:var(--mute);max-width:42ch;margin-bottom:34px}
.wk-blk{border-top:1px solid var(--line);padding:20px 0 24px}
.wk-k{color:var(--mute);margin-bottom:10px}
.wk-tx{font-size:var(--fs-m);max-width:52ch}
.wk-out{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.wk-out p{color:var(--mute);font-size:var(--fs-s)}
.wk-out b{display:block;color:var(--paper);font-weight:var(--tw-m);font-size:var(--fs-m);margin-bottom:4px}
.storybtn{display:inline-flex;align-items:center;gap:10px;margin-top:24px;padding:12px 18px;border:1px solid var(--paper);color:var(--paper)}

/* request path: one request, end to end */
.fl{grid-column:4/7;border:1px solid var(--line);background:var(--ink-2);padding:22px clamp(18px,2vw,30px) 24px;display:flex;flex-direction:column;align-items:center;align-self:start;position:relative;isolation:isolate;background-image:radial-gradient(var(--hair) 1px,transparent 1.2px);background-size:16px 16px}
.fl-cap{display:flex;justify-content:space-between;width:100%;color:var(--mute);padding-bottom:14px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.fl-cap span:last-child{color:var(--blue-text)}
.fl-src{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;position:relative}
.fl-node{position:relative;z-index:2;width:100%;border:1px solid var(--wash);background:var(--ink);padding:13px 16px;text-align:center;display:flex;flex-direction:column;gap:2px;transition:border-color .5s,box-shadow .5s,background .5s}
.fl-node.hot{border-color:var(--blue);background:var(--ink-blue);transition-duration:.3s}
.fl-node b{font-family:var(--d);font-variation-settings:"wdth" var(--dw),"wght" var(--dwg);text-transform:uppercase;font-size:var(--fd-xs);line-height:1;letter-spacing:var(--ls-d)}
.fl-node small{font-family:var(--mo);font-weight:var(--tw-label);font-size:var(--fs-micro);color:var(--mute);letter-spacing:var(--ls-label);text-transform:uppercase}
.fl-src .fl-node b{font-size:var(--fd-2xs)}
.fl>.fl-node{max-width:380px}
.fl-wire{position:relative;z-index:1;width:1px;height:38px;background:linear-gradient(var(--wash) 50%,transparent 0) 0 0/1px 6px;transition:background .4s}
.fl-wire.lit{background:var(--blue)}
.fl-src::after{content:"";position:absolute;left:16.66%;right:16.66%;bottom:-1px;height:1px;background:var(--wash)}
.fl-gate{position:relative;z-index:2;display:flex;align-items:center;gap:12px;border:1.5px solid var(--blue);padding:10px 16px;font-family:var(--mo);font-size:var(--fs-label);font-weight:var(--tw-label);letter-spacing:var(--ls-label);text-transform:uppercase;background:var(--ink-blue-2);overflow:hidden;transition:background .3s,color .3s}
.fl-gate .ok{display:inline-flex;align-items:center;gap:6px;color:var(--blue-text);font-weight:var(--tw-m);transition:color .3s}
.fl-chk{width:13px;height:13px;overflow:visible}
.fl-chk path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:0;transition:stroke-dashoffset .45s var(--ease)}
.fl-scan{position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--blue-line),transparent);width:40%;transform:translateX(-110%);pointer-events:none}
.fl.anim .fl-gate .fl-chk path{stroke-dashoffset:20}
.fl.anim .fl-gate .ok{color:var(--blue-line)}
.fl-gate.chk .fl-scan{animation:scan 1.6s var(--slow) infinite}
.fl-gate.pass{background:var(--blue);color:var(--on-blue)}
.fl-gate.pass .ok{color:var(--paper)!important}
.fl-gate.pass .fl-chk path{stroke-dashoffset:0!important}
@keyframes scan{to{transform:translateX(260%)}}
.fl-pk{position:absolute;left:0;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--blue-glow);opacity:0;z-index:1;pointer-events:none}
.fl-note{margin-top:18px;color:var(--mute)}
@media (max-width:899.98px){.wk-lead>div:first-child,.fl{grid-column:1/-1}.fl{margin-top:40px}.lead{margin-left:0}.wk-out{grid-template-columns:1fr}.fl-src .fl-node{padding:10px 6px}}

/* trio */ .wk-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,32px);margin-top:var(--s7);grid-template-rows:repeat(6,auto);row-gap:0}
.wk-card{position:relative;border-top:2px solid var(--paper);padding:18px 0 0;flex-direction:column;isolation:isolate;transition:padding .6s var(--ease);display:grid;grid-row:span 6;grid-template-rows:subgrid;align-content:start}
.wk-card-meta{display:flex;justify-content:space-between;gap:12px;color:var(--mute);margin-bottom:26px}
.wk-card-fig{font-family:var(--d);font-variation-settings:"wdth" var(--dw),"wght" var(--dwg);line-height:.82;color:var(--blue);letter-spacing:var(--ls-d);white-space:nowrap;transition:transform .7s var(--ease);font-size:var(--fd-fig);text-align:center;justify-self:center;align-self:end;transform-origin:center bottom;margin-bottom:22px}
.wk-card-h{font-family:var(--d);font-variation-settings:"wdth" var(--dw),"wght" var(--dwg);text-transform:uppercase;font-size:var(--fd-s);line-height:.92;margin-bottom:14px}
.wk-card-sub{color:var(--paper);font-size:var(--fs-body);margin-bottom:26px;max-width:36ch}
.wk-card-call{border-top:1px solid var(--line);padding-top:18px;margin-top:0}
.wk-card-call p:not(.wk-k){color:var(--mute);font-size:var(--fs-s)}
.js .wk-trio .wk-card:nth-child(2){--dl:.12s}.js .wk-trio .wk-card:nth-child(3){--dl:.24s}
@media (max-width:899.98px){.wk-trio{grid-template-columns:1fr;gap:64px}.wt{white-space:normal}.wt-a,.wt-b{transform:none}.wk-card::after{display:none}}

/* ---- v8: the three cards share one grid (subgrid), so figure, headline, outcome, the call and the button line up ---- */
.wk-card>*{min-width:0}
.wk-card-btn{justify-self:start;align-self:start;margin-top:22px}
@supports not (grid-template-rows:subgrid){
  .wk-trio{grid-template-rows:none}
  .wk-card{display:flex;flex-direction:column}
  .wk-card-fig{align-self:center}
  .wk-card-call{margin-top:auto}
  .wk-card-btn{align-self:flex-start}
}
@media (width < 900px){
  .wk-trio{grid-template-rows:none;row-gap:64px}
  .wk-card{grid-row:auto;grid-template-rows:auto}
  .wk-card-fig{text-align:left;justify-self:start;transform-origin:left bottom}
}