/* Vook v7: proof everywhere, structured case studies, purposeful motion */

/* KPI strip */
.kpis{padding:30px 0 10px}
.kg{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kp2{padding:34px 28px 32px;text-align:left}
.kp2+.kp2{border-left:1px solid var(--line)}
.kp2 b{display:block;font:500 clamp(40px,4.2vw,58px)/1 var(--fh);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.kp2 span{display:block;margin-top:12px;font-size:14px;color:var(--mute)}

/* accent underline that draws in when the heading reveals */
.vk h2 em,.vk h1 em{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 94%;background-size:0% 1.5px;transition:background-size 1.1s var(--eo) .35s}
.vk .drawn em,.vk h1 em{background-size:100% 1.5px}
.js .hero6 h1 em{background-size:0% 1.5px;animation:uline 1.1s var(--eo) .9s forwards}
@keyframes uline{to{background-size:100% 1.5px}}
.dark h2 em,.final h2 em,.lside h2 em{background-image:linear-gradient(var(--vi2),var(--vi2))}

/* case study structure */
.cbody{padding:44px 44px 40px}
.cbody h3{margin-top:14px}
.cs2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
.cs2 dt{font:600 11.5px/1 var(--fb);letter-spacing:.07em;text-transform:uppercase;color:var(--mute2)}
.cs2 dd{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--ink2)}
.cm{padding-top:26px}
.cm b{font-variant-numeric:tabular-nums}
.cq{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);font:400 italic 19px/1.35 var(--fs);color:var(--ink)}
.cq span{display:block;margin-top:6px;font:500 12.5px/1 var(--fb);font-style:normal;color:var(--mute)}

/* proof next to CTAs */
.fproof{display:flex;align-items:center;gap:12px;margin-top:26px;font-size:14px;color:rgba(255,255,255,.65)}
.fproof .avs img{border-color:var(--ink);width:32px;height:32px}
.pquote{display:flex;align-items:center;gap:16px;max-width:620px;margin:44px auto 0;padding:20px 24px;border:1px solid var(--line);border-radius:22px;background:#fff}
.pquote img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.pquote blockquote{font:400 italic 19px/1.35 var(--fs);color:var(--ink)}
.pquote figcaption{margin-top:6px;font:500 12.5px/1.3 var(--fb);font-style:normal;color:var(--mute)}

/* service visuals: subtle, purposeful motion when in view */
.js .bx .hk{opacity:0;transform:translate3d(0,10px,0);transition:opacity .6s var(--eo),transform .6s var(--eo)}
.js .bx.in .hk{opacity:1;transform:none}
.js .bx.in .hk:nth-child(2){transition-delay:.08s}.js .bx.in .hk:nth-child(3){transition-delay:.16s}.js .bx.in .hk:nth-child(4){transition-delay:.24s}
.js .bx.in .hk.off{opacity:.55}
.hk.off span{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 55%;background-size:0% 1px;transition:background-size .7s var(--eo) .7s}
.bx.in .hk.off span{background-size:100% 1px}
.js .bx .clips img{opacity:0;transition:opacity .7s var(--eo),transform .9s var(--eo)}
.js .bx .clips img:nth-child(1),.js .bx .clips img:nth-child(4){transform:translate3d(0,24px,0)}
.js .bx .clips img:nth-child(2),.js .bx .clips img:nth-child(3){transform:translate3d(0,12px,0)}
.js .bx.in .clips img{opacity:1}
.js .bx.in .clips img:nth-child(1),.js .bx.in .clips img:nth-child(4){transform:none}
.js .bx.in .clips img:nth-child(2),.js .bx.in .clips img:nth-child(3){transform:translate3d(0,-12px,0)}
.js .bx.in .clips img:nth-child(2){transition-delay:.06s}.js .bx.in .clips img:nth-child(3){transition-delay:.12s}.js .bx.in .clips img:nth-child(4){transition-delay:.18s}
.js .bx .kp{opacity:0;transform:translate3d(0,8px,0);transition:opacity .6s var(--eo) .25s,transform .6s var(--eo) .25s}
.js .bx.in .kp{opacity:1;transform:none}

/* logo strip: quieter, closer to hero (proof above the fold) */
.logos{padding:56px 0 0}

@media(max-width:1080px){.kg{grid-template-columns:1fr 1fr}.kp2:nth-child(3){border-left:0}.kp2:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:720px){.kp2{padding:24px 16px}.kp2 b{font-size:34px}.kp2 span{font-size:12.5px}.cs2{grid-template-columns:1fr;gap:14px}.cbody{padding:26px 22px}.cq{font-size:17px}.pquote{padding:16px;gap:12px;margin-top:32px}.pquote blockquote{font-size:16.5px}}
@media(prefers-reduced-motion:reduce){.vk h2 em,.vk h1 em{background-size:100% 1.5px;transition:none;animation:none}.js .bx .hk,.js .bx .clips img,.js .bx .kp{opacity:1;transform:none;transition:none}}

.pquote{width:min(620px,100%);margin-left:auto!important;margin-right:auto!important;align-self:center}