/* SERVICES — three "specimen" cards with a blob in a geometric frame */
.yk-specimens{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.yk-spec{--vis:clamp(110px,18vh,210px);}
.yk-spec .yk-in{padding:clamp(20px,3vh,28px) 30px clamp(24px,3.6vh,34px);}
.yk-spec-vis{position:relative;height:var(--vis);display:flex;align-items:center;justify-content:center;margin:0 -30px 18px;border-bottom:1px dashed var(--line2);}
.yk-spec-vis .yk-blob{width:calc(var(--vis) * 0.5);height:calc(var(--vis) * 0.5);transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.yk-spec:hover .yk-spec-vis .yk-blob{transform:scale(1.12);}
.yk-spec-vis svg{position:absolute;width:calc(var(--vis) - 20px);height:calc(var(--vis) - 20px);overflow:visible;}
.yk-spec-vis svg g{transform-origin:50% 50%;transition:transform 1.2s cubic-bezier(.2,.8,.2,1);}
.yk-spec:hover .yk-spec-vis svg g{transform:rotate(45deg);}
.yk-spec .yk-tr{position:absolute;top:16px;right:38px;color:var(--orange);}
.yk-spec h3{font-size:26px;letter-spacing:-0.03em;}
.yk-spec p{font-size:15px;margin-top:12px;line-height:1.65;}
.yk-spec .yk-list{margin-top:16px;}
/* the Interactive card's live demo: the pokeable yolk */
.yk-spec-demo canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;}
.yk-demo-hint{position:absolute;left:30px;bottom:10px;pointer-events:none;}

@media(max-width:960px){.yk-specimens{grid-template-columns:1fr;}}

/* short screens */
@media(min-width:901px) and (max-height:780px){.yk-spec{--vis:13vh;}.yk-spec p{font-size:14.5px;line-height:1.55;}.yk-spec .yk-list{margin-top:12px;}}